From 52eeb807667b0210dd51962836576cee7a95dbf3 Mon Sep 17 00:00:00 2001
From: TajwarSaiyeed <rjabid36@gmail.com>
Date: Thu, 4 Jan 2024 11:57:51 +0600
Subject: [PATCH] sign in page forget password function and demo user data
 added

---
 app/(auth)/signin/page.tsx | 363 ++++++++++++++++++++-----------------
 1 file changed, 192 insertions(+), 171 deletions(-)

diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx
index 77edba6..8ae7306 100644
--- a/app/(auth)/signin/page.tsx
+++ b/app/(auth)/signin/page.tsx
@@ -1,194 +1,215 @@
-"use client"
+"use client";
 
-import {useState} from "react";
+import { useState } from "react";
 import toast from "react-hot-toast";
 import Loader from "@/app/components/Loader/Loader";
-import {useSession, signIn} from "next-auth/react";
-import {redirect, useRouter} from "next/navigation";
-import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
-import {createTheme, ThemeProvider} from '@mui/material/styles';
-import {FieldValues, SubmitHandler, useForm} from "react-hook-form";
-import {Grid, Link, Avatar, Button, CssBaseline, TextField, Box, Typography, Container} from '@mui/material/';
+import { useSession, signIn } from "next-auth/react";
+import { redirect, useRouter } from "next/navigation";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
+import {
+  Grid,
+  Link,
+  Avatar,
+  Button,
+  CssBaseline,
+  TextField,
+  Box,
+  Typography,
+  Container,
+} from "@mui/material/";
 
 const defaultTheme = createTheme();
 
 export default function SignInPage() {
-    const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
-    const [testUser, setTestUser] = useState<{
-        email: string,
-        password: string
-    }>({
-        email: "",
-        password: ""
-    })
-
-    const {status} = useSession();
-
-    const {
-        register,
-        handleSubmit,
-        formState: {errors},
-    } = useForm<FieldValues>({
-        defaultValues: {
-            email: "",
-            password: "",
-        },
-    });
-    const router = useRouter();
+  const [testUser, setTestUser] = useState<{
+    email: string;
+    password: string;
+  }>({
+    email: "",
+    password: "",
+  });
 
-    const handleSignIn: SubmitHandler<FieldValues> = (data) => {
-        setIsSubmitting(true);
-        signIn("credentials", {
-            ...data,
-            redirect: false,
-        }).then((callback) => {
-            if (callback?.ok && callback?.error === undefined) {
-                toast.success("Logged in successfully!");
-                router.refresh();
-            }
+  const { status } = useSession();
 
-            if (callback?.error) {
-                toast.error(callback.error);
-            }
-        }).finally(() => {
-            setIsSubmitting(false)
-        })
-    };
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FieldValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+  const router = useRouter();
 
-    if (status === "loading") {
-        return <Loader/>;
-    }
+  const handleSignIn: SubmitHandler<FieldValues> = (data) => {
+    setIsSubmitting(true);
+    signIn("credentials", {
+      ...data,
+      redirect: false,
+    })
+      .then((callback) => {
+        if (callback?.ok && callback?.error === undefined) {
+          toast.success("Logged in successfully!");
+          router.refresh();
+        }
 
-    if (status === "authenticated") {
-        return redirect("/");
-    }
+        if (callback?.error) {
+          toast.error(callback.error);
+        }
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+      });
+  };
 
-    return (
-        <ThemeProvider theme={defaultTheme}>
-            <Container component="main" maxWidth="sm">
-                <CssBaseline/>
-                <Box
-                    sx={{
-                        marginTop: 8,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                    }}
-                >
-                    <Avatar sx={{m: 1, backgroundColor: 'secondary.main'}}>
-                        <LockOutlinedIcon/>
-                    </Avatar>
-                    <Typography component="h1" variant="h5">
-                        Sign in
-                    </Typography>
-                    <Box component="form" noValidate onSubmit={handleSubmit(handleSignIn)} sx={{mt: 1}}>
-                        <TextField
-                            margin="normal"
-                            // value={testUser.email}
-                            required
-                            fullWidth
-                            id="email"
-                            label="Email Address"
-                            autoComplete="email"
-                            autoFocus
-                            {...register("email", {
-                                required: "This field is required",
-                            })}
-                            error={!!errors?.email?.message}
-                            helperText={
-                                errors?.email && typeof errors?.email?.message === "string"
-                                    ? errors?.email?.message
-                                    : null
-                            }
-                        />
+  if (status === "loading") {
+    return <Loader />;
+  }
 
-                        <TextField
-                            margin="normal"
-                            // value={testUser.password}
-                            required
-                            fullWidth
-                            label="Password"
-                            type="password"
-                            id="password"
-                            autoComplete="current-password"
-                            {...register("password", {
-                                required: "This field is required",
-                            })}
-                            error={!!errors?.password?.message}
-                            helperText={
-                                errors?.password && typeof errors?.password?.message === "string"
-                                    ? errors?.password?.message
-                                    : null
-                            }
-                        />
+  if (status === "authenticated") {
+    return redirect("/");
+  }
 
-                        <Button
-                            type="submit"
-                            fullWidth
-                            variant="contained"
-                            sx={{mt: 3, mb: 2}}
-                        >
-                            {isSubmitting ? "Signing in..." : "Sign in"}
-                        </Button>
-                    </Box>
-                </Box>
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <Container component="main" maxWidth="sm">
+        <CssBaseline />
+        <Box
+          sx={{
+            marginTop: 8,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <Avatar sx={{ m: 1, backgroundColor: "secondary.main" }}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          <Box
+            component="form"
+            noValidate
+            onSubmit={handleSubmit(handleSignIn)}
+            sx={{ mt: 1 }}
+          >
+            <TextField
+              margin="normal"
+              value={testUser.email}
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              autoComplete="email"
+              autoFocus
+              {...register("email", {
+                required: "This field is required",
+              })}
+              error={!!errors?.email?.message}
+              helperText={
+                errors?.email && typeof errors?.email?.message === "string"
+                  ? errors?.email?.message
+                  : null
+              }
+            />
 
-                {/*<Box sx={{*/}
-                {/*    display: "flex",*/}
-                {/*    justifyContent: "center",*/}
-                {/*    alignItems: "center",*/}
-                {/*    gap: 1,*/}
-                {/*    flexDirection: {*/}
-                {/*        xs: "column",*/}
-                {/*        sm: "row"*/}
-                {/*    }*/}
-                {/*}}>*/}
-                {/*    <Button*/}
-                {/*        onClick={() => {*/}
-                {/*            setTestUser({*/}
-                {/*                email: "rjabid36@gmail.com",*/}
-                {/*                password: '123456Abid'*/}
-                {/*            })*/}
-                {/*        }}*/}
-                {/*        size={'small'}*/}
-                {/*        variant="contained"*/}
-                {/*    >*/}
-                {/*        Role as Admin*/}
-                {/*    </Button>*/}
-                {/*    <Button*/}
-                {/*        onClick={() => {*/}
-                {/*            setTestUser({*/}
-                {/*                email: "test1@gmail.com",*/}
-                {/*                password: '123456Abid'*/}
-                {/*            })*/}
-                {/*        }}*/}
-                {/*        size={'small'}*/}
-                {/*        variant="contained"*/}
-                {/*    >*/}
-                {/*        Role as Trainer*/}
-                {/*    </Button>*/}
-                {/*    <Button*/}
-                {/*        onClick={() => {*/}
-                {/*            setTestUser({*/}
-                {/*                email: "test2@gmail.com",*/}
-                {/*                password: '123456Abid'*/}
-                {/*            })*/}
-                {/*        }}*/}
-                {/*        size={'small'}*/}
-                {/*        variant="contained"*/}
-                {/*    >*/}
-                {/*        Role as User*/}
-                {/*    </Button>*/}
-                {/*</Box>*/}
-                <Grid container>
+            <TextField
+              margin="normal"
+              value={testUser.password}
+              required
+              fullWidth
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+              {...register("password", {
+                required: "This field is required",
+              })}
+              error={!!errors?.password?.message}
+              helperText={
+                errors?.password &&
+                typeof errors?.password?.message === "string"
+                  ? errors?.password?.message
+                  : null
+              }
+            />
+              <Grid container>
                     <Grid item xs ml={1}>
                         <Link href="/forgot-password" variant="body2">
                             Forgot password?
                         </Link>
                     </Grid>
                 </Grid>
-            </Container>
-        </ThemeProvider>
-    );
+
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+            >
+              {isSubmitting ? "Signing in..." : "Sign in"}
+            </Button>
+          </Box>
+        </Box>
+
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 1,
+            flexDirection: {
+              xs: "column",
+              sm: "row",
+            },
+          }}
+        >
+          <Button
+            onClick={() => {
+              setTestUser({
+                email: "rjabid36@gmail.com",
+                password: "123456Abid",
+              });
+            }}
+            size={"small"}
+            variant="contained"
+          >
+            Role as Admin
+          </Button>
+          <Button
+            onClick={() => {
+              setTestUser({
+                email: "test1@gmail.com",
+                password: "123456Abid",
+              });
+            }}
+            size={"small"}
+            variant="contained"
+          >
+            Role as Trainer
+          </Button>
+          <Button
+            onClick={() => {
+              setTestUser({
+                email: "test2@gmail.com",
+                password: "123456Abid",
+              });
+            }}
+            size={"small"}
+            variant="contained"
+          >
+            Role as User
+          </Button>
+        </Box>
+      
+      </Container>
+    </ThemeProvider>
+  );
 }
\ No newline at end of file