From 9baf9d4e2e8a495a936a4a91cd869011b8e52872 Mon Sep 17 00:00:00 2001
From: WizzyGeek <ojasscoding@gmail.com>
Date: Tue, 18 Jun 2024 17:50:20 +0530
Subject: [PATCH] Add email auth

---
 public/mail.svg     |  1 +
 src/pages/apply.tsx |  2 +-
 src/pages/login.tsx | 90 +++++++++++++++++++++++++++++++++++++++------
 3 files changed, 80 insertions(+), 13 deletions(-)
 create mode 100644 public/mail.svg

diff --git a/public/mail.svg b/public/mail.svg
new file mode 100644
index 0000000..6b98060
--- /dev/null
+++ b/public/mail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
\ No newline at end of file
diff --git a/src/pages/apply.tsx b/src/pages/apply.tsx
index fdee693..0b55c8b 100644
--- a/src/pages/apply.tsx
+++ b/src/pages/apply.tsx
@@ -312,7 +312,7 @@ export default function Apply() {
                             <div className=' border-2 sm:rounded-md sm:w-fit w-full max-w-[640px] border-[#202020] text-white backdrop-blur-md bg-[#ffffff09]'>
                                 {
                                     (count || 0) < 2 ? (
-                                        <Formik initialValues={{ apps: [], name: session?.user?.user_metadata?.full_name, common_questions: []}} onSubmit={onSumbitFactory(sig, setSig, session)} validate={validateForm}>
+                                        <Formik initialValues={{ apps: [], name: session?.user?.user_metadata?.full_name || "", common_questions: []}} onSubmit={onSumbitFactory(sig, setSig, session)} validate={validateForm}>
                                             { Application }
                                         </Formik>
                                     ) : (
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index d6213f7..469c2f2 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -1,15 +1,23 @@
 
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import Card from '../components/Card';
 import { SessionContext, supabase } from '../supabase';
 import './mainbg.scss';
 import { useNavigate } from 'react-router-dom';
+import { Field, Form, Formik, FormikValues } from 'formik';
+
+function sleep(time: number) {
+    return new Promise((resolve) => setTimeout(resolve, time));
+}
 
 
 export default function Login() {
     const session = useContext(SessionContext);
     const navigate = useNavigate();
 
+    const [sentAt, setSentAt] = useState<number>(-1);
+    const [left, setLeft] = useState<number>(-1)
+
     useEffect(() => {
         if (session !== null) {
             navigate("/apply");
@@ -21,17 +29,75 @@ export default function Login() {
             <main>
                 <Card className="flex flex-col gap-4 max-w-80">
                     <span className='text-xl font-semibold'>Authentication</span>
-                    <button className='flex items-center rounded-md text-center bg-yellow-400 text-black font-medium hover:bg-black hover:text-white transition-all border border-yellow-400'
-                        onClick={() => {supabase.auth.signInWithOAuth({
-                            provider: "google",
-                            options: {
-                                redirectTo: `${window.location.origin}/auth/`
-                            }
-                        })}}>
-                        <div className='bg-yellow-400 p-2 rounded-l-md'><img src='/google.svg' className=' h-8 w-8'/></div>
-                        <div className='p-2 w-full'>Continue with Google</div>
-                    </button>
-                    <span className='text-sm'>Authenticate with your google account to secure your application</span>
+                    <div className='flex flex-col gap-2 items-center justify-center'>
+                        <Formik initialValues={{email: ""}} onSubmit={function (values: FormikValues,): void | Promise<any> {
+                            const promise = supabase.auth.signInWithOtp({
+                                email: values.email,
+                                options: {
+                                    emailRedirectTo: `${window.location.origin}/auth/`
+                                }
+                            }).then((resp) => {
+                                console.log(resp)
+                                if (resp.error) {
+                                    alert("This service is currently unavailable");
+                                    return;
+                                }
+                                const now = Date.now() / 1000;
+                                setSentAt(now);
+                                setLeft(60);
+                                sleep(60 * 1000 + 1).then(() => {
+                                    setSentAt(-1);
+                                    setLeft(-1);
+                                })
+
+                                const r = () => {
+                                    const x = Math.floor(60 - (Date.now() / 1000 - now));
+                                    setLeft(x);
+                                    if (x > 0) sleep(1000).then(r);
+                                }
+                                r();
+                            })
+
+                            return promise;
+                        } }>
+                            {({ isSubmitting }) => (
+                                <Form className='flex flex-col gap-6 w-full'>
+                                    <label htmlFor='email' className='-mb-4 ml-1'>
+                                        Email
+                                    </label>
+                                    <Field type="email" name="email" id="email" placeholder="example@example.com"></Field>
+                                    <button
+                                        className={ "flex items-center rounded-md text-center text-black font-semibold transition-all border w-full" + (
+                                            (sentAt > 0 || isSubmitting) ? " bg-yellow-700 border-yellow-700" : " bg-yellow-400 hover:bg-black hover:text-white border-yellow-400"
+                                        )}
+                                        type='submit'
+                                        disabled={sentAt > 0 || isSubmitting}
+                                    >
+                                        <div className={'p-2 rounded-l-md ' + ((sentAt > 0 || isSubmitting) ? "" : " bg-yellow-400")}><img src='/mail.svg' className=' h-8 w-8'/></div>
+                                        <div className='p-2 w-full'>Continue with Email</div>
+                                    </button>
+                                    <div className='text-sm'>
+                                    {sentAt <= 0 && isSubmitting ? "Sending email..." : ""}
+                                    {sentAt > 0 ? (
+                                        `Check you email for login link${ left > 0 ? `, get another link in ${left} seconds` : null }`
+                                    ) : null}
+                                    </div>
+                                </Form>
+                            )}
+                        </Formik>
+                        <div className='italic'>or</div>
+                        <button className='flex items-center rounded-md text-center bg-yellow-400 text-black font-medium hover:bg-black hover:text-white transition-all border border-yellow-400 w-full'
+                            onClick={() => {supabase.auth.signInWithOAuth({
+                                provider: "google",
+                                options: {
+                                    redirectTo: `${window.location.origin}/auth/`
+                                }
+                            })}}>
+                            <div className='bg-yellow-400 p-2 rounded-l-md'><img src='/google.svg' className=' h-8 w-8'/></div>
+                            <div className='p-2 w-full'>Continue with Google</div>
+                        </button>
+                    </div>
+                    <span className='text-sm'>Authenticate with yourself to secure your application</span>
                 </Card>
             </main>
         </section>