feat: Auth final

apps/antalmanac/package.json

@@ -34,10 +34,13 @@
         "@mui/material": "^5.11.7",
         "@packages/antalmanac-types": "workspace:^",
         "@react-leaflet/core": "^2.1.0",
+        "@react-oauth/google": "^0.12.1",
         "@reactour/tour": "^3.6.1",
         "@tanstack/react-query": "^4.24.4",
         "@trpc/client": "^10.30.0",
+        "@trpc/react-query": "^10.45.2",
         "@trpc/server": "^10.30.0",
+        "antalmanac-backend": "workspace:^",
         "chart.js": "^4.2.1",
         "classnames": "^2.3.2",
         "date-fns": "^2.29.3",

apps/antalmanac/src/App.tsx

@@ -1,18 +1,18 @@
 import './App.css';
 
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { GoogleOAuthProvider } from '@react-oauth/google';
+import { TourProvider } from '@reactour/tour';
 import { SnackbarProvider } from 'notistack';
 import { useEffect } from 'react';
 import ReactGA4 from 'react-ga4';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-import { TourProvider } from '@reactour/tour';
 import { undoDelete } from './actions/AppStoreActions';
 import AppQueryProvider from './providers/Query';
 import AppThemeProvider from './providers/Theme';
 import AppThemev5Provider from './providers/Themev5';
-
-import Home from './routes/Home';
 import Feedback from './routes/Feedback';
