Add user registration (#20)

Author: Actarus35

pill_mate/frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { HashRouter as Router } from 'react-router-dom';
 import './App.css';
 import AppRoutes from './AppRoutes.tsx';
 import { ReminderProvider } from './context/ReminderContext.tsx';

pill_mate/frontend/src/AppRoutes.tsx

@@ -1,16 +1,30 @@
 import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
+import { useUser } from './context/useUser.tsx';
 import Dashboard from './pages/Dashboard.tsx';
 import Calendar from './pages/Calendar.tsx';
+import CreateUser from './pages/CreateUser.tsx';
 import Stock from './pages/Stock.tsx' ;
 
 const AppRoutes: React.FC = () => {
+
+    const { user } = useUser();
+
     return (
         <Routes>
-            <Route path="/" element={<Dashboard />} />
-            <Route path="/calendar" element={<Calendar />} />
-            <Route path="/stock" element={<Stock />} />
-            <Route path="*" element={<Navigate to="/" />} />
+            {!user ? (
+                <>
+                    <Route path="/create-user" element={<CreateUser />} />
+                    <Route path="*" element={<Navigate to="/create-user" />} />
+                </>
+            ) : (
+                <>
+                    <Route path="/" element={<Dashboard />} />
+                    <Route path="/calendar" element={<Calendar />} />
+                    <Route path="/stock" element={<Stock />} />
+                    <Route path="*" element={<Navigate to="/" />} />
+                </>
+            )}
         </Routes>
     );
 };

pill_mate/frontend/src/components/ReminderCard.css

@@ -13,6 +13,7 @@
 
 .button {
     background-color: var(--blue);
+    font-size: 1rem;
     color: white;
     padding: 8px 16px;
     border-radius: 5px;

pill_mate/frontend/src/context/UserContext.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import { UserRole } from '../models/UserRole';
+import { User } from '../models/User';
+
+export interface UserContextType {
+  user: User | null;
+  createUser: (role: UserRole) => Promise<void>;
+}
+
+export const UserContext = createContext<UserContextType | undefined>(undefined);

pill_mate/frontend/src/context/UserProvider.tsx

@@ -0,0 +1,40 @@
+import React, { useState, useEffect, ReactNode } from 'react';
+import { getUserInfo, createUser as apiCreateUser } from '../services/userServices.tsx';
+import { UserRole } from '../models/UserRole.ts';
+import { User } from '../models/User.ts';
+import { UserContext } from './UserContext.tsx';
+
+interface UserProviderProps {
+    children: ReactNode;
+}
+
+export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
+    const [user, setUser] = useState<User | null | undefined>(undefined);
+
+    useEffect(() => {
+        const loadUserInfo = async () => {
+            try {
+                const userInfo = await getUserInfo();
+                setUser(userInfo);
+            } catch {
+                setUser(null);
+            }
+        };
+        loadUserInfo();
+    }, []);
+
+    const createUser = async (role: UserRole) => {
+        const newUser = await apiCreateUser(role);
+        setUser(newUser);
+    };
+
+    if (user === undefined) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <UserContext.Provider value={{ user, createUser }}>
+            {children}
+        </UserContext.Provider>
+    );
+};

pill_mate/frontend/src/context/useUser.tsx

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { UserContext } from './UserContext.tsx';
+
+export const useUser = () => {
+    const context = useContext(UserContext);
+    if (!context) {
+        throw new Error('useUser must be used within a UserProvider');
+    }
+    return context;
+};

pill_mate/frontend/src/main.tsx

@@ -2,11 +2,17 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
+import { UserProvider } from './context/UserProvider.tsx';
+import { ReminderProvider } from './context/ReminderContext.tsx';
 
 const rootElement = document.getElementById('root');
 
 createRoot(rootElement!).render(
     <StrictMode>
-        <App />
+        <UserProvider>
+            <ReminderProvider>
+                <App />
+            </ReminderProvider>
+        </UserProvider>
     </StrictMode>,
 );

pill_mate/frontend/src/models/User.ts

@@ -0,0 +1,8 @@
+import { UserRole } from './UserRole.ts';
+
+export interface User {
+  homeAssistantUserId: string;
+  userName: string;
+  userDisplayName: string;
+  role: UserRole;
+}

pill_mate/frontend/src/models/UserRole.ts

@@ -0,0 +1,4 @@
+export enum UserRole {
+    HELPED = 0,
+    HELPER = 1
+}

pill_mate/frontend/src/pages/Calendar.css

@@ -21,7 +21,6 @@
     align-items: center;
     flex-grow: 1;
     gap: 10px;
-
 }
 
 .Link {