fix: apply ESLint rule vue/component-tags-order
This commit is contained in:
iamsivin
@@ -1,9 +1,3 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-center h-full w-full">
|
||||
<spinner color-scheme="primary" size="" />
|
||||
<div class="ml-2">{{ $t('CONFIRM_EMAIL') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
||||
import { verifyPasswordToken } from '../../../api/auth';
|
||||
@@ -34,3 +28,9 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex items-center justify-center h-full w-full">
|
||||
<spinner color-scheme="primary" size="" />
|
||||
<div class="ml-2">{{ $t('CONFIRM_EMAIL') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,52 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
|
||||
>
|
||||
<form
|
||||
class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
|
||||
@submit.prevent="submitForm"
|
||||
>
|
||||
<h1
|
||||
class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
|
||||
>
|
||||
{{ $t('SET_NEW_PASSWORD.TITLE') }}
|
||||
</h1>
|
||||
|
||||
<div class="space-y-5">
|
||||
<form-input
|
||||
v-model.trim="credentials.password"
|
||||
class="mt-3"
|
||||
name="password"
|
||||
type="password"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
:error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||
@blur="v$.credentials.password.$touch"
|
||||
/>
|
||||
<form-input
|
||||
v-model.trim="credentials.confirmPassword"
|
||||
class="mt-3"
|
||||
name="confirm_password"
|
||||
type="password"
|
||||
:has-error="v$.credentials.confirmPassword.$error"
|
||||
:error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
|
||||
@blur="v$.credentials.confirmPassword.$touch"
|
||||
/>
|
||||
<submit-button
|
||||
:disabled="
|
||||
v$.credentials.password.$invalid ||
|
||||
v$.credentials.confirmPassword.$invalid ||
|
||||
newPasswordAPI.showLoading
|
||||
"
|
||||
:button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
|
||||
:loading="newPasswordAPI.showLoading"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength } from '@vuelidate/validators';
|
||||
@@ -135,3 +86,52 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
|
||||
>
|
||||
<form
|
||||
class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
|
||||
@submit.prevent="submitForm"
|
||||
>
|
||||
<h1
|
||||
class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
|
||||
>
|
||||
{{ $t('SET_NEW_PASSWORD.TITLE') }}
|
||||
</h1>
|
||||
|
||||
<div class="space-y-5">
|
||||
<form-input
|
||||
v-model.trim="credentials.password"
|
||||
class="mt-3"
|
||||
name="password"
|
||||
type="password"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
:error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||
@blur="v$.credentials.password.$touch"
|
||||
/>
|
||||
<form-input
|
||||
v-model.trim="credentials.confirmPassword"
|
||||
class="mt-3"
|
||||
name="confirm_password"
|
||||
type="password"
|
||||
:has-error="v$.credentials.confirmPassword.$error"
|
||||
:error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
|
||||
@blur="v$.credentials.confirmPassword.$touch"
|
||||
/>
|
||||
<submit-button
|
||||
:disabled="
|
||||
v$.credentials.password.$invalid ||
|
||||
v$.credentials.confirmPassword.$invalid ||
|
||||
newPasswordAPI.showLoading
|
||||
"
|
||||
:button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
|
||||
:loading="newPasswordAPI.showLoading"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,51 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
|
||||
>
|
||||
<form
|
||||
class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
|
||||
@submit.prevent="submit"
|
||||
>
|
||||
<h1
|
||||
class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
|
||||
>
|
||||
{{ $t('RESET_PASSWORD.TITLE') }}
|
||||
</h1>
|
||||
<p
|
||||
class="mb-4 text-sm font-normal leading-6 tracking-normal text-slate-600 dark:text-woot-50"
|
||||
>
|
||||
{{
|
||||
useInstallationName(
|
||||
$t('RESET_PASSWORD.DESCRIPTION'),
|
||||
globalConfig.installationName
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<div class="space-y-5">
|
||||
<form-input
|
||||
v-model.trim="credentials.email"
|
||||
name="email_address"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
:error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
|
||||
:placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
|
||||
@input="v$.credentials.email.$touch"
|
||||
/>
|
||||
<SubmitButton
|
||||
:disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
|
||||
:button-text="$t('RESET_PASSWORD.SUBMIT')"
|
||||
:loading="resetPassword.showLoading"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-4 -mb-1 text-sm text-slate-600 dark:text-woot-50">
|
||||
{{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
|
||||
<router-link to="/auth/login" class="text-link">
|
||||
{{ $t('COMMON.CLICK_HERE') }}.
|
||||
</router-link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { mapGetters } from 'vuex';
|
||||
@@ -111,3 +63,51 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
|
||||
>
|
||||
<form
|
||||
class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
|
||||
@submit.prevent="submit"
|
||||
>
|
||||
<h1
|
||||
class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
|
||||
>
|
||||
{{ $t('RESET_PASSWORD.TITLE') }}
|
||||
</h1>
|
||||
<p
|
||||
class="mb-4 text-sm font-normal leading-6 tracking-normal text-slate-600 dark:text-woot-50"
|
||||
>
|
||||
{{
|
||||
useInstallationName(
|
||||
$t('RESET_PASSWORD.DESCRIPTION'),
|
||||
globalConfig.installationName
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<div class="space-y-5">
|
||||
<form-input
|
||||
v-model.trim="credentials.email"
|
||||
name="email_address"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
:error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
|
||||
:placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
|
||||
@input="v$.credentials.email.$touch"
|
||||
/>
|
||||
<SubmitButton
|
||||
:disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
|
||||
:button-text="$t('RESET_PASSWORD.SUBMIT')"
|
||||
:loading="resetPassword.showLoading"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-4 -mb-1 text-sm text-slate-600 dark:text-woot-50">
|
||||
{{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
|
||||
<router-link to="/auth/login" class="text-link">
|
||||
{{ $t('COMMON.CLICK_HERE') }}.
|
||||
</router-link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,37 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
||||
import SignupForm from './components/Signup/Form.vue';
|
||||
import Testimonials from './components/Testimonials/Index.vue';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SignupForm,
|
||||
Spinner,
|
||||
Testimonials,
|
||||
},
|
||||
mixins: [globalConfigMixin],
|
||||
data() {
|
||||
return { isLoading: false };
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({ globalConfig: 'globalConfig/get' }),
|
||||
isAChatwootInstance() {
|
||||
return this.globalConfig.installationName === 'Chatwoot';
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
this.isLoading = this.isAChatwootInstance;
|
||||
},
|
||||
methods: {
|
||||
resizeContainers() {
|
||||
this.isLoading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full w-full dark:bg-slate-900">
|
||||
<div v-show="!isLoading" class="flex h-full">
|
||||
@@ -51,37 +85,3 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
||||
import SignupForm from './components/Signup/Form.vue';
|
||||
import Testimonials from './components/Testimonials/Index.vue';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SignupForm,
|
||||
Spinner,
|
||||
Testimonials,
|
||||
},
|
||||
mixins: [globalConfigMixin],
|
||||
data() {
|
||||
return { isLoading: false };
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({ globalConfig: 'globalConfig/get' }),
|
||||
isAChatwootInstance() {
|
||||
return this.globalConfig.installationName === 'Chatwoot';
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
this.isLoading = this.isAChatwootInstance;
|
||||
},
|
||||
methods: {
|
||||
resizeContainers() {
|
||||
this.isLoading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,83 +1,3 @@
|
||||
<template>
|
||||
<div class="flex-1 px-1 overflow-auto">
|
||||
<form class="space-y-3" @submit.prevent="submit">
|
||||
<div class="flex">
|
||||
<form-input
|
||||
v-model.trim="credentials.fullName"
|
||||
name="full_name"
|
||||
class="flex-1"
|
||||
:class="{ error: v$.credentials.fullName.$error }"
|
||||
:label="$t('REGISTER.FULL_NAME.LABEL')"
|
||||
:placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.fullName.$error"
|
||||
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
|
||||
@blur="v$.credentials.fullName.$touch"
|
||||
/>
|
||||
<form-input
|
||||
v-model.trim="credentials.accountName"
|
||||
name="account_name"
|
||||
class="flex-1 ml-2"
|
||||
:class="{ error: v$.credentials.accountName.$error }"
|
||||
:label="$t('REGISTER.COMPANY_NAME.LABEL')"
|
||||
:placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.accountName.$error"
|
||||
:error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
|
||||
@blur="v$.credentials.accountName.$touch"
|
||||
/>
|
||||
</div>
|
||||
<form-input
|
||||
v-model.trim="credentials.email"
|
||||
type="email"
|
||||
name="email_address"
|
||||
:class="{ error: v$.credentials.email.$error }"
|
||||
:label="$t('REGISTER.EMAIL.LABEL')"
|
||||
:placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
:error-message="$t('REGISTER.EMAIL.ERROR')"
|
||||
@blur="v$.credentials.email.$touch"
|
||||
/>
|
||||
<form-input
|
||||
v-model.trim="credentials.password"
|
||||
type="password"
|
||||
name="password"
|
||||
:class="{ error: v$.credentials.password.$error }"
|
||||
:label="$t('LOGIN.PASSWORD.LABEL')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
:error-message="passwordErrorText"
|
||||
@blur="v$.credentials.password.$touch"
|
||||
/>
|
||||
<div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
|
||||
<vue-hcaptcha
|
||||
ref="hCaptcha"
|
||||
:class="{ error: !hasAValidCaptcha && didCaptchaReset }"
|
||||
:sitekey="globalConfig.hCaptchaSiteKey"
|
||||
@verify="onRecaptchaVerified"
|
||||
/>
|
||||
<span
|
||||
v-if="!hasAValidCaptcha && didCaptchaReset"
|
||||
class="text-xs text-red-400"
|
||||
>
|
||||
{{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
|
||||
</span>
|
||||
</div>
|
||||
<submit-button
|
||||
:button-text="$t('REGISTER.SUBMIT')"
|
||||
:disabled="isSignupInProgress || !hasAValidCaptcha"
|
||||
:loading="isSignupInProgress"
|
||||
icon-class="arrow-chevron-right"
|
||||
/>
|
||||
</form>
|
||||
<GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
|
||||
{{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
|
||||
</GoogleOAuthButton>
|
||||
<p
|
||||
class="text-sm mb-1 mt-5 text-slate-800 dark:text-woot-50 [&>a]:text-woot-500 [&>a]:font-medium [&>a]:hover:text-woot-600"
|
||||
v-html="termsLink"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength, email } from '@vuelidate/validators';
|
||||
@@ -210,6 +130,86 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-1 px-1 overflow-auto">
|
||||
<form class="space-y-3" @submit.prevent="submit">
|
||||
<div class="flex">
|
||||
<form-input
|
||||
v-model.trim="credentials.fullName"
|
||||
name="full_name"
|
||||
class="flex-1"
|
||||
:class="{ error: v$.credentials.fullName.$error }"
|
||||
:label="$t('REGISTER.FULL_NAME.LABEL')"
|
||||
:placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.fullName.$error"
|
||||
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
|
||||
@blur="v$.credentials.fullName.$touch"
|
||||
/>
|
||||
<form-input
|
||||
v-model.trim="credentials.accountName"
|
||||
name="account_name"
|
||||
class="flex-1 ml-2"
|
||||
:class="{ error: v$.credentials.accountName.$error }"
|
||||
:label="$t('REGISTER.COMPANY_NAME.LABEL')"
|
||||
:placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.accountName.$error"
|
||||
:error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
|
||||
@blur="v$.credentials.accountName.$touch"
|
||||
/>
|
||||
</div>
|
||||
<form-input
|
||||
v-model.trim="credentials.email"
|
||||
type="email"
|
||||
name="email_address"
|
||||
:class="{ error: v$.credentials.email.$error }"
|
||||
:label="$t('REGISTER.EMAIL.LABEL')"
|
||||
:placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
:error-message="$t('REGISTER.EMAIL.ERROR')"
|
||||
@blur="v$.credentials.email.$touch"
|
||||
/>
|
||||
<form-input
|
||||
v-model.trim="credentials.password"
|
||||
type="password"
|
||||
name="password"
|
||||
:class="{ error: v$.credentials.password.$error }"
|
||||
:label="$t('LOGIN.PASSWORD.LABEL')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
:error-message="passwordErrorText"
|
||||
@blur="v$.credentials.password.$touch"
|
||||
/>
|
||||
<div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
|
||||
<vue-hcaptcha
|
||||
ref="hCaptcha"
|
||||
:class="{ error: !hasAValidCaptcha && didCaptchaReset }"
|
||||
:sitekey="globalConfig.hCaptchaSiteKey"
|
||||
@verify="onRecaptchaVerified"
|
||||
/>
|
||||
<span
|
||||
v-if="!hasAValidCaptcha && didCaptchaReset"
|
||||
class="text-xs text-red-400"
|
||||
>
|
||||
{{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
|
||||
</span>
|
||||
</div>
|
||||
<submit-button
|
||||
:button-text="$t('REGISTER.SUBMIT')"
|
||||
:disabled="isSignupInProgress || !hasAValidCaptcha"
|
||||
:loading="isSignupInProgress"
|
||||
icon-class="arrow-chevron-right"
|
||||
/>
|
||||
</form>
|
||||
<GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
|
||||
{{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
|
||||
</GoogleOAuthButton>
|
||||
<p
|
||||
class="text-sm mb-1 mt-5 text-slate-800 dark:text-woot-50 [&>a]:text-woot-500 [&>a]:font-medium [&>a]:hover:text-woot-600"
|
||||
v-html="termsLink"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.h-captcha--box {
|
||||
&::v-deep .error {
|
||||
|
||||
@@ -1,3 +1,29 @@
|
||||
<script>
|
||||
import TestimonialCard from './TestimonialCard.vue';
|
||||
import { getTestimonialContent } from '../../../../../api/testimonials';
|
||||
export default {
|
||||
components: { TestimonialCard },
|
||||
data() {
|
||||
return { testimonials: [] };
|
||||
},
|
||||
beforeMount() {
|
||||
this.fetchTestimonials();
|
||||
},
|
||||
methods: {
|
||||
async fetchTestimonials() {
|
||||
try {
|
||||
const { data } = await getTestimonialContent();
|
||||
this.testimonials = data;
|
||||
} catch (error) {
|
||||
// Ignoring the error as the UI wouldn't break
|
||||
} finally {
|
||||
this.$emit('resize-containers', !!this.testimonials.length);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="testimonials.length"
|
||||
@@ -31,32 +57,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TestimonialCard from './TestimonialCard.vue';
|
||||
import { getTestimonialContent } from '../../../../../api/testimonials';
|
||||
export default {
|
||||
components: { TestimonialCard },
|
||||
data() {
|
||||
return { testimonials: [] };
|
||||
},
|
||||
beforeMount() {
|
||||
this.fetchTestimonials();
|
||||
},
|
||||
methods: {
|
||||
async fetchTestimonials() {
|
||||
try {
|
||||
const { data } = await getTestimonialContent();
|
||||
this.testimonials = data;
|
||||
} catch (error) {
|
||||
// Ignoring the error as the UI wouldn't break
|
||||
} finally {
|
||||
this.$emit('resize-containers', !!this.testimonials.length);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.center--img {
|
||||
}
|
||||
|
||||
@@ -1,21 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col items-start justify-center p-6 w-80 bg-white rounded-lg drop-shadow-md dark:bg-slate-800"
|
||||
>
|
||||
<p class="text-sm text-slate-600 dark:text-woot-50 tracking-normal">
|
||||
{{ reviewContent }}
|
||||
</p>
|
||||
<div class="flex items-center mt-4 text-slate-700 dark:text-woot-50">
|
||||
<div class="bg-white rounded-full p-1">
|
||||
<img :src="authorImage" class="h-8 w-8 rounded-full" />
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<div class="text-sm font-medium">{{ authorName }}</div>
|
||||
<div class="text-xs">{{ authorDesignation }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
@@ -38,3 +20,21 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col items-start justify-center p-6 w-80 bg-white rounded-lg drop-shadow-md dark:bg-slate-800"
|
||||
>
|
||||
<p class="text-sm text-slate-600 dark:text-woot-50 tracking-normal">
|
||||
{{ reviewContent }}
|
||||
</p>
|
||||
<div class="flex items-center mt-4 text-slate-700 dark:text-woot-50">
|
||||
<div class="bg-white rounded-full p-1">
|
||||
<img :src="authorImage" class="h-8 w-8 rounded-full" />
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<div class="text-sm font-medium">{{ authorName }}</div>
|
||||
<div class="text-xs">{{ authorDesignation }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,95 +1,3 @@
|
||||
<template>
|
||||
<main
|
||||
class="flex flex-col w-full min-h-screen py-20 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
|
||||
>
|
||||
<section class="max-w-5xl mx-auto">
|
||||
<img
|
||||
:src="globalConfig.logo"
|
||||
:alt="globalConfig.installationName"
|
||||
class="block w-auto h-8 mx-auto dark:hidden"
|
||||
/>
|
||||
<img
|
||||
v-if="globalConfig.logoDark"
|
||||
:src="globalConfig.logoDark"
|
||||
:alt="globalConfig.installationName"
|
||||
class="hidden w-auto h-8 mx-auto dark:block"
|
||||
/>
|
||||
<h2
|
||||
class="mt-6 text-3xl font-medium text-center text-slate-900 dark:text-woot-50"
|
||||
>
|
||||
{{
|
||||
useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
|
||||
}}
|
||||
</h2>
|
||||
<p
|
||||
v-if="showSignupLink"
|
||||
class="mt-3 text-sm text-center text-slate-600 dark:text-slate-400"
|
||||
>
|
||||
{{ $t('COMMON.OR') }}
|
||||
<router-link to="auth/signup" class="lowercase text-link">
|
||||
{{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
|
||||
</router-link>
|
||||
</p>
|
||||
</section>
|
||||
<section
|
||||
class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
|
||||
:class="{
|
||||
'mb-8 mt-15': !showGoogleOAuth,
|
||||
'animate-wiggle': loginApi.hasErrored,
|
||||
}"
|
||||
>
|
||||
<div v-if="!email">
|
||||
<GoogleOAuthButton v-if="showGoogleOAuth" />
|
||||
<form class="space-y-5" @submit.prevent="submitLogin">
|
||||
<form-input
|
||||
v-model.trim="credentials.email"
|
||||
name="email_address"
|
||||
type="text"
|
||||
data-testid="email_input"
|
||||
:tabindex="1"
|
||||
required
|
||||
:label="$t('LOGIN.EMAIL.LABEL')"
|
||||
:placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
@input="v$.credentials.email.$touch"
|
||||
/>
|
||||
<form-input
|
||||
v-model.trim="credentials.password"
|
||||
type="password"
|
||||
name="password"
|
||||
data-testid="password_input"
|
||||
required
|
||||
:tabindex="2"
|
||||
:label="$t('LOGIN.PASSWORD.LABEL')"
|
||||
:placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
@input="v$.credentials.password.$touch"
|
||||
>
|
||||
<p v-if="!globalConfig.disableUserProfileUpdate">
|
||||
<router-link
|
||||
to="auth/reset/password"
|
||||
class="text-sm text-link"
|
||||
tabindex="4"
|
||||
>
|
||||
{{ $t('LOGIN.FORGOT_PASSWORD') }}
|
||||
</router-link>
|
||||
</p>
|
||||
</form-input>
|
||||
<submit-button
|
||||
:disabled="loginApi.showLoading"
|
||||
:tabindex="3"
|
||||
:button-text="$t('LOGIN.SUBMIT')"
|
||||
:loading="loginApi.showLoading"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else class="flex items-center justify-center">
|
||||
<spinner color-scheme="primary" size="" />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, email } from '@vuelidate/validators';
|
||||
@@ -234,3 +142,95 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main
|
||||
class="flex flex-col w-full min-h-screen py-20 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
|
||||
>
|
||||
<section class="max-w-5xl mx-auto">
|
||||
<img
|
||||
:src="globalConfig.logo"
|
||||
:alt="globalConfig.installationName"
|
||||
class="block w-auto h-8 mx-auto dark:hidden"
|
||||
/>
|
||||
<img
|
||||
v-if="globalConfig.logoDark"
|
||||
:src="globalConfig.logoDark"
|
||||
:alt="globalConfig.installationName"
|
||||
class="hidden w-auto h-8 mx-auto dark:block"
|
||||
/>
|
||||
<h2
|
||||
class="mt-6 text-3xl font-medium text-center text-slate-900 dark:text-woot-50"
|
||||
>
|
||||
{{
|
||||
useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
|
||||
}}
|
||||
</h2>
|
||||
<p
|
||||
v-if="showSignupLink"
|
||||
class="mt-3 text-sm text-center text-slate-600 dark:text-slate-400"
|
||||
>
|
||||
{{ $t('COMMON.OR') }}
|
||||
<router-link to="auth/signup" class="lowercase text-link">
|
||||
{{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
|
||||
</router-link>
|
||||
</p>
|
||||
</section>
|
||||
<section
|
||||
class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
|
||||
:class="{
|
||||
'mb-8 mt-15': !showGoogleOAuth,
|
||||
'animate-wiggle': loginApi.hasErrored,
|
||||
}"
|
||||
>
|
||||
<div v-if="!email">
|
||||
<GoogleOAuthButton v-if="showGoogleOAuth" />
|
||||
<form class="space-y-5" @submit.prevent="submitLogin">
|
||||
<form-input
|
||||
v-model.trim="credentials.email"
|
||||
name="email_address"
|
||||
type="text"
|
||||
data-testid="email_input"
|
||||
:tabindex="1"
|
||||
required
|
||||
:label="$t('LOGIN.EMAIL.LABEL')"
|
||||
:placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
@input="v$.credentials.email.$touch"
|
||||
/>
|
||||
<form-input
|
||||
v-model.trim="credentials.password"
|
||||
type="password"
|
||||
name="password"
|
||||
data-testid="password_input"
|
||||
required
|
||||
:tabindex="2"
|
||||
:label="$t('LOGIN.PASSWORD.LABEL')"
|
||||
:placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
@input="v$.credentials.password.$touch"
|
||||
>
|
||||
<p v-if="!globalConfig.disableUserProfileUpdate">
|
||||
<router-link
|
||||
to="auth/reset/password"
|
||||
class="text-sm text-link"
|
||||
tabindex="4"
|
||||
>
|
||||
{{ $t('LOGIN.FORGOT_PASSWORD') }}
|
||||
</router-link>
|
||||
</p>
|
||||
</form-input>
|
||||
<submit-button
|
||||
:disabled="loginApi.showLoading"
|
||||
:tabindex="3"
|
||||
:button-text="$t('LOGIN.SUBMIT')"
|
||||
:loading="loginApi.showLoading"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else class="flex items-center justify-center">
|
||||
<spinner color-scheme="primary" size="" />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,27 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'OnboardingStep',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isComplete: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center gap-2 p-2 text-lg font-bold mb-6 relative before:absolute before:h-10 before:w-[1px] before:bg-slate-200 before:-bottom-8 before:left-[24px] hide-before-of-last"
|
||||
@@ -23,30 +47,6 @@
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OnboardingStep',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isComplete: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.hide-before-of-last:last-child::before {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user