Skip to content

Commit

Permalink
sign in page forget password function and demo user data added
Browse files Browse the repository at this point in the history
  • Loading branch information
@TajwarSaiyeed
TajwarSaiyeed committed Jan 4, 2024
1 parent ee3d56c commit 52eeb80
Showing 1 changed file with 192 additions and 171 deletions.
363 changes: 192 additions & 171 deletions app/(auth)/signin/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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: "[email protected]",*/}
{/* password: '123456Abid'*/}
{/* })*/}
{/* }}*/}
{/* size={'small'}*/}
{/* variant="contained"*/}
{/* >*/}
{/* Role as Admin*/}
{/* </Button>*/}
{/* <Button*/}
{/* onClick={() => {*/}
{/* setTestUser({*/}
{/* email: "[email protected]",*/}
{/* password: '123456Abid'*/}
{/* })*/}
{/* }}*/}
{/* size={'small'}*/}
{/* variant="contained"*/}
{/* >*/}
{/* Role as Trainer*/}
{/* </Button>*/}
{/* <Button*/}
{/* onClick={() => {*/}
{/* setTestUser({*/}
{/* email: "[email protected]",*/}
{/* 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: "[email protected]",
password: "123456Abid",
});
}}
size={"small"}
variant="contained"
>
Role as Admin
</Button>
<Button
onClick={() => {
setTestUser({
email: "[email protected]",
password: "123456Abid",
});
}}
size={"small"}
variant="contained"
>
Role as Trainer
</Button>
<Button
onClick={() => {
setTestUser({
email: "[email protected]",
password: "123456Abid",
});
}}
size={"small"}
variant="contained"
>
Role as User
</Button>
</Box>

</Container>
</ThemeProvider>
);
}

0 comments on commit 52eeb80

Please sign in to comment.