nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-26 18:30:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

sing up forms refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-18 16:43:50 +01:00
parent 148f5982a9
commit b456a562a0
13 changed files with 290 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/views/Auth/SignUp.vue
+52 -63
View File
@@ -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>