+import Home from './routes/Home';
 
 const BrowserRouter = createBrowserRouter([
     {
@@ -46,35 +46,37 @@ export default function App() {
         <AppQueryProvider>
             <AppThemeProvider>
                 <AppThemev5Provider>
-                    <TourProvider
-                        steps={[] /** Will be populated by Tutorial component */}
-                        padding={5}
-                        styles={{
-                            maskArea: (base, _) => ({
-                                // The highlighted area
-                                ...base,
-                                rx: 5,
-                            }),
-                            maskWrapper: (base, _) => ({
-                                // The background/overlay
-                                ...base,
-                                color: 'rgba(0, 0, 0, 0.3)',
-                            }),
-                            popover: (base, _) => ({
-                                // The text box
-                                ...base,
-                                background: '#fff',
-                                color: 'black',
-                                borderRadius: 5,
-                                boxShadow: '0 0 10px #000',
-                                padding: 20,
-                            }),
-                        }}
-                    >
-                        <SnackbarProvider>
-                            <RouterProvider router={BrowserRouter} />
-                        </SnackbarProvider>
-                    </TourProvider>
+                    <GoogleOAuthProvider clientId="669941884397-r2rq6kpatj6peiegor0jft33mf16mh22.apps.googleusercontent.com">
+                        <TourProvider
+                            steps={[] /** Will be populated by Tutorial component */}
+                            padding={5}
+                            styles={{
+                                maskArea: (base, _) => ({
+                                    // The highlighted area
+                                    ...base,
+                                    rx: 5,
+                                }),
+                                maskWrapper: (base, _) => ({
+                                    // The background/overlay
+                                    ...base,
+                                    color: 'rgba(0, 0, 0, 0.3)',
+                                }),
+                                popover: (base, _) => ({
+                                    // The text box
+                                    ...base,
+                                    background: '#fff',
+                                    color: 'black',
+                                    borderRadius: 5,
+                                    boxShadow: '0 0 10px #000',
+                                    padding: 20,
+                                }),
+                            }}
+                        >
+                            <SnackbarProvider>
+                                <RouterProvider router={BrowserRouter} />
+                            </SnackbarProvider>
+                        </TourProvider>
+                    </GoogleOAuthProvider>
                 </AppThemev5Provider>
             </AppThemeProvider>
         </AppQueryProvider>

apps/antalmanac/src/components/Header/AccountButton.tsx

@@ -0,0 +1,143 @@
+import { Logout, Settings } from '@mui/icons-material';
+import {
+    Avatar,
+    Box,
+    Button,
+    Dialog,
+    DialogContent,
+    DialogTitle,
+    Divider,
+    IconButton,
+    ListItemIcon,
+    Menu,
+    MenuItem,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
+} from '@mui/material';
+import { useSnackbar } from 'notistack';
+import { useState } from 'react';
+
+import { trpc } from '$lib/trpc';
+
+export function AccountButton() {
+    const [anchorEl, setAnchorEl] = useState<HTMLElement>();
+
+    const [username, setUsername] = useState('');
+
+    const [settingsOpen, setSettingsOpen] = useState(false);
+
+    const { enqueueSnackbar } = useSnackbar();
+
+    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(undefined);
+    };
+
+    const logoutMutation = trpc.auth.logout.useMutation();
+
+    const utils = trpc.useUtils();
+
+    const open = Boolean(anchorEl);
+
+    const logout = async () => {
+        await logoutMutation.mutateAsync();
+        await utils.auth.status.invalidate();
+        handleClose();
+    };
+
+    const handleOpenSettings = () => {
+        setSettingsOpen(true);
+        handleClose();
+    };
+
+    const handleCloseSettings = () => {
+        setSettingsOpen(false);
+    };
+
+    const handleUsernameChange = (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+        setUsername(e.target.value);
+    };
+
+    const handleSubmit = async () => {
+        if (!username) {
+            enqueueSnackbar('Username must not be empty', { variant: 'error' });
+            return;
+        }
+        console.log('new username: ', username);
+        enqueueSnackbar('New username set', { variant: 'success' });
+    };
+
+    return (
+        <>
+            <Tooltip title="Account settings">
+                <IconButton
+                    onClick={handleClick}
+                    color="inherit"
+                    size="small"
+                    aria-controls={open ? 'account-menu' : undefined}
+                    aria-haspopup="true"
+                    aria-expanded={open ? 'true' : undefined}
+                >
+                    <Avatar sx={{ width: 24, height: 24 }} />
+                </IconButton>
+            </Tooltip>
+            <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+                onClick={handleClose}
+                transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+            >
+                <MenuItem onClick={handleOpenSettings}>
+                    <ListItemIcon>
+                        <Settings fontSize="small" />
+                    </ListItemIcon>
+                    Settings
+                </MenuItem>
+                <MenuItem onClick={logout}>
+                    <ListItemIcon>
+                        <Logout fontSize="small" />
+                    </ListItemIcon>
+                    Logout
+                </MenuItem>
+            </Menu>
+
+            <Dialog onClose={handleCloseSettings} open={settingsOpen}>
+                <DialogTitle>Account Settings</DialogTitle>
+
+                <Divider />
+
+                <DialogContent>
+                    <Stack gap={2}>
+                        <Typography variant="h6">Change Username</Typography>
+
+                        <Box>
+                            <Typography>Enter a unique username.</Typography>
+                            <Typography>If the username exists, you will need to claim it.</Typography>
+                        </Box>
+
+                        <Stack gap={1}>
+                            <TextField onChange={handleUsernameChange} label="Username">
+                                Username
+                            </TextField>
+
+                            <Box>
+                                <Button color="inherit" onClick={handleSubmit}>
+                                    Submit
+                                </Button>
+                            </Box>
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}
+
+export default AccountButton;

apps/antalmanac/src/components/Header/Header.tsx

@@ -2,12 +2,16 @@ import { AppBar, Toolbar, useMediaQuery } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 import { ClassNameMap } from '@material-ui/core/styles/withStyles';
 
+import AccountButton from './AccountButton';
 import Import from './Import';
-import LoadSaveScheduleFunctionality from './LoadSaveFunctionality';
+import LoadButton from './LoadButton';
+import LoginButton from './LoginButton';
+import SaveButton from './SaveButton';
 import AppDrawer from './SettingsMenu';
 
 import Logo from '$assets/logo.svg';
 import MobileLogo from '$assets/mobile-logo.svg';
+import { trpc } from '$lib/trpc';
 
 const styles = {
     appBar: {
@@ -39,6 +43,8 @@ interface CustomAppBarProps {
 const Header = ({ classes }: CustomAppBarProps) => {
     const isMobileScreen = useMediaQuery('(max-width:750px)');
 
+    const authStatus = trpc.auth.status.useQuery();
+
     return (
         <AppBar position="static" className={classes.appBar}>
             <Toolbar variant="dense" style={{ padding: '5px', display: 'flex', justifyContent: 'space-between' }}>
@@ -50,8 +56,14 @@ const Header = ({ classes }: CustomAppBarProps) => {
                 />
 
                 <div style={{ display: 'flex', flexDirection: 'row' }}>
-                    <LoadSaveScheduleFunctionality />
+                    <SaveButton />
+
+                    <LoadButton />
+
                     <Import key="studylist" />
+
+                    {authStatus.data ? <AccountButton /> : <LoginButton />}
+
                     <AppDrawer key="settings" />
                 </div>
             </Toolbar>