FROS-3 Login registeration auth

.env.example

@@ -1,11 +1,4 @@
-# Environment variables declared in this file are automatically made available to Prisma.
-# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
-
-# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB. 
-# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
-
-DATABASE_URL="postgresql://..."
 
 NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
 NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
-PROJECT_ID=SUPABASE_REFERENCE_ID
+PROJECT_ID=SUPABASE_REFERENCE_ID

components/Auth.tsx

@@ -0,0 +1,74 @@
+import { Dispatch, SetStateAction } from 'react';
+import Login from './forms/Login';
+import Register from './forms/Register';
+import PasswordReset from './forms/PasswordReset';
+import { useState } from 'react';
+
+export default function Auth({
+  type,
+  setAuthType,
+}: {
+  type: 'login' | 'register' | 'resetPassword';
+  setAuthType: Dispatch<SetStateAction<'login' | 'register' | 'resetPassword'>>;
+}) {
+  const [serverError, setServerError] = useState<null | string>(null);
+
+  return (
+    <div className="basis-3/4 flex flex-col w-12 ">
+      <p className="text-red-700  font-bold flex items-center justify-center">
+        {serverError ?? serverError}
+      </p>
+      <div className={`flex flex-col  ${serverError ? '' : 'mt-5'}`}>
+        {renderAuth(type, setServerError, setAuthType)}
+      </div>
+      {type == 'login' ? (
+        <div className=" flex justify-center mt-9">
+          <div className="text-frost-600 text-lg">
+            Not registered?{'  '}
+            <span
+              className="hover:cursor-pointer text-frost-900 font-bold hover:text-frost-500 drop-shadow-xl "
+              onClick={() => setAuthType('register')}
+            >
+              Sign up now
+            </span>
+          </div>
+        </div>
+      ) : (
+        <div className=" flex justify-center mt-7">
+          <div className="text-frost-600 text-lg">
+            Have an account?{' '}
+            <span
+              className="hover:cursor-pointer text-frost-900 font-bold hover:text-frost-500 drop-shadow-xl "
+              onClick={() => setAuthType('login')}
+            >
+              Login here
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function renderAuth(
+  type: 'login' | 'register' | 'resetPassword', 
+  setServerError: Dispatch<SetStateAction<string | null>>, 
+  setAuthType: Dispatch<SetStateAction<'login' | 'register' | 'resetPassword'>>
+) {
+  switch (type) {
+  case 'login':
+    return (
+      <Login setServerError={setServerError} setAuthType={setAuthType} />
+    );
+  case 'register':
+    return (
+      <Register setServerError={setServerError} setAuthType={setAuthType} />
+    );
+  case 'resetPassword':
+    return <PasswordReset setServerError={setServerError} setAuthType={setAuthType} />;
+  default:
+    return (
+      <Login setServerError={setServerError} setAuthType={setAuthType} />
+    );
+  }
+}

components/forms/Login.tsx

@@ -0,0 +1,117 @@
+import { Dispatch, SetStateAction } from 'react';
+import styles from '@/styles/Auth.module.css';
+import {
+  createSessionSchema,
+  CreateSessionInput,
+} from '@/types/client/session';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/router';
+import { useSupabaseClient } from '@supabase/auth-helpers-react';
+import { Database } from '@/types/database.supabase';
+import { Input } from './Styles';
+import EmailIcon from '../icons/EmailIcon';
+import PasswordIcon from '../icons/PasswordIcon';
+
+export default function Login({
+  setServerError,
+  setAuthType,
+}: {
+  setServerError: Dispatch<SetStateAction<string | null>>;
+  setAuthType: Dispatch<SetStateAction<'login' | 'register' | 'resetPassword'>>;
+}) {
+  const router = useRouter();
+  const supabase = useSupabaseClient<Database>();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<CreateSessionInput>({
+    resolver: zodResolver(createSessionSchema),
+    mode: 'onChange'
+  });
+
+  const onSubmit = async (formData: CreateSessionInput) => {
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email: formData.email,
+      password: formData.password,
+    });
+
+    if (error) {
+      setServerError(error.message);
+      setTimeout(() => {
+        setServerError(null);
+      }, 7000);
+    }
+    if (data && !error) {
+      router.push('/');
+    }
+  };
+  return (
+    <form className="flex flex-col" onSubmit={handleSubmit(onSubmit)}>
+      <div className="relative mt-5">
+        <div className={`${errors.email ? styles.iconError : styles.icon} `}>
+          <EmailIcon/>
+        </div>
+        <input
+          type="email"
+          className={`${Input} ${styles.input}`}
+          placeholder="Enter Email"
+          {...register('email')}
+        ></input>
+        {errors.email && (
+          <p className="text-red-700 mt-1 text-sm font-bold">
+            {errors.email.message}
+          </p>
+        )}
+      </div>
+
+      <div className={`${errors.email ? 'mt-2' : 'mt-7'}  relative`}>
+        <div className={`${errors.password ? styles.iconError : styles.icon} `}>
+          <PasswordIcon/>
+        </div>
+        <input
+          type="password"
+          className={`${Input} ${styles.input}`}
+          placeholder="Enter password"
+          {...register('password')}
+        ></input>
+        {errors.password && (
+          <p className="text-red-700 mt-1 text-sm font-bold">
+            {errors.password.message}
+          </p>
+        )}
+      </div>
+      <span
+        onClick={() => setAuthType('resetPassword')}
+        className="text-sm mt-3 text-frost-800 font-bold hover:text-frost-600 hover:cursor-pointer"
+      >
+        Forgot password?
+      </span>
+
+      <div className={`${errors.password ? 'mt-7' : 'mt-8'}  relative`}>
+        <button
+          className={`
+           ${styles.button} 
+           bg-frost-600 
+           hover:bg-frost-700
+           disabled:bg-grey-600
+           active:shadow-sm
+           active:bg-frost-800
+           font-bold 
+           py-2 px-4 
+           w-full 
+           rounded-2xl 
+           tracking-widest 
+           text-frost-100 
+           text-2xl
+          `}
+          type="submit"
+          disabled={isSubmitting}
+        >
+          Login
+        </button>
+      </div>
+    </form>
+  );
+}

components/forms/PasswordReset.tsx

@@ -0,0 +1,101 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Input } from './Styles';
+import styles from '@/styles/Auth.module.css';
+import { CreatePasswordInputRecovery, createPasswordRecoverySchema } from '@/types/client/passwordRecovery';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useSupabaseClient } from '@supabase/auth-helpers-react';
+import { Database } from '@/types/database.supabase';
+import { toast } from 'react-toastify';
+import EmailIcon from '../icons/EmailIcon';
+
+export default function PasswordReset({
+  setServerError,
+  setAuthType,
+}: {
+  setServerError: Dispatch<SetStateAction<string | null>>;
+  setAuthType: Dispatch<SetStateAction<'login' | 'register' | 'resetPassword'>>;
+}) {
+
+  const supabase = useSupabaseClient<Database>();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<CreatePasswordInputRecovery>({
+    resolver: zodResolver(createPasswordRecoverySchema),
+    mode: 'onChange'
+  });
+
+
+  const onSubmit = async (formData: CreatePasswordInputRecovery) => {
+    const { data, error } = await supabase.auth.resetPasswordForEmail(formData.email, {
+      redirectTo: 'http://localhost:3000/passwordreset',
+    });
+
+    if (error) {
+      setServerError(error.message);
+      setTimeout(() => {
+        setServerError(null);
+      }, 7000);
+    }
+    if (data && !error) {
+      toast.success(`An email has been sent to ${formData.email}`, {
+        position: 'top-center',
+        autoClose: 3000
+      });
+      setAuthType('login');
+    }
+  };
+
+  return (
+    <form className="flex flex-col" onSubmit={handleSubmit(onSubmit)} >
+      <div className='text-3xl font-bold'>Password Recovery</div>
+      <label htmlFor="email" className="mt-6">
+        Enter the Email that belongs to your account:
+      </label>
+      <div className="relative mt-3">
+
+        <div className={`${errors.email ? styles.iconError : styles.icon} `}>
+          <EmailIcon/>
+        </div>
+        <input
+          type="email"
+          className={`${Input} ${styles.input}`}
+          placeholder="Enter Email"
+          {...register('email')}
+        ></input>
+        {errors.email && (
+          <p className="text-red-700 mt-1 text-sm font-bold">
+            {errors.email.message}
+          </p>
+        )}
+      </div>
+
+      <div className={`${errors.email ? 'mt-7' : 'mt-8'}  relative`}>
+        <button
+          className={`
+           ${styles.button}
+           bg-frost-600 
+           hover:bg-frost-700
+           disabled:bg-grey-600
+           active:shadow-sm
+           active:bg-frost-800
+           font-bold 
+           py-2 px-4 
+           w-full 
+           rounded-2xl 
+           tracking-widest 
+           text-frost-100 
+           text-2xl
+          `}
+          type="submit"
+          disabled={isSubmitting}
+        >
+          Send Email
+        </button>
+      </div>
+    </form>
+  );
+}