Squashed commit adding pr/64

commit 8b529ef Author: Tepohe <[email protected]> Date: Thu Oct 17 16:20:05 2024 +0200 Updated incorrect url-path commit 73999a8 Merge: f0bacbb 1861431 Author: Eric Svebakk <[email protected]> Date: Thu Oct 17 16:11:36 2024 +0200 git push origin developmentMerge branch 'Sebbben-featureBetterRegisterFeedback' into development Handled merge-conflict for pr/64 commit 1861431 Merge: f0bacbb cd922ac Author: Tepohe <[email protected]> Date: Thu Oct 17 16:08:02 2024 +0200 Handled merge-conflict commit f0bacbb Merge: d26bd3f d198b94 Author: Eric Svebakk <[email protected]> Date: Thu Oct 17 15:46:05 2024 +0200 Merge pull request #75 from Borgarsy/feature-halloween-theme Temporary Halloween theme commit cd922ac Author: Sebbben <[email protected]> Date: Fri Oct 11 10:20:45 2024 +0200 made it so that pressing enter on signin and register page submits the forms commit 56dc570 Author: Sebbben <[email protected]> Date: Fri Oct 11 10:16:44 2024 +0200 removed duplicate login button on successfull registration commit d26bd3f Merge: 0f096c0 c019c46 Author: Eric Svebakk <[email protected]> Date: Thu Oct 10 16:54:40 2024 +0200 Merge pull request #67 from Sebbben/fixNoResultMembershipSearch Fix no result membership search commit c019c46 Author: Sebbben <[email protected]> Date: Sat Oct 5 16:20:01 2024 +0200 Made tables turn to first page when the table content changes with a search commit 0f096c0 Merge: a1ce2ec 4dfd6f8 Author: Tepohe <[email protected]> Date: Thu Oct 10 14:42:19 2024 +0200 Merge branch 'main' into development commit d198b94 Author: Borgar <[email protected]> Date: Tue Oct 8 15:01:29 2024 +0200 adds halloween theme. commit a1ce2ec Merge: 4f7d813 f06a472 Author: Tepohe <[email protected]> Date: Tue Oct 8 13:53:44 2024 +0200 Merge branch 'pr/53' into development commit f06a472 Author: Sebbben <[email protected]> Date: Mon Oct 7 16:47:03 2024 +0200 Fixed wrong path for nav bar home from pointing to /home to pointing to / commit a715fac Author: Sebbben <[email protected]> Date: Tue Oct 1 17:24:53 2024 +0200 added snackbar to singin page commit 6322071 Merge: 131cc76 ea38e61 Author: Sebbben <[email protected]> Date: Tue Oct 1 17:08:07 2024 +0200 Merged features from featureBetterRegisterFeedback into changes made by pvk05's fixRegisterUserResponse commit 131cc76 Merge: 221a968 eb8b2f2 Author: Philip Knudsen <[email protected]> Date: Tue Oct 1 16:32:52 2024 +0200 Merge branch 'cybernetisk:main' into fixRegisterUserResponse commit 221a968 Author: pvk05 <[email protected]> Date: Sat Sep 28 00:57:24 2024 +0200 moved register response to a snackbar for better visual feedback commit ea38e61 Author: Sebbben <[email protected]> Date: Fri Sep 27 23:41:22 2024 +0200 added loading indicator to singin page as well commit 8a3d2de Author: pvk05 <[email protected]> Date: Fri Sep 27 23:14:48 2024 +0200 checks if email includes "@" before registering user commit 3f547cf Author: pvk05 <[email protected]> Date: Fri Sep 27 22:44:11 2024 +0200 fixed response from sendMail function to send correct feedback when failing commit 0b33808 Author: Sebbben <[email protected]> Date: Thu Sep 26 17:07:50 2024 +0200 visual queue when registering user commit 0d154f5 Author: Sebbben <[email protected]> Date: Thu Sep 26 14:40:51 2024 +0200 Renamed some directories to take advantage of nexts routing for more usable url paths Co-Authored-By: Philip Knudsen <[email protected]> Co-Authored-By: Sebbben <[email protected]>
cybernetisk · Oct 17, 2024 · ebe4c43 · ebe4c43
1 parent 3a2cabc
commit ebe4c43
Show file tree

Hide file tree

Showing 4 changed files with 178 additions and 45 deletions.
diff --git a/app/(pages)/auth/register/page.js b/app/(pages)/auth/register/page.js
@@ -4,32 +4,54 @@
 import { cybTheme } from "@/app/components/themeCYB";
 import prismaRequest from "@/app/middleware/prisma/prismaRequest";
 import { Box, Button, Grid, Skeleton, TextField, Typography } from "@mui/material";
