100 lines
4.2 KiB
Vue
100 lines
4.2 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">
|
|
<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="primary"
|
|
:label="$t('login.email')"
|
|
/>
|
|
|
|
<q-card-section class="q-ma-none q-pa-none text-uppercase text-caption text-weight-medium">
|
|
<q-toggle
|
|
v-model="is_remembered"
|
|
color="primary"
|
|
:label="$t('login.button.remember_me')"
|
|
/>
|
|
</q-card-section>
|
|
|
|
<q-card-actions>
|
|
<q-btn
|
|
push
|
|
rounded
|
|
disabled
|
|
type="submit"
|
|
color="primary"
|
|
: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 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 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="primary"
|
|
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> |