nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 19:10:40 +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/CreateNewPassword.vue
+27 -31
View File
@@ -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>
resources/js/views/Auth/SignIn.vue
+3 -13
View File
@@ -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>
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>
resources/js/views/SetupWizard/BillingsDetail.vue
-1
View File
@@ -187,7 +187,6 @@
</script>
<style scoped lang="scss">
//@import '/resources/sass/vue-file-manager/_auth-form';
@import '/resources/sass/vuefilemanager/_forms';
@import '/resources/sass/vuefilemanager/_auth';
@import '/resources/sass/vuefilemanager/_setup_wizard';
resources/js/views/SetupWizard/Database.vue
-1
View File
@@ -183,7 +183,6 @@
</script>
<style scoped lang="scss">
//@import '/resources/sass/vue-file-manager/_auth-form';
@import '/resources/sass/vuefilemanager/_forms';
@import '/resources/sass/vuefilemanager/_auth';
@import '/resources/sass/vuefilemanager/_setup_wizard';
resources/js/views/SetupWizard/InstallationDisclaimer.vue
-1
View File
@@ -141,7 +141,6 @@
</script>
<style scoped lang="scss">
//@import '/resources/sass/vuefilemanagerr/_auth-form';
@import '/resources/sass/vuefilemanager/_forms';
@import '/resources/sass/vuefilemanager/_auth';
@import '/resources/sass/vuefilemanager/_setup_wizard';
resources/js/views/SetupWizard/PurchaseCode.vue
-1
View File
@@ -114,7 +114,6 @@
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_auth-form';
@import '/resources/sass/vuefilemanager/_auth';
@import '/resources/sass/vuefilemanager/_setup_wizard';
resources/js/views/SetupWizard/StripeCredentials.vue
-1
View File
@@ -176,7 +176,6 @@
</script>
<style scoped lang="scss">
//@import '/resources/sass/vue-file-manager/_auth-form';
@import '/resources/sass/vuefilemanager/_forms';
@import '/resources/sass/vuefilemanager/_auth';
@import '/resources/sass/vuefilemanager/_setup_wizard';
resources/js/views/SetupWizard/SubscriptionService.vue
-1
View File
@@ -73,7 +73,6 @@
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_auth-form';
@import '/resources/sass/vuefilemanager/_auth';
@import '/resources/sass/vuefilemanager/_setup_wizard';
resources/js/views/Shared/SharedAuthentication.vue
+15 -33
View File
@@ -1,26 +1,24 @@
<template>
<div id="password-view">
<AuthContent class="center" name="password" :visible="true">
<Headline
<AuthContentWrapper>
<AuthContent name="password" :visible="true">
<Headline
:title="$t('page_shared.title')"
:description="$t('page_shared.subtitle')"
/>
<ValidationObserver @submit.prevent="authenticateProtected" ref="authenticateProtected" v-slot="{ invalid }" tag="form" class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Password" rules="required" v-slot="{ errors }">
<input v-model="password" :placeholder="$t('page_shared.placeholder_pass')" type="password" :class="{'border-red': errors[0]}" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<AuthButton icon="chevron-right" :text="$t('page_shared.submit')" :loading="isLoading" :disabled="isLoading" />
</ValidationObserver>
</AuthContent>
</div>
<ValidationObserver @submit.prevent="authenticateProtected" ref="authenticateProtected" v-slot="{ invalid }" tag="form" class="md:flex items-start md:space-x-4 md:space-y-0 space-y-4 mb-12">
<ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Password" rules="required" v-slot="{ errors }">
<input v-model="password" :placeholder="$t('page_shared.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>
<AuthButton class="md:w-min w-full justify-center" icon="chevron-right" :text="$t('page_shared.submit')" :loading="isLoading" :disabled="isLoading" />
</ValidationObserver>
</AuthContent>
</AuthContentWrapper>
</template>
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import AuthContentWrapper from "../../components/Auth/AuthContentWrapper"
import AuthContent from '/resources/js/components/Auth/AuthContent'
import AuthButton from '/resources/js/components/Auth/AuthButton'
import Headline from "../Auth/Headline";
@@ -32,6 +30,7 @@
components: {
ValidationObserver,
ValidationProvider,
AuthContentWrapper,
AuthContent,
AuthButton,
Headline,
@@ -88,21 +87,4 @@
},
},
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_auth-form';
@import '/resources/sass/vuefilemanager/_auth';
#password-view {
width: 100%;
display: grid;
height: inherit;
.center {
margin: auto;
}
}
</style>
</script>
resources/js/views/Teams/Invitation.vue
+18 -32
View File
@@ -1,7 +1,7 @@
<template>
<AuthContentWrapper ref="auth">
<!--Log In by Email-->
<!--Invitation info-->
<AuthContent name="invitation" :visible="false">
<Headline
v-if="invitation"
@@ -11,21 +11,26 @@
<div class="text-center mb-10 w-24 mx-auto relative">
<VueFolderTeamIcon class="inline-block w-28" />
<MemberAvatar
:member="invitation.data.relationships.inviter"
class="absolute -bottom-2.5 -right-6"
:is-border="true"
:size="38"
:member="invitation.data.relationships.inviter"
/>
</div>
</Headline>
<div class="form inline-form">
<AuthButton @click.native="acceptInvitation" icon="chevron-right" :text="$t('Accept Invitation')" :loading="isLoading" :disabled="isLoading" />
</div>
<AuthButton
@click.native="acceptInvitation"
class="md:w-min w-full justify-center mb-12"
icon="chevron-right"
:text="$t('Accept Invitation')"
:loading="isLoading"
:disabled="isLoading"
/>
<div class="additional-link font-bold">
<div class="block">
Or
<b @click="declineInvitation" class="text-theme font-bold">
<b @click="declineInvitation" class="text-theme font-bold cursor-pointer">
{{ $t('decline') }}
</b>
your invitation.
@@ -34,18 +39,17 @@
<!--Accepted invitation screen-->
<AuthContent v-if="invitation" name="accepted" :visible="false">
<Headline
:title="$t('You are successfully joined')"
:description="$t('You can now proceed to your account and participate in team folder')"
/>
<router-link replace v-if="! config.isAuthenticated" :to="{name: 'SignIn'}">
<AuthButton icon="chevron-right" :text="$t('Proceed to your account')"/>
<AuthButton class="md:w-min w-full justify-center mb-12" icon="chevron-right" :text="$t('Proceed to your account')"/>
</router-link>
<router-link replace v-if="config.isAuthenticated" :to="{name: 'SharedWithMe', params: {id: invitation.data.attributes.parent_id}}">
<AuthButton icon="chevron-right" :text="$t('Go to Team Folder')"/>
<AuthButton class="md:w-min w-full justify-center mb-12" icon="chevron-right" :text="$t('Go to Team Folder')"/>
</router-link>
</AuthContent>
@@ -58,7 +62,7 @@
/>
<router-link :to="{name: 'SignIn'}">
<AuthButton icon="chevron-right" :text="$t('Proceed to your account')"/>
<AuthButton class="md:w-min w-full justify-center mb-12" icon="chevron-right" :text="$t('Proceed to your account')"/>
</router-link>
</AuthContent>
@@ -71,11 +75,11 @@
/>
<router-link replace v-if="! config.isAuthenticated" :to="{name: 'SignIn'}">
<AuthButton icon="chevron-right" :text="$t('Log In')"/>
<AuthButton class="md:w-min w-full justify-center mb-12" icon="chevron-right" :text="$t('Log In')"/>
</router-link>
<router-link replace v-if="config.isAuthenticated" :to="{name: 'SharedWithMe'}">
<AuthButton icon="chevron-right" :text="$t('Go to your shared folders')"/>
<AuthButton class="md:w-min w-full justify-center mb-12" icon="chevron-right" :text="$t('Go to your shared folders')"/>
</router-link>
</AuthContent>
</AuthContentWrapper>
@@ -147,13 +151,7 @@
this.$refs.auth.$children.forEach(page => {
// Hide current step
page.isVisible = false
if (page.$props.name === slug) {
// Go to next step
page.isVisible = true
}
page.isVisible = page.$props.name === slug;
})
},
},
@@ -173,15 +171,3 @@
}
}
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_auth-form';
@import '/resources/sass/vuefilemanager/_auth';
.spinner-wrapper {
width: 100%;
height: 50px;
position: relative;
top: 50px;
}
</style>