Tweak auth pages for smaller screens (vercel#467)

kobe-helicopter-laoda · Oct 30, 2024 · 29f095b · 29f095b
1 parent 029cbb8
commit 29f095b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 42 deletions.
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
@@ -1,44 +1,44 @@
-"use client";
+'use client';
 
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useActionState, useEffect, useState } from "react";
-import { toast } from "sonner";
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useActionState, useEffect, useState } from 'react';
+import { toast } from 'sonner';
 
-import { AuthForm } from "@/components/custom/auth-form";
-import { SubmitButton } from "@/components/custom/submit-button";
+import { AuthForm } from '@/components/custom/auth-form';
+import { SubmitButton } from '@/components/custom/submit-button';
 
-import { login, LoginActionState } from "../actions";
+import { login, LoginActionState } from '../actions';
 
 export default function Page() {
   const router = useRouter();
 
-  const [email, setEmail] = useState("");
+  const [email, setEmail] = useState('');
 
   const [state, formAction] = useActionState<LoginActionState, FormData>(
     login,
     {
-      status: "idle",
-    },
+      status: 'idle',
+    }
   );
 
   useEffect(() => {
-    if (state.status === "failed") {
-      toast.error("Invalid credentials!");
-    } else if (state.status === "invalid_data") {
-      toast.error("Failed validating your submission!");
-    } else if (state.status === "success") {
+    if (state.status === 'failed') {
+      toast.error('Invalid credentials!');
+    } else if (state.status === 'invalid_data') {
+      toast.error('Failed validating your submission!');
+    } else if (state.status === 'success') {
       router.refresh();
     }
   }, [state.status, router]);
 
   const handleSubmit = (formData: FormData) => {
-    setEmail(formData.get("email") as string);
+    setEmail(formData.get('email') as string);
     formAction(formData);
   };
 
   return (
-    <div className="flex h-screen w-screen items-center justify-center bg-background">
+    <div className="flex h-dvh w-screen items-start pt-12 md:pt-0 md:items-center justify-center bg-background">
       <div className="w-full max-w-md overflow-hidden rounded-2xl flex flex-col gap-12">
         <div className="flex flex-col items-center justify-center gap-2 px-4 text-center sm:px-16">
           <h3 className="text-xl font-semibold dark:text-zinc-50">Sign In</h3>
@@ -56,7 +56,7 @@ export default function Page() {
             >
               Sign up
             </Link>
-            {" for free."}
+            {' for free.'}
           </p>
         </AuthForm>
       </div>

diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
@@ -1,46 +1,46 @@
-"use client";
+'use client';
 
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useActionState, useEffect, useState } from "react";
-import { toast } from "sonner";
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useActionState, useEffect, useState } from 'react';
+import { toast } from 'sonner';
 
-import { AuthForm } from "@/components/custom/auth-form";
-import { SubmitButton } from "@/components/custom/submit-button";
+import { AuthForm } from '@/components/custom/auth-form';
+import { SubmitButton } from '@/components/custom/submit-button';
 
-import { register, RegisterActionState } from "../actions";
+import { register, RegisterActionState } from '../actions';
 
 export default function Page() {
   const router = useRouter();
 
-  const [email, setEmail] = useState("");
+  const [email, setEmail] = useState('');
   const [state, formAction] = useActionState<RegisterActionState, FormData>(
     register,
     {
-      status: "idle",
-    },
+      status: 'idle',
+    }
   );
 
   useEffect(() => {
-    if (state.status === "user_exists") {
-      toast.error("Account already exists");
-    } else if (state.status === "failed") {
-      toast.error("Failed to create account");
-    } else if (state.status === "invalid_data") {
-      toast.error("Failed validating your submission!");
-    } else if (state.status === "success") {
-      toast.success("Account created successfully");
+    if (state.status === 'user_exists') {
+      toast.error('Account already exists');
+    } else if (state.status === 'failed') {
+      toast.error('Failed to create account');
+    } else if (state.status === 'invalid_data') {
+      toast.error('Failed validating your submission!');
+    } else if (state.status === 'success') {
+      toast.success('Account created successfully');
       router.refresh();
     }
   }, [state, router]);
 
   const handleSubmit = (formData: FormData) => {
-    setEmail(formData.get("email") as string);
+    setEmail(formData.get('email') as string);
     formAction(formData);
   };
 
   return (
-    <div className="flex h-screen w-screen items-center justify-center bg-background">
+    <div className="flex h-dvh w-screen items-start pt-12 md:pt-0 md:items-center justify-center bg-background">
       <div className="w-full max-w-md overflow-hidden rounded-2xl gap-12 flex flex-col">
         <div className="flex flex-col items-center justify-center gap-2 px-4 text-center sm:px-16">
           <h3 className="text-xl font-semibold dark:text-zinc-50">Sign Up</h3>
@@ -51,14 +51,14 @@ export default function Page() {
         <AuthForm action={handleSubmit} defaultEmail={email}>
           <SubmitButton>Sign Up</SubmitButton>
           <p className="text-center text-sm text-gray-600 mt-4 dark:text-zinc-400">
-            {"Already have an account? "}
+            {'Already have an account? '}
             <Link
               href="/login"
               className="font-semibold text-gray-800 hover:underline dark:text-zinc-200"
             >
               Sign in
             </Link>
-            {" instead."}
+            {' instead.'}
           </p>
         </AuthForm>
       </div>