[frontend] Add oauth login/signup buttons to login and signup pages

usatie · Feb 7, 2024 · a1c5a7a · a1c5a7a
1 parent f02369c
commit a1c5a7a
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 30 deletions.
diff --git a/frontend/app/(guest-only)/login/page.tsx b/frontend/app/(guest-only)/login/page.tsx
@@ -1,12 +1,5 @@
 import LoginForm from "@/app/ui/auth/login-form";
 
 export default function LoginPage() {
-  return (
-    <>
-      <LoginForm />
-      <a href={`${process.env.NEXT_PUBLIC_API_URL}/auth/login/oauth2/42`}>
-        login with 42
-      </a>
-    </>
-  );
+  return <LoginForm />;
 }
diff --git a/frontend/app/(guest-only)/signup/page.tsx b/frontend/app/(guest-only)/signup/page.tsx
@@ -2,12 +2,5 @@
 import SignUpForm from "@/app/ui/auth/signup-form";
 
 export default function SignUp() {
-  return (
-    <>
-      <SignUpForm />
-      <a href={`${process.env.NEXT_PUBLIC_API_URL}/auth/signup/oauth2/42`}>
-        sign up with 42
-      </a>
-    </>
-  );
+  return <SignUpForm />;
 }
diff --git a/frontend/app/ui/auth/login-form.tsx b/frontend/app/ui/auth/login-form.tsx
@@ -3,22 +3,43 @@
 import { authenticate } from "@/app/lib/actions";
 import { useAuthContext } from "@/app/lib/client-auth";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useFormState, useFormStatus } from "react-dom";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
+import { Separator } from "@/components/ui/separator";
 
 export default function LoginForm() {
   return (
     <>
-      <Card className="w-[300px]">
+      <Card>
         <CardHeader>
-          <CardTitle className="text-center">Pong</CardTitle>
+          <CardTitle>Log in</CardTitle>
         </CardHeader>
         <CardContent>
-          <Form />
+          <div className="flex flex-col gap-8">
+            <Form />
+            <div className="flex gap-4 w-full">
+              <Separator className="shrink self-center" />
+              OR
+              <Separator className="shrink self-center" />
+            </div>
+            <Button className="w-full" asChild>
+              <a
+                href={`${process.env.NEXT_PUBLIC_API_URL}/auth/login/oauth2/42`}
+              >
+                Login with 42
+              </a>
+            </Button>
+          </div>
         </CardContent>
       </Card>
     </>
@@ -59,15 +80,13 @@ function Form() {
           </div>
           <LoginButton />
         </div>
-        <div className="flex h-8 items-end space-x-1">
-          {code === "CredentialSignin" && (
-            <>
-              <p aria-live="polite" className="text-sm text-red-500">
-                Invalid credentials
-              </p>
-            </>
-          )}
-        </div>
+        {code === "CredentialSignin" && (
+          <div className="flex h-8 items-end space-x-1">
+            <p aria-live="polite" className="text-sm text-red-500">
+              Invalid credentials
+            </p>
+          </div>
+        )}
       </form>
     </>
   );

diff --git a/frontend/app/ui/auth/signup-form.tsx b/frontend/app/ui/auth/signup-form.tsx
@@ -1,5 +1,7 @@
 import Form from "@/app/ui/user/create-form";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 
 export default function SignUpForm() {
   return (
@@ -8,7 +10,19 @@ export default function SignUpForm() {
         <CardTitle>Create Account</CardTitle>
       </CardHeader>
       <CardContent>
-        <Form />
+        <div className="flex flex-col gap-8">
+          <Form />
+          <div className="flex gap-4 w-full">
+            <Separator className="shrink self-center" />
+            OR
+            <Separator className="shrink self-center" />
+          </div>
+          <Button className="w-full" asChild>
+            <a href={`${process.env.NEXT_PUBLIC_API_URL}/auth/login/oauth2/42`}>
+              Sign up with 42
+            </a>
+          </Button>
+        </div>
       </CardContent>
     </Card>
   );