SUBTASK #86: Login screen and signed-in layout

Aperta
  • Qualcosa non va?
#91 0 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@Solo-Her0 ci sta già lavorando.

Dal 2/11/2026.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
28/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript, react
Ambito
authentication, authorization, frontend

Direzione di ricerca

Start by confirming the scan screen (#52) and sessions and route protection (#90) are merged, since frontend/app/ and the /api/login, /api/logout and /api/me endpoints come from them. Then read frontend/app/src/api.js, Layout.jsx and App.jsx to see where the 401 handling and routes go. Done means signed-out visits land on /login, role-hidden controls work, and npm run build and npm run lint pass.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

frontend Low Priority subtask

What to do

The React side of signing in: a login screen, sign-in state the whole app can read, a redirect to the login screen for anyone signed out, the signed-in user and a Sign out button in the header, and controls hidden when the user's role can't use them.

Background

  • Spec SEC-01, SEC-03, NFR-01
  • The React app, Layout.jsx, api.js and the message display (SH-5) come from the scan screen (#52)
  • The endpoints are subtask 4: POST /api/login, POST /api/logout, GET /api/me

Steps

  • pages/LoginPage.jsx at /login:
    • Username field, and password field with type="password" and autocomplete="current-password"
    • The Sign in button is disabled while waiting, and the server's reason is shown through the message display (SH-5)
  • auth/AuthProvider.jsx and a useAuth() hook:
    • On start, asks GET /api/me
    • Holds the user and their permissions; offers login(), logout() and can(permission)
  • auth/RequireAuth.jsx around every page except /login:
    • Shows "Loading…" while checking
    • Signed out: redirects to /login?next=<the page>. After signing in, goes to next only if it starts with /, so a link like ?next=https://another-site.com can't send users elsewhere.
  • api.js: any 401 clears the user and goes to /login with "Your session ended. Sign in again."
  • Layout.jsx header: the username, the role and a Sign out button
  • Controls the role can't use are hidden with can(...) (e.g. Start scan for a viewer). The server still checks.
  • Never put the password or the user in localStorage. The session cookie is HttpOnly, so the page can't read it anyway.

Where

  • frontend/app/src/pages/LoginPage.jsx
  • frontend/app/src/auth/AuthProvider.jsx, frontend/app/src/auth/RequireAuth.jsx
  • frontend/app/src/api.js, frontend/app/src/Layout.jsx, frontend/app/src/App.jsx (routes)

Done when

  • Opening any page signed out goes to the login screen; after signing in, you land on the page you asked for
  • A wrong password shows "Username or password is incorrect." and doesn't clear the username
  • A viewer doesn't see Start scan; an editor does
  • Sign out returns to the login screen, and the Back button doesn't show data
  • After 30 minutes without activity, the next click goes to the login screen with the "session ended" message
  • npm run build and npm run lint pass with no new warnings

Depends on

  • Sessions and route protection (#90)
  • Scan screen and message display (#52), which sets up frontend/app/
Lingua principale
Python
Stelle
1
Fork
1
Merge medio
9h 31m
PR unite (30g)
36

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Bearkat-Professionals/Software-Engineering-Project

Tutte le issue di Bearkat-Professionals/Software-Engineering-Project

Issue simili

Altre issue su Python

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.