1587 lines
61 KiB
Svelte
1587 lines
61 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from "$app/forms";
|
|
import { toast } from "svelte-sonner";
|
|
|
|
import Input from "$lib/components/Input.svelte";
|
|
import { screenWidth } from "$lib/store";
|
|
import { page } from "$app/stores";
|
|
|
|
export let form;
|
|
|
|
let oauthLoading = false;
|
|
let isClicked = false;
|
|
let loading = false;
|
|
|
|
const submitLogin = () => {
|
|
loading = true;
|
|
return async ({ result, update }) => {
|
|
switch (result.type) {
|
|
case "success":
|
|
case "redirect":
|
|
isClicked = true;
|
|
toast.success("Login successfully!", {
|
|
style:
|
|
"border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
|
|
});
|
|
await update();
|
|
break;
|
|
case "failure":
|
|
toast.error("Invalid credentials", {
|
|
style:
|
|
"border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
|
|
});
|
|
await update();
|
|
break;
|
|
case "error":
|
|
toast.error(result.error.message, {
|
|
style:
|
|
"border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
|
|
});
|
|
break;
|
|
default:
|
|
await update();
|
|
}
|
|
|
|
setTimeout(() => {
|
|
if (
|
|
["redirect", "success"]?.includes(result.type) &&
|
|
$page?.url?.pathname
|
|
) {
|
|
const anchor = document.createElement("a");
|
|
anchor.href = $page?.url?.pathname;
|
|
anchor.dataset.sveltekitReload = true;
|
|
document.body.appendChild(anchor);
|
|
anchor.dispatchEvent(new MouseEvent("click"));
|
|
}
|
|
}, 280);
|
|
|
|
loading = false;
|
|
};
|
|
};
|
|
|
|
const submitRegistration = () => {
|
|
loading = true;
|
|
return async ({ result, update }) => {
|
|
switch (result.type) {
|
|
case "success":
|
|
case "redirect":
|
|
isClicked = true;
|
|
toast.success("Registration successfully!", {
|
|
style:
|
|
"border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
|
|
});
|
|
await update();
|
|
break;
|
|
case "failure":
|
|
toast.error("Invalid credentials", {
|
|
style:
|
|
"border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
|
|
});
|
|
await update();
|
|
break;
|
|
case "error":
|
|
toast.error(result.error.message, {
|
|
style:
|
|
"border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
|
|
});
|
|
break;
|
|
default:
|
|
await update();
|
|
}
|
|
|
|
setTimeout(() => {
|
|
if (
|
|
["redirect", "success"]?.includes(result.type) &&
|
|
$page?.url?.pathname === "/pricing"
|
|
) {
|
|
const anchor = document.createElement("a");
|
|
anchor.href = "/pricing";
|
|
anchor.dataset.sveltekitReload = true;
|
|
document.body.appendChild(anchor);
|
|
anchor.dispatchEvent(new MouseEvent("click"));
|
|
}
|
|
}, 280);
|
|
|
|
loading = false;
|
|
};
|
|
};
|
|
|
|
/*
|
|
async function handleRegister(event) {
|
|
|
|
event.preventDefault();
|
|
const formData = new FormData(event.target); // create a FormData object from the form
|
|
|
|
|
|
|
|
const response = await fetch('/api/register', {
|
|
method: 'POST',
|
|
headers: {
|
|
"Content-Type": "application/json","X-API-KEY": apiKey
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
const output = await response.json();
|
|
}
|
|
*/
|
|
|
|
let displaySection = "login";
|
|
|
|
let isHoveredGoogle = false;
|
|
let isHoveredDiscord = false;
|
|
let isHoveredGithub = false;
|
|
|
|
function handleHoverGoogle() {
|
|
isHoveredGoogle = !isHoveredGoogle;
|
|
}
|
|
|
|
function handleHoverDiscord() {
|
|
isHoveredDiscord = !isHoveredDiscord;
|
|
}
|
|
|
|
function handleHoverGithub() {
|
|
isHoveredGithub = !isHoveredGithub;
|
|
}
|
|
</script>
|
|
|
|
<input type="checkbox" id="userLogin" class="modal-toggle" />
|
|
|
|
<dialog
|
|
id="userLogin"
|
|
class="modal modal-bottom sm:modal-middle rounded-none sm:rounded"
|
|
>
|
|
<label
|
|
on:click={() => (form = [])}
|
|
id="userLogin"
|
|
for="userLogin"
|
|
class="cursor-pointer modal-backdrop bg-[#000]/40"
|
|
></label>
|
|
|
|
<div
|
|
class="modal-box w-full bg-table sm:border sm:border-gray-600 rounded-none sm:rounded {$screenWidth <
|
|
640
|
|
? 'min-h-screen'
|
|
: ''}"
|
|
>
|
|
<label
|
|
for="userLogin"
|
|
class="cursor-pointer absolute right-3 top-2 text-xl text-white"
|
|
>
|
|
<svg
|
|
class="h-8 w-8"
|
|
viewBox="0 -0.5 25 25"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
|
id="SVGRepo_tracerCarrier"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></g><g id="SVGRepo_iconCarrier">
|
|
<path
|
|
d="M6.96967 16.4697C6.67678 16.7626 6.67678 17.2374 6.96967 17.5303C7.26256 17.8232 7.73744 17.8232 8.03033 17.5303L6.96967 16.4697ZM13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697C12.7374 11.1768 12.2626 11.1768 11.9697 11.4697L13.0303 12.5303ZM11.9697 11.4697C11.6768 11.7626 11.6768 12.2374 11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303L11.9697 11.4697ZM18.0303 7.53033C18.3232 7.23744 18.3232 6.76256 18.0303 6.46967C17.7374 6.17678 17.2626 6.17678 16.9697 6.46967L18.0303 7.53033ZM13.0303 11.4697C12.7374 11.1768 12.2626 11.1768 11.9697 11.4697C11.6768 11.7626 11.6768 12.2374 11.9697 12.5303L13.0303 11.4697ZM16.9697 17.5303C17.2626 17.8232 17.7374 17.8232 18.0303 17.5303C18.3232 17.2374 18.3232 16.7626 18.0303 16.4697L16.9697 17.5303ZM11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697L11.9697 12.5303ZM8.03033 6.46967C7.73744 6.17678 7.26256 6.17678 6.96967 6.46967C6.67678 6.76256 6.67678 7.23744 6.96967 7.53033L8.03033 6.46967ZM8.03033 17.5303L13.0303 12.5303L11.9697 11.4697L6.96967 16.4697L8.03033 17.5303ZM13.0303 12.5303L18.0303 7.53033L16.9697 6.46967L11.9697 11.4697L13.0303 12.5303ZM11.9697 12.5303L16.9697 17.5303L18.0303 16.4697L13.0303 11.4697L11.9697 12.5303ZM13.0303 11.4697L8.03033 6.46967L6.96967 7.53033L11.9697 12.5303L13.0303 11.4697Z"
|
|
fill="#fff"
|
|
></path>
|
|
</g></svg
|
|
>
|
|
</label>
|
|
|
|
{#if displaySection === "login"}
|
|
<div class="grid grid-cols-1 animate-fade-in-once">
|
|
<div class="relative">
|
|
<h2 class="text-center text-white text-2xl pt-10 sm:pt-4 font-bold">
|
|
Sign In
|
|
</h2>
|
|
</div>
|
|
|
|
<span class="text-gray-400 text-center pb-4"> Welcome back! </span>
|
|
|
|
<div class="relative">
|
|
<form
|
|
action="?/login"
|
|
method="POST"
|
|
use:enhance={submitLogin}
|
|
class="flex flex-col items-center space-y-2 w-full md:w-5/6 md:ml-auto md:mr-auto"
|
|
>
|
|
<Input
|
|
type="email"
|
|
id="email"
|
|
label="Email"
|
|
value={form?.data?.email ?? ""}
|
|
errors={form?.errors?.email}
|
|
/>
|
|
<Input
|
|
type="password"
|
|
id="password"
|
|
label="Password"
|
|
errors={form?.errors?.password}
|
|
/>
|
|
<div class="text-start w-full max-w-lg">
|
|
<a
|
|
href="/reset-password"
|
|
class="text-start text-sm font-semibold text-[#FB6A67] hover:cursor-pointer hover:underline"
|
|
>Forgot Password?</a
|
|
>
|
|
</div>
|
|
<div class="w-full max-w-lg pt-5 m-auto pb-5">
|
|
{#if !loading && !isClicked}
|
|
<button
|
|
type="submit"
|
|
class="btn bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 text-black btn-md w-full rounded-md m-auto font-semibold text-[1rem]"
|
|
>
|
|
<span>Login</span>
|
|
</button>
|
|
{:else}
|
|
<label
|
|
class="cursor-not-allowed btn bg-[#fff] opacity-[0.5] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 text-black btn-md w-full rounded-md m-auto text-black font-semibold text-[1rem]"
|
|
>
|
|
<div class="flex flex-row m-auto items-center">
|
|
<span class="loading loading-infinity"></span>
|
|
<span class=" ml-1.5">Signing Up</span>
|
|
</div>
|
|
</label>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="divider divider-[#fff] pt-10 pb-10">
|
|
<span class="text-white text-[1rem] z-10">Or login using</span>
|
|
</div>
|
|
|
|
<div class="flex flex-row items-center gap-x-5 pb-6">
|
|
<form method="post" action="?/oauth2">
|
|
<input class="hidden" name="provider" value="google" />
|
|
<button
|
|
on:click={() => (oauthLoading = !oauthLoading)}
|
|
on:mouseenter={handleHoverGoogle}
|
|
on:mouseleave={handleHoverGoogle}
|
|
class="cursor-pointer shrink-0 rounded-full w-12 h-12 relative bg-default flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
|
|
>
|
|
<svg
|
|
class="{isHoveredGoogle
|
|
? 'shake-logo'
|
|
: ''} w-6 h-6 inline-block"
|
|
viewBox="-3 0 262 262"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
preserveAspectRatio="xMidYMid"
|
|
fill="#000000"
|
|
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
|
id="SVGRepo_tracerCarrier"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></g><g id="SVGRepo_iconCarrier">
|
|
<g>
|
|
<path
|
|
d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451"
|
|
fill="#4285F4"
|
|
>
|
|
</path>
|
|
<path
|
|
d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1"
|
|
fill="#34A853"
|
|
>
|
|
</path>
|
|
<path
|
|
d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37"
|
|
fill="#FBBC05"
|
|
>
|
|
</path>
|
|
<path
|
|
d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479"
|
|
fill="#EB4335"
|
|
>
|
|
</path>
|
|
</g>
|
|
</g></svg
|
|
>
|
|
</button>
|
|
</form>
|
|
<form method="post" action="?/oauth2">
|
|
<input class="hidden" name="provider" value="discord" />
|
|
<button
|
|
on:click={() => (oauthLoading = !oauthLoading)}
|
|
on:mouseenter={handleHoverDiscord}
|
|
on:mouseleave={handleHoverDiscord}
|
|
class="cursor-pointer shrink-0 rounded-full w-12 h-12 relative bg-default flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
|
|
>
|
|
<svg
|
|
class="{isHoveredDiscord
|
|
? 'shake-logo'
|
|
: ''} w-7 h-7 inline-block"
|
|
viewBox="0 0 100 100"
|
|
version="1.1"
|
|
xml:space="preserve"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
fill="#000000"
|
|
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
|
id="SVGRepo_tracerCarrier"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></g><g id="SVGRepo_iconCarrier">
|
|
<style type="text/css">
|
|
.st0 {
|
|
fill: #ffffff;
|
|
}
|
|
.st1 {
|
|
fill: #f5bb41;
|
|
}
|
|
.st2 {
|
|
fill: #2167d1;
|
|
}
|
|
.st3 {
|
|
fill: #3d84f3;
|
|
}
|
|
.st4 {
|
|
fill: #4ca853;
|
|
}
|
|
.st5 {
|
|
fill: #398039;
|
|
}
|
|
.st6 {
|
|
fill: #d74f3f;
|
|
}
|
|
.st7 {
|
|
fill: #d43c89;
|
|
}
|
|
.st8 {
|
|
fill: #b2005f;
|
|
}
|
|
.st9 {
|
|
fill: none;
|
|
stroke: #000000;
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-miterlimit: 10;
|
|
}
|
|
.st10 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: none;
|
|
stroke: #000000;
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-miterlimit: 10;
|
|
}
|
|
.st11 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: none;
|
|
stroke: #040404;
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-miterlimit: 10;
|
|
}
|
|
.st12 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
}
|
|
.st13 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #040404;
|
|
}
|
|
.st14 {
|
|
fill: url(#SVGID_1_);
|
|
}
|
|
.st15 {
|
|
fill: url(#SVGID_2_);
|
|
}
|
|
.st16 {
|
|
fill: url(#SVGID_3_);
|
|
}
|
|
.st17 {
|
|
fill: url(#SVGID_4_);
|
|
}
|
|
.st18 {
|
|
fill: url(#SVGID_5_);
|
|
}
|
|
.st19 {
|
|
fill: url(#SVGID_6_);
|
|
}
|
|
.st20 {
|
|
fill: url(#SVGID_7_);
|
|
}
|
|
.st21 {
|
|
fill: url(#SVGID_8_);
|
|
}
|
|
.st22 {
|
|
fill: url(#SVGID_9_);
|
|
}
|
|
.st23 {
|
|
fill: url(#SVGID_10_);
|
|
}
|
|
.st24 {
|
|
fill: url(#SVGID_11_);
|
|
}
|
|
.st25 {
|
|
fill: url(#SVGID_12_);
|
|
}
|
|
.st26 {
|
|
fill: url(#SVGID_13_);
|
|
}
|
|
.st27 {
|
|
fill: url(#SVGID_14_);
|
|
}
|
|
.st28 {
|
|
fill: url(#SVGID_15_);
|
|
}
|
|
.st29 {
|
|
fill: url(#SVGID_16_);
|
|
}
|
|
.st30 {
|
|
fill: url(#SVGID_17_);
|
|
}
|
|
.st31 {
|
|
fill: url(#SVGID_18_);
|
|
}
|
|
.st32 {
|
|
fill: url(#SVGID_19_);
|
|
}
|
|
.st33 {
|
|
fill: url(#SVGID_20_);
|
|
}
|
|
.st34 {
|
|
fill: url(#SVGID_21_);
|
|
}
|
|
.st35 {
|
|
fill: url(#SVGID_22_);
|
|
}
|
|
.st36 {
|
|
fill: url(#SVGID_23_);
|
|
}
|
|
.st37 {
|
|
fill: url(#SVGID_24_);
|
|
}
|
|
.st38 {
|
|
fill: url(#SVGID_25_);
|
|
}
|
|
.st39 {
|
|
fill: url(#SVGID_26_);
|
|
}
|
|
.st40 {
|
|
fill: url(#SVGID_27_);
|
|
}
|
|
.st41 {
|
|
fill: url(#SVGID_28_);
|
|
}
|
|
.st42 {
|
|
fill: url(#SVGID_29_);
|
|
}
|
|
.st43 {
|
|
fill: url(#SVGID_30_);
|
|
}
|
|
.st44 {
|
|
fill: url(#SVGID_31_);
|
|
}
|
|
.st45 {
|
|
fill: url(#SVGID_32_);
|
|
}
|
|
.st46 {
|
|
fill: url(#SVGID_33_);
|
|
}
|
|
.st47 {
|
|
fill: url(#SVGID_34_);
|
|
}
|
|
.st48 {
|
|
fill: url(#SVGID_35_);
|
|
}
|
|
.st49 {
|
|
fill: url(#SVGID_36_);
|
|
}
|
|
.st50 {
|
|
fill: url(#SVGID_37_);
|
|
}
|
|
.st51 {
|
|
fill: url(#SVGID_38_);
|
|
}
|
|
.st52 {
|
|
fill: url(#SVGID_39_);
|
|
}
|
|
.st53 {
|
|
fill: url(#SVGID_40_);
|
|
}
|
|
.st54 {
|
|
fill: url(#SVGID_41_);
|
|
}
|
|
.st55 {
|
|
fill: url(#SVGID_42_);
|
|
}
|
|
.st56 {
|
|
fill: url(#SVGID_43_);
|
|
}
|
|
.st57 {
|
|
fill: url(#SVGID_44_);
|
|
}
|
|
.st58 {
|
|
fill: url(#SVGID_45_);
|
|
}
|
|
.st59 {
|
|
fill: #040404;
|
|
}
|
|
.st60 {
|
|
fill: url(#SVGID_46_);
|
|
}
|
|
.st61 {
|
|
fill: url(#SVGID_47_);
|
|
}
|
|
.st62 {
|
|
fill: url(#SVGID_48_);
|
|
}
|
|
.st63 {
|
|
fill: url(#SVGID_49_);
|
|
}
|
|
.st64 {
|
|
fill: url(#SVGID_50_);
|
|
}
|
|
.st65 {
|
|
fill: url(#SVGID_51_);
|
|
}
|
|
.st66 {
|
|
fill: url(#SVGID_52_);
|
|
}
|
|
.st67 {
|
|
fill: url(#SVGID_53_);
|
|
}
|
|
.st68 {
|
|
fill: url(#SVGID_54_);
|
|
}
|
|
.st69 {
|
|
fill: url(#SVGID_55_);
|
|
}
|
|
.st70 {
|
|
fill: url(#SVGID_56_);
|
|
}
|
|
.st71 {
|
|
fill: url(#SVGID_57_);
|
|
}
|
|
.st72 {
|
|
fill: url(#SVGID_58_);
|
|
}
|
|
.st73 {
|
|
fill: url(#SVGID_59_);
|
|
}
|
|
.st74 {
|
|
fill: url(#SVGID_60_);
|
|
}
|
|
.st75 {
|
|
fill: url(#SVGID_61_);
|
|
}
|
|
.st76 {
|
|
fill: url(#SVGID_62_);
|
|
}
|
|
.st77 {
|
|
fill: none;
|
|
stroke: #000000;
|
|
stroke-width: 3;
|
|
stroke-miterlimit: 10;
|
|
}
|
|
.st78 {
|
|
fill: none;
|
|
stroke: #ffffff;
|
|
stroke-miterlimit: 10;
|
|
}
|
|
.st79 {
|
|
fill: #4bc9ff;
|
|
}
|
|
.st80 {
|
|
fill: #5500dd;
|
|
}
|
|
.st81 {
|
|
fill: #ff3a00;
|
|
}
|
|
.st82 {
|
|
fill: #e6162d;
|
|
}
|
|
.st83 {
|
|
fill: #f1f1f1;
|
|
}
|
|
.st84 {
|
|
fill: #ff9933;
|
|
}
|
|
.st85 {
|
|
fill: #b92b27;
|
|
}
|
|
.st86 {
|
|
fill: #00aced;
|
|
}
|
|
.st87 {
|
|
fill: #bd2125;
|
|
}
|
|
.st88 {
|
|
fill: #1877f2;
|
|
}
|
|
.st89 {
|
|
fill: #fff;
|
|
}
|
|
.st90 {
|
|
fill: #ce3056;
|
|
}
|
|
.st91 {
|
|
fill: #5bb381;
|
|
}
|
|
.st92 {
|
|
fill: #61c3ec;
|
|
}
|
|
.st93 {
|
|
fill: #e4b34b;
|
|
}
|
|
.st94 {
|
|
fill: #181ef2;
|
|
}
|
|
.st95 {
|
|
fill: #ff0000;
|
|
}
|
|
.st96 {
|
|
fill: #fe466c;
|
|
}
|
|
.st97 {
|
|
fill: #fa4778;
|
|
}
|
|
.st98 {
|
|
fill: #ff7700;
|
|
}
|
|
.st99 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #1f6bf6;
|
|
}
|
|
.st100 {
|
|
fill: #520094;
|
|
}
|
|
.st101 {
|
|
fill: #4477e8;
|
|
}
|
|
.st102 {
|
|
fill: #3d1d1c;
|
|
}
|
|
.st103 {
|
|
fill: #ffe812;
|
|
}
|
|
.st104 {
|
|
fill: #344356;
|
|
}
|
|
.st105 {
|
|
fill: #00cc76;
|
|
}
|
|
.st106 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #345e90;
|
|
}
|
|
.st107 {
|
|
fill: #1f65d8;
|
|
}
|
|
.st108 {
|
|
fill: #eb3587;
|
|
}
|
|
.st109 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #603a88;
|
|
}
|
|
.st110 {
|
|
fill: #e3ce99;
|
|
}
|
|
.st111 {
|
|
fill: #783af9;
|
|
}
|
|
.st112 {
|
|
fill: #ff515e;
|
|
}
|
|
.st113 {
|
|
fill: #ff4906;
|
|
}
|
|
.st114 {
|
|
fill: #503227;
|
|
}
|
|
.st115 {
|
|
fill: #4c7bd9;
|
|
}
|
|
.st116 {
|
|
fill: #69c9d0;
|
|
}
|
|
.st117 {
|
|
fill: #1b92d1;
|
|
}
|
|
.st118 {
|
|
fill: #eb4f4a;
|
|
}
|
|
.st119 {
|
|
fill: #513728;
|
|
}
|
|
.st120 {
|
|
fill: #ff6600;
|
|
}
|
|
.st121 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #b61438;
|
|
}
|
|
.st122 {
|
|
fill: #fffc00;
|
|
}
|
|
.st123 {
|
|
fill: #141414;
|
|
}
|
|
.st124 {
|
|
fill: #94d137;
|
|
}
|
|
.st125 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #f1f1f1;
|
|
}
|
|
.st126 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #66e066;
|
|
}
|
|
.st127 {
|
|
fill: #2d8cff;
|
|
}
|
|
.st128 {
|
|
fill: #f1a300;
|
|
}
|
|
.st129 {
|
|
fill: #4ba2f2;
|
|
}
|
|
.st130 {
|
|
fill: #1a5099;
|
|
}
|
|
.st131 {
|
|
fill: #ee6060;
|
|
}
|
|
.st132 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #f48120;
|
|
}
|
|
.st133 {
|
|
fill: #222222;
|
|
}
|
|
.st134 {
|
|
fill: url(#SVGID_63_);
|
|
}
|
|
.st135 {
|
|
fill: #0077b5;
|
|
}
|
|
.st136 {
|
|
fill: #ffcc00;
|
|
}
|
|
.st137 {
|
|
fill: #eb3352;
|
|
}
|
|
.st138 {
|
|
fill: #f9d265;
|
|
}
|
|
.st139 {
|
|
fill: #f5b955;
|
|
}
|
|
.st140 {
|
|
fill: #dd2a7b;
|
|
}
|
|
.st141 {
|
|
fill: #66e066;
|
|
}
|
|
.st142 {
|
|
fill: #eb4e00;
|
|
}
|
|
.st143 {
|
|
fill: #ffc794;
|
|
}
|
|
.st144 {
|
|
fill: #b5332a;
|
|
}
|
|
.st145 {
|
|
fill: #4e85eb;
|
|
}
|
|
.st146 {
|
|
fill: #58a45c;
|
|
}
|
|
.st147 {
|
|
fill: #f2bc42;
|
|
}
|
|
.st148 {
|
|
fill: #d85040;
|
|
}
|
|
.st149 {
|
|
fill: #464eb8;
|
|
}
|
|
.st150 {
|
|
fill: #7b83eb;
|
|
}
|
|
</style> <g id="Layer_1"></g>
|
|
<g id="Layer_2">
|
|
<g>
|
|
<g>
|
|
<path
|
|
class="st89"
|
|
d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"
|
|
></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g></svg
|
|
>
|
|
</button>
|
|
</form>
|
|
|
|
<form method="post" action="?/oauth2">
|
|
<input class="hidden" name="provider" value="github" />
|
|
<button
|
|
on:click={() => (oauthLoading = !oauthLoading)}
|
|
on:mouseenter={handleHoverGithub}
|
|
on:mouseleave={handleHoverGithub}
|
|
class="cursor-pointer shrink-0 rounded-full w-12 h-12 relative bg-default flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
|
|
>
|
|
<svg
|
|
class="{isHoveredGithub
|
|
? 'shake-logo'
|
|
: ''} w-7 h-7 inline-block"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
><path
|
|
fill="white"
|
|
d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
|
|
/></svg
|
|
>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<p
|
|
class="pb-1 text-sm w-full max-w-lg text-gray-300 flex justify-center items-center"
|
|
>
|
|
You don't have an account?
|
|
<label
|
|
on:click={() => (displaySection = "register")}
|
|
class="text-blue-400 sm:hover:underline ml-1 cursor-pointer"
|
|
>Sign up</label
|
|
>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{:else if displaySection === "register"}
|
|
<div class="grid grid-cols-1 gap-4text-white animate-fade-in-once">
|
|
<div class="relative">
|
|
<h2 class="text-center text-white text-2xl pt-10 sm:pt-4 font-bold">
|
|
Getting Started
|
|
</h2>
|
|
</div>
|
|
|
|
<span class="text-gray-400 text-center pb-4">
|
|
Create an account to get started
|
|
</span>
|
|
|
|
<div class="relative">
|
|
<form
|
|
method="POST"
|
|
action="?/register"
|
|
use:enhance={submitRegistration}
|
|
class="flex flex-col items-center space-y-2 w-full md:w-5/6 pt-4 md:ml-auto md:mr-auto"
|
|
>
|
|
<!--<Input id="name" label="Your first and last name" value={form?.data?.name} errors={form?.errors?.name} />-->
|
|
|
|
<Input
|
|
type="email"
|
|
id="email"
|
|
label="Email"
|
|
value={form?.data?.email}
|
|
errors={form?.errors?.email}
|
|
disabled={loading}
|
|
/>
|
|
|
|
<Input
|
|
type="password"
|
|
id="password"
|
|
label="Password"
|
|
errors={form?.errors?.password}
|
|
disabled={loading}
|
|
/>
|
|
|
|
<Input
|
|
type="password"
|
|
id="passwordConfirm"
|
|
label="Confirm Password"
|
|
errors={form?.errors?.passwordConfirm}
|
|
disabled={loading}
|
|
/>
|
|
|
|
<div class="w-full max-w-lg pt-5 m-auto pb-3">
|
|
{#if !loading && !isClicked}
|
|
<button
|
|
type="submit"
|
|
class="btn bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 text-black btn-md w-full rounded-md m-auto font-semibold text-[1rem]"
|
|
>
|
|
<span>Register</span>
|
|
</button>
|
|
{:else}
|
|
<label
|
|
class="cursor-not-allowed btn bg-[#fff] opacity-[0.5] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 text-black btn-md w-full rounded-md m-auto font-semibold text-[1rem]"
|
|
>
|
|
<div class="flex flex-row m-auto items-center">
|
|
<span class="loading loading-infinity"></span>
|
|
<span class="ml-1.5">Signing Up</span>
|
|
</div>
|
|
</label>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="divider divider-[#fff] pt-10 pb-10">
|
|
<span class="text-white text-[1rem] z-10">Or register using</span>
|
|
</div>
|
|
|
|
<div class="flex flex-row items-center gap-x-5 pb-6">
|
|
<form method="post" action="?/oauth2">
|
|
<input class="hidden" name="provider" value="google" />
|
|
<button
|
|
on:click={() => (oauthLoading = !oauthLoading)}
|
|
on:mouseenter={handleHoverGoogle}
|
|
on:mouseleave={handleHoverGoogle}
|
|
class="cursor-pointer shrink-0 rounded-full w-12 h-12 relative bg-default flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
|
|
>
|
|
<svg
|
|
class="{isHoveredGoogle
|
|
? 'shake-logo'
|
|
: ''} w-6 h-6 inline-block"
|
|
viewBox="-3 0 262 262"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
preserveAspectRatio="xMidYMid"
|
|
fill="#000000"
|
|
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
|
id="SVGRepo_tracerCarrier"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></g><g id="SVGRepo_iconCarrier">
|
|
<g>
|
|
<path
|
|
d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451"
|
|
fill="#4285F4"
|
|
>
|
|
</path>
|
|
<path
|
|
d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1"
|
|
fill="#34A853"
|
|
>
|
|
</path>
|
|
<path
|
|
d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37"
|
|
fill="#FBBC05"
|
|
>
|
|
</path>
|
|
<path
|
|
d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479"
|
|
fill="#EB4335"
|
|
>
|
|
</path>
|
|
</g>
|
|
</g></svg
|
|
>
|
|
</button>
|
|
</form>
|
|
<form method="post" action="?/oauth2">
|
|
<input class="hidden" name="provider" value="discord" />
|
|
<button
|
|
on:click={() => (oauthLoading = !oauthLoading)}
|
|
on:mouseenter={handleHoverDiscord}
|
|
on:mouseleave={handleHoverDiscord}
|
|
class="cursor-pointer shrink-0 rounded-full w-12 h-12 relative bg-default flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
|
|
>
|
|
<svg
|
|
class="{isHoveredDiscord
|
|
? 'shake-logo'
|
|
: ''} w-7 h-7 inline-block"
|
|
viewBox="0 0 100 100"
|
|
version="1.1"
|
|
xml:space="preserve"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
fill="#000000"
|
|
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
|
id="SVGRepo_tracerCarrier"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></g><g id="SVGRepo_iconCarrier">
|
|
<style type="text/css">
|
|
.st0 {
|
|
fill: #ffffff;
|
|
}
|
|
.st1 {
|
|
fill: #f5bb41;
|
|
}
|
|
.st2 {
|
|
fill: #2167d1;
|
|
}
|
|
.st3 {
|
|
fill: #3d84f3;
|
|
}
|
|
.st4 {
|
|
fill: #4ca853;
|
|
}
|
|
.st5 {
|
|
fill: #398039;
|
|
}
|
|
.st6 {
|
|
fill: #d74f3f;
|
|
}
|
|
.st7 {
|
|
fill: #d43c89;
|
|
}
|
|
.st8 {
|
|
fill: #b2005f;
|
|
}
|
|
.st9 {
|
|
fill: none;
|
|
stroke: #000000;
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-miterlimit: 10;
|
|
}
|
|
.st10 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: none;
|
|
stroke: #000000;
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-miterlimit: 10;
|
|
}
|
|
.st11 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: none;
|
|
stroke: #040404;
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-miterlimit: 10;
|
|
}
|
|
.st12 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
}
|
|
.st13 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #040404;
|
|
}
|
|
.st14 {
|
|
fill: url(#SVGID_1_);
|
|
}
|
|
.st15 {
|
|
fill: url(#SVGID_2_);
|
|
}
|
|
.st16 {
|
|
fill: url(#SVGID_3_);
|
|
}
|
|
.st17 {
|
|
fill: url(#SVGID_4_);
|
|
}
|
|
.st18 {
|
|
fill: url(#SVGID_5_);
|
|
}
|
|
.st19 {
|
|
fill: url(#SVGID_6_);
|
|
}
|
|
.st20 {
|
|
fill: url(#SVGID_7_);
|
|
}
|
|
.st21 {
|
|
fill: url(#SVGID_8_);
|
|
}
|
|
.st22 {
|
|
fill: url(#SVGID_9_);
|
|
}
|
|
.st23 {
|
|
fill: url(#SVGID_10_);
|
|
}
|
|
.st24 {
|
|
fill: url(#SVGID_11_);
|
|
}
|
|
.st25 {
|
|
fill: url(#SVGID_12_);
|
|
}
|
|
.st26 {
|
|
fill: url(#SVGID_13_);
|
|
}
|
|
.st27 {
|
|
fill: url(#SVGID_14_);
|
|
}
|
|
.st28 {
|
|
fill: url(#SVGID_15_);
|
|
}
|
|
.st29 {
|
|
fill: url(#SVGID_16_);
|
|
}
|
|
.st30 {
|
|
fill: url(#SVGID_17_);
|
|
}
|
|
.st31 {
|
|
fill: url(#SVGID_18_);
|
|
}
|
|
.st32 {
|
|
fill: url(#SVGID_19_);
|
|
}
|
|
.st33 {
|
|
fill: url(#SVGID_20_);
|
|
}
|
|
.st34 {
|
|
fill: url(#SVGID_21_);
|
|
}
|
|
.st35 {
|
|
fill: url(#SVGID_22_);
|
|
}
|
|
.st36 {
|
|
fill: url(#SVGID_23_);
|
|
}
|
|
.st37 {
|
|
fill: url(#SVGID_24_);
|
|
}
|
|
.st38 {
|
|
fill: url(#SVGID_25_);
|
|
}
|
|
.st39 {
|
|
fill: url(#SVGID_26_);
|
|
}
|
|
.st40 {
|
|
fill: url(#SVGID_27_);
|
|
}
|
|
.st41 {
|
|
fill: url(#SVGID_28_);
|
|
}
|
|
.st42 {
|
|
fill: url(#SVGID_29_);
|
|
}
|
|
.st43 {
|
|
fill: url(#SVGID_30_);
|
|
}
|
|
.st44 {
|
|
fill: url(#SVGID_31_);
|
|
}
|
|
.st45 {
|
|
fill: url(#SVGID_32_);
|
|
}
|
|
.st46 {
|
|
fill: url(#SVGID_33_);
|
|
}
|
|
.st47 {
|
|
fill: url(#SVGID_34_);
|
|
}
|
|
.st48 {
|
|
fill: url(#SVGID_35_);
|
|
}
|
|
.st49 {
|
|
fill: url(#SVGID_36_);
|
|
}
|
|
.st50 {
|
|
fill: url(#SVGID_37_);
|
|
}
|
|
.st51 {
|
|
fill: url(#SVGID_38_);
|
|
}
|
|
.st52 {
|
|
fill: url(#SVGID_39_);
|
|
}
|
|
.st53 {
|
|
fill: url(#SVGID_40_);
|
|
}
|
|
.st54 {
|
|
fill: url(#SVGID_41_);
|
|
}
|
|
.st55 {
|
|
fill: url(#SVGID_42_);
|
|
}
|
|
.st56 {
|
|
fill: url(#SVGID_43_);
|
|
}
|
|
.st57 {
|
|
fill: url(#SVGID_44_);
|
|
}
|
|
.st58 {
|
|
fill: url(#SVGID_45_);
|
|
}
|
|
.st59 {
|
|
fill: #040404;
|
|
}
|
|
.st60 {
|
|
fill: url(#SVGID_46_);
|
|
}
|
|
.st61 {
|
|
fill: url(#SVGID_47_);
|
|
}
|
|
.st62 {
|
|
fill: url(#SVGID_48_);
|
|
}
|
|
.st63 {
|
|
fill: url(#SVGID_49_);
|
|
}
|
|
.st64 {
|
|
fill: url(#SVGID_50_);
|
|
}
|
|
.st65 {
|
|
fill: url(#SVGID_51_);
|
|
}
|
|
.st66 {
|
|
fill: url(#SVGID_52_);
|
|
}
|
|
.st67 {
|
|
fill: url(#SVGID_53_);
|
|
}
|
|
.st68 {
|
|
fill: url(#SVGID_54_);
|
|
}
|
|
.st69 {
|
|
fill: url(#SVGID_55_);
|
|
}
|
|
.st70 {
|
|
fill: url(#SVGID_56_);
|
|
}
|
|
.st71 {
|
|
fill: url(#SVGID_57_);
|
|
}
|
|
.st72 {
|
|
fill: url(#SVGID_58_);
|
|
}
|
|
.st73 {
|
|
fill: url(#SVGID_59_);
|
|
}
|
|
.st74 {
|
|
fill: url(#SVGID_60_);
|
|
}
|
|
.st75 {
|
|
fill: url(#SVGID_61_);
|
|
}
|
|
.st76 {
|
|
fill: url(#SVGID_62_);
|
|
}
|
|
.st77 {
|
|
fill: none;
|
|
stroke: #000000;
|
|
stroke-width: 3;
|
|
stroke-miterlimit: 10;
|
|
}
|
|
.st78 {
|
|
fill: none;
|
|
stroke: #ffffff;
|
|
stroke-miterlimit: 10;
|
|
}
|
|
.st79 {
|
|
fill: #4bc9ff;
|
|
}
|
|
.st80 {
|
|
fill: #5500dd;
|
|
}
|
|
.st81 {
|
|
fill: #ff3a00;
|
|
}
|
|
.st82 {
|
|
fill: #e6162d;
|
|
}
|
|
.st83 {
|
|
fill: #f1f1f1;
|
|
}
|
|
.st84 {
|
|
fill: #ff9933;
|
|
}
|
|
.st85 {
|
|
fill: #b92b27;
|
|
}
|
|
.st86 {
|
|
fill: #00aced;
|
|
}
|
|
.st87 {
|
|
fill: #bd2125;
|
|
}
|
|
.st88 {
|
|
fill: #1877f2;
|
|
}
|
|
.st89 {
|
|
fill: #fff;
|
|
}
|
|
.st90 {
|
|
fill: #ce3056;
|
|
}
|
|
.st91 {
|
|
fill: #5bb381;
|
|
}
|
|
.st92 {
|
|
fill: #61c3ec;
|
|
}
|
|
.st93 {
|
|
fill: #e4b34b;
|
|
}
|
|
.st94 {
|
|
fill: #181ef2;
|
|
}
|
|
.st95 {
|
|
fill: #ff0000;
|
|
}
|
|
.st96 {
|
|
fill: #fe466c;
|
|
}
|
|
.st97 {
|
|
fill: #fa4778;
|
|
}
|
|
.st98 {
|
|
fill: #ff7700;
|
|
}
|
|
.st99 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #1f6bf6;
|
|
}
|
|
.st100 {
|
|
fill: #520094;
|
|
}
|
|
.st101 {
|
|
fill: #4477e8;
|
|
}
|
|
.st102 {
|
|
fill: #3d1d1c;
|
|
}
|
|
.st103 {
|
|
fill: #ffe812;
|
|
}
|
|
.st104 {
|
|
fill: #344356;
|
|
}
|
|
.st105 {
|
|
fill: #00cc76;
|
|
}
|
|
.st106 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #345e90;
|
|
}
|
|
.st107 {
|
|
fill: #1f65d8;
|
|
}
|
|
.st108 {
|
|
fill: #eb3587;
|
|
}
|
|
.st109 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #603a88;
|
|
}
|
|
.st110 {
|
|
fill: #e3ce99;
|
|
}
|
|
.st111 {
|
|
fill: #783af9;
|
|
}
|
|
.st112 {
|
|
fill: #ff515e;
|
|
}
|
|
.st113 {
|
|
fill: #ff4906;
|
|
}
|
|
.st114 {
|
|
fill: #503227;
|
|
}
|
|
.st115 {
|
|
fill: #4c7bd9;
|
|
}
|
|
.st116 {
|
|
fill: #69c9d0;
|
|
}
|
|
.st117 {
|
|
fill: #1b92d1;
|
|
}
|
|
.st118 {
|
|
fill: #eb4f4a;
|
|
}
|
|
.st119 {
|
|
fill: #513728;
|
|
}
|
|
.st120 {
|
|
fill: #ff6600;
|
|
}
|
|
.st121 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #b61438;
|
|
}
|
|
.st122 {
|
|
fill: #fffc00;
|
|
}
|
|
.st123 {
|
|
fill: #141414;
|
|
}
|
|
.st124 {
|
|
fill: #94d137;
|
|
}
|
|
.st125 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #f1f1f1;
|
|
}
|
|
.st126 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #66e066;
|
|
}
|
|
.st127 {
|
|
fill: #2d8cff;
|
|
}
|
|
.st128 {
|
|
fill: #f1a300;
|
|
}
|
|
.st129 {
|
|
fill: #4ba2f2;
|
|
}
|
|
.st130 {
|
|
fill: #1a5099;
|
|
}
|
|
.st131 {
|
|
fill: #ee6060;
|
|
}
|
|
.st132 {
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
fill: #f48120;
|
|
}
|
|
.st133 {
|
|
fill: #222222;
|
|
}
|
|
.st134 {
|
|
fill: url(#SVGID_63_);
|
|
}
|
|
.st135 {
|
|
fill: #0077b5;
|
|
}
|
|
.st136 {
|
|
fill: #ffcc00;
|
|
}
|
|
.st137 {
|
|
fill: #eb3352;
|
|
}
|
|
.st138 {
|
|
fill: #f9d265;
|
|
}
|
|
.st139 {
|
|
fill: #f5b955;
|
|
}
|
|
.st140 {
|
|
fill: #dd2a7b;
|
|
}
|
|
.st141 {
|
|
fill: #66e066;
|
|
}
|
|
.st142 {
|
|
fill: #eb4e00;
|
|
}
|
|
.st143 {
|
|
fill: #ffc794;
|
|
}
|
|
.st144 {
|
|
fill: #b5332a;
|
|
}
|
|
.st145 {
|
|
fill: #4e85eb;
|
|
}
|
|
.st146 {
|
|
fill: #58a45c;
|
|
}
|
|
.st147 {
|
|
fill: #f2bc42;
|
|
}
|
|
.st148 {
|
|
fill: #d85040;
|
|
}
|
|
.st149 {
|
|
fill: #464eb8;
|
|
}
|
|
.st150 {
|
|
fill: #7b83eb;
|
|
}
|
|
</style> <g id="Layer_1"></g>
|
|
<g id="Layer_2">
|
|
<g>
|
|
<g>
|
|
<path
|
|
class="st89"
|
|
d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"
|
|
></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g></svg
|
|
>
|
|
</button>
|
|
</form>
|
|
|
|
<form method="post" action="?/oauth2">
|
|
<input class="hidden" name="provider" value="github" />
|
|
<button
|
|
on:click={() => (oauthLoading = !oauthLoading)}
|
|
on:mouseenter={handleHoverGithub}
|
|
on:mouseleave={handleHoverGithub}
|
|
class="cursor-pointer shrink-0 rounded-full w-12 h-12 relative bg-default flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
|
|
>
|
|
<svg
|
|
class="{isHoveredGithub
|
|
? 'shake-logo'
|
|
: ''} w-7 h-7 inline-block"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
><path
|
|
fill="white"
|
|
d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
|
|
/></svg
|
|
>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<p class="pb-1 text-xs text-gray-300 text-center">
|
|
By registering you agree to stocknear's
|
|
<a href="/terms-of-use" class="text-blue-400 hover:underline"
|
|
>Terms of Use</a
|
|
>
|
|
and acknowledge that you've read our
|
|
<a href="/privacy-policy" class="text-blue-400 hover:underline"
|
|
>Privacy Policy</a
|
|
>.
|
|
</p>
|
|
|
|
<p
|
|
class="pt-3 pb-1 text-sm w-full max-w-lg text-gray-300 flex justify-center items-center"
|
|
>
|
|
You already have an account?
|
|
<label
|
|
on:click={() => (displaySection = "login")}
|
|
class="text-blue-400 hover:underline ml-1 cursor-pointer"
|
|
>Sign in</label
|
|
>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if oauthLoading}
|
|
<div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
|
|
<div class="relative">
|
|
<label
|
|
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
>
|
|
<span class="loading loading-spinner loading-md text-gray-400"
|
|
></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</dialog>
|