Skip to content

Commit 6d65e5a

Browse files
Stan-l-e-yStan-l-e-y
authored
Merge pull request #77 from FrostCord/FROS-Auth-Fixes
FROS-OAuth
2 parents c315912 + d16ba33 commit 6d65e5a

6 files changed

Lines changed: 115 additions & 18 deletions

File tree

‎components/Auth.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function Auth({
2222
{renderAuth(type, setServerError, setAuthType)}
2323
</div>
2424
{type == 'login' ? (
25-
<div className=" flex justify-center mt-9">
25+
<div className=" flex justify-center mt-7">
2626
<div className="text-frost-600 text-lg">
2727
Not registered?{' '}
2828
<span
@@ -65,7 +65,12 @@ function renderAuth(
6565
<Register setServerError={setServerError} setAuthType={setAuthType} />
6666
);
6767
case 'resetPassword':
68-
return <PasswordReset setServerError={setServerError} setAuthType={setAuthType} />;
68+
return (
69+
<PasswordReset
70+
setServerError={setServerError}
71+
setAuthType={setAuthType}
72+
/>
73+
);
6974
default:
7075
return (
7176
<Login setServerError={setServerError} setAuthType={setAuthType} />

‎components/forms/Login.tsx‎

Lines changed: 89 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ import { Database } from '@/types/database.supabase';
1212
import { Input } from './Styles';
1313
import EmailIcon from '../icons/EmailIcon';
1414
import PasswordIcon from '../icons/PasswordIcon';
15+
import Image from 'next/image';
16+
import Google from '../../public/Google__G__Logo.svg.png';
17+
import Github from '../../public/github.png';
1518

1619
export default function Login({
1720
setServerError,
@@ -47,9 +50,25 @@ export default function Login({
4750
router.push('/');
4851
}
4952
};
53+
54+
async function signInWithGoogle() {
55+
const { data, error } = await supabase.auth.signInWithOAuth({
56+
provider: 'google',
57+
});
58+
if (error) console.log(error);
59+
}
60+
61+
async function signInWithGitHub() {
62+
const { data, error } = await supabase.auth.signInWithOAuth({
63+
provider: 'github',
64+
options: {
65+
scopes: 'user',
66+
},
67+
});
68+
}
5069
return (
5170
<form className="flex flex-col" onSubmit={handleSubmit(onSubmit)}>
52-
<div className="relative mt-5">
71+
<div className="relative mt-4">
5372
<div className={`${errors.email ? styles.iconError : styles.icon} `}>
5473
<EmailIcon />
5574
</div>
@@ -84,12 +103,12 @@ export default function Login({
84103
</div>
85104
<span
86105
onClick={() => setAuthType('resetPassword')}
87-
className="text-sm mt-3 text-frost-800 font-bold hover:text-frost-600 hover:cursor-pointer"
106+
className="text-sm mt-3 text-frost-800 font-bold hover:text-frost-600 hover:cursor-pointer ml-2"
88107
>
89108
Forgot password?
90109
</span>
91110

92-
<div className={`${errors.password ? 'mt-7' : 'mt-8'} relative`}>
111+
<div className={`${errors.password ? 'mt-6' : 'mt-7'} relative`}>
93112
<button
94113
className={`
95114
${styles.button}
@@ -112,6 +131,73 @@ export default function Login({
112131
Login
113132
</button>
114133
</div>
134+
135+
<div className="relative flex mt-4 items-center">
136+
<div className="flex-grow border-t border-frost-500"></div>
137+
<span className="flex-shrink mx-4 text-frost-600 text-xs">
138+
Or Login with
139+
</span>
140+
<div className="flex-grow border-t border-frost-500"></div>
141+
</div>
142+
143+
<div className="mt-4 relative">
144+
<div className="w-full flex justify-between">
145+
<div
146+
className={`
147+
${styles.button}
148+
bg-frost-600
149+
hover:bg-frost-700
150+
disabled:bg-grey-600
151+
active:shadow-sm
152+
active:bg-frost-800
153+
font-bold
154+
py-2
155+
w-9
156+
rounded-2xl
157+
tracking-widest
158+
text-frost-100
159+
text-2xl
160+
flex justify-center
161+
hover:cursor-pointer
162+
`}
163+
onClick={() => signInWithGoogle()}
164+
>
165+
<Image
166+
className="w-6 bg-white rounded-3xl p-1"
167+
src={Google}
168+
alt="Google"
169+
priority
170+
/>
171+
</div>
172+
<div
173+
className={`
174+
${styles.button}
175+
bg-frost-600
176+
hover:bg-frost-700
177+
disabled:bg-grey-600
178+
active:shadow-sm
179+
active:bg-frost-800
180+
font-bold
181+
py-2
182+
w-9
183+
rounded-2xl
184+
tracking-widest
185+
text-frost-100
186+
text-2xl
187+
flex justify-center
188+
hover:cursor-pointer
189+
`}
190+
onClick={() => signInWithGitHub()}
191+
>
192+
<Image
193+
className="w-6 rounded-3xl"
194+
src={Github}
195+
alt="Github"
196+
priority
197+
/>
198+
</div>
199+
</div>
200+
</div>
115201
</form>
116202
);
117203
}

‎components/forms/UpdatePassword.tsx‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { Input } from './Styles';
22
import styles from '@/styles/Auth.module.css';
3-
import { createUpdatePasswordSchema, CreateUpdatePasswordInput } from '@/types/client/updatePassword';
3+
import {
4+
createUpdatePasswordSchema,
5+
CreateUpdatePasswordInput,
6+
} from '@/types/client/updatePassword';
47
import { useForm } from 'react-hook-form';
58
import { zodResolver } from '@hookform/resolvers/zod';
69
import { Database } from '@/types/database.supabase';
@@ -10,7 +13,11 @@ import { toast } from 'react-toastify';
1013
import { useRouter } from 'next/router';
1114
import PasswordIcon from '../icons/PasswordIcon';
1215

13-
export default function UpdatePassword({setServerError} : {setServerError: Dispatch<SetStateAction<string | null>>;}) {
16+
export default function UpdatePassword({
17+
setServerError,
18+
}: {
19+
setServerError: Dispatch<SetStateAction<string | null>>;
20+
}) {
1421
const router = useRouter();
1522
const supabase = useSupabaseClient<Database>();
1623

@@ -20,12 +27,12 @@ export default function UpdatePassword({setServerError} : {setServerError: Dispa
2027
formState: { errors, isSubmitting },
2128
} = useForm<CreateUpdatePasswordInput>({
2229
resolver: zodResolver(createUpdatePasswordSchema),
23-
mode: 'onChange'
30+
mode: 'onChange',
2431
});
2532

2633
const onSubmit = async (formData: CreateUpdatePasswordInput) => {
2734
const { data, error } = await supabase.auth.updateUser({
28-
password: formData.password
35+
password: formData.password,
2936
});
3037

3138
if (error) {
@@ -37,25 +44,24 @@ export default function UpdatePassword({setServerError} : {setServerError: Dispa
3744
if (data && !error) {
3845
toast.success('Password successfully updated', {
3946
position: 'top-center',
40-
autoClose: 3000
47+
autoClose: 3000,
4148
});
4249
router.push('/');
4350
}
4451
};
4552

46-
4753
return (
48-
<form className="flex flex-col mt-7" onSubmit={handleSubmit(onSubmit)} >
54+
<form className="flex flex-col mt-7" onSubmit={handleSubmit(onSubmit)}>
4955
<label htmlFor="email" className="mt-6">
5056
New Password:
5157
</label>
52-
<div className='mt-3 relative'>
58+
<div className="mt-3 relative">
5359
<div className={`${errors.password ? styles.iconError : styles.icon} `}>
54-
<PasswordIcon/>
60+
<PasswordIcon />
5561
</div>
5662
<input
5763
type="password"
58-
className={`${Input} ${styles.input}`}
64+
className={`${Input()} ${styles.input}`}
5965
placeholder="Enter password"
6066
{...register('password')}
6167
></input>
@@ -72,11 +78,11 @@ export default function UpdatePassword({setServerError} : {setServerError: Dispa
7278
errors.passwordConfirmation ? styles.iconError : styles.icon
7379
} `}
7480
>
75-
<PasswordIcon/>
81+
<PasswordIcon />
7682
</div>
7783
<input
7884
type="password"
79-
className={`${Input} ${styles.input}`}
85+
className={`${Input()} ${styles.input}`}
8086
placeholder="Confirm password"
8187
{...register('passwordConfirmation')}
8288
></input>

‎pages/login.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default function Login() {
3737
<div
3838
className={`flex flex-col w-full items-center xl:rounded-3xl ${styles.rightSide}`}
3939
>
40-
<div className="basis-1/4 flex items-center relative mt-8">
40+
<div className="basis-1/4 flex items-center relative mt-7">
4141
<Image
4242
className={`rounded-full ${styles.logo}`}
4343
src="/favicon.ico"

‎public/Google__G__Logo.svg.png‎

91.1 KB
Loading

‎public/github.png‎

7.08 KB
Loading

0 commit comments

Comments
 (0)