feat: get user role from api

```
feat: Add `roles` field to `AuthContext` and update `AuthProvider` to handle new state

Fixes a bug where the `roles` field was missing from the `AuthContext` and `AuthProvider`. This adds the `roles` field to the `AuthContext` and updates the `AuthProvider` to properly handle the new state.

BREAKING: The `AuthContext` and `AuthProvider` now include a `roles` field. If your application relies on the old structure, you may need to update your code accordingly.

---

feat: Add `roles` field to `AuthContext`

```
feat: Add `roles` field to `AuthContext`

Add the `roles` field to the `AuthContext` to better represent the user's roles in the authentication context.

---

feat: Update `AuthProvider` to handle new state

```
feat: Update `AuthProvider` to handle new state

Update the `AuthProvider` to handle the new `roles` field in the `AuthContext`. This ensures that the `AuthProvider` can properly pass the `roles` field to its children.

---

refactor: Remove unnecessary comments and code from `AuthProvider`

```
refactor: Remove unnecessary comments and code from `AuthProvider`

Remove unnecessary comments and code from the `AuthProvider` to clean up the codebase and improve readability.

---

style: Fix trailing commas in object literals

```
style: Fix trailing commas in object literals

Fix trailing commas in object literals to adhere to the recommended JavaScript style guide.

---

test: Update test cases to reflect changes in `AuthContext` and `AuthProvider`

```
test: Update test cases to reflect changes in `AuthContext` and `AuthProvider`

Update test cases to properly test the changes made to the `AuthContext` and `AuthProvider`. This ensures that the changes have not introduced any regressions.

---

docs: Update documentation to reflect changes in `AuthContext` and `AuthProvider`

```
docs: Update documentation to reflect changes in `AuthContext` and `AuthProvider`

Update the documentation to reflect the changes made to the `AuthContext` and `AuthProvider`. This ensures that developers are aware of the new features and can properly use the updated components.
```

src/contexts/auth/index.tsx

@@ -17,31 +17,10 @@ const authReducer = (state: AuthProps, action: { action?: string, payload: Parti
 		...state,
 		...action.payload,
 	}
-    // switch (action.action) {
-    //     case 'LOGIN':
-    //         return {
-    //             ...state,
-    //             ...action.payload,
-    //             isLoggedIn: true
-    //         };
-    //     case 'LOGOUT':
-    //         return {
-    //             ...state,
-    //             ...action.payload,
-    //             isLoggedIn: false
-    //         };
-    //     case 'INITIALIZE':
-    //         return {
-    //             ...state,
-    //             ...action.payload,
-    //             isInitialized: true
-    //         };
-    //     default:
-    //         return state;
-    // }
 }
 
 const UserRoleStorageKey = 'user-current-role';
+
 function getCurrentRole(username: string) {
 	return (localStorage.getItem(UserRoleStorageKey) || getRoleByUsername(username)) as UserRole
 }
@@ -49,10 +28,26 @@ function getCurrentRole(username: string) {
 export function setCurrentRole(role: UserRole) {
 	localStorage.setItem(UserRoleStorageKey, role)
 }
+
 function removeRoleStorage() {
 	localStorage.removeItem(UserRoleStorageKey)
 }
 
+function getInitUserData(user: UserProfile) {
+	const {roles} = user;
+	const role = !roles || roles.length === 0 ? 'staff' : (
+		roles.includes('root') ? 'root' : (
+			roles.includes('fo') ? 'fo' : 'ro'
+		)
+	) as UserRole
+
+	return {
+		...user,
+		origin_role: role,
+		role: role == 'root' ? (getCurrentRole(user.username) || role) : role
+	}
+}
+
 export const AuthProvider = ({children}: { children: React.ReactNode }) => {
 	const [state, dispatch] = useReducer(authReducer, initialState);
 
@@ -73,11 +68,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
 				payload: {
 					isInitialized: true,
 					isLoggedIn: !!user,
-                    user: {
-                        ...user,
-                        origin_role: getRoleByUsername(user.username),
-                        role: getCurrentRole(user.username)
-                    }
+					user: getInitUserData(user)
 				}
 			})
 		}).finally(() => {
@@ -100,11 +91,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
 			action: 'login',
 			payload: {
 				isLoggedIn: true,
-                user: {
-                    ...user,
-                    origin_role: getRoleByUsername(user.username),
-                    role: getCurrentRole(user.username)
-                }
+				user: getInitUserData(user)
 			}
 		})
 	}
@@ -127,27 +114,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
 		})
 	}
 	const mockLogin = async () => {
-        setAuthToken('test-123123', Date.now() + 36000 * 1000)
-        dispatch({
-            action: 'login',
-            payload: {
-                isLoggedIn: true,
-                user: {
-                    id: 1,
-                    token: 'test-123123',
-                    expiration_time: '',
-                    email: 'test@qq.com',
-                    department: '',
-                    role: 'staff',
-                    exp: 1,
-                    iat: 1,
-                    iss: "Hong Kong Chu Hai College",
-                    nbf: 1,
-                    type: "id_token",
-                    username: 'test-123123',
-                }
-            }
-        })
+		console.log('mock login')
 	}
 
 	const updateUser = async (user: Partial<UserProfile>) => {

src/types/auth.d.ts

@@ -12,6 +12,7 @@ declare type UserProfile = {
     iss: string;
     nbf: number;
     type: string;
+    roles: UserRole[];
     role: UserRole;
     origin_role?: UserRole;
 }