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

<script setup>
import { useI18n } from 'vue-i18n';
import { userStore } from 'stores/user';
import { onMounted, ref } from 'vue';
import useNotify from 'src/composables/useNotify.js';
import { useRouter, useRoute } from 'vue-router';
const { notify } = useNotify();

const t = useI18n();
const user = userStore();
const route = useRoute();
const router = useRouter();
const email = ref(null);
const password = ref(null);
const remember = ref(false);
const showPwd = ref(false);

const langs = ['en', 'es', 'ca', 'fr', 'mn', 'pt'];
onMounted(() => {
    if (route.query.emailConfirmed !== undefined) {
        notify({
            message: t('emailConfirmedSuccessfully'),
            type: 'positive'
        });
    }
    if (route.params.email) {
        email.value = route.params.email;
        password.value.focus();
    }
});
async function onLogin() {
    await user.login(email.value, password.value, remember.value);
    router.push('/');
}
</script>

<template>
    <div class="main">
        <div class="header">
            <router-link
                to="/"
                class="block"
            >
                <img
                    src="statics/logo.svg"
                    alt="Verdnatura"
                    class="block"
                >
            </router-link>
        </div>
        <QForm
            @submit="onLogin"
            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="text-center">
                    <QCheckbox
                        v-model="remember"
                        :label="$t('remindMe')"
                        dense
                    />
                    <QBtn
                        id="switchLanguage"
                        :label="$t('language')"
                        icon="translate"
                        color="primary"
                        size="sm"
                        flat
                        rounded
                    >
                        <QMenu auto-close>
                            <QList
                                dense
                                v-for="lang in langs"
                                :key="lang"
                            >
                                <QItem
                                    disabled
                                    v-ripple
                                    clickable
                                >
                                    {{ $t(`langs.${lang}`) }}
                                </QItem>
                            </QList>
                        </QMenu>
                    </QBtn>
                </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
                    to="/"
                    :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>

<i18n lang="yaml">
en-US:
    user: User
    password: Password
    remindMe: Remind me
    logInAsGuest: Log in as guest
    logIn: Log in
    loginMail: infoverdnatura.es
    loginPhone: +34 607 562 391
    haveForgottenPassword: Have you forgotten your password?
    notACustomerYet: Not a customer yet?
    signUp: Register
es-ES:
    user: Usuario
    password: Contraseña
    remindMe: Recuérdame
    logInAsGuest: Entrar como invitado
    logIn: Iniciar sesión
    loginMail: infoverdnatura.es
    loginPhone: +34 963 242 100
    haveForgottenPassword: ¿Has olvidado tu contraseña?
    notACustomerYet: ¿Todavía no eres cliente?
    signUp: Registrarme
</i18n>