hedera-web/src/pages/Login/LoginView.vue

<script setup>
import { onMounted, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';

import { useUserStore } from 'stores/user';
import useNotify from 'src/composables/useNotify.js';
import { useRouter, useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useAppStore } from 'src/stores/app';

const { notify } = useNotify();
const { t } = useI18n();
const { locale } = useI18n({ useScope: 'global' });
const userStore = useUserStore();
const appStore = useAppStore();
const route = useRoute();
const router = useRouter();
const { siteLang, localeOptions } = storeToRefs(appStore);

const email = ref(null);
const password = ref(null);
const remember = ref(false);
const showPwd = ref(false);

const selectedLocaleValue = computed({
    get() {
        return siteLang.value;
    },
    set(value) {
        locale.value = value;
        appStore.updateSiteLocale(value);
    }
});

onMounted(() => {
    if (route.query.emailConfirmed !== undefined) {
        notify({
            message: t('emailConfirmedSuccessfully'),
            type: 'positive'
        });
    }
    if (route.params.email) {
        email.value = route.params.email;
        password.value.focus();
    }
});

const onLogin = async () => {
    await userStore.fetchUser();
    await router.push('/');
};

const login = async () => {
    await userStore.login(email.value, password.value, remember.value);
    await onLogin();
};

const loginAsGuest = async () => {
    userStore.isGuest = true;
    localStorage.setItem('hederaGuest', true);
    await onLogin();
};
</script>

<template>
    <div class="main">
        <div class="header">
            <img src="statics/logo.svg" alt="Verdnatura" class="block" />
        </div>
        <QForm @submit="login()" class="q-gutter-y-md">
            <div class="q-gutter-y-sm">
                <QInput v-model="email" :label="$t('user')" autofocus />
                <QInput
                    v-model="password"
                    :label="$t('password')"
                    :type="!showPwd ? 'password' : 'text'"
                >
                    <template #append>
                        <QIcon
                            :name="showPwd ? 'visibility_off' : 'visibility'"
                            class="cursor-pointer"
                            @click="showPwd = !showPwd"
                        />
                    </template>
                </QInput>
                <div class="row justify-between text-center">
                    <QCheckbox
                        v-model="remember"
                        :label="$t('remindMe')"
                        dense
                        class="col"
                    />
                    <QSelect
                        v-model="selectedLocaleValue"
                        :options="localeOptions"
                        :label="t('language')"
                        option-value="lang"
                        dense
                        borderless
                        emit-value
                        map-options
                        options-dense
                        class="col-4"
                    />
                </div>
            </div>
            <div class="justify-center">
                <QBtn
                    type="submit"
                    :label="$t('logIn')"
                    class="full-width"
                    color="primary"
                    rounded
                    no-caps
                    unelevated
                />
            </div>
            <div class="justify-center">
                <QBtn
                    @click="loginAsGuest()"
                    :label="$t('logInAsGuest')"
                    class="full-width"
                    color="primary"
                    rounded
                    no-caps
                    outline
                />
            </div>
            <p class="password-forgotten text-center q-mt-lg">
                <router-link to="/remember-password" class="link">
                    {{ $t('haveForgottenPassword') }}
                </router-link>
            </p>
        </QForm>
        <div class="footer text-center">
            <p>
                {{ $t('notACustomerYet') }}
                <a
                    href="//verdnatura.es/register/"
                    target="_blank"
                    class="link"
                >
                    {{ $t('signUp') }}
                </a>
            </p>
            <p class="contact">
                <a :href="`tel:${$t('loginPhone')}`">
                    {{ $t('loginPhone') }}
                </a>
                ·
                <a :href="`mailto:${$t('loginMail')}`">{{ $t('loginMail') }}</a>
            </p>
        </div>
    </div>
</template>

<style lang="scss" scoped>
$login-margin-top: 50px;
$login-margin-between: 55px;

.main {
    max-width: 280px;
}
a {
    color: inherit;
}
.header {
    margin-top: $login-margin-top;
    margin-bottom: $login-margin-between;

    img {
        display: block;
        margin: 0 auto;
        width: 90%;
    }
}
.remember {
    margin-top: 20px;
    margin-bottom: 40px;
}
.q-btn {
    height: 50px;
}
.password-forgotten {
    font-size: 0.8rem;
}
.footer {
    margin-bottom: $login-margin-top;
    margin-top: $login-margin-between;
    text-align: center;
    font-size: 0.8rem;

    .contact {
        margin-top: 15px;
        color: grey;
    }
    a {
        font-weight: bold;
    }
}
</style>