TPS
/
birzha-legalizasia-frontend
5
0
Fork 0
Code Issues 4 Pull Requests Projects 1 Releases Wiki Activity

faqs added

This commit is contained in:
Komek Hayytnazarov 2022-12-13 14:44:39 +05:00
parent 4ecd782056
commit 5ff5037102
4 changed files with 72 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/faq/Main.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<a :href="baseUrl + FAQ + locale + '.' + EXTENSION_FAQs"
class="cursor-pointer shadow-md fixed bottom-0 right-0 box border-all rounded-full p-3 flex items-center justify-center z-50 mb-10 mr-10">
<FileIcon class="w-5 h-5 mr-2 text-primary" />
<div class="mr-4 text-primary">{{ $t('FAQ') }}</div>
</a>
</template>
<script setup>
import { FAQ, EXTENSION_FAQs, SELECTED_LANG } from "@/helpers";
import { onMounted, ref } from "vue";
const baseUrl = `${import.meta.env.VITE_API_URL}`;
const locale = ref("tm");
const setLocale = () => {
let lang = localStorage.getItem(SELECTED_LANG) || "tm";
console.log('faq locale: ' + lang);
locale.value = lang;
};
onMounted(() => {
setLocale();
});
</script>

1
src/helpers/constants.js
View File

@ -22,6 +22,7 @@ export const APPLICATION_APPROVED_STATE = "approved";
export const EXTENSION_QUESTIONNAIRE_FILE = "DOCX";
export const EXTENSION_LETTER_FILE = "DOCX";
export const EXTENSION_FAQs = "pdf";
export const ACCOUNT_TYPE_BUSINESS = "business";
export const RECAPTCHA_SCORE_MIN = 0.3;
export const RECAPTCHA_ACTION = "register";

10
src/views/login/Main.vue
View File

