- Introduced diagrams for the Login component structure, project architecture, and login sequence. - Detailed state management, external hooks, event handling, and UI components in the Login documentation. - Provided an overview of the component relationships and roles within the application architecture.
2.9 KiB
2.9 KiB
Login Process Documentation
Login Sequence Diagram
sequenceDiagram
actor User
participant Login as Login Component
participant API as Auth API
participant QSP as QSP API
participant Session as Session Store
participant Router as Next Router
User->>Login: Enter credentials
Login->>Login: Validate input
alt Invalid Input
Login->>User: Show error message
else Valid Input
Login->>API: POST /api/auth
API->>QSP: POST /api/user/login
QSP-->>API: Return user data
alt Login Success
API->>Session: Create session
Session->>Session: Set user data
Session->>Session: Set role
API-->>Login: Return success response
Login->>Router: Redirect to home
Router->>User: Show home page
else Login Failed
API-->>Login: Return error response
Login->>User: Show error message
end
end
Login Process Flow
-
User Input
- User enters login credentials (ID and password)
- Optional: User can toggle Q.PARTNERS mode
- Optional: User can save ID
-
Input Validation
- Checks if ID and password are not empty
- Validates email format for Q.PARTNERS mode
-
Authentication Request
- Sends credentials to Auth API
- Auth API forwards request to QSP API
- QSP API validates credentials
-
Session Management
- On successful login:
- Creates new session
- Stores user data
- Sets user role based on permissions
- Saves session to cookies
- On successful login:
-
Response Handling
- Success: Redirects to home page
- Failure: Shows error message
Role Assignment Logic
The system assigns roles based on the following rules:
T01: If userId is 'T01'Admin: If groupId is '60000'Admin_Sub: If groupId is '70000' and builderNo is nullBuilder: If groupId is '70000' and builderNo is not nullUser: Default role for all other cases
graph TD
subgraph Root
A[RootLayout] --> B[ReactQueryProviders]
B --> C[EdgeProvider]
C --> D[HTML Structure]
end
subgraph Layout Components
D --> E[Header]
D --> F[Main Content]
D --> G[Footer]
D --> H[Float Button]
D --> I[PopupController]
end
subgraph Pages
F --> J[Login]
F --> K[Survey Sale]
F --> L[Suitable]
F --> M[Inquiry]
F --> N[Password Reset]
F --> O[PDF]
end
subgraph Providers
P1[ReactQueryProvider]
P2[EdgeProvider]
end
subgraph Components
C1[UI Components]
C2[Popup Components]
C3[PDF Components]
C4[Survey Components]
C5[Inquiry Components]
end
subgraph Utils
U1[Session Management]
U2[Mailer]
U3[API Routes]
end
%% Relationships
A --> P1
A --> P2
J --> U1
K --> C4
L --> C4
M --> C5
N --> U2
O --> C3