Add table login

sbutz · Nov 26, 2023 · 467f9f6 · 467f9f6
1 parent 20a4a8d
commit 467f9f6
Show file tree

Hide file tree

Showing 15 changed files with 326 additions and 143 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -2,10 +2,11 @@ import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 
-import { Store } from './store/Store';
 import Router from './Router';
 import AuthProvider from './store/AuthProvider';
 import ClubProvider from './store/ClubProvider';
+import TableProvider from './store/TableProvider';
+import { Store } from './store/Store';
 
 const darkTheme = createTheme({
   palette: {
@@ -19,9 +20,11 @@ export default function App() {
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <AuthProvider>
           <ClubProvider>
-            <Store>
-              <Router />
-            </Store>
+            <TableProvider>
+              <Store>
+                <Router />
+              </Store>
+            </TableProvider>
           </ClubProvider>
         </AuthProvider>
         <CssBaseline />

diff --git a/client/src/components/AppDrawer.tsx b/client/src/components/AppDrawer.tsx
@@ -5,7 +5,7 @@ import {
 } from '@mui/material';
 import {
   CalendarMonth,
-  Close, Home, Logout, TableRestaurant,
+  Close, Home, Login, Logout, TableRestaurant,
 } from '@mui/icons-material';
 import { useAuth } from '../store/AuthProvider';
 import { footerText } from './Footer';
@@ -22,8 +22,11 @@ const drawerBoxSx = {
 
 export default memo((props: AppDrawerProps) => {
   const theme = useTheme();
-  const { userId, userIdLoading, signOut } = useAuth();
+  const {
+    userId, userIdLoading, signOut, admin,
+  } = useAuth();
   const isLoggedIn = userId && !userIdLoading;
+  const isAdmin = isLoggedIn && admin;
 
   const drawerList = (
     <List>
@@ -43,18 +46,7 @@ export default memo((props: AppDrawerProps) => {
         </ListItemButton>
       </ListItem>
       <Divider />
-      { /* isLoggedIn ? null
-        : (
-          <ListItem>
-            <ListItemButton component={Link} to="/login">
-              <ListItemIcon>
-                <Login />
-              </ListItemIcon>
-              <ListItemText primary="Login" />
-            </ListItemButton>
-          </ListItem>
-        ) */}
-      { isLoggedIn
+      { isAdmin
         ? (
           <>
             <ListItem>
@@ -74,17 +66,27 @@ export default memo((props: AppDrawerProps) => {
               </ListItemButton>
             </ListItem>
             <Divider />
-            <ListItem>
-              <ListItemButton onClick={signOut}>
-                <ListItemIcon>
-                  <Logout />
-                </ListItemIcon>
-                <ListItemText primary="Logout" />
-              </ListItemButton>
-            </ListItem>
           </>
-        )
-        : null}
+        ) : null }
+      { isLoggedIn ? (
+        <ListItem>
+          <ListItemButton onClick={signOut}>
+            <ListItemIcon>
+              <Logout />
+            </ListItemIcon>
+            <ListItemText primary="Logout" />
+          </ListItemButton>
+        </ListItem>
+      ) : (
+        <ListItem>
+          <ListItemButton component={Link} to="/login">
+            <ListItemIcon>
+              <Login />
+            </ListItemIcon>
+            <ListItemText primary="Login" />
+          </ListItemButton>
+        </ListItem>
+      )}
       <ListItem disablePadding sx={{ position: 'fixed', bottom: 0 }}>
         <ListItemButton component={Link} to="/legal">
           <ListItemText primary={footerText} secondary="Legal" />

diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
@@ -10,8 +10,11 @@ import { useAuth } from '../store/AuthProvider';
 import AppDrawer from './AppDrawer';
 
 export default function Header() {
-  const { userId, userIdLoading, signOut } = useAuth();
-  const loggedIn = userId && !userIdLoading;
+  const {
+    userId, userIdLoading, signOut, admin,
+  } = useAuth();
+  const isLoggedIn = userId && !userIdLoading;
+  const isAdmin = isLoggedIn && admin;
 
   const [open, setOpen] = useState(false);
   const closeDrawer = useCallback(() => { setOpen(false); }, []);
@@ -39,14 +42,15 @@ export default function Header() {
     <>
       <Button component={Link} to="/home">Poolscore</Button>
       <Box sx={{ flexGrow: 1 }} />
-      { loggedIn ? (
+      { isAdmin ? (
         <>
-          <Button component={Link} to="/matchdays">Spieltage</Button>
+          <Button component={Link} to="/matchday">Spieltage</Button>
           <Button component={Link} to="/tables">Tische</Button>
-          <Button onClick={signOut}>Logout</Button>
         </>
-      )
-        : null /* <Button component={Link} to="/login">Login</Button> */}
+      ) : null }
+      { isLoggedIn
+        ? <Button onClick={signOut}>Logout</Button>
+        : <Button component={Link} to="/login">Login</Button> }
     </>
   );
 

diff --git a/client/src/components/HomeLayout.tsx b/client/src/components/HomeLayout.tsx
@@ -1,4 +1,6 @@
-import { Stack, useMediaQuery, useTheme } from '@mui/material';
+import {
+  Container, Stack, useMediaQuery, useTheme,
+} from '@mui/material';
 import Footer from './Footer';
 import Header from './Header';
 
@@ -13,7 +15,9 @@ export default function Layout({ children }: LayoutProps) {
   return (
     <Stack height="100vh" spacing={5} alignItems="center">
       <Header />
-      {children}
+      <Container>
+        {children}
+      </Container>
       {isDesktop ? <Footer /> : null}
     </Stack>
   );

diff --git a/client/src/store/AuthProvider.tsx b/client/src/store/AuthProvider.tsx
@@ -2,22 +2,25 @@ import {
   ReactNode, createContext, useEffect, useContext, useMemo, useCallback,
 } from 'react';
 import { AuthError } from 'firebase/auth';
-import { doc } from 'firebase/firestore';
 import {
   useAuthState, useCreateUserWithEmailAndPassword, useSignInWithEmailAndPassword, useSignOut,
 } from 'react-firebase-hooks/auth';
-import { useDocumentData } from 'react-firebase-hooks/firestore';
 
-import { auth, db } from './Firebase';
+import { auth } from './Firebase';
+import useIdTokenResult from '../util/useIdTokenResult';
+import useSignInWithTableToken from '../util/useSignInWithTableToken';
 
 interface AuthState {
   userId?: string;
   userIdLoading: boolean;
   clubId?: string;
+  admin?: boolean;
   signUp: (email: string, password: string) => void;
   signUpError?: AuthError;
   signIn: (email: string, password: string) => void;
   signInError?: AuthError;
+  signInWithToken: (token: string) => void;
+  signInWithTokenError?: AuthError;
   signOut: () => void;
   signOutError?: AuthError;
 }
@@ -36,10 +39,7 @@ interface AuthProviderProps {
 export default function AuthProvider({ children }: AuthProviderProps) {
   const [user, userLoading, errorAuth] = useAuthState(auth, {});
   useEffect(() => { if (errorAuth) throw errorAuth; }, [errorAuth]);
-
-  const userRef = user?.uid ? doc(db, 'users', user.uid) : null;
-  const [userData, , userDataError] = useDocumentData(userRef);
-  useEffect(() => { if (userDataError) throw userDataError; }, [userDataError]);
+  const tokenResult = useIdTokenResult(user);
 
   const [firebaseSignUp, , , signUpError] = useCreateUserWithEmailAndPassword(auth);
   const signUp = useCallback((email: string, password: string) => {
@@ -53,6 +53,8 @@ export default function AuthProvider({ children }: AuthProviderProps) {
     firebaseSignIn(email, password);
   }, [user, firebaseSignIn]);
 
+  const [signInWithToken, , , signInWithTokenError] = useSignInWithTableToken(auth);
+
   const [firebaseSignOut, , signOutError] = useSignOut(auth);
   const signOut = useCallback(() => {
     if (!user) throw Error('To sign out you need to sign in first.');
@@ -62,15 +64,28 @@ export default function AuthProvider({ children }: AuthProviderProps) {
   const value = useMemo(() => ({
     userId: user?.uid,
     userIdLoading: userLoading,
-    clubId: userData?.club.id,
+    clubId: tokenResult?.claims.clubId,
+    admin: tokenResult?.claims.admin,
     signUp,
     signUpError,
     signIn,
     signInError,
+    signInWithToken,
+    signInWithTokenError,
     signOut,
     signOutError: signOutError as AuthError,
   }), [
-    user, userLoading, userData, signUp, signUpError, signIn, signInError, signOut, signOutError,
+    user,
+    userLoading,
+    tokenResult,
+    signUp,
+    signUpError,
+    signIn,
+    signInError,
+    signInWithToken,
+    signInWithTokenError,
+    signOut,
+    signOutError,
   ]);
 
   return (

diff --git a/client/src/store/ClubProvider.tsx b/client/src/store/ClubProvider.tsx
@@ -31,7 +31,7 @@ export default function ClubProvider({ children }: ClubProviderProps) {
   useEffect(() => { if (clubDataError) throw clubDataError; }, [clubDataError]);
 
   const setName = useCallback(async (name: string) => {
-    if (!clubId) throw Error("Club's id no given. Cannot update it's name.");
+    if (!clubId) throw Error("Club's id not given. Cannot update it's name.");
 
     await updateDoc(doc(db, 'clubs', clubId), { name });
   }, [clubId]);

diff --git a/client/src/store/Firebase.ts b/client/src/store/Firebase.ts
@@ -24,4 +24,4 @@ if (isDevelopment()) { connectFirestoreEmulator(db, 'localhost', 8080); }
 const functions = getFunctions(app);
 if (isDevelopment()) { connectFunctionsEmulator(functions, 'localhost', 5001); }
 
-export { auth, db };
+export { auth, db, functions };
diff --git a/client/src/store/Store.tsx b/client/src/store/Store.tsx
@@ -1,8 +1,8 @@
 import React, {
-  useEffect, createContext, Dispatch, useReducer, useMemo, useCallback,
+  createContext, Dispatch, useReducer, useMemo, useCallback,
 } from 'react';
 import {
-  doc, collection, onSnapshot, addDoc, deleteDoc,
+  doc, collection, addDoc, deleteDoc,
 } from 'firebase/firestore';
 
 import { db } from './Firebase';
@@ -129,32 +129,6 @@ export function Store({ children } : StoreProps) {
 
   const value = useMemo(() => [state, asyncDispatch] as ContextType, [state, asyncDispatch]);
 
-  useEffect(() => {
-    const clubRef = doc(db, 'club', state.id);
-    return onSnapshot(clubRef, (snapshot) => {
-      if (snapshot.exists()) {
-        dispatch({
-          type: 'set_name',
-          name: snapshot.data().name,
-        });
-      }
-    });
-  }, [state.id]);
-
-  useEffect(() => {
-    const tableRef = collection(db, 'club', state.id, 'tables');
-    return onSnapshot(tableRef, (snapshot) => {
-      const tmp = [] as Pooltable[];
-      snapshot.forEach((d) => {
-        tmp.push({ id: d.id, name: d.data().name });
-      });
-      dispatch({
-        type: 'set_tables',
-        tables: tmp.sort((a, b) => a.name.localeCompare(b.name)),
-      });
-    });
-  }, [state.id]);
-
   return (
     <Context.Provider value={value}>
       {children}

diff --git a/client/src/store/TableProvider.tsx b/client/src/store/TableProvider.tsx
@@ -0,0 +1,78 @@
+import {
+  createContext, ReactNode, useCallback, useContext, useMemo,
+} from 'react';
+import {
+  collection, deleteDoc, doc, setDoc,
+} from 'firebase/firestore';
+import { useCollection } from 'react-firebase-hooks/firestore';
+import { httpsCallable } from 'firebase/functions';
+import { useAuth } from './AuthProvider';
+import { db, functions } from './Firebase';
+
+interface Token {
+  value: string;
+  expires: Date;
+}
+
+interface Table {
+  name: string;
+  token?: Token;
+}
+
+interface TableState {
+  tables: Table[];
+  addTable: (name: string) => Promise<void>;
+  removeTable: (name: string) => Promise<void>;
+  generateToken: (name: string) => Promise<void>;
+}
+
+const TableContext = createContext<TableState | undefined>(undefined);
+
+export function useTables() {
+  const value = useContext(TableContext);
+  if (value === undefined) throw new Error('Expected tables context value to be set.');
+  return value;
+}
+
+interface TableProviderProps {
+  children: ReactNode;
+}
+export default function TableProvider({ children }: TableProviderProps) {
+  const { clubId } = useAuth();
+
+  const tablesRef = clubId ? collection(db, 'clubs', clubId, 'tables') : null;
+  const [values] = useCollection(tablesRef);
+  // useEffect(() => { if (error) throw error; }, [error]);
+
+  const addTable = useCallback(async (name: string) => {
+    if (!clubId) throw Error("Club's id not given. Cannot add a table.");
+
+    const ref = doc(db, 'clubs', clubId, 'tables', name);
+    await setDoc(ref, {});
+  }, [clubId]);
+
+  const removeTable = useCallback(async (name: string) => {
+    if (!clubId) throw Error("Club's id not given. Cannot remove a table.");
+
+    const ref = doc(db, 'clubs', clubId, 'tables', name);
+    await deleteDoc(ref);
+  }, [clubId]);
+
+  const generateToken = useCallback(async (name: string) => {
+    const createToken = httpsCallable(functions, 'table-createtoken');
+    await createToken({ tableId: name });
+  }, []);
+
+  const value = useMemo(() => ({
+    tables: values ? values.docs.map((d) => ({ name: d.id, ...d.data() })) : [],
+    addTable,
+    removeTable,
+    generateToken,
+  }), [values, addTable, removeTable, generateToken]);
+
+  return (
+    <TableContext.Provider value={value}>
+      {children}
+    </TableContext.Provider>
+  );
+}
diff --git a/client/src/util/Validators.ts b/client/src/util/Validators.ts
@@ -40,8 +40,15 @@ export function AuthValidator(error?: AuthError): Validator {
         return 'Es ist kein Nutzer mit dieser E-Mail-Adresse registriert.';
       case 'auth/wrong-password':
         return 'Das Passwort ist falsch.';
+      case 'functions/not-found':
+        return 'Ungültiger oder abgelaufener Tischcode';
       default:
         throw error;
     }
   };
 }
+
+export function TableCodeValidator(value: string) {
+  // eslint-disable-next-line react/destructuring-assignment
+  return value.trim().match('[0-9A-Z]{4}') ? null : 'Ungültiger Tischcode.';
+}