Add email to user registration/login flows

src/api/client.ts

@@ -21,16 +21,21 @@ interface AccessResponse {
   jwtToken: string;
 }
 
-export const login = async (name: string, password: string) => {
+export const login = async (email: string, password: string) => {
   const response = (await axios.post("/access/login", {
-    name,
+    email,
     password,
   })) as AxiosResponse<AccessResponse>;
   setJwtToken(response.data.jwtToken);
 };
 
-export const registerUser = async (name: string, password: string) => {
+export const registerUser = async (
+  email: string,
+  name: string,
+  password: string,
+) => {
   const response = (await axios.post("/access/register", {
+    email,
     name,
     password,
   })) as AxiosResponse<AccessResponse>;

src/pages/auth/Login.tsx

@@ -1,23 +1,15 @@
 import { useState } from "react";
 import { login } from "../../api/client";
 import { useNavigate } from "react-router";
-import {
+import { Button, Grid, TextField, Typography } from "@mui/material";
-  Button,
-  Checkbox,
-  FormControlLabel,
-  Grid,
-  TextField,
-  Typography,
-} from "@mui/material";
 
 export const Login = () => {
-  const [userName, setUserName] = useState("");
+  const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [rememberMe, setRememberMe] = useState(false);
   const navigate = useNavigate();
 
   const handleLoginFlow = () =>
-    login(userName, password).then(() => {
+    login(email, password).then(() => {
       navigate("/signup");
     });
 
@@ -25,9 +17,9 @@ export const Login = () => {
     <Grid container direction="column" spacing={2} alignItems="center">
       <Typography variant="h3">Login</Typography>
       <TextField
-        value={userName}
+        value={email}
-        onChange={(e) => setUserName(e.target.value)}
+        onChange={(e) => setEmail(e.target.value)}
-        placeholder="User"
+        placeholder="Email"
       />
       <TextField
         type="password"
@@ -35,15 +27,6 @@ export const Login = () => {
         onChange={(e) => setPassword(e.target.value)}
         placeholder="Password"
       />
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={rememberMe}
-            onChange={() => setRememberMe(!rememberMe)}
-          />
-        }
-        label="Remember me"
-      />
       <Button
         onClick={handleLoginFlow}
         variant="contained"

src/pages/auth/Register.tsx

@@ -12,6 +12,7 @@ import {
 } from "@mui/material";
 
 export const Register = () => {
+  const [email, setEmail] = useState("");
   const [userName, setUserName] = useState("");
   const [password, setPassword] = useState("");
   const [passwordConfirm, setPasswordConfirm] = useState("");
@@ -48,8 +49,22 @@ export const Register = () => {
     }
   }
 
+  const emailSchema = zod.email();
+  let emailErrors: string[] = [];
+  try {
+    emailSchema.parse(email);
+  } catch (e: unknown) {
+    if (e instanceof zod.ZodError) {
+      emailErrors = e.issues.map((issue) => issue.message);
+    } else {
+      throw e;
+    }
+  }
+
+  const allErrors = [...emailErrors, ...passwordErrors];
+
   const handleRegisterFlow = () =>
-    registerUser(userName, password).then(() => {
+    registerUser(email, userName, password).then(() => {
       navigate("/signup");
     });
 
@@ -57,6 +72,11 @@ export const Register = () => {
     <>
       <Grid container direction="column" spacing={2} alignItems="center">
         <Typography variant="h3">Register</Typography>
+        <TextField
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="Email"
+        />
         <TextField
           value={userName}
           onChange={(e) => setUserName(e.target.value)}
@@ -75,7 +95,7 @@ export const Register = () => {
           placeholder="Confirm password"
         />
         <Button
-          disabled={passwordErrors.length !== 0}
+          disabled={allErrors.length !== 0}
           variant="contained"
           color="primary"
           sx={{ width: "100%" }}
@@ -92,7 +112,7 @@ export const Register = () => {
           Login
         </Button>
       </Grid>
-      {!!passwordErrors.length && (
+      {!!allErrors.length && (
         <Paper
           elevation={2}
           sx={{
@@ -104,7 +124,7 @@ export const Register = () => {
           }}
         >
           <Grid container direction="column" spacing={2}>
-            {passwordErrors.map((error) => (
+            {allErrors.map((error) => (
               <Alert severity="error">{error}</Alert>
             ))}
           </Grid>