AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfixing loginpopup

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-26 19:38:09 +02:00
parent 207d347d6c
commit 84f1ab334b
9 changed files with 85 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Input.svelte
View File

@ -231,6 +231,7 @@ $: {
</div>
{/if}
</div>
{#if errors}
<label for={id} class="label py-0 pt-1">
<span class="label-text-alt text-error">
@ -238,4 +239,5 @@ $: {
</span>
</label>
{/if}
</div>

59
src/lib/components/LoginPopup.svelte
View File

@ -7,8 +7,11 @@
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':
@ -26,7 +29,8 @@
await update();
break;
}
case 'redirect':
case 'redirect':
isClicked = true;
toast.success('Login successfully!', {
style: 'border-radius: 200px; background: #333; color: #fff;'});
await update();
@ -56,18 +60,18 @@
}, 280);
*/
loading = false;
}
}
let loading = false;
const submitRegistration= () => {
loading = true;
return async ({ result, update}) => {
console.log(result.type);
switch (result.type) {
case 'success':
isClicked = true;
toast.success('Registration successfully!', {
style: 'border-radius: 200px; background: #333; color: #fff;'});
await update();
@ -113,10 +117,6 @@ const output = await response.json();
let displaySection = 'login';
function changeSection(state)
{
displaySection = state;
}
let isHoveredGoogle = false;
let isHoveredDiscord = false;
@ -140,22 +140,21 @@ function handleHoverGithub() {
</script>
<svelte:options immutable={true} />
{#if $screenWidth > 640}
<!--Start Login Modal-->
<input type="checkbox" id="userLogin" class="modal-toggle" />
<dialog id="userLogin" class="modal modal-bottom sm:modal-middle border border-slate-800">
<dialog id="userLogin" class="modal modal-bottom sm:modal-middle">
<label on:click={() => form= []} id="userLogin" for="userLogin" class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.05] "></label>
<div class="modal-box w-full bg-[#000] border border-slate-800 {$screenWidth < 640 ? 'min-h-screen' : ''}">
<div class="modal-box w-full bg-[#000] border border-gray-800 {$screenWidth < 640 ? 'min-h-screen' : ''}">
@ -190,13 +189,22 @@ function handleHoverGithub() {
label="Password"
errors={form?.errors?.password}
/>
<div class="w-full max-w-lg">
<a href="/reset-password" class="text-sm font-semibold text-[#FB6A67] hover:cursor-pointer hover:underline">Forgot Password?</a>
<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">
<button type="submit" class="btn bg-[#09090B] border border-gray-600 sm:hover:bg-[#313131] text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-md">
Login
</button>
{#if !loading && !isClicked}
<button type="submit" class="btn bg-purple-600 border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
<span class="text-white">Login</span>
</button>
{:else}
<label class="cursor-not-allowed btn bg-purple-600 opacity-[0.5] border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
<div class="flex flex-row m-auto items-center">
<span class="loading loading-infinity"></span>
<span class="text-white ml-1.5">Signing Up</span>
</div>
</label>
{/if}
</div>
<div class="divider divider-[#fff] pt-10 pb-10">
@ -305,9 +313,18 @@ function handleHoverGithub() {
/>
<div class="w-full max-w-lg pt-5 m-auto pb-3">
<button type="submit" class="btn bg-[#09090B] border border-gray-600 sm:hover:bg-[#313131] text-white btn-md w-full rounded-lg m-auto font-semibold text-md">
Register
</button>
{#if !loading && !isClicked}
<button type="submit" class="btn bg-purple-600 border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
<span class="text-white">Register</span>
</button>
{:else}
<label class="cursor-not-allowed btn bg-purple-600 opacity-[0.5] border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
<div class="flex flex-row m-auto items-center">
<span class="loading loading-infinity"></span>
<span class="text-white ml-1.5">Signing Up</span>
</div>
</label>
{/if}
</div>
<div class="divider divider-[#fff] pt-10 pb-10">

5
src/lib/components/Pricing.svelte
View File

@ -1,10 +1,11 @@
<script lang='ts'>
import { globalForm } from '$lib/store';
import { onMount } from 'svelte';
//import proTierLogo from "$lib/images/pro_tier_logo.png";
export let data;
export let form;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let mode = false;
@ -339,7 +340,7 @@ onMount(async () => {
<!--Start Login Modal-->
{#if LoginPopup}
<LoginPopup form={$globalForm}/>
<LoginPopup form={form}/>
{/if}
<!--End Login Modal-->

2
src/routes/+layout.svelte
View File

@ -347,7 +347,7 @@ $: {
<main class="w-full">
<slot />
<Toaster class="bg-[#1A1A27] text-white text-medium"/>
{#if Cookie && $showCookieConsent === true}
<Cookie />
{/if}

39
src/routes/+page.server.ts
View File

@ -15,6 +15,19 @@ export const load = ({ cookies }) => {
*/
async function checkDisposableEmail(email) {
const url = `https://disposable.debounce.io/?email=${encodeURIComponent(email)}`;
const response = await fetch(url, {
method: 'GET',
headers: {
"Content-Type": "application/json"
},
});
const output = (await response.json())?.disposable ?? false;
return output
}
export const actions = {
@ -51,27 +64,36 @@ export const actions = {
}
redirect(302, '/');
redirect(301, '/home');
},
register: async ({ locals, request }) => {
const { formData, errors } = await validateData(await request.formData(), registerUserSchema);
const { formData, errors } = await validateData(await request.formData(), registerUserSchema);
if (errors) {
return fail(400, {
data: formData,
errors: errors.fieldErrors
});
}
const isEmailDisposable = await checkDisposableEmail(formData?.email);
if(isEmailDisposable === "true") {
error(400, 'Disposable Email Addresses not allowed!');
}
//let username = generateUsername(formData.name.split(' ').join('')).toLowerCase();
try {
let newUser = await locals.pb.collection('users').create(formData);
const newUser = await locals.pb.collection('users').create(formData);
await locals.pb?.collection('users').update(
newUser?.id, {
'freeTrial' : true,
'tier': 'Pro', //Give new users a free trial for the Pro Subscription
});
await locals.pb.collection('users').requestVerification(formData.email);
} catch (err) {
console.log('Error: ', err);
@ -83,13 +105,20 @@ export const actions = {
.collection("users")
.authWithPassword(formData.email, formData.password);
/*
if (!locals.pb?.authStore?.model?.verified) {
locals.pb.authStore.clear();
return {
notVerified: true,
};
}
*/
} catch (err) {
console.log("Error: ", err);
error(err.status, err.message);
}
redirect(303, "/");
redirect(301, "/home");
},

3
src/routes/+page.svelte
View File

@ -6,6 +6,7 @@
import { intersect } from 'svelte-intersection-observer-action';
export let data;
export let form;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
@ -454,7 +455,7 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
</div>
<Pricing />
<Pricing data={data} form={form}/>
</div>

4
src/routes/pricing/+page.svelte
View File

@ -7,6 +7,8 @@ import { onMount } from 'svelte';
//import proTierLogo from "$lib/images/pro_tier_logo.png";
export let data;
export let form;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let mode = false;
@ -747,7 +749,7 @@ async function purchasePlan(subscriptionType:string='') {
<!--Start Login Modal-->
{#if LoginPopup}
<LoginPopup form={$globalForm}/>
<LoginPopup form={form}/>
{/if}
<!--End Login Modal-->

2
src/routes/register/+page.server.ts
View File

@ -64,7 +64,7 @@ export const actions = {
*/
} catch (err) {
console.log("Error: ", err);
//error(err.status, err.message);
error(err.status, err.message);
}
redirect(301, "/");

2
src/routes/register/+page.svelte
View File

@ -11,10 +11,10 @@
let loading = false;
let oauthLoading = false;
const submitRegistration= () => {
loading = true;
return async ({ result, update}) => {
switch (result.type) {
case 'success':
case 'redirect':