timetracker update
This commit is contained in:
Daniel Goc
@@ -17,50 +17,62 @@
|
||||
</template>
|
||||
</UDrawer>
|
||||
|
||||
<div class="h-[100vh] flex items-center justify-center px-4 sm:px-6 lg:px-8">
|
||||
<div class="h-[100vh] flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-15">
|
||||
<div
|
||||
class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-500 text-white mb-4 shadow-lg shadow-primary-500/30">
|
||||
<UIcon name="i-heroicons-clock" class="w-8 h-8" />
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">TimeTracker</h1>
|
||||
</div>
|
||||
<div class="w-full max-w-md">
|
||||
<UForm :validate="validate" @submit="handleRegister" class="flex flex-col gap-3">
|
||||
<UAlert v-if="authStore.error" color="error" variant="subtle" icon="i-heroicons-exclamation-triangle"
|
||||
:title="authStore.error" :close-button="{ icon: 'i-heroicons-x-mark-20-solid', variant: 'link' }"
|
||||
@close="authStore.clearError" />
|
||||
|
||||
<UFormField :label="$t('general.first_name')" name="first_name" required class="w-full dark:text-white text-black ">
|
||||
<UInput class="w-full" v-model="first_name" type="text" :placeholder="$t('general.first_name')"
|
||||
<UFormField :label="$t('general.first_name')" name="first_name" required
|
||||
class="w-full dark:text-white text-black ">
|
||||
<UInput class="w-full placeholder:text-(--placeholder)" v-model="first_name" type="text" :placeholder="$t('general.first_name')"
|
||||
:disabled="authStore.loading">
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
||||
<UFormField :label="$t('general.last_name')" name="last_name" required class="w-full dark:text-white text-black">
|
||||
<UInput class="w-full dark:text-white text-black" v-model="last_name" type="text" :placeholder="$t('general.last_name')"
|
||||
:disabled="authStore.loading">
|
||||
<UFormField :label="$t('general.last_name')" name="last_name" required
|
||||
class="w-full dark:text-white text-black">
|
||||
<UInput class="w-full dark:text-white text-black placeholder:text-(--placeholder)" v-model="last_name" type="text"
|
||||
:placeholder="$t('general.last_name')" :disabled="authStore.loading">
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
||||
<UFormField :label="$t('general.email_address')" name="email" required class="w-full dark:text-white text-black">
|
||||
<UFormField :label="$t('general.email_address')" name="email" required
|
||||
class="w-full dark:text-white text-black">
|
||||
<UInput v-model="email" :placeholder="$t('general.enter_your_email')" :disabled="authStore.loading"
|
||||
class="w-full dark:text-white text-black" />
|
||||
class="w-full dark:text-white text-black placeholder:text-(--placeholder)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField :label="$t('general.password')" name="password" required class="w-full dark:text-white text-black">
|
||||
|
||||
<UInput v-model="password" :placeholder="$t('general.enter_your_password')" :disabled="authStore.loading"
|
||||
class="w-full dark:text-white text-black" :type="showPassword ? 'text' : 'password'" :ui="{ trailing: 'pe-1' }">
|
||||
class="w-full dark:text-white text-black placeholder:text-(--placeholder)" :type="showPassword ? 'text' : 'password'"
|
||||
:ui="{ trailing: 'pe-1' }">
|
||||
<template #trailing>
|
||||
<UIcon color="neutral" variant="link" size="sm"
|
||||
:name="showPassword ? 'i-lucide-eye-off' : 'i-lucide-eye'"
|
||||
<UIcon color="neutral" variant="link" size="sm" :name="showPassword ? 'i-lucide-eye-off' : 'i-lucide-eye'"
|
||||
:aria-label="showPassword ? 'Hide password' : 'Show password'" :aria-pressed="showPassword"
|
||||
aria-controls="password" @click="showPassword = !showPassword" />
|
||||
aria-controls="password" @click="showPassword = !showPassword" class="mr-2"/>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
||||
<UFormField :label="$t('general.confirm_password')" name="confirm_password" required class="w-full dark:text-white text-black">
|
||||
<UInput v-model="confirm_password_ref" :type="showConfirmPassword ? 'text' : 'password'" class="w-full dark:text-white text-black"
|
||||
:placeholder="$t('general.confirm_your_password')" :disabled="authStore.loading" :ui="{ trailing: 'pe-1' }">
|
||||
<UFormField :label="$t('general.confirm_password')" name="confirm_password" required
|
||||
class="w-full dark:text-white text-black">
|
||||
<UInput v-model="confirm_password_ref" :type="showConfirmPassword ? 'text' : 'password'"
|
||||
class="w-full dark:text-white text-black placeholder:text-(--placeholder)" :placeholder="$t('general.confirm_your_password')"
|
||||
:disabled="authStore.loading" :ui="{ trailing: 'pe-1' }">
|
||||
<template #trailing>
|
||||
<UIcon color="neutral" variant="ghost" size="sm"
|
||||
:name="showConfirmPassword ? 'i-lucide-eye-off' : 'i-lucide-eye'"
|
||||
@click="showConfirmPassword = !showConfirmPassword" />
|
||||
@click="showConfirmPassword = !showConfirmPassword" class="mr-2"/>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
@@ -69,16 +81,21 @@
|
||||
<template #label>
|
||||
<span class="dark:text-white text-black">
|
||||
{{ $t('general.i_agree_to_the') }}
|
||||
<span @click="showTherms = !showTherms" class="cursor-pointer underline text-(--color-blue-600) dark:text-(--color-blue-500)">{{ $t('general.terms_of_service')
|
||||
}}</span>
|
||||
<span @click="showTherms = !showTherms"
|
||||
class="cursor-pointer underline text-(--color-blue-600) dark:text-(--color-blue-500)">{{
|
||||
$t('general.terms_of_service')
|
||||
}}</span>
|
||||
{{ $t('general.and') }}
|
||||
<span @click="showPrivacy = !showPrivacy" class="cursor-pointer underline text-(--color-blue-600) dark:text-(--color-blue-500)">{{ $t('general.privacy_policy')
|
||||
}}</span>
|
||||
<span @click="showPrivacy = !showPrivacy"
|
||||
class="cursor-pointer underline text-(--color-blue-600) dark:text-(--color-blue-500)">{{
|
||||
$t('general.privacy_policy')
|
||||
}}</span>
|
||||
</span>
|
||||
</template>
|
||||
</UCheckbox>
|
||||
|
||||
<UButton type="submit" block :loading="authStore.loading" :disabled="!acceptTerms" class="text-white bg-(--color-blue-600) dark:bg-(--color-blue-500)">
|
||||
<UButton type="submit" block :loading="authStore.loading" :disabled="!acceptTerms"
|
||||
class="text-white bg-(--color-blue-600) dark:bg-(--color-blue-500) cursor-pointer">
|
||||
{{ $t('general.create_account') }}
|
||||
</UButton>
|
||||
|
||||
@@ -86,7 +103,8 @@
|
||||
<p class="dark:text-white text-black">
|
||||
{{ $t('general.already_have_an_account') }}
|
||||
</p>
|
||||
<UButton color="neutral" variant="outline" :loading="authStore.loading" class="w-full flex justify-center dark:text-white hover:text-white hover:bg-(--color-blue-600) dark:hover:bg-(--color-blue-500) border border-(--border-light)! dark:border-(--border-dark)!"
|
||||
<UButton color="neutral" variant="outline" :loading="authStore.loading"
|
||||
class="w-full flex justify-center dark:text-white hover:text-white cursor-pointer hover:bg-(--color-blue-600) dark:hover:bg-(--color-blue-500) border border-(--border-light)! dark:border-(--border-dark)!"
|
||||
@click="goToLogin">{{ $t('general.sign_in') }}</UButton>
|
||||
</div>
|
||||
</UForm>
|
||||
@@ -101,7 +119,7 @@ import { useAuthStore } from '@/stores/auth'
|
||||
import { useValidation } from '@/composable/useValidation'
|
||||
import type { FormError } from '@nuxt/ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { i18n } from '@/plugins/i18n'
|
||||
import { i18n } from '@/plugins/02_i18n'
|
||||
|
||||
const { locale } = useI18n()
|
||||
const router = useRouter()
|
||||
@@ -149,7 +167,5 @@ const PrivacyComponent = computed(() =>
|
||||
defineAsyncComponent(() =>
|
||||
import(`@/components/terms/${i18n.locale.value}_PrivacyPolicyView.vue`).catch(() => import('@/components/terms/en_PrivacyPolicyView.vue')),
|
||||
),
|
||||
|
||||
|
||||
)
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user