141 lines
5.4 KiB
Vue
141 lines
5.4 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { computed, ref } from 'vue';
|
|
import { useAuthApi } from 'src/modules/auth/composables/use-auth-api';
|
|
|
|
const auth_api = useAuthApi();
|
|
|
|
const email = defineModel<string>('email', { default: '', });
|
|
const is_remembered = ref<boolean>(false);
|
|
const is_employee_email = computed(() => email.value.includes('@targ'));
|
|
</script>
|
|
|
|
<template>
|
|
<q-card class="rounded-15 shadow-10">
|
|
<q-card-section class="text-center bg-primary q-pa-lg">
|
|
<q-img
|
|
src="/src/assets/logo-targo-white.svg"
|
|
ratio="4.6"
|
|
fit="contain"
|
|
/>
|
|
</q-card-section>
|
|
|
|
<div class="q-pt-sm q-px-xl q-pb-lg ">
|
|
<q-card-section class="text-center text-uppercase">
|
|
<div class="text-h6 text-weight-bold">
|
|
{{ $t('login.page_header') }}
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-form @submit="auth_api.login">
|
|
<q-input
|
|
v-model="email"
|
|
dense
|
|
outlined
|
|
label-color="accent"
|
|
class="rounded-5 inset-shadow bg-blue-grey-1"
|
|
label-slot
|
|
input-class="text-weight-medium text-h6"
|
|
>
|
|
<template #label>
|
|
<span class="text-weight-bolder text-uppercase text-overline"> {{ $t('login.email') }} </span>
|
|
</template>
|
|
</q-input>
|
|
|
|
<q-card-section
|
|
horizontal
|
|
class="q-mb-md q-pa-none text-uppercase text-caption text-weight-medium"
|
|
>
|
|
<q-toggle
|
|
v-model="is_remembered"
|
|
size="sm"
|
|
color="accent"
|
|
class="col-auto"
|
|
/>
|
|
|
|
<transition
|
|
enter-active-class="animated rubberBand fast"
|
|
leave-active-class=""
|
|
mode="out-in"
|
|
>
|
|
<span
|
|
:key="is_remembered ? 'yep' : 'nope'"
|
|
class="col-auto text-weight-bold self-center q-ml-sm"
|
|
:class="is_remembered ? 'text-accent' : ''"
|
|
>{{ $t('login.button.remember_me') }}</span>
|
|
</transition>
|
|
</q-card-section>
|
|
|
|
<q-card-actions>
|
|
<q-btn
|
|
push
|
|
rounded
|
|
disabled
|
|
type="submit"
|
|
color="accent"
|
|
:label="$t('login.button.connect')"
|
|
class="full-width"
|
|
/>
|
|
</q-card-actions>
|
|
|
|
<!-- A implémenter plus tard sans doute, pour les clients. A revoir avec Authentik API pour création de users -->
|
|
<!-- <q-card-section class="text-center q-pa-none q-mt-none">
|
|
<RouterLink disabled class="text-primary" to="/signup">{{ $t('loginPage.signUp') }}</RouterLink>
|
|
</q-card-section> -->
|
|
</q-form>
|
|
|
|
<q-card-section class="row q-pt-sm">
|
|
<q-separator
|
|
size="2px"
|
|
color="primary"
|
|
class="col self-center"
|
|
/>
|
|
<span class="col text-primary text-weight-bolder text-center text-uppercase self-center">{{
|
|
$t('shared.misc.or') }}</span>
|
|
<q-separator
|
|
size="2px"
|
|
color="primary"
|
|
class="col self-center"
|
|
/>
|
|
</q-card-section>
|
|
|
|
<q-card-section class="column q-px-sm q-pt-none">
|
|
<q-btn
|
|
rounded
|
|
push
|
|
disabled
|
|
color="fb-blue"
|
|
icon="img:src/assets/Facebook-f_Logo-White-Logo.wine.svg"
|
|
:label="$t('login.button.facebook')"
|
|
class="full-width row q-mb-sm"
|
|
>
|
|
<q-tooltip
|
|
anchor="top middle"
|
|
class="bg-primary"
|
|
>{{ $t('login.tooltip.coming_soon') }}</q-tooltip>
|
|
</q-btn>
|
|
<q-slide-transition>
|
|
<div v-if="is_employee_email">
|
|
<transition
|
|
slow
|
|
enter-active-class="animated zoomIn"
|
|
leave-active-class="animated zoomOut"
|
|
>
|
|
<q-btn
|
|
push
|
|
rounded
|
|
color="accent"
|
|
icon="img:src/assets/logo-targo-simple.svg"
|
|
:label="$t('login.button.employee')"
|
|
class="full-width row"
|
|
@click="auth_api.oidcLogin"
|
|
/>
|
|
</transition>
|
|
</div>
|
|
</q-slide-transition>
|
|
</q-card-section>
|
|
</div>
|
|
</q-card>
|
|
</template> |