mirror of
https://github.com/IT4Change/gradido.git
synced 2026-02-15 01:02:52 +00:00
remove base-input from register.vue
This commit is contained in:
ogerly
parent
9d00b96c5f
commit
259fd5404d
@ -30,9 +30,9 @@
|
|||||||
:rules="{ required: true, email: true }"
|
:rules="{ required: true, email: true }"
|
||||||
v-slot="validationContext"
|
v-slot="validationContext"
|
||||||
>
|
>
|
||||||
<b-form-group class="mb-3" label="Email" label-for="input-login-email">
|
<b-form-group class="mb-3" label="Email" label-for="login-email">
|
||||||
<b-form-input
|
<b-form-input
|
||||||
id="input-login-email"
|
id="login-email"
|
||||||
name="example-input-1"
|
name="example-input-1"
|
||||||
v-model="model.email"
|
v-model="model.email"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
@ -92,7 +92,6 @@
|
|||||||
</span>
|
</span>
|
||||||
</b-alert>
|
</b-alert>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<!--<b-button class="ml-2" @click="resetForm()">{{ $t('form.reset') }}</b-button>-->
|
|
||||||
<b-button type="submit" variant="primary">{{ $t('login') }}</b-button>
|
<b-button type="submit" variant="primary">{{ $t('login') }}</b-button>
|
||||||
</div>
|
</div>
|
||||||
</b-form>
|
</b-form>
|
||||||
@ -138,16 +137,7 @@ export default {
|
|||||||
getValidationState({ dirty, validated, valid = null }) {
|
getValidationState({ dirty, validated, valid = null }) {
|
||||||
return dirty || validated ? valid : null
|
return dirty || validated ? valid : null
|
||||||
},
|
},
|
||||||
//resetForm() {
|
|
||||||
// this.model = {
|
|
||||||
// email: null,
|
|
||||||
// password: null,
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// this.$nextTick(() => {
|
|
||||||
// this.$refs.observer.reset()
|
|
||||||
// })
|
|
||||||
//},
|
|
||||||
|
|
||||||
togglePasswordVisibility() {
|
togglePasswordVisibility() {
|
||||||
this.passwordVisible = !this.passwordVisible
|
this.passwordVisible = !this.passwordVisible
|
||||||
|
|||||||
@ -23,65 +23,146 @@
|
|||||||
<div class="text-center text-muted mb-4">
|
<div class="text-center text-muted mb-4">
|
||||||
<small>{{ $t('signup') }}</small>
|
<small>{{ $t('signup') }}</small>
|
||||||
</div>
|
</div>
|
||||||
<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
|
|
||||||
|
|
||||||
|
<validation-observer ref="observer" v-slot="{ handleSubmit }">
|
||||||
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
|
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
|
||||||
<base-input
|
|
||||||
:label="$t('form.firstname')"
|
<validation-provider
|
||||||
alternative
|
:name="$t('form.firstname')"
|
||||||
class="mb-3"
|
|
||||||
name="firstname"
|
|
||||||
:rules="{ required: true, min: 3 }"
|
:rules="{ required: true, min: 3 }"
|
||||||
v-model="model.firstname"
|
v-slot="validationContext"
|
||||||
></base-input>
|
>
|
||||||
<base-input
|
|
||||||
:label="$t('form.lastname')"
|
|
||||||
alternative
|
|
||||||
class="mb-3"
|
|
||||||
name="lastname"
|
|
||||||
:rules="{ required: true, min: 2 }"
|
|
||||||
v-model="model.lastname"
|
|
||||||
></base-input>
|
|
||||||
|
|
||||||
<base-input
|
<b-form-group class="mb-3" :label="$t('form.firstname')" label-for="register-firstname">
|
||||||
:label="$t('form.email')"
|
|
||||||
alternative
|
|
||||||
class="mb-3"
|
|
||||||
name="Email"
|
|
||||||
:rules="{ required: true, email: true }"
|
|
||||||
v-model="model.email"
|
|
||||||
></base-input>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<b-form-group :label="$t('form.password')">
|
|
||||||
<b-input-group>
|
|
||||||
<b-form-input
|
<b-form-input
|
||||||
class="mb-0"
|
id="register-firstname"
|
||||||
v-model="password"
|
:name="$t('form.firstname')"
|
||||||
name="password"
|
v-model="model.firstname"
|
||||||
:class="{ valid: passwordValidation.valid }"
|
:placeholder="$t('form.firstname')"
|
||||||
:type="passwordVisible ? 'text' : 'password'"
|
:state="getValidationState(validationContext)"
|
||||||
prepend-icon="ni ni-lock-circle-open"
|
aria-describedby="register-firstname-live-feedback"
|
||||||
:placeholder="$t('form.password')"
|
|
||||||
></b-form-input>
|
></b-form-input>
|
||||||
|
|
||||||
<b-input-group-append>
|
<b-form-invalid-feedback id="register-firstname-live-feedback">
|
||||||
<b-button variant="outline-primary" @click="togglePasswordVisibility">
|
{{ validationContext.errors[0] }}
|
||||||
<b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
|
</b-form-invalid-feedback>
|
||||||
</b-button>
|
</b-form-group>
|
||||||
</b-input-group-append>
|
|
||||||
</b-input-group>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<base-input
|
|
||||||
:label="$t('form.password_repeat')"
|
|
||||||
type="password"
|
|
||||||
name="password-repeat"
|
|
||||||
:placeholder="$t('form.password_repeat')"
|
|
||||||
prepend-icon="ni ni-lock-circle-open"
|
|
||||||
v-model.lazy="checkPassword"
|
|
||||||
:class="{ valid: passwordValidation.valid }"
|
|
||||||
/>
|
|
||||||
|
|
||||||
|
</validation-provider>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<validation-provider
|
||||||
|
:name="$t('form.lastname')"
|
||||||
|
:rules="{ required: true, min: 2 }"
|
||||||
|
v-slot="validationContext"
|
||||||
|
>
|
||||||
|
|
||||||
|
<b-form-group class="mb-3" :label="$t('form.lastname')" label-for="register-lastname">
|
||||||
|
<b-form-input
|
||||||
|
id="register-lastname"
|
||||||
|
:name="$t('form.lastname')"
|
||||||
|
v-model="model.lastname"
|
||||||
|
:placeholder="$t('form.lastname')"
|
||||||
|
:state="getValidationState(validationContext)"
|
||||||
|
aria-describedby="register-lastname-live-feedback"
|
||||||
|
></b-form-input>
|
||||||
|
|
||||||
|
<b-form-invalid-feedback id="register-lastname-live-feedback">
|
||||||
|
{{ validationContext.errors[0] }}
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
|
||||||
|
</validation-provider>
|
||||||
|
|
||||||
|
|
||||||
|
<validation-provider
|
||||||
|
name="Email"
|
||||||
|
:rules="{ required: true, email: true }"
|
||||||
|
v-slot="validationContext"
|
||||||
|
>
|
||||||
|
<b-form-group class="mb-3" label="Email" label-for="input-login-email">
|
||||||
|
<b-form-input
|
||||||
|
id="input-login-email"
|
||||||
|
name="example-input-1"
|
||||||
|
v-model="model.email"
|
||||||
|
placeholder="Email"
|
||||||
|
:state="getValidationState(validationContext)"
|
||||||
|
aria-describedby="login-email-live-feedback"
|
||||||
|
></b-form-input>
|
||||||
|
|
||||||
|
<b-form-invalid-feedback id="login-email-live-feedback">
|
||||||
|
{{ validationContext.errors[0] }}
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
</validation-provider>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<validation-provider
|
||||||
|
:name="$t('form.password')"
|
||||||
|
:rules="{ required: true }"
|
||||||
|
v-slot="validationContext"
|
||||||
|
>
|
||||||
|
<b-form-group
|
||||||
|
class="mb-5"
|
||||||
|
:label="$t('form.password')"
|
||||||
|
label-for="input-password"
|
||||||
|
>
|
||||||
|
<b-input-group>
|
||||||
|
<b-form-input
|
||||||
|
id="input-password"
|
||||||
|
:name="$t('form.password')"
|
||||||
|
v-model="password"
|
||||||
|
:placeholder="$t('form.password')"
|
||||||
|
:type="passwordVisible ? 'text' : 'password'"
|
||||||
|
:state="getValidationState(validationContext)"
|
||||||
|
aria-describedby="register-password-live-feedback"
|
||||||
|
></b-form-input>
|
||||||
|
|
||||||
|
<b-input-group-append>
|
||||||
|
<b-button variant="outline-primary" @click="togglePasswordVisibility">
|
||||||
|
<b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
|
||||||
|
</b-button>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
<b-form-invalid-feedback id="register-password-live-feedback">
|
||||||
|
{{ validationContext.errors[0] }}
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
</validation-provider>
|
||||||
|
|
||||||
|
<b-form-group
|
||||||
|
class="mb-5"
|
||||||
|
:label="$t('form.password_repeat')"
|
||||||
|
label-for="input-password_repeat"
|
||||||
|
>
|
||||||
|
<b-input-group>
|
||||||
|
<b-form-input
|
||||||
|
id="input-password_repeat"
|
||||||
|
:name="$t('form.password_repeat')"
|
||||||
|
v-model.lazy="passwordRepeat"
|
||||||
|
:placeholder="$t('form.password_repeat')"
|
||||||
|
:type="passwordVisibleRepeat ? 'text' : 'password'"
|
||||||
|
|
||||||
|
aria-describedby="register-password-repeat-live-feedback"
|
||||||
|
></b-form-input>
|
||||||
|
|
||||||
|
<b-input-group-append>
|
||||||
|
<b-button variant="outline-primary" @click="togglePasswordRepeatVisibility">
|
||||||
|
<b-icon :icon="passwordVisibleRepeat ? 'eye' : 'eye-slash'" />
|
||||||
|
</b-button>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
|
||||||
<transition name="hint" appear>
|
<transition name="hint" appear>
|
||||||
<div v-if="passwordValidation.errors.length > 0 && !submitted" class="hints">
|
<div v-if="passwordValidation.errors.length > 0 && !submitted" class="hints">
|
||||||
<ul>
|
<ul>
|
||||||
@ -99,14 +180,18 @@
|
|||||||
</transition>
|
</transition>
|
||||||
<b-row class="my-4">
|
<b-row class="my-4">
|
||||||
<b-col cols="12">
|
<b-col cols="12">
|
||||||
<base-input
|
|
||||||
:rules="{ required: { allowFalse: false } }"
|
|
||||||
name="Privacy Policy"
|
<b-form-checkbox
|
||||||
>
|
id="register-checkbox"
|
||||||
<b-form-checkbox v-model="model.agree">
|
v-model="model.agree"
|
||||||
<span class="text-muted" v-html="$t('site.signup.agree')"></span>
|
name="register-checkbox"
|
||||||
</b-form-checkbox>
|
|
||||||
</base-input>
|
>
|
||||||
|
<span class="text-muted" v-html="$t('site.signup.agree')"></span>
|
||||||
|
</b-form-checkbox>
|
||||||
|
|
||||||
|
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-alert
|
<b-alert
|
||||||
@ -134,9 +219,14 @@
|
|||||||
model.agree
|
model.agree
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<b-button type="submit" variant="secondary" class="mt-4">
|
|
||||||
{{ $t('signup') }}
|
|
||||||
</b-button>
|
|
||||||
|
<div class="text-center">
|
||||||
|
<b-button class="ml-2" @click="resetForm()">{{ $t('form.reset') }}</b-button>
|
||||||
|
<b-button type="submit" variant="primary">{{ $t('signup') }}</b-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</b-form>
|
</b-form>
|
||||||
</validation-observer>
|
</validation-observer>
|
||||||
@ -165,17 +255,37 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
password: '',
|
password: '',
|
||||||
checkPassword: '',
|
passwordRepeat: '',
|
||||||
passwordVisible: false,
|
passwordVisible: false,
|
||||||
|
passwordVisibleRepeat: false,
|
||||||
submitted: false,
|
submitted: false,
|
||||||
showError: false,
|
showError: false,
|
||||||
messageError: '',
|
messageError: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getValidationState({ dirty, validated, valid = null }) {
|
||||||
|
return dirty || validated ? valid : null
|
||||||
|
},
|
||||||
|
resetForm() {
|
||||||
|
this.model = {
|
||||||
|
firstname: '',
|
||||||
|
lastname: '',
|
||||||
|
email: '',
|
||||||
|
}
|
||||||
|
this.password= '',
|
||||||
|
this.passwordRepeat= '',
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.observer.reset()
|
||||||
|
})
|
||||||
|
},
|
||||||
togglePasswordVisibility() {
|
togglePasswordVisibility() {
|
||||||
this.passwordVisible = !this.passwordVisible
|
this.passwordVisible = !this.passwordVisible
|
||||||
},
|
},
|
||||||
|
togglePasswordRepeatVisibility() {
|
||||||
|
this.passwordVisibleRepeat = !this.passwordVisibleRepeat
|
||||||
|
},
|
||||||
async onSubmit() {
|
async onSubmit() {
|
||||||
const result = await loginAPI.create(
|
const result = await loginAPI.create(
|
||||||
this.model.email,
|
this.model.email,
|
||||||
@ -209,10 +319,10 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
samePasswords() {
|
samePasswords() {
|
||||||
return this.password === this.checkPassword
|
return this.password === this.passwordRepeat
|
||||||
},
|
},
|
||||||
passwordsFilled() {
|
passwordsFilled() {
|
||||||
return this.password !== '' && this.checkPassword !== ''
|
return this.password !== '' && this.passwordRepeat !== ''
|
||||||
},
|
},
|
||||||
namesFilled() {
|
namesFilled() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user