minor-ui-fixes

NetBuddy.Server/Controllers/Account/AccountController.cs

@@ -6,22 +6,33 @@
 namespace NetBuddy.Server.Controllers.Account;
 
 [Authorize]
-[Route("info")]
 [ApiController]
 public class AccountController : ControllerBase
 {
+    private readonly SignInManager<UserAccount> _signInManager;
     private readonly UserManager<UserAccount> _userManager;
-    
-    public AccountController(UserManager<UserAccount> userManager)
+
+    public AccountController(UserManager<UserAccount> userManager, SignInManager<UserAccount> signInManager)
     {
         _userManager = userManager;
+        _signInManager = signInManager;
     }
-
+
+    [Route("info")]
     [HttpGet]
     public async Task<IActionResult> GetInfo()
     {
         var user = await _userManager.GetUserAsync(User);
-        
+
         return Ok(user);
     }
+
+    [Route("logout")]
+    [HttpPut]
+    public async Task<IActionResult> Logout()
+    {
+        await _signInManager.SignOutAsync();
+
+        return Ok();
+    }
 }

netbuddy.client/src/App.tsx

@@ -1,17 +1,16 @@
 import {BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';
 import FancyNavBar, {PageAndLink} from "./components/navigation/FancyNavBar";
 import logo from "./assets/logo/netbuddylogo.jpeg";
-import {ThemeProvider} from "@emotion/react";
-import {darkTheme} from "./layouts/style/Themes";
 import LoginForm from "./components/forms/LoginForm.tsx";
 import CssBaseline from '@mui/material/CssBaseline';
 import RegisterForm from "./components/forms/RegisterForm.tsx";
 import {useState} from 'react';
 import UserInfoContext, {UserInfo} from "./contexts/UserInfoContext.tsx";
 import Home from "./screens/Home.tsx";
-import History from "./components/other/History.tsx";
+import History from "./components/history/History.tsx";
 import SequenceBuilderScreen from "./screens/sequence/builder/SequenceBuilderScreen.tsx";
 import Box from '@mui/material/Box';
+import {ThemeProvider} from "./contexts/ThemeContext.tsx";
 
 let pageAndLinks: PageAndLink[] = [
   {page: "History", link: "/history"},
@@ -23,7 +22,8 @@ function App() {
 
   return (
     <UserInfoContext.Provider value={{userInfo, setUserInfo}}>
-      <ThemeProvider theme={darkTheme}>
+      {/*<ThemeProvider theme={darkTheme}>*/}
+      <ThemeProvider >
         <CssBaseline/>
         <BrowserRouter>
           <Box m={2}>
@@ -53,6 +53,7 @@ function App() {
           </Box>
         </BrowserRouter>
       </ThemeProvider>
+      {/*</ThemeProvider>*/}
     </UserInfoContext.Provider>
   );
 }

netbuddy.client/src/api/account/logout.ts

@@ -0,0 +1,7 @@
+import agent from "../agent.ts";
+
+export default async function logout() {
+  return await agent
+  .put("logout")
+  .catch((error) => console.log(error));
+} 

netbuddy.client/src/components/forms/LoginForm.tsx

@@ -3,7 +3,7 @@ import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
 import LockClosedIcon from "@mui/icons-material/Lock";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
-import {useContext, useEffect, useState} from "react";
+import {useContext, useState} from "react";
 import Typography from "@mui/material/Typography";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
@@ -19,15 +19,6 @@ const LoginForm = () => {
   const [waiting, setWaiting] = useState<boolean>(false);
   const navigate = useNavigate();
   const {userInfo, setUserInfo} = useContext(UserInfoContext);
-
-  useEffect(() => {
-    getUserInfo().then(info => {
-      if (setUserInfo && userInfo != info) {
-        setUserInfo(info);
-        navigate("/");
-      }
-    });
-  }, []);
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     // prevent sending multiple requests
@@ -41,6 +32,12 @@ const LoginForm = () => {
     let response = await login(data.get('email') as string, data.get('password') as string);
     // check for response and validate it
     if (response) {
+      getUserInfo().then(info => {
+        if (setUserInfo && userInfo != info) {
+          setUserInfo(info);
+          navigate("/");
+        }
+      });
       // unlock
       setLocked(false);
       // go to default page

netbuddy.client/src/components/forms/RegisterForm.tsx

@@ -11,7 +11,7 @@ import Link from "@mui/material/Link";
 import {Link as RouterLink, useNavigate} from "react-router-dom";
 import register from "../../api/account/register.ts";
 
-const LoginForm = () => {
+const RegisterForm = () => {
   const [success, setSuccess] = useState<boolean>(false);
   const [waiting, setWaiting] = useState<boolean>(false);
   const navigate = useNavigate();
@@ -94,7 +94,7 @@ const LoginForm = () => {
             sx={{mt: 3, mb: 2}}
             disabled={waiting}
           >
-            Sign In
+            Sign Up
           </Button>
           <Grid container>
             <Grid item xs>
@@ -115,4 +115,4 @@ const LoginForm = () => {
   );
 }
 
-export default LoginForm;
+export default RegisterForm;

netbuddy.client/src/components/navigation/FancyNavBar.tsx

@@ -1,4 +1,4 @@
-import {useContext, useState} from 'react';
+import {useContext, useState} from 'react';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Button from '@mui/material/Button';
@@ -7,8 +7,8 @@ import {Link} from 'react-router-dom';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import DrawerControlsContext, {SideDrawerControls} from "../../contexts/DrawerControlsContext.tsx";
-import ProfileMenu from '../other/ProfileMenu.tsx';
 import UserInfoContext from "../../contexts/UserInfoContext.tsx";
+import ProfileMenu from "./ProfileMenu.tsx";
 
 export type PageAndLink = {
   page: string;
@@ -44,12 +44,15 @@ const FancyNavBar = ({logo, pageAndLinks}: FancyNavBarProps) => {
                 </Typography>
               </Stack>
             </Link>
-            {pageAndLinks?.map(pageAndLink => (
-              <Button key={pageAndLink.link} component={Link} to={pageAndLink.link} variant="text"
-                      sx={{fontWeight: '600'}}>
-                {pageAndLink.page}
-              </Button>
-            ))}
+            {userInfo?.username
+              ? pageAndLinks?.map(pageAndLink => (
+                <Button key={pageAndLink.link} component={Link} to={pageAndLink.link} variant="text"
+                        sx={{fontWeight: '600'}}>
+                  {pageAndLink.page}
+                </Button>
+              ))
+              : null
+            }
           </Stack>
           {userInfo?.username && (
             <Stack direction="row" alignItems="center" spacing={2}>

netbuddy.client/src/components/navigation/ProfileMenu.tsx

@@ -0,0 +1,114 @@
+import {useContext, useEffect, useState} from 'react';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Avatar from "@mui/material/Avatar";
+import Button from "@mui/material/Button";
+import UserInfoContext from '../../contexts/UserInfoContext.tsx';
+import logout from "../../api/account/logout.ts";
+import {useNavigate} from "react-router-dom";
+import UserPreferences, {Preferences} from "../preferences/UserPrefrences.tsx";
+import {useTheme} from '../../contexts/ThemeContext';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import {ExitToApp, Settings} from "@mui/icons-material";
+
+const ProfileMenu = () => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const {userInfo, setUserInfo} = useContext(UserInfoContext);
+  const [preferencesOpen, setPreferencesOpen] = useState(false);
+  const {theme, toggleTheme, onThemeChange} = useTheme();
+
+  useEffect(() => {
+  }, [userInfo]);
+
+  const switchMenuOpen = (e: React.MouseEvent<HTMLElement>) => setAnchorEl(e.currentTarget);
+  const switchMenuClose = () => setAnchorEl(null);
+
+  const navigate = useNavigate();
+
+  // todo: don't need to be here?
+  const preferences: Preferences[] = [
+    {
+      label: "the best input in the whole world",
+      type: 'text',
+      onChange: (value: React.ChangeEvent<HTMLInputElement>) => console.log(value.target.value),
+      defaultValue: ''
+    },
+    {
+      label: "theme",
+      type: 'boolean',
+      onChange: toggleTheme,
+      value: theme !== 'light'
+    },
+    {
+      label: "theme",
+      type: 'buttonGroup',
+      onChange: onThemeChange,
+      value: theme,
+      options: [{text: "light", icon: <LightModeIcon/>}, {text: "dark", icon: <DarkModeIcon/>}],
+    },
+    {
+      label: "number",
+      type: 'number',
+      onChange: (value: React.ChangeEvent<HTMLInputElement>) => console.log(value.target.value),
+    },
+    {
+      label: "family members",
+      type: 'select',
+      onChange: (value: string) => console.log(value),
+      options: [{text: "Shirley", value: 1}, {text: "Dana", value: 2}, {text: "Robin", value: 3}]
+    },
+  ];
+
+  return (
+    <>
+      <Button onClick={e => {
+        e.preventDefault();
+        switchMenuOpen(e);
+      }}>
+        <Avatar sx={{width: 32, height: 32}}>
+          {userInfo?.username!.charAt(0).toUpperCase()}
+        </Avatar>
+      </Button>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={anchorEl !== null}
+        onClose={switchMenuClose}
+        anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
+        transformOrigin={{vertical: 'top', horizontal: 'right'}}
+      >
+        <MenuItem onClick={async e => {
+          e.preventDefault();
+          switchMenuClose();
+
+          let response = await logout();
+          if (response) {
+            if (setUserInfo) {
+              setUserInfo({});
+            }
+            navigate('/login');
+          } else {
+            alert("Logout failed. Please try again later.");
+          }
+        }}>
+          <ExitToApp style={{ marginRight: 8 }} />
+          Sign Out
+        </MenuItem>
+
+        <MenuItem onClick={e => {
+          e.preventDefault();
+          switchMenuClose();
+          setPreferencesOpen(true);
+        }}>
+          <Settings style={{ marginRight: 8 }} />
+          Preferences
+        </MenuItem>
+      </Menu>
+
+      <UserPreferences preferences={preferences} isOpen={preferencesOpen} setIsOpen={setPreferencesOpen}/>
+    </>
+  );
+};
+
+export default ProfileMenu;