FIX: some bugs in Auth section

Co-Authored-By: ruru <[email protected]>
cocola-dev · Feb 24, 2024 · dd59a58 · dd59a58
1 parent e221d35
commit dd59a58
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 12 deletions.
diff --git a/app/(auth)/loading.tsx b/app/(auth)/loading.tsx
@@ -1,5 +1,18 @@
-import Loader from "@/components/Loader";
+import Loader2 from "@/components/Loader2";
+import { CardWrapper } from "@/components/auth/card-wrapper";
 
 export default function Loading() {
-  return <Loader />;
+  return (
+    <>
+      <CardWrapper
+        headerLabel="Welcome back"
+        backButtonLabel=""
+        backButtonHref="/register"
+      >
+        <div className="w-full h-auto my-10 flex justify-center items-center">
+          <Loader2 />
+        </div>
+      </CardWrapper>
+    </>
+  );
 }
diff --git a/components/Loader2.tsx b/components/Loader2.tsx
@@ -1,6 +1,6 @@
 const Loader2 = ({ size }: { size?: number }) => {
   return (
-    <div className="flex space-x-2 w-full fixed bg-card  justify-center items-center">
+    <div className="flex space-x-2 w-full fixed bg-transparent justify-center items-center">
       <div className=" flex justify-center items-center">
         {size ? (
           <svg

diff --git a/components/auth/card-wrapper.tsx b/components/auth/card-wrapper.tsx
@@ -32,9 +32,16 @@ export const CardWrapper = ({
       </CardHeader>
       <CardContent>{children}</CardContent>
       {showSocial && (
-        <CardFooter>
-          <Social />
-        </CardFooter>
+        <>
+          <div className="flex items-center mt-4 mx-5 mb-4">
+            <div className="border-t border flex-grow"></div>
+            <div className="mx-4 text-muted-foreground">OR</div>
+            <div className="border-t border flex-grow"></div>
+          </div>
+          <CardFooter>
+            <Social />
+          </CardFooter>
+        </>
       )}
       <CardFooter>
         <BackButton label={backButtonLabel} href={backButtonHref} />

diff --git a/components/auth/login-form.tsx b/components/auth/login-form.tsx
@@ -75,7 +75,7 @@ export const LoginForm = () => {
       headerLabel="Welcome back"
       backButtonLabel="Don't have an account?"
       backButtonHref="/register"
-      showSocial
+      // showSocial
     >
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
@@ -189,11 +189,11 @@ export const LoginForm = () => {
           <Button disabled={isPending} type="submit" className="w-full">
             {showTwoFactor ? "Confirm" : "Login"}
           </Button>
-          <div className="flex items-center mt-4 mb-4">
+          {/* <div className="flex items-center mt-4 mb-4">
             <div className="border-t border flex-grow"></div>
             <div className="mx-4 text-muted-foreground">OR</div>
             <div className="border-t border flex-grow"></div>
-          </div>
+          </div> */}
         </form>
       </Form>
     </CardWrapper>

diff --git a/components/auth/register-form.tsx b/components/auth/register-form.tsx
@@ -56,7 +56,7 @@ export const RegisterForm = () => {
       headerLabel="Create an account"
       backButtonLabel="Already have an account?"
       backButtonHref="/login"
-      showSocial
+      // showSocial
     >
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
@@ -120,11 +120,11 @@ export const RegisterForm = () => {
           <Button disabled={isPending} type="submit" className="w-full">
             Create an account
           </Button>
-          <div className="flex items-center mt-4 mb-4">
+          {/* <div className="flex items-center mt-4 mb-4">
             <div className="border-t border flex-grow"></div>
             <div className="mx-4 text-muted-foreground">OR</div>
             <div className="border-t border flex-grow"></div>
-          </div>
+          </div> */}
         </form>
       </Form>
     </CardWrapper>