feat: migrate course UI from supabase (#615)
* chore: fix storybook build * chore: implement theming * community list not showing properly * refactor: migrate Chip component to @cio/ui/custom/chip - Updated imports for the Chip component across multiple files to use the new location in the @cio/ui package. - Replaced the previous Chip implementation with a new version that utilizes a Badge for better styling and functionality. - Adjusted related components to ensure consistent usage of the updated Chip component. * fix: align course sidebar design to match organization design (#611) * fix: align course sidebar design to match organization design * feat: add hideSearch prop to AppHeader and update sidebar layout --------- Co-authored-by: Rotimi Best <best@classroomio.com> * refactor: replace PrimaryButton with Button component across multiple files - Updated various components to use the new Button component from @cio/ui/base/button instead of the deprecated PrimaryButton. - Ensured consistent button usage throughout the application for improved styling and functionality. - Removed the PrimaryButton component and its associated constants from the codebase. * refactor: standardize button and input usage across components - Replaced instances of deprecated components such as TextField, TextArea, and IconButton with their updated counterparts (InputField, TextareaField, and updated IconButton). - Ensured consistent event handling by changing `onClick` to `onclick` for better alignment with Svelte's event binding conventions. - Removed unused components and streamlined imports to enhance code maintainability and readability. * chore: themeing, course card, use $features * refactor: centralize UI components and update modal implementations - Refactored various components to centralize UI elements, improving discoverability and maintainability. - Replaced deprecated modal components with the new Dialog component for consistent modal behavior across the application. - Removed unused components and streamlined imports to enhance code clarity and reduce complexity. * feat: add new documentation and refactor org and lms UI components - Introduced new documentation files for Auth Flow, Breadcrumbs Refactoring, Page and Route Creation, and Route Page Setup to enhance developer onboarding and reference. - Refactored various UI components, including the Course Sidebar and Lesson Modal, to improve layout and functionality. - Removed deprecated components and streamlined imports for better maintainability. - Updated translations across multiple languages to ensure consistency in user experience. * refactor: update UI components and improve styling consistency - Refactored various components to enhance styling consistency, including updates to button and text color classes. - Removed deprecated components and streamlined imports for better maintainability. - Replaced instances of PageBody with a more flexible Page component structure across multiple routes. - Updated translations and UI elements to align with the new design system. - Deleted unused components to reduce code complexity and improve clarity. * update output.css --------- Co-authored-by: Abdulmuizz Hamzat <103611443+canhamzacode@users.noreply.github.com>
This commit is contained in:
Rotimi Best
co-authored by
Abdulmuizz Hamzat
Abdulmuizz Hamzat
parent
e6a3cf9332
commit
9fb6c7cbaa
@@ -1,4 +1,4 @@
|
||||
import { OrgApiServer } from '$lib/features/org/api/org.server';
|
||||
import { OrgApiServer } from '$features/org/api/org.server';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load = async ({ params = { hash: '' } }) => {
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { getSupabase } from '$lib/utils/functions/supabase';
|
||||
import { AuthUI } from '$lib/features/ui';
|
||||
import { AuthUI } from '$features/ui';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import { setTheme } from '$lib/utils/functions/theme';
|
||||
import { addGroupMember } from '$lib/utils/services/courses';
|
||||
import { ROLE } from '@cio/utils/constants';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { triggerSendEmail, NOTIFICATION_NAME } from '$lib/utils/services/notification/notification';
|
||||
import { snackbar } from '$lib/components/Snackbar/store.js';
|
||||
import { snackbar } from '$features/ui/snackbar/store';
|
||||
import { capturePosthogEvent } from '$lib/utils/services/posthog';
|
||||
import { page } from '$app/state';
|
||||
|
||||
@@ -130,11 +130,12 @@
|
||||
</div>
|
||||
|
||||
<div class="my-4 flex w-full items-center justify-center">
|
||||
<PrimaryButton
|
||||
label="Join Course"
|
||||
<Button
|
||||
type="submit"
|
||||
isDisabled={disableSubmit || loading}
|
||||
isLoading={loading || !$profile.id}
|
||||
/>
|
||||
disabled={disableSubmit || loading}
|
||||
loading={loading || !$profile.id}
|
||||
>
|
||||
Join Course
|
||||
</Button>
|
||||
</div>
|
||||
</AuthUI>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { OrgApiServer } from '$lib/features/org/api/org.server';
|
||||
import { OrgApiServer } from '$features/org/api/org.server';
|
||||
import { getProfile } from '$lib/utils/functions/user';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { AuthUI } from '$lib/features/ui';
|
||||
import { AuthUI } from '$features/ui';
|
||||
import type { Profile } from '$lib/components/Course/components/People/types';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import { InputField } from '@cio/ui/custom/input-field';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import * as Field from '@cio/ui/base/field';
|
||||
import { Password } from '@cio/ui/custom/password';
|
||||
import { SIGNUP_FIELDS } from '$lib/utils/constants/authentication';
|
||||
import { logout } from '$lib/utils/functions/logout';
|
||||
import { getSupabase } from '$lib/utils/functions/supabase';
|
||||
@@ -14,7 +15,7 @@
|
||||
import { authValidation, getConfirmPasswordError, getDisableSubmit } from '$lib/utils/functions/validator';
|
||||
import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
|
||||
import { onMount, untrack } from 'svelte';
|
||||
import { snackbar } from '$lib/components/Snackbar/store.js';
|
||||
import { snackbar } from '$features/ui/snackbar/store';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
@@ -179,54 +180,63 @@
|
||||
{$t('login.create_to_join')}
|
||||
{/if}
|
||||
</p>
|
||||
<TextField
|
||||
<InputField
|
||||
label={$t('login.fields.email')}
|
||||
value={data.invite.email}
|
||||
type="email"
|
||||
placeholder="you@domain.com"
|
||||
className="mb-6"
|
||||
inputClassName="w-full"
|
||||
isDisabled={true}
|
||||
/>
|
||||
{#if $profile?.email !== data.invite.email}
|
||||
{#if !data.invite.profile}
|
||||
<TextField
|
||||
<InputField
|
||||
label={$t('login.fields.full_name')}
|
||||
bind:value={fields.name}
|
||||
type="text"
|
||||
autoFocus={true}
|
||||
placeholder="e.g Joke Silva"
|
||||
className="mb-6"
|
||||
inputClassName="w-full"
|
||||
isDisabled={isLoading}
|
||||
errorMessage={errors.name}
|
||||
isRequired
|
||||
/>
|
||||
{/if}
|
||||
<TextField
|
||||
label={$t('login.fields.password')}
|
||||
bind:value={fields.password}
|
||||
type="password"
|
||||
placeholder="************"
|
||||
className="mb-6"
|
||||
inputClassName="w-full"
|
||||
isDisabled={isLoading}
|
||||
errorMessage={errors.password}
|
||||
helperMessage={$t('login.fields.password_helper_message')}
|
||||
isRequired
|
||||
/>
|
||||
<Field.Field class="mb-6">
|
||||
<Field.Label for="password">{$t('login.fields.password')}</Field.Label>
|
||||
<Field.Content>
|
||||
<Password
|
||||
id="password"
|
||||
bind:value={fields.password}
|
||||
placeholder="************"
|
||||
disabled={isLoading}
|
||||
aria-invalid={errors.password ? 'true' : undefined}
|
||||
autocomplete={data.invite.profile ? 'current-password' : 'new-password'}
|
||||
/>
|
||||
{#if errors.password}
|
||||
<Field.Error>{$t(errors.password)}</Field.Error>
|
||||
{:else}
|
||||
<Field.Description>{$t('login.fields.password_helper_message')}</Field.Description>
|
||||
{/if}
|
||||
</Field.Content>
|
||||
</Field.Field>
|
||||
{#if !data.invite.profile}
|
||||
<TextField
|
||||
label={$t('login.fields.confirm_password')}
|
||||
bind:value={fields.confirmPassword}
|
||||
type="password"
|
||||
placeholder="************"
|
||||
className="mb-6"
|
||||
inputClassName="w-full"
|
||||
isDisabled={isLoading}
|
||||
errorMessage={confirmPasswordError}
|
||||
isRequired
|
||||
/>
|
||||
<Field.Field class="mb-6">
|
||||
<Field.Label for="confirm-password">{$t('login.fields.confirm_password')}</Field.Label>
|
||||
<Field.Content>
|
||||
<Password
|
||||
id="confirm-password"
|
||||
bind:value={fields.confirmPassword}
|
||||
placeholder="************"
|
||||
disabled={isLoading}
|
||||
aria-invalid={confirmPasswordError ? 'true' : undefined}
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
{#if confirmPasswordError}
|
||||
<Field.Error>{$t(confirmPasswordError)}</Field.Error>
|
||||
{/if}
|
||||
</Field.Content>
|
||||
</Field.Field>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if submitError}
|
||||
@@ -236,13 +246,11 @@
|
||||
|
||||
<div class="my-4 flex w-full items-center justify-end">
|
||||
{#if shouldLogout}
|
||||
<PrimaryButton
|
||||
label="Logout"
|
||||
<Button
|
||||
type="button"
|
||||
className="sm:w-full w-full"
|
||||
isLoading={isLoggingOut}
|
||||
variant={VARIANTS.CONTAINED_DANGER}
|
||||
onClick={async () => {
|
||||
loading={isLoggingOut}
|
||||
variant="destructive"
|
||||
onclick={async () => {
|
||||
isLoggingOut = true;
|
||||
|
||||
await logout(false);
|
||||
@@ -250,15 +258,11 @@
|
||||
isLoggingOut = false;
|
||||
shouldLogout = false;
|
||||
}}
|
||||
/>
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
{:else}
|
||||
<PrimaryButton
|
||||
label="Accept Invite"
|
||||
type="submit"
|
||||
className="sm:w-full w-full"
|
||||
isDisabled={disableSubmit}
|
||||
{isLoading}
|
||||
/>
|
||||
<Button type="submit" disabled={disableSubmit} loading={isLoading}>Accept Invite</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</AuthUI>
|
||||
|
||||
Reference in New Issue
Block a user