Solved the login component duplicated issues

Author: HuanFengYeh

components/Login/login.tsx

@@ -1,36 +1,96 @@
-import { useTranslation } from "next-i18next"
-import styled from "styled-components"
-import { Container } from "../bootstrap"
-import { SignInWithButton } from "components/auth"
-
-export default function LoginPage() {
-  const { t } = useTranslation("auth")
-
-  const StyledContainer = styled(Container)`
-    @media (min-width: 768px) {
-    }
-  `
-
-  return (
-    <StyledContainer>
-      <div className={`bg-white my-3 overflow-hidden rounded-3`}>
-        <div className={`align-items-center d-flex px-2 pt-2 pb-0`}>
-          <div className={`px-3 py-0`}>
-            <div className={`align-items-start fs-5 lh-sm mb-1 text-secondary`}>
-              {t("probablySignedOut")}
-            </div>
-            <br />
-            <div className={`align-items-start fs-5 lh-sm mb-1 text-secondary`}>
-              {t("pleaseConsider")}
-            </div>
-            <br />
-            <div className={`justify-content-center d-flex w-100`}>
-              <SignInWithButton />
-            </div>
-            <br />
-          </div>
-        </div>
-      </div>
-    </StyledContainer>
-  )
-}
+import { useForm } from "react-hook-form"
+ import { useRouter } from "next/router"
+ import {
+   useSignInWithEmailAndPassword,
+   SignInWithEmailAndPasswordData
+ } from "../auth/hooks"
+ import {
+   Form,
+   Stack,
+   Alert,
+   Container,
+   Row,
+   Col,
+   Card
+ } from "../bootstrap"
+ import Input from "../forms/Input"
+ import PasswordInput from "../forms/PasswordInput"
+ import { useTranslation } from "next-i18next"
+ import { LoadingButton } from "../buttons"
+ import SocialSignOnButtons from "components/auth/SocialSignOnButtons"
+ import Divider from "../Divider/Divider"
+
+ export default function Login() {
+   const router = useRouter()
+   const redirect = (router.query.redirect as string) || "/"
+   console.log(redirect);
+   
+   const { t } = useTranslation("auth")
+
+   const {
+     register,
+     handleSubmit,
+     formState: { errors }
+   } = useForm<SignInWithEmailAndPasswordData>()
+
+   const signIn = useSignInWithEmailAndPassword()
+
+   const success = () => {
+     const safeRedirect = redirect.startsWith("/") ? redirect : "/"
+     router.replace(safeRedirect)
+   }
+   const onSubmit = handleSubmit(credentials => {
+     signIn.execute(credentials).then(success)
+   })
+
+   return (
+     <Container className="py-5">
+       <Row className="justify-content-center">
+         <Col xs={12} sm={10} md={8} lg={6}>
+           <Card className="p-4 shadow-lg">
+             <h2 className="text-center mb-4">{t("signInToAccess")}</h2>
+
+             <Form onSubmit={onSubmit} noValidate>
+               {signIn.error && (
+                 <Alert variant="danger">{signIn.error.message}</Alert>
+               )}
+
+               <Stack gap={3}>
+                 <Input
+                   label={t("email")}
+                   type="email"
+                   {...register("email", {
+                     required: t("emailIsRequired") ?? "Email is required"
+                   })}
+                   error={errors.email?.message}
+                 />
+
+                 <PasswordInput
+                   label={t("password")}
+                   {...register("password", {
+                     required: t("passwordRequired") ?? "Password is required"
+                   })}
+                   error={errors.password?.message}
+                 />
+
+                 <LoadingButton
+                   type="submit"
+                   className="w-100"
+                   loading={signIn.loading}
+                 >
+                   {t("signIn")}
+                 </LoadingButton>
+
+                 <Divider className="px-4">{t("or")}</Divider>
+
+                 <SocialSignOnButtons
+                   onComplete={() => router.replace(redirect)}
+                 />
+               </Stack>
+             </Form>
+           </Card>
+         </Col>
+       </Row>
+     </Container>
+   )
+ }

pages/login.tsx

@@ -1,5 +1,5 @@
 import { createPage } from "../components/page"
-import Login from "components/Login/Login"
+import Login from "components/Login/login"
 
 export default createPage({
   title: "Login",

public/locales/en/auth.json

@@ -56,5 +56,6 @@
   "verifyLinkSent": "Please verify your email for your account by clicking the verification link we sent to your email. You will be required to verify your email before submitting testimony.",
   "setUpProfile": "Set Up Your Profile",
   "probablySignedOut": "You were possibly signed out while trying to go to a page that needs to be signed in to function",
-  "pleaseConsider": "Please consider logging in first:"
+  "pleaseConsider": "Please consider logging in first:",
+  "signInToAccess": "Login required to access the contents"
 }