feat(next): confirm password

windsnow1025 · Oct 16, 2024 · 89360c7 · 89360c7
1 parent ec81da9
commit 89360c7
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 33 deletions.
diff --git a/next/pages/user/state/signin.js b/next/pages/user/state/signin.js
@@ -0,0 +1,86 @@
+import React, {useEffect, useState} from 'react';
+import {useRouter} from "next/router";
+import UserLogic from "../../../src/common/user/UserLogic";
+import {ThemeProvider} from "@mui/material/styles";
+import {Alert, Button, CssBaseline, Snackbar} from "@mui/material";
+import TextField from "@mui/material/TextField";
+import HeaderAppBar from "../../../app/components/common/HeaderAppBar";
+import useThemeHandler from "../../../app/hooks/useThemeHandler";
+
+function SignIn() {
+  const {systemTheme, setSystemTheme, muiTheme} = useThemeHandler();
+
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const router = useRouter();
+  const userLogic = new UserLogic();
+
+  const [alertOpen, setAlertOpen] = useState(false);
+  const [alertMessage, setAlertMessage] = useState('');
+  const [alertSeverity, setAlertSeverity] = useState('info');
+
+  const handleSignIn = async () => {
+    try {
+      await userLogic.signIn(username, password)
+      const prevUrl = localStorage.getItem('prevUrl') || "/";
+      router.push(prevUrl);
+    } catch (e) {
+      setAlertMessage(e.message);
+      setAlertSeverity('error');
+      setAlertOpen(true);
+    }
+  };
+
+  return (
+    <ThemeProvider theme={muiTheme}>
+      <CssBaseline enableColorScheme/>
+      <div className="local-scroll-root">
+        <HeaderAppBar
+          title={"Sign In"}
+          useAuthDiv={false}
+          systemTheme={systemTheme}
+          setSystemTheme={setSystemTheme}
+        />
+        <div className="local-scroll-scrollable flex-center">
+          <div className="text-center">
+            <div className="m-2">
+              <TextField
+                label="Username"
+                variant="outlined"
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="mt-2"
+              />
+            </div>
+            <div className="m-2">
+              <TextField
+                label="Password"
+                variant="outlined"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="mt-2"
+              />
+            </div>
+            <div className="m-2">
+              <Button variant="contained" onClick={handleSignIn}>Sign In</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Snackbar
+        open={alertOpen}
+        autoHideDuration={6000}
+        onClose={() => setAlertOpen(false)}
+      >
+        <Alert onClose={() => setAlertOpen(false)} severity={alertSeverity} sx={{ width: '100%' }}>
+          {alertMessage}
+        </Alert>
+      </Snackbar>
+    </ThemeProvider>
+  );
+}
+
+export default SignIn;
diff --git a/next/pages/user/state/[action].js → next/pages/user/state/signup.js b/next/pages/user/state/[action].js → next/pages/user/state/signup.js
@@ -7,46 +7,20 @@ import TextField from "@mui/material/TextField";
 import HeaderAppBar from "../../../app/components/common/HeaderAppBar";
 import useThemeHandler from "../../../app/hooks/useThemeHandler";
 
-function Action() {
+function SignUp() {
   const {systemTheme, setSystemTheme, muiTheme} = useThemeHandler();
 
-  const [action, setAction] = useState('');
-  const [title, setTitle] = useState('');
-
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
   const router = useRouter();
   const userLogic = new UserLogic();
 
-  useEffect(() => {
-    setAction(router.query.action);
-  }, [router.query.action]);
-
-  useEffect(() => {
-    if (action === 'signin') {
-      setTitle("Sign In");
-    }
-    if (action === 'signup') {
-      setTitle("Sign Up");
-    }
-  }, [action]);
-
   const [alertOpen, setAlertOpen] = useState(false);
   const [alertMessage, setAlertMessage] = useState('');
   const [alertSeverity, setAlertSeverity] = useState('info');
 
-  const handleSignIn = async () => {
-    try {
-      await userLogic.signIn(username, password)
-      const prevUrl = localStorage.getItem('prevUrl') || "/";
-      router.push(prevUrl);
-    } catch (e) {
-      setAlertMessage(e.message);
-      setAlertSeverity('error');
-      setAlertOpen(true);
-    }
-  };
-
   const handleSignUp = async () => {
     if (!userLogic.validateInput(username)) {
       setAlertMessage("Username invalid.");
@@ -62,12 +36,19 @@ function Action() {
       return;
     }
 
+    if (password !== confirmPassword) {
+      setAlertMessage("Confirm Passwords do not match.");
+      setAlertSeverity('warning');
+      setAlertOpen(true);
+      return;
+    }
+
     try {
       await userLogic.signUp(username, password);
       setAlertMessage("Sign up success");
       setAlertSeverity('success');
       setAlertOpen(true);
-      setAction('signin');
+      router.push("/user/state/signin");
     } catch (e) {
       setAlertMessage(e.message);
       setAlertSeverity('error');
@@ -80,7 +61,7 @@ function Action() {
       <CssBaseline enableColorScheme/>
       <div className="local-scroll-root">
         <HeaderAppBar
-          title={title}
+          title="Sign Up"
           useAuthDiv={false}
           systemTheme={systemTheme}
           setSystemTheme={setSystemTheme}
@@ -108,7 +89,17 @@ function Action() {
               />
             </div>
             <div className="m-2">
-              <Button variant="contained" onClick={action === 'signin' ? handleSignIn : handleSignUp}>{title}</Button>
+              <TextField
+                label="ConfirmPassword"
+                variant="outlined"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="mt-2"
+              />
+            </div>
+            <div className="m-2">
+              <Button variant="contained" onClick={handleSignUp}>Sign Up</Button>
             </div>
           </div>
         </div>
@@ -126,4 +117,4 @@ function Action() {
   );
 }
 
-export default Action;
+export default SignUp;