mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 02:50:39 +00:00
sing up forms refactoring
This commit is contained in:
Čarodej
@@ -8,45 +8,46 @@
|
||||
:description="$t('page_create_password.subtitle')"
|
||||
/>
|
||||
|
||||
<ValidationObserver @submit.prevent="createNewPassword" ref="create_new_password" v-slot="{ invalid }" tag="form" class="form block-form create-new-password">
|
||||
<ValidationObserver @submit.prevent="createNewPassword" ref="create_new_password" v-slot="{ invalid }" tag="form" class="space-y-4 mb-12 text-left">
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_create_password.label_email') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input v-model="recoverPassword.email" :placeholder="$t('page_login.placeholder_email')" type="email"
|
||||
:class="{'border-red': errors[0]}"/>
|
||||
<div class="md:flex md:items-center mb-5 md:max-w-lg mx-auto">
|
||||
<label class="md:w-72 md:text-right md:pr-4 font-bold md:mb-0 mb-1.5 block">
|
||||
{{ $t('page_create_password.label_email') }}:
|
||||
</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="w-full text-left" name="E-Mail" rules="required" v-slot="{ errors }">
|
||||
<input v-model="recoverPassword.email" :placeholder="$t('page_login.placeholder_email')" type="email" class="font-bold px-5 py-3.5 dark:bg-2x-dark-foreground bg-light-background w-full rounded-lg focus-border-theme appearance-none border border-transparent" :class="{'border-red': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_create_password.label_new_pass') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="recoverPassword.newPassword" :placeholder="$t('page_create_password.label_new_pass')" type="password"
|
||||
:class="{'border-red': errors[0]}"/>
|
||||
<div class="md:flex md:items-center mb-5 md:max-w-lg mx-auto">
|
||||
<label class="md:w-72 md:text-right md:pr-4 font-bold md:mb-0 mb-1.5 block">
|
||||
{{ $t('page_create_password.label_new_pass') }}:
|
||||
</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="w-full text-left" name="New Password" rules="required" v-slot="{ errors }">
|
||||
<input v-model="recoverPassword.newPassword" :placeholder="$t('page_create_password.label_new_pass')" type="password" class="font-bold px-5 py-3.5 dark:bg-2x-dark-foreground bg-light-background w-full rounded-lg focus-border-theme appearance-none border border-transparent" :class="{'border-red': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Password"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="recoverPassword.newPasswordConfirm" :placeholder="$t('page_create_password.label_confirm_pass')"
|
||||
type="password" :class="{'border-red': errors[0]}"/>
|
||||
<div class="md:flex md:items-center mb-5 md:max-w-lg mx-auto">
|
||||
<label class="md:w-72 md:text-right md:pr-4 font-bold md:mb-0 mb-1.5 block">
|
||||
{{ $t('page_create_password.label_confirm_pass') }}:
|
||||
</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Confirm Password" rules="required" v-slot="{ errors }">
|
||||
<input v-model="recoverPassword.newPasswordConfirm" :placeholder="$t('page_create_password.label_confirm_pass')" type="password" class="font-bold px-5 py-3.5 dark:bg-2x-dark-foreground bg-light-background w-full rounded-lg focus-border-theme appearance-none border border-transparent" :class="{'border-red': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<AuthButton icon="chevron-right" :text="$t('page_create_password.button_update')" :loading="isLoading" :disabled="isLoading"/>
|
||||
</div>
|
||||
<div>
|
||||
<AuthButton class="md:w-min w-full justify-center mt-12" icon="chevron-right" :text="$t('page_create_password.button_update')" :loading="isLoading" :disabled="isLoading"/>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
|
||||
<span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }}
|
||||
<router-link :to="{name: 'SignIn'}">
|
||||
<span class="block">
|
||||
{{ $t('page_forgotten_password.password_remember_text') }}
|
||||
<router-link :to="{name: 'SignIn'}" class="font-bold text-theme">
|
||||
{{ $t('page_forgotten_password.password_remember_button') }}
|
||||
</router-link>
|
||||
</span>
|
||||
@@ -144,7 +145,7 @@
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
if (error.response.status == 422) {
|
||||
if (error.response.status === 422) {
|
||||
|
||||
if (error.response.data.error) {
|
||||
|
||||
@@ -172,9 +173,4 @@
|
||||
this.recoverPassword.token = this.$route.query.token
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/resources/sass/vuefilemanager/_auth-form';
|
||||
@import '/resources/sass/vuefilemanager/_auth';
|
||||
</style>
|
||||
</script>
|
||||
@@ -9,7 +9,7 @@
|
||||
/>
|
||||
|
||||
<ValidationObserver @submit.prevent="logIn" ref="log_in" v-slot="{ invalid }" tag="form" class="md:flex items-start md:space-x-4 md:space-y-0 space-y-4 mb-12">
|
||||
<ValidationProvider class="w-full text-left relative" tag="div" mode="passive" name="E-Mail" rules="required" v-slot="{ errors }">
|
||||
<ValidationProvider class="w-full text-left" tag="div" mode="passive" name="E-Mail" rules="required" v-slot="{ errors }">
|
||||
<input class="font-bold px-5 py-3.5 dark:bg-2x-dark-foreground bg-light-background w-full rounded-lg focus-border-theme appearance-none border border-transparent" :class="{'border-red': errors[0]}" v-model="loginEmail" :placeholder="$t('page_login.placeholder_email')" type="email" />
|
||||
<span class="text-red-600 text-xs text-left" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
@@ -96,7 +96,7 @@
|
||||
</b>
|
||||
</span>
|
||||
|
||||
<div class="spinner-wrapper">
|
||||
<div class="relative h-12 mt-10 w-full">
|
||||
<Spinner v-if="isLoading" class="spinner" />
|
||||
</div>
|
||||
|
||||
@@ -124,7 +124,7 @@
|
||||
{{ $t('2fa.i_have_2fa_app') }}
|
||||
</b>
|
||||
|
||||
<div v-if="isLoading" class="spinner-wrapper">
|
||||
<div v-if="isLoading" class="relative h-12 mt-10 w-full">
|
||||
<Spinner class="spinner" />
|
||||
</div>
|
||||
</AuthContent>
|
||||
@@ -377,13 +377,3 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.spinner-wrapper {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,64 +8,65 @@
|
||||
:description="$t('page_registration.subtitle')"
|
||||
/>
|
||||
|
||||
<ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_email') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input v-model="register.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
|
||||
class="focus-border-theme"
|
||||
:class="{'border-red': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form" class="space-y-4 mb-12 text-left">
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_name') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input v-model="register.name" :placeholder="$t('page_registration.placeholder_name')" type="text"
|
||||
class="focus-border-theme"
|
||||
:class="{'border-red': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="md:flex md:items-center mb-5 md:max-w-lg mx-auto">
|
||||
<label class="md:w-72 md:text-right md:pr-4 font-bold md:mb-0 mb-1.5 block">
|
||||
{{ $t('page_registration.label_email') }}:
|
||||
</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="w-full text-left" name="E-Mail" rules="required" v-slot="{ errors }">
|
||||
<input v-model="register.email" :placeholder="$t('page_registration.placeholder_email')" type="email" class="font-bold px-5 py-3.5 dark:bg-2x-dark-foreground bg-light-background w-full rounded-lg focus-border-theme appearance-none border border-transparent" :class="{'border-red': errors[0]}"/>
|
||||
<span class="text-red-600 text-xs text-left" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_pass') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Your New Password"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="register.password" :placeholder="$t('page_registration.placeholder_pass')" type="password"
|
||||
class="focus-border-theme"
|
||||
:class="{'border-red': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="md:flex md:items-center mb-5 md:max-w-lg mx-auto">
|
||||
<label class="md:w-72 md:text-right md:pr-4 font-bold md:mb-0 mb-1.5 block">
|
||||
{{ $t('page_registration.label_name') }}:
|
||||
</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Full Name" rules="required" v-slot="{ errors }">
|
||||
<input v-model="register.name" :placeholder="$t('page_registration.placeholder_name')" type="text" class="font-bold px-5 py-3.5 dark:bg-2x-dark-foreground bg-light-background w-full rounded-lg focus-border-theme appearance-none border border-transparent" :class="{'border-red': errors[0]}"/>
|
||||
<span class="text-red-600 text-xs text-left" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_confirm_pass') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="register.password_confirmation" :placeholder="$t('page_registration.placeholder_confirm_pass')"
|
||||
class="focus-border-theme"
|
||||
type="password" :class="{'border-red': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="md:flex md:items-center mb-5 md:max-w-lg mx-auto">
|
||||
<label class="md:w-72 md:text-right md:pr-4 font-bold md:mb-0 mb-1.5 block">
|
||||
{{ $t('page_registration.label_pass') }}:
|
||||
</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Your New Password" rules="required" v-slot="{ errors }">
|
||||
<input v-model="register.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="font-bold px-5 py-3.5 dark:bg-2x-dark-foreground bg-light-background w-full rounded-lg focus-border-theme appearance-none border border-transparent" :class="{'border-red': errors[0]}"/>
|
||||
<span class="text-red-600 text-xs text-left" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<i18n path="page_registration.agreement" tag="p" class="legal-agreement">
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: 'terms-of-service'}}" target="_blank" class="text-theme">{{ termsOfService.title }}</router-link>
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: 'privacy-policy'}}" target="_blank" class="text-theme">{{ privacyPolicy.title }}</router-link>
|
||||
<div class="md:flex md:items-center mb-5 md:max-w-lg mx-auto">
|
||||
<label class="md:w-72 md:text-right md:pr-4 font-bold md:mb-0 mb-1.5 block">
|
||||
{{ $t('page_registration.label_confirm_pass') }}:
|
||||
</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Confirm Your Password" rules="required" v-slot="{ errors }">
|
||||
<input v-model="register.password_confirmation" :placeholder="$t('page_registration.placeholder_confirm_pass')" class="font-bold px-5 py-3.5 dark:bg-2x-dark-foreground bg-light-background w-full rounded-lg focus-border-theme appearance-none border border-transparent" type="password" :class="{'border-red': errors[0]}"/>
|
||||
<span class="text-red-600 text-xs text-left" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<i18n path="page_registration.agreement" tag="p" class="mx-auto mt-12 mb-6 w-96 font-bold">
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: 'terms-of-service'}}" target="_blank" class="text-theme">
|
||||
{{ termsOfService.title }}
|
||||
</router-link>
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: 'privacy-policy'}}" target="_blank" class="text-theme">
|
||||
{{ privacyPolicy.title }}
|
||||
</router-link>
|
||||
</i18n>
|
||||
<AuthButton class="mt-6" icon="chevron-right" :text="$t('page_registration.button_create_account')" :loading="isLoading" :disabled="isLoading"/>
|
||||
<AuthButton class="md:w-min w-full justify-center" icon="chevron-right" :text="$t('page_registration.button_create_account')" :loading="isLoading" :disabled="isLoading"/>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
|
||||
<SocialiteAuthenticationButtons/>
|
||||
|
||||
<span class="additional-link">{{ $t('page_registration.have_an_account') }}
|
||||
<router-link :to="{name: 'SignIn'}" class="text-theme">
|
||||
<span class="block">{{ $t('page_registration.have_an_account') }}
|
||||
<router-link :to="{name: 'SignIn'}" class="font-bold text-theme">
|
||||
{{ $t('page_forgotten_password.password_remember_button') }}
|
||||
</router-link>
|
||||
</span>
|
||||
@@ -99,7 +100,9 @@
|
||||
required,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
...mapGetters([
|
||||
'config'
|
||||
]),
|
||||
privacyPolicy() {
|
||||
return this.config.legal.find(legal => {
|
||||
return legal.slug === 'privacy-policy'
|
||||
@@ -191,17 +194,3 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/resources/sass/vuefilemanager/_auth-form';
|
||||
@import '/resources/sass/vuefilemanager/_auth';
|
||||
|
||||
.legal-agreement {
|
||||
@include font-size(16);
|
||||
padding: 55px 0 0;
|
||||
max-width: 400px;
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user