@ -1,5 +1,6 @@
<template>
<div>
<FAQ />
<div class="container">
<div class="block xl:grid grid-cols-2 gap-4">
<!-- BEGIN: Login Info -->
@ -18,7 +19,7 @@
</div>
<div
class="my-auto mx-auto xl:ml-20 bg-white dark:bg-darkmode-600 xl:bg-transparent px-5 sm:px-8 py-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto">
class="my-auto mx-auto xl:ml-20 bg-white dark:bg-darkmode-600 xl:bg-transparent px-5 sm:px-8 py-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto">
<div class="flex items-center justify-between">
<h2 class="intro-x font-bold text-2xl xl:text-3xl text-center xl:text-left">
{{ $t("SIGN_IN") }}
@ -68,7 +69,7 @@
</i18n-t>
</div>
</div>
</div>
<!-- END: Login Form -->
</div>
@ -87,6 +88,7 @@ import router from "@/router";
import Logo from "@/components/logo/Main.vue";
import LogoInfo from "@/components/logo-info/Main.vue";
import Lang from "@/components/lang/Main.vue";
import FAQ from "@/components/faq/Main.vue";
const formData = reactive({
email: "",
@ -156,10 +158,12 @@ onMounted(() => {
.custom-btns {
min-width: 128px;
}
.form-check-input[type="radio"],
.login .login__input,
.form-select {
border-color: rgb(var(--color-slate-400) / var(--tw-border-opacity));;
border-color: rgb(var(--color-slate-400) / var(--tw-border-opacity));
;
}
</style>

74
src/views/register/Main.vue
View File

@ -1,5 +1,6 @@
<template>
<div>
<FAQ />
<div class="container">
<div class="block xl:grid grid-cols-2 gap-4">
<!-- BEGIN: Register Info -->
@ -18,14 +19,14 @@
</div>
<div class="intro-x mt-2 text-slate-400 dark:text-slate-400 xl:hidden text-center">
{{$t('SING_IN_MOTIVATION_MOBILE')}}
{{ $t('SING_IN_MOTIVATION_MOBILE') }}
</div>
<div class="intro-x mt-8 flex flex-wrap justify-between">
<!-- Firstname field -->
<div class="input-form-item">
<input type="text" v-model.trim="validate.firstname.$model"
class="intro-x login__input form-control py-3 px-4 block"
:class="{ 'border-danger': validate.firstname.$error }" :placeholder=" $t('FIRSTNAME') " />
:class="{ 'border-danger': validate.firstname.$error }" :placeholder="$t('FIRSTNAME')" />
<template v-if="validate.firstname.$error">
<div v-for="(error, index) in validate.firstname.$errors" :key="index" class="text-danger mt-2">
{{ error.$message }}
@ -33,12 +34,12 @@
</template>
</div>
<!-- End firstname field -->
<!-- Lastname field -->
<div class="input-form-item">
<input type="text" v-model.trim="validate.lastname.$model"
class="intro-x login__input form-control py-3 px-4 block"
:class="{ 'border-danger': validate.lastname.$error }" :placeholder=" $t('LASTNAME') " />
class="intro-x login__input form-control py-3 px-4 block"
:class="{ 'border-danger': validate.lastname.$error }" :placeholder="$t('LASTNAME')" />
<template v-if="validate.lastname.$error">
<div v-for="(error, index) in validate.lastname.$errors" :key="index" class="text-danger mt-2">
{{ error.$message }}
@ -51,7 +52,8 @@
<div class="mt-4">
<!-- <label>{{ $t("SELECT_COUNTRY_LONG") }}</label> -->
<select class="form-select py-3 px-4 block sm:mr-2" aria-label="Default select example"
v-model="validate.country.$model" :class="{ 'border-danger': validate.country.$error }" name="country">
v-model="validate.country.$model" :class="{ 'border-danger': validate.country.$error }"
name="country">
<option value="" disabled>{{ $t("SELECT_COUNTRY_LONG") }}</option>
<template v-if="countries.length">
<option v-for="country in countries" :key="country.id" :value="country.id">
@ -60,7 +62,7 @@
</template>
</select>
</div>
<template v-if="validate.country.$error">
<div v-for="(error, index) in validate.country.$errors" :key="index" class="text-danger mt-2">
{{ error.$message }}
@ -73,7 +75,8 @@
<div class="mt-4">
<!-- <label>{{ $t("ACCOUNT_TYPE") }}</label> -->
<select class="form-select py-3 px-4 block sm:mr-2" aria-label="Default select example"
v-model="validate.accountType.$model" :class="{ 'border-danger': validate.accountType.$error }" name="accountType">
v-model="validate.accountType.$model" :class="{ 'border-danger': validate.accountType.$error }"
name="accountType">
<option value="" disabled>{{ $t("ACCOUNT_TYPE") }}</option>
<option value="business">{{ $t("ACCOUNT_TYPE_BUSINESS") }}</option>
<option value="company">{{ $t("ACCOUNT_TYPE_COMPANY") }}</option>
@ -89,8 +92,8 @@
<!-- Email field -->
<div class="input-form-item">
<input type="text" v-model.trim="validate.email.$model"
class="intro-x login__input form-control py-3 px-4 block mt-4"
:class="{ 'border-danger': validate.email.$error }" :placeholder=" $t('EMAIL') " />
class="intro-x login__input form-control py-3 px-4 block mt-4"
:class="{ 'border-danger': validate.email.$error }" :placeholder="$t('EMAIL')" />
<template v-if="validate.email.$error">
<div v-for="(error, index) in validate.email.$errors" :key="index" class="text-danger mt-2">
{{ error.$message }}
@ -103,7 +106,7 @@
<div class="relative">
<input type="password" v-model.trim="validate.password.$model"
class="login__input form-control py-3 px-4 block mt-4"
:class="{ 'border-danger': validate.password.$error }" :placeholder=" $t('PASSWORD') "
:class="{ 'border-danger': validate.password.$error }" :placeholder="$t('PASSWORD')"
name="password" />
<EyeIcon
class="block mx-auto absolute top-1/2 transform -translate-y-1/2 right-3 text-slate-400 cursor-pointer"
@ -127,33 +130,19 @@
</div>
<div class="intro-x mt-5 xl:mt-8 text-primary xl:text-left">
<VueRecaptcha
:sitekey="reCaptchaV2Key"
:load-recaptcha-script="true"
@verify="reCaptchaHandleSuccess"
@error="reCaptchaHandleError"
@expired="reCaptchaHandleExpired"
></VueRecaptcha>
<VueRecaptcha :sitekey="reCaptchaV2Key" :load-recaptcha-script="true" @verify="reCaptchaHandleSuccess"
@error="reCaptchaHandleError" @expired="reCaptchaHandleExpired"></VueRecaptcha>
</div>
<div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
<button class="btn btn-primary py-3 px-4 xl:mr-3 align-top w-full custom-btns"
@click.prevent="onRegister" :disabled="isLoading || !recaptchaVerified">
<button class="btn btn-primary py-3 px-4 xl:mr-3 align-top w-full custom-btns" @click.prevent="onRegister"
:disabled="isLoading || !recaptchaVerified">
{{ $t("SIGN_UP") }}
<LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLoading" />
</button>
</div>
<div class="intro-x mt-5 xl:mt-8 text-primary xl:text-left">
<i18n-t
keypath="ALREADY_HAS_ACCOUNT"
for="SIGN_IN"
class="w-full text-center"
tag="p"
>
<a
@click.prevent="onLogin"
href="#"
class="font-bold underline"
>
<i18n-t keypath="ALREADY_HAS_ACCOUNT" for="SIGN_IN" class="w-full text-center" tag="p">
<a @click.prevent="onLogin" href="#" class="font-bold underline">
{{ $t('SIGN_IN') }}
</a>
</i18n-t>
@ -183,6 +172,7 @@ import Logo from "@/components/logo/Main.vue";
import LogoInfo from "@/components/logo-info/Main.vue";
import Lang from "@/components/lang/Main.vue";
import i18nn from "@/i18n";
import FAQ from "@/components/faq/Main.vue";
import { ACCOUNT_TYPE_BUSINESS, RECAPTCHA_SCORE_MIN, RECAPTCHA_ACTION } from "@/helpers";
// import { load } from 'recaptcha-v3';
import { fetchWrapper } from "@/api";
@ -319,7 +309,7 @@ const onRegister = async () => {
// console.log("recaptchaResponse:");
// console.log(recaptchaResponse);
// } catch (error) {
// isLoading.value = false;
@ -328,16 +318,16 @@ const onRegister = async () => {
// if(recaptchaResponse) {
// if(recaptchaVerifiedSuccessfully(recaptchaResponse)) {
await authStore.register(newUser);
// recaptchaInstance.hideBadge();
await authStore.register(newUser);
// } else {
// recaptchaInstance.hideBadge();
// alertStore.error(i18nn.global.t("RECAPTCHA_TOKEN_VERIFICATION_FAILED"));
// } else {
// }
// alertStore.error(i18nn.global.t("RECAPTCHA_TOKEN_VERIFICATION_FAILED"));
// }
// }
isLoading.value = false;
@ -347,7 +337,7 @@ const onRegister = async () => {
// const recaptchaVerifiedSuccessfully = (recaptchaResponse) => {
// if(recaptchaResponse["success"]) {
// if(recaptchaResponse["score"] > RECAPTCHA_SCORE_MIN) {
// return recaptchaResponse["action"] === RECAPTCHA_ACTION;
@ -395,14 +385,18 @@ onBeforeMount(async () => {
.custom-btns {
min-width: 128px;
}
.form-check-input[type="radio"],
.login .login__input,
.form-select {
border-color: rgb(var(--color-slate-400) / var(--tw-border-opacity));;
border-color: rgb(var(--color-slate-400) / var(--tw-border-opacity));
;
}
.input-form-item {
width: 48%;
}
.login .login__input {
min-width: unset;
}