Немного прокачал формы Входа и Регистрации

This commit is contained in:
Dhaverd 2024-10-27 14:05:23 +08:00
parent 56c4285fed
commit 0266c0c07b
4 changed files with 50 additions and 5 deletions

9
resources/js/rules.js Normal file
View File

@ -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 !== '') || 'Поле не может быть пустым';
}
}

View File

@ -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">

View File

@ -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>

View File

@ -71,6 +71,7 @@ export default {
.link-no-decor {
color: white;
text-decoration: none;
cursor: pointer;
}
.link-no-decor:hover {