Немного прокачал формы Входа и Регистрации
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