From 08ef306495fd1641a2a3f45b754ea12bff5d11b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Wed, 5 Jul 2023 19:04:40 +0200
Subject: [PATCH] fix: fixed auth form

---
 app/(auth)/sign-up/page.tsx    |  1 +
 components/ui/Input.tsx        |  2 +-
 components/ui/UserAuthForm.tsx | 14 ++++++++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/(auth)/sign-up/page.tsx b/app/(auth)/sign-up/page.tsx
index 4fe95fd..dc31442 100644
--- a/app/(auth)/sign-up/page.tsx
+++ b/app/(auth)/sign-up/page.tsx
@@ -1,4 +1,5 @@
 import UserAuthForm from '@/components/ui/UserAuthForm';
+import Link from 'next/link';
 
 export default function Page() {
   return (
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
index 9090c86..ad2a0fe 100644
--- a/components/ui/Input.tsx
+++ b/components/ui/Input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-highlight-primary bg-highlight-primary px-3 py-2 text-sm ring-offset-highlight-primary file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-md border border-primary-600 bg-highlight-primary px-3 py-2 text-sm ring-offset-highlight-primary file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted focus:bg-primary-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}
diff --git a/components/ui/UserAuthForm.tsx b/components/ui/UserAuthForm.tsx
index 7d691e6..5a9c007 100644
--- a/components/ui/UserAuthForm.tsx
+++ b/components/ui/UserAuthForm.tsx
@@ -2,12 +2,13 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import cookies from 'js-cookie';
+import { Loader2 } from 'lucide-react';
 import { usePathname, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
-import { Loader2 } from 'lucide-react';
 
+import AppLink from '@/components/ui/AppLink';
 import { Button } from '@/components/ui/Button';
 import {
   Form,
@@ -106,7 +107,10 @@ export default function UserAuthForm() {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex w-52 flex-col justify-center space-y-4 sm:w-72"
+      >
         {!isSignIn && (
           <>
             <FormField
@@ -180,6 +184,12 @@ export default function UserAuthForm() {
           {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
           {isSignIn ? 'Se connecter' : "S'inscrire"}
         </Button>
+        <p className="flex flex-col items-center text-sm text-muted">
+          {isSignIn ? "Vous n'avez pas de compte?" : 'Vous possédez un compte?'}{' '}
+          <AppLink className="text-brand underline" href={isSignIn ? '/sign-up' : '/sign-in'}>
+            {isSignIn ? "S'inscrire maintenant" : 'Se connecter'}
+          </AppLink>
+        </p>
       </form>
     </Form>
   );