feat: add back button on login page to return to landing page (#808)

* Back button in Login page

Modified the back button to have two options, href option and onlick

The onClick bceomes usable when there's no href prop

and the onClick takes you directly to the previous page

While the href takes you to the url you indicated

* added a showBack condition to show the button

* modified the onClick function

* Removed the back button, made the Image act as the back button

* Changed the OAuth place holder

* Update back-button.svelte

* remove f

---------

Co-authored-by: Rotimi Best <best@classroomio.com>
This commit is contained in:
Victor Jack
2026-08-12 07:55:19 +01:00
committed by GitHub
co-authored by Rotimi Best
parent f0695e9d18
commit 176949d8c8
11 changed files with 97 additions and 35 deletions
@@ -1,6 +1,7 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import { page } from '$app/state';
import { resolve } from '$app/paths';
import * as Avatar from '@cio/ui/base/avatar';
import { t } from '$lib/utils/functions/translations';
import { currentOrg } from '$lib/utils/store/org';
@@ -82,13 +83,19 @@
<Card.Root class="ui:w-full relative z-10 max-w-[400px] shadow-sm">
{#if !showOnlyContent || showLogo}
<Card.Header class="ui:flex ui:flex-col ui:items-center ui:gap-4">
<Avatar.Root>
<Avatar.Image
src={$currentOrg.avatarUrl ? $currentOrg.avatarUrl : '/logo-192.png'}
alt={$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
/>
<Avatar.Fallback>{$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}</Avatar.Fallback>
</Avatar.Root>
<a
href={resolve(ROUTE.HOME, {})}
class="ui:inline-flex"
aria-label={$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
>
<Avatar.Root>
<Avatar.Image
src={$currentOrg.avatarUrl ? $currentOrg.avatarUrl : '/logo-192.png'}
alt={$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
/>
<Avatar.Fallback>{$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}</Avatar.Fallback>
</Avatar.Root>
</a>
{#if !showOnlyContent}
<a href="/">
@@ -112,7 +119,7 @@
<div class="mt-6 flex flex-col gap-6">
<div class="relative flex items-center justify-center">
<Separator />
<span class="ui:bg-card ui:text-muted-foreground absolute px-2 text-sm"> Or continue With </span>
<span class="ui:bg-card ui:text-muted-foreground absolute px-2 text-sm">{$t('login.continue_with')}</span>
</div>
{#if getPasswordAuthAlternative}