feat: update login form to use magic link and add success/error notifications

Author: tomast1337

web/src/modules/auth/components/client/LoginFrom.tsx

@@ -5,13 +5,15 @@ import axios from 'axios';
 import Link from 'next/link';
 import { FC, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
 
 import { ErrorBalloon } from '@web/src/modules/shared/components/client/ErrorBalloon';
 
 import {
   Input,
   SubmitButton,
 } from '../../../shared/components/client/FormElements';
+import ClientAxios from '@web/src/lib/axios/ClientAxios';
 
 type LoginFormData = {
   email: string;
@@ -33,23 +35,25 @@ export const LoginForm: FC = () => {
   const onSubmit = async ({ email }: LoginFormData) => {
     try {
       setIsLoading(true);
-      const url = `${backendURL}/auth/login/email`;
+      const url = `${backendURL}/auth/login/magic-link`;
 
-      const response = await axios.post(
-        url,
-        {
-          destination: email,
-        },
-        {
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        },
-      );
+      const response = await ClientAxios.post(url, {
+        destination: email,
+      });
 
       console.log(response.data);
+
+      toast.success('An email has been sent to you with a login link.', {
+        position: 'top-center',
+        duration: 20_000, // 20 seconds
+      });
+
+      toast.success('Please check your inbox and follow the instructions.', {
+        position: 'top-center',
+        duration: 20_000, // 20 seconds
+      });
     } catch (error) {
-      console.error(error);
+      toast.error('An error occurred. Please try again later.');
     } finally {
       setIsLoading(false);
     }
@@ -91,8 +95,6 @@ export const LoginForm: FC = () => {
             />
           </div>
 
-          {errors.email && <ErrorBalloon message={errors.email.message} />}
-
           <div className='flex flex-row items-center justify-end gap-8'>
             {/* Submit button */}
             <SubmitButton isDisabled={isLoading} />

web/src/modules/auth/components/loginPage.tsx

@@ -100,9 +100,6 @@ export const LoginPage = () => {
               />
               <span className='flex-1 text-nowrap'>Log in with Discord</span>
             </Link>
-            <div className='ht-[1px] w-full' />
-            <hr className='ht-[1px] w-full' />
-            <div className='ht-[1px] w-full' />
             <Link
               data-test='login-discord'
               href={'/login/email'}