update Login

src/components/loginSteps/LoginComponent.tsx

@@ -22,16 +22,18 @@ const LoginComponent = ({ onChange, setPhone }: StepType) => {
         setPhone(phone);
         if (phone) {
             if (phone.length == 12) {
-              toast.success(" Success!", { autoClose: 1500 });
-                      setTimeout(() => {
-                        onChange(2);
-                      }, 3000);
+
+
+                toast.success(" Success!", { autoClose: 1500 });
+                setTimeout(() => {
+                    onChange(2);
+                }, 3000);
             } else {
-                toast.error(" Fail!", { autoClose: 1500 });
+                toast.error(" Số điện thoại của bạn dường như chưa chính xác.", { autoClose: 1500 });
                 setError("Số điện thoại của bạn dường như chưa chính xác.");
             }
         } else {
-            toast.error(" Fail!", { autoClose: 1500 });
+            toast.error(" Vui lòng nhập số điện thoại của bạn", { autoClose: 1500 });
             setError("Vui lòng nhập số điện thoại của bạn");
         }
     };

src/pages/login.tsx

@@ -7,7 +7,7 @@ import RegistrationSuccess   from '@components/loginSteps//RegistrationSuccess';
 import { useState } from "react";
 
 function ActiveStepFormComponent(){
-	const [step,setStep] = useState<number>(4);
+	const [step,setStep] = useState<number>(1);
 	const [phone,setPhone] = useState<string>("");
     const [height,setHeight] = useState<number>(0);
     const [weight,setWeight] = useState<number>(0);

src/pages/profile.tsx

@@ -0,0 +1,59 @@
+import { Button, Flex, Text } from '@chakra-ui/react';
+import { GetServerSideProps, GetServerSidePropsContext } from 'next';
+import { getSession, signOut, useSession } from 'next-auth/react';
+
+export default function Profile() {
+  const { data: session } = useSession();
+
+  return (
+    <Flex
+      w={'50%'}
+      mx={'auto'}
+      flexDirection={'column'}
+      justifyContent={'center'}
+      my={5}
+      fontFamily={'monospace'}
+    >
+      <Text textAlign={'center'}>
+        Welcome {session?.user?.name} to our website
+      </Text>
+      <Button
+        my={5}
+        borderRadius={'full'}
+        bgColor={'red'}
+        fontFamily={'monospace'}
+        color={'white'}
+        w={'60%'}
+        mx={'auto'}
+        _hover={{
+          bgColor: 'transparent',
+          color: 'red',
+          border: '2px solid red',
+        }}
+        onClick={() => signOut()}
+      >
+        Sign Out
+      </Button>
+    </Flex>
+  );
+}
+
+//@ts-ignore
+export const getServerSideProps: GetServerSideProps = async (
+  context: GetServerSidePropsContext
+) => {
+  const session = await getSession({ req: context.req });
+
+  if (!session) {
+    return {
+      redirect: {
+        destination: '/',
+        permananet: false,
+      },
+    };
+  }
+
+  return {
+    props: { session },
+  };
+};

src/styles/Home.module.css

@@ -0,0 +1,129 @@
+.container {
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.title a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+  text-decoration: underline;
+}
+
+.title {
+  margin: 0;
+  line-height: 1.15;
+  font-size: 4rem;
+}
+
+.title,
+.description {
+  text-align: center;
+}
+
+.description {
+  margin: 4rem 0;
+  line-height: 1.5;
+  font-size: 1.5rem;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 800px;
+}
+
+.card {
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  max-width: 300px;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  color: #0070f3;
+  border-color: #0070f3;
+}
+
+.card h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+}
+
+.card p {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.logo {
+  height: 1em;
+  margin-left: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    width: 100%;
+    flex-direction: column;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .card,
+  .footer {
+    border-color: #222;
+  }
+  .code {
+    background: #111;
+  }
+  .logo img {
+    filter: invert(1);
+  }
+}

src/utils/hash.ts

@@ -0,0 +1,14 @@
+import { compare, hash } from 'bcryptjs';
+
+export async function hashPassword(password: string) {
+  const hashedPassword = await hash(password, 12);
+  return hashedPassword;
+}
+
+export async function isPasswordValid(
+  password: string,
+  hashedPassword: string
+) {
+  const isValid = await compare(password, hashedPassword);
+  return isValid;
+}

src/utils/nodemailer.ts

@@ -0,0 +1,11 @@
+import nodemailer from 'nodemailer';
+
+const email = process.env.EMAIL;
+const pass = process.env.EMAIL_PASS;
+export const transporter = nodemailer.createTransport({
+  service: 'gmail',
+  auth: {
+    user: email,
+    pass,
+  },
+});