feat: redo settings and all org pages. (#601)
* feat: new components, deploy storybook * refactor: simplify component field definitions and enhance button loading state - Removed unnecessary type imports and simplified the FIELDS array definitions across multiple components in Storybook. - Updated button component to use a loading state instead of isLoading, improving clarity and consistency in props. - Adjusted button stories to reflect the new loading prop and enhanced the button's loading visual feedback. - Minor CSS adjustments for better layout and styling consistency. * chore: add field, card, password components * feat: improve page component & update AuthUI path * chore: update bits-ui to version 2.14.4 and all org related UI's - Updated bits-ui dependency in pnpm-lock.yaml and package.json to version 2.14.4. - Refactored imports for RoleBasedSecurity and UpgradeBanner components to use the new ui feature directory. - Removed unused Course components and related files to clean up the codebase. - Enhanced various components to improve consistency and maintainability. * chore: move all setting buttons to the top and update auth ui styles * chore: remove svelte-loading-spinners and replace with @cio/ui/base/spinner - Removed all instances of svelte-loading-spinners from the project. - Updated components to use the new Spinner from @cio/ui/base/spinner. - Cleaned up pnpm-lock.yaml and package.json to reflect the removal of svelte-loading-spinners. - Added new CSS animations for rocket launch effects in app.css. - Enhanced email change flow with updated verification messages in translations. * chore: remove supabase file upload from dashboard and move to r2 * chore: update organization API and UI components - Added new API methods for organization plan operations and team management. - Introduced middleware for API key authentication and organization admin checks. - Refactored organization-related components to utilize the new API structure. - Updated various UI components to improve consistency and maintainability. - Enhanced error handling and validation for organization-related actions. - Removed deprecated services and streamlined the codebase.
This commit is contained in:
Rotimi Best
@@ -0,0 +1,42 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { AuthUI } from '$lib/features/ui';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import * as Card from '@cio/ui/base/card';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import Avatar from '$lib/components/Avatar/index.svelte';
|
||||
|
||||
const errorCode = $derived(new URLSearchParams(page.url.search).get('error'));
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Reset Password - ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<AuthUI isLogin={false} showOnlyContent={true}>
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<Avatar
|
||||
src={$currentOrg.avatarUrl ? $currentOrg.avatarUrl : '/logo-192.png'}
|
||||
name={$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
|
||||
shape="rounded-md"
|
||||
width="w-10"
|
||||
height="max-h-10"
|
||||
className="mr-2"
|
||||
/>
|
||||
|
||||
<p class="text-xl font-semibold">Something went wrong</p>
|
||||
|
||||
{#if errorCode}
|
||||
<Card.Description class="border px-2 py-1">
|
||||
CODE: {errorCode}
|
||||
</Card.Description>
|
||||
{/if}
|
||||
|
||||
<Card.Description class="text-center">
|
||||
We encountered an unexpected error. Please try again or return to the home page. If you're a developer, you can
|
||||
find more information about the error here.
|
||||
</Card.Description>
|
||||
|
||||
<Button href="/" class="">Go Home</Button>
|
||||
</div>
|
||||
</AuthUI>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { ROUTE } from '$lib/utils/constants/routes';
|
||||
import { AuthUI } from '$lib/features/ui';
|
||||
import EmailSentIcon from '$lib/components/Icons/EmailSentIcon.svelte';
|
||||
import { forgotApi } from '$lib/features/auth/api/forgot.svelte';
|
||||
import type { TForgotPasswordForm } from '$lib/features/auth/utils/types';
|
||||
import * as Field from '@cio/ui/base/field';
|
||||
import { Input } from '@cio/ui/base/input';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import * as Card from '@cio/ui/base/card';
|
||||
|
||||
let fields: TForgotPasswordForm = $state({ email: '' });
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Forgot Password - ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<AuthUI handleSubmit={() => forgotApi.submit(fields)} showOnlyContent={true} showLogo={!forgotApi.success}>
|
||||
{#if forgotApi.success}
|
||||
<div class="ui:flex ui:flex-col ui:items-center ui:justify-center ui:gap-4">
|
||||
<EmailSentIcon />
|
||||
<Card.Title class="ui:text-xl">Email Sent!</Card.Title>
|
||||
<p class="ui:text-center ui:text-sm ui:text-muted-foreground">
|
||||
We have sent a confirmation email to <span class="ui:text-primary">{fields.email}</span>. Kindly check your
|
||||
inbox to reset password or spam to reset your password.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ui:mt-6 ui:flex ui:w-full ui:items-center ui:justify-end">
|
||||
<Button type="button" class="ui:w-full" onclick={() => goto(ROUTE.LOGIN)}>Okay</Button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="ui:flex ui:flex-col ui:gap-6">
|
||||
<div>
|
||||
<Card.Title class="ui:text-xl">Forgot Password</Card.Title>
|
||||
<Card.Description class="ui:mt-2">
|
||||
We will send you a reset link to your email
|
||||
</Card.Description>
|
||||
</div>
|
||||
<Field.Field>
|
||||
<Field.Label for="email">Your email</Field.Label>
|
||||
<Field.Content>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
bind:value={fields.email}
|
||||
placeholder="[email protected]"
|
||||
disabled={forgotApi.isLoading}
|
||||
autofocus
|
||||
aria-invalid={forgotApi.errors.email ? 'true' : undefined}
|
||||
/>
|
||||
{#if forgotApi.errors.email}
|
||||
<Field.Error>{forgotApi.errors.email}</Field.Error>
|
||||
{/if}
|
||||
</Field.Content>
|
||||
</Field.Field>
|
||||
|
||||
<div class="ui:flex ui:w-full ui:flex-col ui:gap-2">
|
||||
<Button type="submit" disabled={forgotApi.isLoading} loading={forgotApi.isLoading} class="ui:w-full">
|
||||
Reset Password
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" class="ui:w-full" onclick={() => goto(ROUTE.LOGIN)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</AuthUI>
|
||||
@@ -0,0 +1,119 @@
|
||||
<script lang="ts">
|
||||
import { AuthUI } from '$lib/features/ui';
|
||||
import { LOGIN_FIELDS } from '$lib/utils/constants/authentication';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { authValidation } from '$lib/utils/functions/validator';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import { authClient } from '$lib/utils/services/auth/client';
|
||||
import { capturePosthogEvent } from '$lib/utils/services/posthog';
|
||||
import { globalStore } from '$lib/utils/store/app';
|
||||
import * as Field from '@cio/ui/base/field';
|
||||
import { Input } from '@cio/ui/base/input';
|
||||
import { Password } from '@cio/ui/custom/password';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
|
||||
let fields = $state(Object.assign({}, LOGIN_FIELDS));
|
||||
let submitError: string | undefined = $state();
|
||||
let loading = $state(false);
|
||||
let errors = $state(Object.assign({}, LOGIN_FIELDS));
|
||||
|
||||
async function handleSubmit() {
|
||||
const validationRes = authValidation(fields);
|
||||
console.log('validationRes', validationRes);
|
||||
|
||||
if (Object.keys(validationRes).length) {
|
||||
errors = Object.assign(errors, validationRes);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
loading = true;
|
||||
|
||||
const { data, error } = await authClient.signIn.email(
|
||||
{
|
||||
email: fields.email,
|
||||
password: fields.password
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
capturePosthogEvent('login', {
|
||||
email: fields.email
|
||||
});
|
||||
|
||||
if ($globalStore.isOrgSite) {
|
||||
capturePosthogEvent('student_login', {
|
||||
email: fields.email
|
||||
});
|
||||
}
|
||||
|
||||
window.location.href = '/';
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
console.log('data', data);
|
||||
|
||||
if (error) throw error;
|
||||
} catch (error: any) {
|
||||
submitError = error.error_description || error.message;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Welcome back to {$currentOrg.name || 'ClassroomIO'}</title>
|
||||
</svelte:head>
|
||||
|
||||
<AuthUI isLogin={true} {handleSubmit} isLoading={loading}>
|
||||
<div class="ui:flex ui:flex-col ui:gap-6">
|
||||
<Field.Field>
|
||||
<Field.Label for="email">{$t('login.email')}</Field.Label>
|
||||
<Field.Content>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
bind:value={fields.email}
|
||||
placeholder="[email protected]"
|
||||
disabled={loading}
|
||||
autofocus
|
||||
aria-invalid={errors.email ? 'true' : undefined}
|
||||
autocomplete="username"
|
||||
/>
|
||||
{#if errors.email}
|
||||
<Field.Error>{$t(errors.email)}</Field.Error>
|
||||
{/if}
|
||||
</Field.Content>
|
||||
</Field.Field>
|
||||
|
||||
<Field.Field>
|
||||
<div class="ui:flex ui:items-center ui:justify-between">
|
||||
<Field.Label for="password">{$t('login.password')}</Field.Label>
|
||||
<a class="ui:text-sm ui:text-primary ui:hover:underline" href="/forgot">
|
||||
{$t('login.forgot')}
|
||||
</a>
|
||||
</div>
|
||||
<Field.Content>
|
||||
<Password
|
||||
id="password"
|
||||
bind:value={fields.password}
|
||||
placeholder="************"
|
||||
disabled={loading}
|
||||
aria-invalid={errors.password ? 'true' : undefined}
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
{#if errors.password}
|
||||
<Field.Error>{$t(errors.password)}</Field.Error>
|
||||
{/if}
|
||||
</Field.Content>
|
||||
</Field.Field>
|
||||
|
||||
{#if submitError}
|
||||
<p class="ui:text-sm ui:text-destructive">{submitError}</p>
|
||||
{/if}
|
||||
|
||||
<Button type="submit" disabled={loading} {loading} class="ui:w-full">
|
||||
{$t('login.login')}
|
||||
</Button>
|
||||
</div>
|
||||
</AuthUI>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { logout } from '$lib/utils/functions/logout';
|
||||
|
||||
onMount(() => {
|
||||
logout();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex min-h-screen w-full items-center justify-center">
|
||||
<div>Logging you out...</div>
|
||||
</div>
|
||||
@@ -0,0 +1,202 @@
|
||||
<script lang="ts">
|
||||
import * as Select from '@cio/ui/base/select';
|
||||
import { Input } from '@cio/ui/base/input';
|
||||
import { DomainInput } from '@cio/ui/custom/domain-input';
|
||||
import * as Field from '@cio/ui/base/field';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import UserProfileIcon from '$lib/components/Icons/UserProfileIcon.svelte';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { onboardingApi } from '$lib/features/onboarding/api/onboarding.svelte';
|
||||
import { generateSitename } from '$lib/utils/functions/org';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { GOALS, ONBOARDING_STEPS, SOURCES, DROPDOWN_ITEMS } from '$lib/features/onboarding/utils/constants';
|
||||
import type { OnboardingField } from '$lib/features/onboarding/utils/types';
|
||||
import { untrack } from 'svelte';
|
||||
|
||||
let fields: OnboardingField = $state({
|
||||
fullname: '',
|
||||
orgName: '',
|
||||
siteName: '',
|
||||
locale: 'en'
|
||||
});
|
||||
let isSiteNameTouched = $state(false);
|
||||
|
||||
const progress = $derived(Math.round((onboardingApi.step / Object.keys(ONBOARDING_STEPS).length) * 100));
|
||||
|
||||
function updateSiteName(sname?: string) {
|
||||
if (!sname) return;
|
||||
|
||||
untrack(() => {
|
||||
fields.siteName = generateSitename(sname);
|
||||
});
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
updateSiteName(fields.siteName);
|
||||
});
|
||||
|
||||
function setOrgSiteName(orgName: string | undefined, isTouched: boolean) {
|
||||
if (!orgName || isTouched) return;
|
||||
|
||||
untrack(() => {
|
||||
fields.siteName = orgName
|
||||
?.toLowerCase()
|
||||
?.replace(/\s+/g, '-')
|
||||
?.replace(/[^a-zA-Z0-9-]/g, '');
|
||||
});
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
setOrgSiteName(fields.orgName, isSiteNameTouched);
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if $profile.id}
|
||||
<div class="flex min-h-screen w-full justify-center dark:bg-neutral-900">
|
||||
<div class="flex w-9/12 max-w-md flex-col items-center justify-center">
|
||||
<!-- Header With Logo -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-4 flex w-full items-center justify-center">
|
||||
<img src="/logo-192.png" alt="ClassroomIO logo" height="50" width="50" data-atf="1" />
|
||||
<h4 class="text-xl dark:text-white">ClassroomIO</h4>
|
||||
</div>
|
||||
|
||||
<!-- Loggedin Email -->
|
||||
<div
|
||||
class="mb-6 flex w-64 items-center justify-center rounded-2xl border border-gray-300 bg-gray-100 py-6 dark:bg-neutral-800"
|
||||
>
|
||||
<UserProfileIcon />
|
||||
<p class="ml-2 text-sm dark:text-white">{$profile.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-container w-full overflow-y-auto px-2">
|
||||
{#if onboardingApi.step === ONBOARDING_STEPS.ORG_SETUP}
|
||||
<!-- Name/Organization Question -->
|
||||
<Field.Group class="mb-6">
|
||||
<!-- Full name -->
|
||||
<Field.Field>
|
||||
<Field.Label>{$t('onboarding.fullname')}</Field.Label>
|
||||
<Input bind:value={fields.fullname} name="fullname" type="text" placeholder="e.g Joke Silva" />
|
||||
{#if onboardingApi.errors.fullname}
|
||||
<Field.Error>{onboardingApi.errors.fullname}</Field.Error>
|
||||
{/if}
|
||||
</Field.Field>
|
||||
|
||||
<!-- Org name -->
|
||||
<Field.Field>
|
||||
<Field.Label>{$t('onboarding.name')}</Field.Label>
|
||||
<Input bind:value={fields.orgName} name="orgname" type="text" placeholder="e.g My School Name" />
|
||||
{#if onboardingApi.errors.orgName}
|
||||
<Field.Error>{onboardingApi.errors.orgName}</Field.Error>
|
||||
{/if}
|
||||
</Field.Field>
|
||||
|
||||
<!-- Org Site Name -->
|
||||
<Field.Field>
|
||||
<Field.Label>{$t('onboarding.organisation_sitename')}</Field.Label>
|
||||
<DomainInput
|
||||
bind:value={fields.siteName}
|
||||
placeholder="myschool"
|
||||
prefix="https://"
|
||||
suffix=".classroomio.com"
|
||||
oninput={() => {
|
||||
isSiteNameTouched = true;
|
||||
}}
|
||||
/>
|
||||
{#if onboardingApi.errors.siteName}
|
||||
<Field.Error>{onboardingApi.errors.siteName}</Field.Error>
|
||||
{/if}
|
||||
</Field.Field>
|
||||
</Field.Group>
|
||||
{:else}
|
||||
<!-- Goal/Source Question -->
|
||||
<div id="goal-question" class="mb-6 flex flex-col items-center">
|
||||
<div class="w-10/12">
|
||||
<!-- Goal Question -->
|
||||
<div class="mb-10 flex w-full flex-col items-start justify-between">
|
||||
<label for="text-field" class="m-0 mb-3 text-lg font-normal dark:text-white">
|
||||
{$t('onboarding.what_brings')}
|
||||
</label>
|
||||
|
||||
<!-- Loop through Goals -->
|
||||
{#each GOALS as goal}
|
||||
<label class="mb-1 inline-flex w-full items-center font-light dark:text-white">
|
||||
<input type="radio" bind:group={fields.goal} name="goal" value={goal.value} class="mr-2" />
|
||||
{$t(goal.label)}
|
||||
</label>
|
||||
{/each}
|
||||
<!-- Goal: Error message -->
|
||||
{#if onboardingApi.errors.goal}
|
||||
<p class="text-sm text-red-500">
|
||||
{onboardingApi.errors.goal}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Source Question -->
|
||||
<div class="flex w-full flex-col items-start justify-between">
|
||||
<label for="text-field" class="m-0 mb-3 text-lg font-normal dark:text-white">
|
||||
{$t('onboarding.how')}
|
||||
</label>
|
||||
|
||||
<!-- Loop through Goals -->
|
||||
{#each SOURCES as source}
|
||||
<label class="mb-1 inline-flex w-full items-center font-light dark:text-white">
|
||||
<input type="radio" bind:group={fields.source} name="source" value={source.value} class="mr-2" />
|
||||
{$t(source.label)}
|
||||
</label>
|
||||
{/each}
|
||||
<!-- Goal: Error message -->
|
||||
{#if onboardingApi.errors.source}
|
||||
<p class="text-sm text-red-500">
|
||||
{onboardingApi.errors.source}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Language Picker -->
|
||||
<div class="mt-10">
|
||||
<span class="dark:text-white">{$t('content.toggle_label')}: </span>
|
||||
<Select.Root type="single" bind:value={fields.locale}>
|
||||
<Select.Trigger class="w-full">
|
||||
<p>{DROPDOWN_ITEMS.find((item) => item.id === fields.locale)?.text}</p>
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each DROPDOWN_ITEMS as item}
|
||||
<Select.Item value={item.id}>{item.text}</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="mt-8 flex w-full items-center justify-between">
|
||||
<div class="relative h-2 w-24 bg-gray-300">
|
||||
<span class="progress bg-primary-700 absolute left-0 top-0 h-full" style="width: {progress}%;"></span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
{#if onboardingApi.step > ONBOARDING_STEPS.ORG_SETUP}
|
||||
<Button variant="ghost" onclick={() => (onboardingApi.step = ONBOARDING_STEPS.ORG_SETUP)}>
|
||||
{$t('onboarding.back')}
|
||||
</Button>
|
||||
{/if}
|
||||
<Button loading={onboardingApi.isLoading} onclick={() => onboardingApi.submit(fields)}>
|
||||
{$t('onboarding.continue')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.form-container {
|
||||
max-height: 66%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script lang="ts">
|
||||
import { onMount, untrack } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { resolve } from '$app/paths';
|
||||
import { page } from '$app/state';
|
||||
import { getConfirmPasswordError } from '$lib/utils/functions/validator';
|
||||
import { AuthUI } from '$lib/features/ui';
|
||||
import { resetApi } from '$lib/features/auth/api/reset.svelte';
|
||||
import type { TResetPasswordForm } from '$lib/features/auth/utils/types';
|
||||
import { snackbar } from '$lib/components/Snackbar/store';
|
||||
import * as Field from '@cio/ui/base/field';
|
||||
import { Password } from '@cio/ui/custom/password';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import * as Card from '@cio/ui/base/card';
|
||||
|
||||
let fields: TResetPasswordForm = $state({
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
token: ''
|
||||
});
|
||||
|
||||
const isSubmitDisabled = $derived!!(
|
||||
fields.password && fields.confirmPassword && fields.password !== fields.confirmPassword
|
||||
);
|
||||
const token = $derived(new URLSearchParams(page.url.search).get('token'));
|
||||
|
||||
onMount(() => {
|
||||
if (token) return;
|
||||
|
||||
snackbar.error('Invalid Token');
|
||||
|
||||
setTimeout(() => {
|
||||
goto(resolve('/login', {}));
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
function setConfirmPasswordError(fields: TResetPasswordForm) {
|
||||
untrack(() => {
|
||||
const errors = { ...resetApi.errors };
|
||||
errors.confirmPassword = getConfirmPasswordError(fields) ?? '';
|
||||
resetApi.setError(errors);
|
||||
});
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
setConfirmPasswordError(fields);
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Reset Password - ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<AuthUI
|
||||
isLogin={false}
|
||||
handleSubmit={() => resetApi.submit({ ...fields, token: token ?? '' })}
|
||||
showOnlyContent={true}
|
||||
isLoading={resetApi.isLoading}
|
||||
showLogo={true}
|
||||
>
|
||||
<div class="ui:flex ui:flex-col ui:gap-6">
|
||||
<div>
|
||||
<Card.Title class="ui:text-xl">New Password</Card.Title>
|
||||
<Card.Description class="ui:mt-2">Enter your new password details</Card.Description>
|
||||
</div>
|
||||
<Field.Field>
|
||||
<Field.Label for="password">Your Password</Field.Label>
|
||||
<Field.Content>
|
||||
<Password
|
||||
id="password"
|
||||
bind:value={fields.password}
|
||||
placeholder="************"
|
||||
disabled={resetApi.isLoading}
|
||||
aria-invalid={resetApi.errors.password ? 'true' : undefined}
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
{#if resetApi.errors.password}
|
||||
<Field.Error>{resetApi.errors.password}</Field.Error>
|
||||
{/if}
|
||||
<Field.Description>Password must be more than 8 characters</Field.Description>
|
||||
</Field.Content>
|
||||
</Field.Field>
|
||||
|
||||
<Field.Field>
|
||||
<Field.Label for="confirmPassword">Confirm Password</Field.Label>
|
||||
<Field.Content>
|
||||
<Password
|
||||
id="confirmPassword"
|
||||
bind:value={fields.confirmPassword}
|
||||
placeholder="************"
|
||||
disabled={resetApi.isLoading}
|
||||
aria-invalid={resetApi.errors.confirmPassword ? 'true' : undefined}
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
{#if resetApi.errors.confirmPassword}
|
||||
<Field.Error>{resetApi.errors.confirmPassword}</Field.Error>
|
||||
{/if}
|
||||
</Field.Content>
|
||||
</Field.Field>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitDisabled || resetApi.isLoading}
|
||||
loading={resetApi.isLoading}
|
||||
class="ui:w-full"
|
||||
>
|
||||
Reset Password
|
||||
</Button>
|
||||
</div>
|
||||
</AuthUI>
|
||||
@@ -0,0 +1,156 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
import { AuthUI } from '$lib/features/ui';
|
||||
import SenjaEmbed from '$lib/components/Senja/Embed.svelte';
|
||||
import { SIGNUP_FIELDS } from '$lib/utils/constants/authentication';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { authValidation, getConfirmPasswordError, getDisableSubmit } from '$lib/utils/functions/validator';
|
||||
import { capturePosthogEvent } from '$lib/utils/services/posthog';
|
||||
import { globalStore } from '$lib/utils/store/app';
|
||||
import { authClient } from '$lib/utils/services/auth/client';
|
||||
import * as Field from '@cio/ui/base/field';
|
||||
import { Input } from '@cio/ui/base/input';
|
||||
import { Password } from '@cio/ui/custom/password';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
|
||||
let fields = $state(Object.assign({}, SIGNUP_FIELDS));
|
||||
let loading = $state(false);
|
||||
let errors: {
|
||||
email?: string;
|
||||
password?: string;
|
||||
confirmPassword?: string;
|
||||
} = $state({});
|
||||
let submitError: string = $state('');
|
||||
|
||||
const disableSubmit = $derived(getDisableSubmit(fields));
|
||||
|
||||
async function handleSubmit() {
|
||||
const validationRes = authValidation(fields);
|
||||
console.log('validationRes', validationRes);
|
||||
|
||||
if (Object.keys(validationRes).length) {
|
||||
errors = Object.assign(errors, validationRes);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
loading = true;
|
||||
const name = fields.email.split('@')[0];
|
||||
|
||||
const { error } = await authClient.signUp.email(
|
||||
{
|
||||
email: fields.email,
|
||||
password: fields.password,
|
||||
name: name
|
||||
},
|
||||
{
|
||||
onSuccess: (ctx) => {
|
||||
console.log('Signup successful');
|
||||
capturePosthogEvent('user_signed_up', {
|
||||
distinct_id: ctx.data.user.id || '',
|
||||
email: ctx.data.user.email,
|
||||
username: name
|
||||
});
|
||||
|
||||
if ($globalStore.isOrgSite) {
|
||||
capturePosthogEvent('student_signed_up', {
|
||||
distinct_id: ctx.data.user.id || '',
|
||||
email: ctx.data.user.email,
|
||||
username: name
|
||||
});
|
||||
}
|
||||
|
||||
window.location.href = '/';
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (error) throw error;
|
||||
} catch (error: any) {
|
||||
submitError = error?.error_description || error?.message;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function setConfirmPasswordError(fields: typeof SIGNUP_FIELDS) {
|
||||
untrack(() => {
|
||||
errors.confirmPassword = getConfirmPasswordError(fields);
|
||||
});
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
setConfirmPasswordError(fields);
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Join ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<SenjaEmbed id="aa054658-1e15-4d00-8920-91f424326c4e" />
|
||||
|
||||
<AuthUI isLogin={false} {handleSubmit} isLoading={loading}>
|
||||
<div class="ui:flex ui:flex-col ui:gap-6">
|
||||
<Field.Field>
|
||||
<Field.Label for="email">{$t('login.fields.email')}</Field.Label>
|
||||
<Field.Content>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
bind:value={fields.email}
|
||||
placeholder="[email protected]"
|
||||
disabled={loading}
|
||||
autofocus
|
||||
aria-invalid={errors.email ? 'true' : undefined}
|
||||
autocomplete="email"
|
||||
/>
|
||||
{#if errors.email}
|
||||
<Field.Error>{$t(errors.email)}</Field.Error>
|
||||
{/if}
|
||||
</Field.Content>
|
||||
</Field.Field>
|
||||
|
||||
<Field.Field>
|
||||
<Field.Label for="password">{$t('login.fields.password')}</Field.Label>
|
||||
<Field.Content>
|
||||
<Password
|
||||
id="password"
|
||||
bind:value={fields.password}
|
||||
placeholder="************"
|
||||
disabled={loading}
|
||||
aria-invalid={errors.password ? 'true' : undefined}
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
{#if errors.password}
|
||||
<Field.Error>{$t(errors.password)}</Field.Error>
|
||||
{/if}
|
||||
<Field.Description>{$t('login.fields.password_helper_message')}</Field.Description>
|
||||
</Field.Content>
|
||||
</Field.Field>
|
||||
|
||||
<Field.Field>
|
||||
<Field.Label for="confirmPassword">{$t('login.fields.confirm_password')}</Field.Label>
|
||||
<Field.Content>
|
||||
<Password
|
||||
id="confirmPassword"
|
||||
bind:value={fields.confirmPassword}
|
||||
placeholder="************"
|
||||
disabled={loading}
|
||||
aria-invalid={errors.confirmPassword ? 'true' : undefined}
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
{#if errors.confirmPassword}
|
||||
<Field.Error>{errors.confirmPassword}</Field.Error>
|
||||
{/if}
|
||||
</Field.Content>
|
||||
</Field.Field>
|
||||
|
||||
{#if submitError}
|
||||
<p class="ui:text-sm ui:text-destructive">{submitError}</p>
|
||||
{/if}
|
||||
|
||||
<Button type="submit" disabled={disableSubmit || loading} {loading} class="ui:w-full">
|
||||
{$t('login.create_account')}
|
||||
</Button>
|
||||
</div>
|
||||
</AuthUI>
|
||||
Reference in New Issue
Block a user