mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
fix register
This commit is contained in:
ogerly
parent
d1353045e4
commit
1da9d430a5
@ -24,7 +24,7 @@
|
||||
"sender":"Absender",
|
||||
"firstname":"Vorname",
|
||||
"lastname":"Nachname",
|
||||
"email":"eMail",
|
||||
"email":"E-Mail",
|
||||
"email_repeat":"eMail wiederholen",
|
||||
"password":"Passwort",
|
||||
"password_repeat":"Passwort wiederholen",
|
||||
@ -59,9 +59,12 @@
|
||||
"signup": {
|
||||
"title": "Erstelle dein Gradido-Konto",
|
||||
"subtitle": "Werde Teil der Gemeinschaft!",
|
||||
"strength":"Passwortsicherheit:",
|
||||
"strong":"stark",
|
||||
"agree":"habe ich gelesen und verstanden und stimme diesen zu."
|
||||
"agree":"Ich stimme der <a href='https://gradido.net/de/datenschutz/' target='_blank' >Datenschutzerklärung</a> zu.",
|
||||
"lowercase":"Ein Kleinbuchstabe erforderlich.",
|
||||
"uppercase":"Ein Großbuchstabe erforderlich.",
|
||||
"minimum":"Mindestens 8 Zeichen.",
|
||||
"one_number":"Eine Zahl erforderlich.",
|
||||
"dont_match":"Die Passwörter stimmen nicht überein."
|
||||
},
|
||||
"password": {
|
||||
"title": "Passwort zurücksetzen",
|
||||
|
||||
@ -59,9 +59,12 @@
|
||||
"signup": {
|
||||
"title": "Create your Gradido account",
|
||||
"subtitle": "Become a part of the community!",
|
||||
"strength":"Password strength:",
|
||||
"strong":"strong",
|
||||
"agree":"I have read and understood and agree to them"
|
||||
"agree":"I agree to the <a href='https://gradido.net/en/datenschutz/' target='_blank' > privacy policy</a>.",
|
||||
"lowercase":"One lowercase letter required.",
|
||||
"uppercase":"One uppercase letter required.",
|
||||
"minimum":"8 characters minimum.",
|
||||
"one_number":"One number required.",
|
||||
"dont_match":"Passwords don't match."
|
||||
},
|
||||
"password": {
|
||||
"title": "Reset password",
|
||||
|
||||
@ -26,52 +26,79 @@
|
||||
<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
|
||||
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
|
||||
<base-input
|
||||
:label="$t('form.firstname')"
|
||||
alternative
|
||||
class="mb-3"
|
||||
prepend-icon="ni ni-hat-3"
|
||||
:placeholder="$t('form.firstname')"
|
||||
name="Vorname"
|
||||
:rules="{ required: true }"
|
||||
name="firstname"
|
||||
:rules="{ required: true, min: 3 }"
|
||||
v-model="model.firstname"
|
||||
></base-input>
|
||||
<base-input
|
||||
:label="$t('form.lastname')"
|
||||
alternative
|
||||
class="mb-3"
|
||||
prepend-icon="ni ni-hat-3"
|
||||
:placeholder="$t('form.lastname')"
|
||||
name="Nachname"
|
||||
:rules="{ required: true }"
|
||||
name="lastname"
|
||||
:rules="{ required: true, min: 2 }"
|
||||
v-model="model.lastname"
|
||||
></base-input>
|
||||
|
||||
<base-input
|
||||
:label="$t('form.email')"
|
||||
alternative
|
||||
class="mb-3"
|
||||
prepend-icon="ni ni-email-83"
|
||||
:placeholder="$t('form.email')"
|
||||
name="Email"
|
||||
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
|
||||
class="mb-0"
|
||||
v-model="password"
|
||||
:class="{ valid: passwordValidation.valid }"
|
||||
:type="passwordVisible ? 'text' : 'password'"
|
||||
prepend-icon="ni ni-lock-circle-open"
|
||||
:placeholder="$t('form.password')"
|
||||
></b-form-input>
|
||||
|
||||
<b-input-group-append>
|
||||
<b-button variant="outline-primary">
|
||||
<b-icon
|
||||
:icon="passwordVisible ? 'eye' : 'eye-slash'"
|
||||
@click="togglePasswordVisibility"
|
||||
/>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
|
||||
<base-input
|
||||
alternative
|
||||
class="mb-3"
|
||||
prepend-icon="ni ni-lock-circle-open"
|
||||
:placeholder="$t('form.password')"
|
||||
:label="$t('form.password_repeat')"
|
||||
type="password"
|
||||
name="Password"
|
||||
:rules="{ required: true, min: 6 }"
|
||||
v-model="model.password"
|
||||
></base-input>
|
||||
<div class="text-muted font-italic">
|
||||
<small>
|
||||
{{ $t('site.signup.strength') }}
|
||||
<span class="text-success font-weight-700">
|
||||
{{ $t('site.signup.strong') }}
|
||||
</span>
|
||||
</small>
|
||||
</div>
|
||||
:placeholder="$t('form.password_repeat')"
|
||||
prepend-icon="ni ni-lock-circle-open"
|
||||
v-model.lazy="checkPassword"
|
||||
:class="{ valid: passwordValidation.valid }"
|
||||
/>
|
||||
|
||||
<transition name="hint" appear>
|
||||
<div v-if="passwordValidation.errors.length > 0 && !submitted" class="hints">
|
||||
<ul>
|
||||
<li v-for="error in passwordValidation.errors" :key="error">
|
||||
<small>{{ error }}</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="matches" v-else-if="notSamePasswords">
|
||||
<p>
|
||||
{{ $t('site.signup.dont_match') }}
|
||||
<i class="ni ni-active-40" color="danger"></i>
|
||||
</p>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<b-row class="my-4">
|
||||
<b-col cols="12">
|
||||
<base-input
|
||||
@ -79,17 +106,22 @@
|
||||
name="Privacy Policy"
|
||||
>
|
||||
<b-form-checkbox v-model="model.agree">
|
||||
<span class="text-muted">
|
||||
<a href="https://gradido.net/de/datenschutz/" target="_blank">
|
||||
{{ $t('privacy_policy') }}
|
||||
</a>
|
||||
- {{ $t('site.signup.agree') }}
|
||||
</span>
|
||||
<span class="text-muted" v-html="$t('site.signup.agree')"></span>
|
||||
</b-form-checkbox>
|
||||
</base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="text-center"
|
||||
v-if="
|
||||
passwordsFilled &&
|
||||
!notSamePasswords &&
|
||||
passwordValidation.valid &&
|
||||
namesFilled &&
|
||||
emailFilled &&
|
||||
model.agree
|
||||
"
|
||||
>
|
||||
<b-button type="submit" variant="secondary" class="mt-4">
|
||||
{{ $t('signup') }}
|
||||
</b-button>
|
||||
@ -115,13 +147,32 @@ export default {
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password2: '',
|
||||
agree: false,
|
||||
},
|
||||
rules: [
|
||||
{ message: this.$t('site.signup.lowercase'), regex: /[a-z]+/ },
|
||||
{ message: this.$t('site.signup.uppercase'), regex: /[A-Z]+/ },
|
||||
{ message: this.$t('site.signup.minimum'), regex: /.{8,}/ },
|
||||
{ message: this.$t('site.signup.one_number'), regex: /[0-9]+/ },
|
||||
],
|
||||
password: '',
|
||||
checkPassword: '',
|
||||
passwordVisible: false,
|
||||
submitted: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetPasswords() {
|
||||
this.password = ''
|
||||
this.checkPassword = ''
|
||||
this.submitted = true
|
||||
setTimeout(() => {
|
||||
this.submitted = false
|
||||
}, 2000)
|
||||
},
|
||||
togglePasswordVisibility() {
|
||||
this.passwordVisible = !this.passwordVisible
|
||||
},
|
||||
onSubmit() {
|
||||
// console.log("this.modals =>", this.modals)
|
||||
this.$store.dispatch('createUser', {
|
||||
@ -138,6 +189,42 @@ export default {
|
||||
this.$router.push('/thx')
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
notSamePasswords() {
|
||||
if (this.passwordsFilled) {
|
||||
return this.password !== this.checkPassword
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
passwordsFilled() {
|
||||
return this.password !== '' && this.checkPassword !== ''
|
||||
},
|
||||
namesFilled() {
|
||||
return (
|
||||
this.model.firstname !== '' &&
|
||||
this.model.firstname.length > 2 &&
|
||||
this.model.lastname !== '' &&
|
||||
this.model.lastname.length > 1
|
||||
)
|
||||
},
|
||||
emailFilled() {
|
||||
return this.model.email !== ''
|
||||
},
|
||||
passwordValidation() {
|
||||
let errors = []
|
||||
for (let condition of this.rules) {
|
||||
if (!condition.regex.test(this.password)) {
|
||||
errors.push(condition.message)
|
||||
}
|
||||
}
|
||||
if (errors.length === 0) {
|
||||
return { valid: true, errors }
|
||||
} else {
|
||||
return { valid: false, errors }
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user