Немного прокачал формы Входа и Регистрации
This commit is contained in:
parent
56c4285fed
commit
0266c0c07b
|
@ -0,0 +1,9 @@
|
|||
export const rules = {
|
||||
email: value => {
|
||||
const pattern = /^[A-Za-z0-9\._]+@{1}[A-Za-z0-9]+\.[a-z]+$/
|
||||
return pattern.test(value) || 'Неверный email'
|
||||
},
|
||||
notNull: value => {
|
||||
return (value !== null && value !== undefined && value !== '') || 'Поле не может быть пустым';
|
||||
}
|
||||
}
|
|
@ -1,8 +1,14 @@
|
|||
<script>
|
||||
import {useUserStore} from "../../store/user.js";
|
||||
import {rules} from "../../js/rules.js";
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
computed: {
|
||||
rules() {
|
||||
return rules
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
userStore: useUserStore(),
|
||||
valid: false,
|
||||
|
@ -10,7 +16,8 @@ export default {
|
|||
password: '',
|
||||
rememberMe: false,
|
||||
errorMessage: '',
|
||||
errorMessageContainerStyle: ''
|
||||
errorMessageContainerStyle: '',
|
||||
showPassword: false
|
||||
}),
|
||||
methods: {
|
||||
loginAction(){
|
||||
|
@ -41,12 +48,19 @@ export default {
|
|||
<v-text-field class="w-100"
|
||||
v-model="email"
|
||||
label="E-mail"
|
||||
type="email"
|
||||
v-on:keyup.enter="this.loginAction"
|
||||
:rules="[rules.email]"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field class="w-100"
|
||||
v-model="password"
|
||||
label="Пароль"
|
||||
type="password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
@click:append="showPassword = !showPassword"
|
||||
v-on:keyup.enter="this.loginAction"
|
||||
:rules="[rules.notNull]"
|
||||
required
|
||||
></v-text-field>
|
||||
<div class="d-flex justify-start align-content-start w-100">
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import {useUserStore} from "../../store/user.js";
|
||||
import {rules} from "../../js/rules.js";
|
||||
|
||||
export default {
|
||||
name: "Registration",
|
||||
|
@ -11,8 +12,15 @@ export default {
|
|||
password: '',
|
||||
repeatPassword: '',
|
||||
errorMessage: '',
|
||||
errorMessageContainerStyle: 'display: none;'
|
||||
errorMessageContainerStyle: 'display: none;',
|
||||
showPassword: false,
|
||||
showRepeatPassword: false
|
||||
}),
|
||||
computed: {
|
||||
rules() {
|
||||
return rules
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
registrationAction(){
|
||||
this.userStore.registration(this.login, this.email, this.password, this.repeatPassword).then((isRegistred)=>{
|
||||
|
@ -40,23 +48,36 @@ export default {
|
|||
<v-text-field class="w-100"
|
||||
v-model="login"
|
||||
label="Логин"
|
||||
v-on:keyup.enter="this.registrationAction"
|
||||
:rules="[rules.notNull]"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field class="w-100"
|
||||
v-model="email"
|
||||
label="E-mail"
|
||||
type="email"
|
||||
v-on:keyup.enter="this.registrationAction"
|
||||
:rules="[rules.email]"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field class="w-100"
|
||||
v-model="password"
|
||||
label="Пароль"
|
||||
type="password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
@click:append="showPassword = !showPassword"
|
||||
v-on:keyup.enter="this.registrationAction"
|
||||
:rules="[rules.notNull]"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field class="w-100"
|
||||
v-model="repeatPassword"
|
||||
label="Повторите пароль"
|
||||
type="password"
|
||||
:type="showRepeatPassword ? 'text' : 'password'"
|
||||
:append-icon="showRepeatPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
@click:append="showRepeatPassword = !showRepeatPassword"
|
||||
v-on:keyup.enter="this.registrationAction"
|
||||
:rules="[rules.notNull]"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-label :style="errorMessageContainerStyle">{{ errorMessage }}</v-label>
|
||||
|
|
|
@ -71,6 +71,7 @@ export default {
|
|||
.link-no-decor {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link-no-decor:hover {
|
||||
|
|
Loading…
Reference in New Issue