+import CircularProgress from '@mui/material/CircularProgress';
 import { normalizeEmail } from "@/app/components/Login/authUtil";
 import Link from "next/link";
 import { useState } from "react";
+import SnackbarAlert from "@/app/components/feedback/snackbarAlert";
 
 export default function registerPage() {
 
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
-  const [email, setEmail] = useState("")
-  const [response, setResponse] = useState("")
+	const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [severity, setSeverity] = useState("")
+  const [email, setEmail] = useState("");
+  const [response, setResponse] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
 
   const debug = true;
 
   const handleRegister = async () => {
+    setSnackbarOpen(false)
+
+    if (!email.includes("@")) {
+      setResponse("Email is invalid")
+      setSeverity("error")
+      setSnackbarOpen(true)
+      return
+    }
+
+    setLoading(true);
 
     const responseCUE = await checkUserExists(email, debug)
 
     if (!responseCUE.ok) {
       setResponse(responseCUE.error);
+      setSeverity("error")
+      setSnackbarOpen(true)
+      setLoading(false);
       return;
     }
 
     const responseCU = await createUser(firstName, lastName, email, debug);
 
     if (!responseCU.ok) {
       setResponse(responseCU.error)
+      setSeverity("error")
+      setSnackbarOpen(true)
+      setLoading(false);
       return;
     }
 
@@ -41,12 +63,40 @@ export default function registerPage() {
 
     if (!responseSVM.ok) {
       setResponse(responseSVM.error);
+      setSeverity("error")
+      setSnackbarOpen(true)
+      setLoading(false);
       return;
     } else {
       setResponse(`User created. Email sent to ${responseSVM.email}`);
+      setSeverity("success")
+      setSuccess(true);
+      setSnackbarOpen(true)
+      setLoading(false);
+      return;
     }
   }
 
+
+  const CheckedTextField = (title, textValue, textCallback) => {
+
+    return (
+      <Grid item>
+        <TextField
+          fullWidth
+          required
+          variant="filled"
+          label={title}
+          value={textValue}
+          onChange={(event) => textCallback(event.target.value)}
+          InputLabelProps={{ shrink: true }}
+          onKeyUp={(e)=>{if(e.key==="Enter") handleRegister()}}
+        />
+      </Grid>
+    );
+
+  }
+
   return (
     <Box>
       <Grid
@@ -68,31 +118,58 @@ export default function registerPage() {
           <Button
             fullWidth
             variant="contained"
+            disabled={loading}
             onClick={() => handleRegister()}
           >
             Register
+
+          {loading && (
+          <CircularProgress
+            size={24}
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              marginTop: '-12px',
+              marginLeft: '-12px',
+            }}/>
+          )}
           </Button>
-        </Grid>
-
-        <Grid item container direction="row" justifyContent="flex-end">
-          <Link
-            href="/auth/signIn"
-            passHref
-            style={{ textDecoration: "none", cursor: "pointer" }}
-          >
-            <Typography
-              variant="caption"
-              color={cybTheme.palette.primary.main}
-            >
-              Log in
-            </Typography>
-          </Link>
-        </Grid>
+          </Grid>
+          {success ? 
+            <Grid item>
+            <Link href="/auth/signIn">
+              <Button
+                fullWidth
+                variant = "contained">
+                Login
+              </Button>
+            </Link>
+          </Grid>
+          :
+          <Grid item container justifyContent="flex-end">
+            <Link
+              href="/auth/signIn"
+              passHref
+              style={{ textDecoration: "none", cursor: "pointer" }}>
+                <Typography
+                  variant="caption"
+                  color={cybTheme.palette.primary.main}>
+                  Log in
+                </Typography>
+              </Link>
+            </Grid>
+          }
 
         <Grid item>
           <Typography variant="caption">
             {response != "" ? (
-              response
+              <SnackbarAlert 
+              open={snackbarOpen} 
+              setOpen={setSnackbarOpen} 
+              response={response}
+              severity={severity}
+              />
             ) : (
               <Skeleton
                 animation={false}
@@ -108,23 +185,6 @@ export default function registerPage() {
 
 }
 
-const CheckedTextField = (title, textValue, textCallback) => {
-
-  return (
-    <Grid item>
-      <TextField
-        fullWidth
-        required
-        variant="filled"
-        label={title}
-        value={textValue}
-        onChange={(event) => textCallback(event.target.value)}
-        InputLabelProps={{ shrink: true }}
-      />
-    </Grid>
-  );
-
-}
 
 // 
 async function checkUserExists(email, debug) {
@@ -202,7 +262,7 @@ async function sendVerificiationMail(newUser, activateToken, debug) {
   if (debug) console.log("sendVerificiationMail response:", response);
 
   if (!response.ok) {
-    return { ok: false, error: response.error };
+    return { ok: false, error: response.statusText };
   }
 
   const data = await response.json();

diff --git a/app/(pages)/auth/signIn/page.js b/app/(pages)/auth/signIn/page.js
@@ -2,19 +2,24 @@
 "use client"
 
 import { Box, Button, Grid, Skeleton, TextField, Typography } from "@mui/material";
+import CircularProgress from '@mui/material/CircularProgress';
 import { useState } from "react";
 import { cybTheme } from "./../../../components/themeCYB";
 import { signIn, useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { normalizeEmail } from "./../../../components/Login/authUtil";
+import SnackbarAlert from "@/app/components/feedback/snackbarAlert";
 
 
 export default function SignInPage() {
 
   const [email, setEmail] = useState("")
   const [response, setResponse] = useState("")
   const [error, setError] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [severity, setSeverity] = useState("")
 
   const session = useSession()
   const router = useRouter()
@@ -25,10 +30,14 @@ export default function SignInPage() {
   }
 
   const handleLogin = async () => {
+    setLoading(true);
 
     if (email == "") {
       setError(true)
+      setSeverity("error")
       setResponse("Please fill in your email")
+      setLoading(false);
+      setSnackbarOpen(true);
       return
     }
 
@@ -41,11 +50,16 @@ export default function SignInPage() {
 
     if (response.error == null) {
       setError(false)
+      setSeverity("success")
       setResponse(`Email sent to ${normalizedEmail}`);
-    }
-    else {
+      setLoading(false);
+      setSnackbarOpen(true);
+    } else {
       setError(true);
+      setSeverity("error")
       setResponse(response.error);
+      setLoading(false);
+      setSnackbarOpen(true);
     }
   }
 
@@ -72,12 +86,29 @@ export default function SignInPage() {
             error={error}
             onChange={(event) => setEmail(event.target.value)}
             InputLabelProps={{ shrink: true }}
+            onKeyUp={(e) => {if(e.key==="Enter") handleLogin()}}
           />
         </Grid>
 
         <Grid item>
-          <Button fullWidth variant="contained" onClick={() => handleLogin()}>
+          <Button 
+            fullWidth
+            variant="contained"
+            onClick={() => handleLogin()}
+            disabled={loading}
+          >
             Send magic link
+            {loading && (
+            <CircularProgress
+              size={24}
+              sx={{
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                marginTop: '-12px',
+                marginLeft: '-12px',
+              }}/>
+          )}
           </Button>
         </Grid>
 
@@ -99,12 +130,16 @@ export default function SignInPage() {
               Register new user
             </Typography>
           </Link>
-        </Grid>
-
-        <Grid item container>
-          <Typography variant="subtitle1" >
+        </Grid>        
+        <Grid item>
+          <Typography variant="caption">
             {response != "" ? (
-              response
+              <SnackbarAlert 
+              open={snackbarOpen} 
+              setOpen={setSnackbarOpen} 
+              response={response}
+              severity={severity}
+              />
             ) : (
               <Skeleton
                 animation={false}

diff --git a/app/api/sendVerification/route.js b/app/api/sendVerification/route.js
@@ -29,6 +29,7 @@ export async function POST(req) {
 
     } catch (error) {
       console.error("Error with sending email: ", error);
+      return NextResponse.json({ success: success, email: user.email, error: error }, { status: 400, statusText: `Can't send email to ${user.email}` })
     }
 
     return NextResponse.json({ success: success, email: user.email,  link: link }, { status: 200 });

diff --git a/app/components/feedback/snackbarAlert.js b/app/components/feedback/snackbarAlert.js
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Alert from '@mui/material/Alert';
+
+export default function SnackbarAlert({ open, setOpen, response, severity}) {
+
+	const handleClose = (event, reason) => {
+		if (reason === 'clickaway') {
+			return;
+		}
+
+		setOpen(false);
+	};
+
+	return (
+		<div>
+			<Snackbar
+				open={open}
+				autoHideDuration={5000}
+				onClose={handleClose}
+				anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+			>
+				<Alert
+					onClose={handleClose}
+					severity={severity}
+					variant="filled"
+					sx={{ width: '100%' }}
+				>
+					{response}
+				</Alert>
+			</Snackbar>
+		</div>
+	);
+}