Auth - Login/Signup/Forgot/Rest
This commit is contained in:
Rotimi Best
@@ -7,21 +7,27 @@
|
||||
export let handleSubmit;
|
||||
export let isLogin = true;
|
||||
export let showOnlyContent = false;
|
||||
export let showLogo = false;
|
||||
export let formRef;
|
||||
|
||||
async function signInWithGoogle() {
|
||||
const { data, error } = await supabase.auth.signInWithOAuth({
|
||||
provider: 'google',
|
||||
});
|
||||
try {
|
||||
console.log('signInWithGoogle');
|
||||
const { data, error } = await supabase.auth.signInWithOAuth({
|
||||
provider: 'google',
|
||||
});
|
||||
|
||||
console.log('data', data);
|
||||
console.log('error', error);
|
||||
} catch (error) {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="w-full min-h-screen flex items-center justify-center mt-4">
|
||||
<div
|
||||
class="container border border-gray bg-white {showOnlyContent && 'h-2/4'}"
|
||||
>
|
||||
<div class="container border border-gray bg-white">
|
||||
<div class="flex items-center flex-col p-2 lg:px-8 lg:py-4">
|
||||
{#if !showOnlyContent}
|
||||
<div class="flex items-center w-full justify-center">
|
||||
{#if !showOnlyContent || showLogo}
|
||||
<div class="flex items-center w-full justify-center pt-4">
|
||||
<img
|
||||
src="/logo-192.png"
|
||||
alt="ClassroomIO logo"
|
||||
@@ -33,6 +39,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
<form
|
||||
bind:this={formRef}
|
||||
on:submit|preventDefault={handleSubmit}
|
||||
class="flex items-center flex-col w-10/12"
|
||||
>
|
||||
@@ -47,7 +54,9 @@
|
||||
className="py-3 sm:w-full w-full"
|
||||
>
|
||||
<GoogleIconColored />
|
||||
<span class="ml-2">Sign up with Google</span>
|
||||
<span class="ml-2"
|
||||
>{isLogin ? 'Sign in' : 'Sign up'} with Google</span
|
||||
>
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
export let onKeyDown = () => {};
|
||||
export let className = '';
|
||||
export let inputClassName = '';
|
||||
export let labelClassName = '';
|
||||
export let type = 'text';
|
||||
export let isPassword = false;
|
||||
export let autoFocus = false;
|
||||
@@ -50,7 +51,7 @@
|
||||
|
||||
<label class="block relative {className}">
|
||||
{#if label}
|
||||
<label for="text-field" class="m-0 font-light">
|
||||
<label for="text-field" class="m-0 font-light {labelClassName}">
|
||||
{label}
|
||||
|
||||
{#if isRequired}
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_174_5581)">
|
||||
<path
|
||||
d="M16 8C15.0111 8 14.0444 8.29325 13.2222 8.84265C12.3999 9.39206 11.759 10.173 11.3806 11.0866C11.0022 12.0002 10.9031 13.0055 11.0961 13.9755C11.289 14.9454 11.7652 15.8363 12.4645 16.5355C13.1637 17.2348 14.0546 17.711 15.0246 17.9039C15.9945 18.0969 16.9998 17.9978 17.9134 17.6194C18.8271 17.241 19.6079 16.6001 20.1574 15.7779C20.7068 14.9556 21 13.9889 21 13C21 11.6739 20.4732 10.4021 19.5355 9.46447C18.5979 8.52678 17.3261 8 16 8Z"
|
||||
fill="#ADADAD"
|
||||
/>
|
||||
<path
|
||||
d="M16 2C13.2311 2 10.5243 2.82109 8.22202 4.35943C5.91973 5.89777 4.12532 8.08427 3.06569 10.6424C2.00607 13.2006 1.72882 16.0155 2.26901 18.7313C2.80921 21.447 4.14258 23.9416 6.10051 25.8995C8.05845 27.8574 10.553 29.1908 13.2687 29.731C15.9845 30.2712 18.7994 29.9939 21.3576 28.9343C23.9157 27.8747 26.1022 26.0803 27.6406 23.778C29.1789 21.4757 30 18.7689 30 16C29.9958 12.2883 28.5195 8.72973 25.8949 6.10512C23.2703 3.48052 19.7118 2.00418 16 2ZM23.9925 24.9258C23.9726 23.614 23.4382 22.3626 22.5043 21.4412C21.5704 20.5198 20.3119 20.0022 19 20H13C11.6881 20.0022 10.4296 20.5198 9.49573 21.4412C8.56186 22.3626 8.02739 23.614 8.00751 24.9258C6.19407 23.3065 4.91524 21.1747 4.34034 18.8125C3.76545 16.4503 3.92161 13.9691 4.78814 11.6977C5.65468 9.42618 7.19073 7.47147 9.19288 6.09237C11.195 4.71327 13.5688 3.97483 16 3.97483C18.4312 3.97483 20.805 4.71327 22.8071 6.09237C24.8093 7.47147 26.3453 9.42618 27.2119 11.6977C28.0784 13.9691 28.2346 16.4503 27.6597 18.8125C27.0848 21.1747 25.8059 23.3065 23.9925 24.9258Z"
|
||||
fill="#ADADAD"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_174_5581">
|
||||
<rect width="32" height="32" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { BarLoader } from 'svelte-loading-spinners';
|
||||
import { Moon } from 'svelte-loading-spinners';
|
||||
import { VARIANTS, VARIANTS_CLASS } from './constants';
|
||||
|
||||
export let label = '';
|
||||
@@ -22,14 +22,14 @@
|
||||
variant
|
||||
]} {!disablePadding &&
|
||||
'py-1 px-5'} rounded-none {className} py-2 w-full justify-center sm:w-auto {isLoading &&
|
||||
'py-4 border-blue-700'} transition delay-150 duration-300 ease-in-out"
|
||||
'py-2 border-blue-700'} hover:shadow-xl transition delay-150 duration-300 ease-in-out"
|
||||
on:click={onClick}
|
||||
{name}
|
||||
{type}
|
||||
disabled={isDisabled}
|
||||
>
|
||||
{#if isLoading}
|
||||
<BarLoader size="30" color="#1d4ed8" unit="px" duration="1s" />
|
||||
<Moon size="30" color="#1d4ed8" unit="px" duration="1s" />
|
||||
{:else if !!label}
|
||||
{label}
|
||||
{:else}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import TextField from '../../Form/TextField.svelte';
|
||||
|
||||
export let title = '';
|
||||
export let code;
|
||||
export let code = '';
|
||||
export let name = '';
|
||||
export let options = [];
|
||||
export let onSubmit = () => {};
|
||||
@@ -16,9 +16,11 @@
|
||||
export let disabled = false;
|
||||
export let isPreview = false;
|
||||
export let nextButtonProps = {};
|
||||
export let grade;
|
||||
export let grade = undefined;
|
||||
export let gradeMax = 0;
|
||||
export let disableGrading = false;
|
||||
export let labelClassName = '';
|
||||
export let disableOptContainerMargin = false;
|
||||
|
||||
function getRadioVal(form, name) {
|
||||
let val;
|
||||
@@ -60,7 +62,7 @@
|
||||
|
||||
<form on:submit|preventDefault={handleFormSubmit}>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class={!isNaN(grade) && 'w-3/4'}>{title}</h3>
|
||||
<h3 class="{labelClassName} {!isNaN(grade) && 'w-3/4'}">{title}</h3>
|
||||
{#if !isNaN(grade)}
|
||||
<div class="flex items-center">
|
||||
<TextField
|
||||
@@ -79,7 +81,7 @@
|
||||
<CodeSnippet {code} />
|
||||
{/if}
|
||||
|
||||
<div class="ml-4">
|
||||
<div class={!disableOptContainerMargin && 'ml-4'}>
|
||||
{#each options as option}
|
||||
<button
|
||||
class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 w-full {getValidationClassName(
|
||||
|
||||
Reference in New Issue
Block a user