fix: update loading state variable for input fields in invite page

This commit is contained in:
Rotimi Best
2025-09-10 21:12:50 +01:00
parent 01e9aa9700
commit a078971064
2 changed files with 37 additions and 25 deletions
@@ -9,6 +9,8 @@
currentOrgPath currentOrgPath
} from '$lib/utils/store/org'; } from '$lib/utils/store/org';
import { ChevronDown, Settings } from 'carbon-icons-svelte'; import { ChevronDown, Settings } from 'carbon-icons-svelte';
import Avatar from '$lib/components/Avatar/index.svelte';
import TextChip from '$lib/components/Chip/Text.svelte';
import Logout from 'carbon-icons-svelte/lib/Logout.svelte'; import Logout from 'carbon-icons-svelte/lib/Logout.svelte';
import Rocket from 'carbon-icons-svelte/lib/Rocket.svelte'; import Rocket from 'carbon-icons-svelte/lib/Rocket.svelte';
import NewTab from 'carbon-icons-svelte/lib/NewTab.svelte'; import NewTab from 'carbon-icons-svelte/lib/NewTab.svelte';
@@ -44,19 +46,19 @@
} }
</script> </script>
<div class="md:px-4 md:py-4 py-2 px-2 rounded-md cursor-pointer"> <div class="cursor-pointer rounded-md px-2 py-2 md:px-4 md:py-4">
<div class="border-b py-3 space-y-4"> <div class="space-y-4 border-b py-3">
<p class="text-xs font-semibold text-gray-500">{$t('profileMenu.profile')}</p> <p class="text-xs font-semibold text-gray-500">{$t('profileMenu.profile')}</p>
<a <a
href={`${!$globalStore.isOrgSite ? $currentOrgPath : '/lms'}/settings`} href={`${!$globalStore.isOrgSite ? $currentOrgPath : '/lms'}/settings`}
class="flex items-center justify-between hover:no-underline" class="flex items-center justify-between hover:no-underline"
on:click={closeMenu} on:click={closeMenu}
> >
<span class="flex items-center gap-2 max-w-[70%]"> <span class="flex max-w-[70%] items-center gap-2">
<img src={$profile.avatar_url} alt="profile" class="h-8 w-8 rounded-full" /> <img src={$profile.avatar_url} alt="profile" class="h-8 w-8 rounded-full" />
<div> <div>
<p class="text-sm font-semibold w-[80%] truncate">{$profile.fullname}</p> <p class="w-[80%] truncate text-sm font-semibold">{$profile.fullname}</p>
<p class="text-xs w-[80%] truncate">{$profile.email}</p> <p class="w-[80%] truncate text-xs">{$profile.email}</p>
</div> </div>
</span> </span>
<div> <div>
@@ -65,22 +67,32 @@
</a> </a>
</div> </div>
{#if !$globalStore.isOrgSite} {#if !$globalStore.isOrgSite}
<div class="border-b py-3 space-y-4"> <div class="space-y-4 border-b py-3">
<p class="text-xs font-semibold text-gray-500">{$t('profileMenu.current_org')}</p> <p class="text-xs font-semibold text-gray-500">{$t('profileMenu.current_org')}</p>
<a <a
href={`${$currentOrgPath}/settings?tab=org`} href={`${$currentOrgPath}/settings?tab=org`}
class="flex items-center justify-between hover:no-underline" class="flex items-center justify-between hover:no-underline"
on:click={closeMenu} on:click={closeMenu}
> >
<span class="flex items-center gap-2 max-w-[70%]"> <span class="flex max-w-[70%] items-center gap-2">
<div {#if $currentOrg.avatar_url && $currentOrg.name}
class="flex items-center justify-center h-8 w-8 p-4 bg-blue-900 text-white font-semibold rounded-lg" <Avatar
> src={$currentOrg.avatar_url}
{$currentOrg.shortName} name={$currentOrg.name}
</div> shape="rounded-md"
width="w-7"
height="h-7"
/>
{:else if $currentOrg.shortName}
<TextChip
size="sm"
value={$currentOrg.shortName}
className="bg-primary-200 dark:text-black font-medium"
/>
{/if}
<div> <div>
<p class="text-sm font-semibold w-[80%] truncate">{$currentOrg.name}</p> <p class="w-[80%] truncate text-sm font-semibold">{$currentOrg.name}</p>
<p class="text-xs w-[80%] truncate"> <p class="w-[80%] truncate text-xs">
{$currentOrgDomain} {$currentOrgDomain}
</p> </p>
</div> </div>
@@ -92,7 +104,7 @@
</div> </div>
{/if} {/if}
<div class="border-b py-3 space-y-4"> <div class="space-y-4 border-b py-3">
<p class="text-xs font-semibold text-gray-500">{$t('profileMenu.free_tools')}</p> <p class="text-xs font-semibold text-gray-500">{$t('profileMenu.free_tools')}</p>
<a <a
href="https://classroomio.com/tools/progress" href="https://classroomio.com/tools/progress"
@@ -125,21 +137,21 @@
href="https://classroomio.com/tools" href="https://classroomio.com/tools"
on:click={closeMenu} on:click={closeMenu}
target="_blank" target="_blank"
class="flex ml-auto w-fit items-center justify-end" class="ml-auto flex w-fit items-center justify-end"
> >
<div class="text-blue-900 font-semibold text-xs flex items-center gap-1"> <div class="flex items-center gap-1 text-xs font-semibold text-blue-900">
{$t('profileMenu.see_more')} {$t('profileMenu.see_more')}
<ChevronDown class="text-blue-900" /> <ChevronDown class="text-blue-900" />
</div> </div>
</a> </a>
</div> </div>
{#if !$globalStore.isOrgSite} {#if !$globalStore.isOrgSite}
<div class="border-b py-3 space-y-4"> <div class="space-y-4 border-b py-3">
<a <a
href="https://classroomio.com/roadmap" href="https://classroomio.com/roadmap"
target="_blank" target="_blank"
on:click={closeMenu} on:click={closeMenu}
class="hover:no-underline flex items-center gap-2" class="flex items-center gap-2 hover:no-underline"
> >
<NewTab /> <NewTab />
<p class="text-sm font-semibold">{$t('profileMenu.whats_new')}</p> <p class="text-sm font-semibold">{$t('profileMenu.whats_new')}</p>
@@ -148,7 +160,7 @@
href="https://classroomio.com/blog/launch-week" href="https://classroomio.com/blog/launch-week"
target="_blank" target="_blank"
on:click={closeMenu} on:click={closeMenu}
class="hover:no-underline flex items-center gap-2" class="flex items-center gap-2 hover:no-underline"
> >
<Rocket /> <Rocket />
<p class="text-sm font-semibold">{$t('profileMenu.launch_week')}</p> <p class="text-sm font-semibold">{$t('profileMenu.launch_week')}</p>
@@ -156,7 +168,7 @@
</div> </div>
{/if} {/if}
<button on:click={logout} class="w-full pt-3 space-y-4"> <button on:click={logout} class="w-full space-y-4 pt-3">
<span class="flex items-center gap-2"> <span class="flex items-center gap-2">
<Logout /> <Logout />
<p class="text-sm font-semibold">{$t('settings.profile.logout')}</p> <p class="text-sm font-semibold">{$t('settings.profile.logout')}</p>
@@ -57,7 +57,7 @@
formRef?.reset(); formRef?.reset();
return goto($currentOrgPath); window.location.href = $currentOrgPath;
} }
async function signUserIn(profileId: string, email: string) { async function signUserIn(profileId: string, email: string) {
@@ -222,7 +222,7 @@
placeholder="e.g Joke Silva" placeholder="e.g Joke Silva"
className="mb-6" className="mb-6"
inputClassName="w-full" inputClassName="w-full"
isDisabled={loading} isDisabled={isLoading}
errorMessage={errors.name} errorMessage={errors.name}
isRequired isRequired
/> />
@@ -234,7 +234,7 @@
placeholder="************" placeholder="************"
className="mb-6" className="mb-6"
inputClassName="w-full" inputClassName="w-full"
isDisabled={loading} isDisabled={isLoading}
errorMessage={errors.password} errorMessage={errors.password}
helperMessage={$t('login.fields.password_helper_message')} helperMessage={$t('login.fields.password_helper_message')}
isRequired isRequired
@@ -247,7 +247,7 @@
placeholder="************" placeholder="************"
className="mb-6" className="mb-6"
inputClassName="w-full" inputClassName="w-full"
isDisabled={loading} isDisabled={isLoading}
errorMessage={errors.confirmPassword} errorMessage={errors.confirmPassword}
isRequired isRequired
/> />