ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: automatically detect language on server and translate UI (#530)

Browse Source 
* feat: detect language on the server and translate page

* translate auth pages

* PR reviews
This commit is contained in:
Rotimi Best
2024-12-28 23:11:55 +01:00
committed by GitHub
parent 1f1ee8afd3
commit 381776f388
24 changed files with 431 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/components/AuthUI/index.svelte
+22 -19
View File
@@ -1,11 +1,12 @@
<script lang="ts">
import { page } from '$app/stores';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import GoogleIconColored from '../Icons/GoogleIconColored.svelte';
import Avatar from '$lib/components/Avatar/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { t } from '$lib/utils/functions/translations';
import { currentOrg } from '$lib/utils/store/org';
import type { SupabaseClient } from '@supabase/supabase-js';
import GoogleIconColored from '../Icons/GoogleIconColored.svelte';
export let supabase: SupabaseClient;
export let handleSubmit = () => {};
@@ -47,11 +48,11 @@
}
</script>
<div class="app-background w-full min-h-screen flex items-center justify-center">
<div class="container border border-gray bg-white dark:bg-black">
<div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
<div class="app-background flex min-h-screen w-full items-center justify-center">
<div class="border-gray container border bg-white dark:bg-black">
<div class="flex flex-col items-center p-2 lg:px-8 lg:py-3">
{#if !showOnlyContent || showLogo}
<div class="flex flex-col items-center justify-center w-full pt-2">
<div class="flex w-full flex-col items-center justify-center pt-2">
<Avatar
src={$currentOrg.avatar_url ? $currentOrg.avatar_url : '/logo-192.png'}
name={$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
@@ -61,7 +62,7 @@
className="mr-2"
/>
<a href="/">
<h4 class="dark:text-white text-xl mt-0">
<h4 class="mt-0 text-xl dark:text-white">
{$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
</h4>
</a>
@@ -70,13 +71,13 @@
<form
bind:this={formRef}
on:submit|preventDefault={handleSubmit}
class="flex items-center flex-col w-10/12"
class="flex w-10/12 flex-col items-center"
>
<slot />
</form>
{#if !showOnlyContent && !hideGoogleAuth}
<div class="w-10/12 mb-3">
<p class="dark:text-white text-sm mb-5">or sign up with:</p>
<div class="mb-3 w-10/12">
<p class="mb-5 text-sm dark:text-white">{$t('login.signup_with')}:</p>
<PrimaryButton
variant={VARIANTS.OUTLINED}
onClick={signInWithGoogle}
@@ -84,22 +85,24 @@
className="py-3 sm:w-full w-full"
>
<GoogleIconColored />
<span class="ml-2">{isLogin ? 'Sign in' : 'Sign up'} with Google</span>
<span class="ml-2">
{isLogin ? $t('login.login_with_google') : $t('login.signup_with_google')}
</span>
</PrimaryButton>
</div>
{/if}
</div>
{#if !showOnlyContent}
<div class="w-full p-6 border-t border-grey text-center">
<div class="border-grey w-full border-t p-6 text-center">
{#if isLogin}
Not registered yet? <a
class="hover:underline text-primary-700"
href="/signup{$page.url.search}">Sign up</a
{$t('login.not_registered_yet')}
<a class="text-primary-700 hover:underline" href="/signup{$page.url.search}"
>{$t('login.signup')}</a
>
{:else}
Already have an account? <a
class="hover:underline text-primary-700"
href="/login{$page.url.search}">Log In</a
{$t('login.already_have_account')}
<a class="text-primary-700 hover:underline" href="/login{$page.url.search}"
>{$t('login.login')}</a
>
{/if}
</div>