dannc/ich-lerne-deutsch
1
0
Fork 0
mirror of https://github.com/Dannecron/ich-lerne-deutsch.git synced 2025-12-25 21:02:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add form validation, improve submitting, add sign-out logic

Browse Source
This commit is contained in:
dannc
2019-02-17 14:31:28 +07:00
parent f726e97822
commit 9ba85fc872
8 changed files with 148 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/AppHeader.vue
View File

@@ -23,6 +23,10 @@
<v-icon left v-html="item.icon"></v-icon>
{{item.title}}
</v-btn>
<v-btn flat @click.prevent="signOut" v-if="isUserAuthentificated">
<v-icon left v-html="'exit_to_app'"></v-icon>
Выйти
</v-btn>
</v-toolbar-items>
</v-toolbar>
</div>
@@ -35,6 +39,15 @@
drawer: false,
};
},
methods: {
signOut() {
this.$confirm('Вы точно хотите выйти?').then(res => {
if (res) {
this.$store.dispatch('signOut');
}
});
},
},
computed: {
isUserAuthentificated() {
return this.$store.getters.isUserAuthentificated;
@@ -57,11 +70,6 @@
title: 'Мой профиль',
route: '/profile',
},
{
icon: 'exit_to_app',
title: 'Выйти',
route: '/sign_out',
},
];
}

6
src/main.js
View File

@@ -1,6 +1,7 @@
import Vue from 'vue';
import Vuetify from 'vuetify';
import firebase from 'firebase';
import VuetifyConfirm from 'vuetify-confirm';
import 'vuetify/dist/vuetify.min.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css';
@@ -14,6 +15,11 @@ firebase.initializeApp(firebaseConfig);
Vue.config.productionTip = false;
Vue.use(Vuetify);
Vue.use(VuetifyConfirm, {
buttonTrueText: 'Да',
buttonFalseText: 'Нет',
width: 400,
});
new Vue({
router,

2
src/store/general.js
View File

@@ -10,7 +10,7 @@ export default {
setError(state, payload) {
state.error = payload;
},
cleanError(state) {
clearError(state) {
state.error = null;
},
},

12
src/store/user.js
View File

@@ -20,12 +20,12 @@ export default {
actions: {
signUp({ commit }, payload) {
commit('setProcessing', true);
commit('clearError');
const { email, password } = payload;
firebase.auth()
.createUserWithEmailAndPassword(email, password)
.then((response) => {
commit('setUser', response.user.uid)
.then(() => {
commit('setProcessing', false);
})
.catch(function(error) {
@@ -36,11 +36,12 @@ export default {
},
signIn({ commit }, payload) {
commit('setProcessing', true);
commit('clearError');
const { email, password } = payload;
firebase.auth()
.signInWithEmailAndPassword(email, password)
.then((response) => {
commit('setUser', response.localId)
.then(() => {
commit('setProcessing', false);
})
.catch(function(error) {
@@ -49,6 +50,9 @@ export default {
commit('setError', message);
});
},
signOut() {
firebase.auth().signOut();
},
stateChanged({ commit }, payload) {
if (payload) {
commit('setUser', payload.uid);

15
src/views/SignIn.vue
View File

@@ -15,7 +15,7 @@
{{error}}
</v-alert>
<v-form>
<v-form id="sign-in-form" v-model="isValid" @submit.prevent="signIn">
<v-text-field
prepend-icon="person"
v-model="email"
@@ -23,6 +23,7 @@
label="Email"
type="email"
required
:rules="emailRules"
>
</v-text-field>
@@ -34,13 +35,14 @@
id="password"
type="password"
required
:rules="passwordRules"
>
</v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" @click.prevent="signIn" :disabled="isProcessing">Войти</v-btn>
<v-btn color="primary" type="submit" form="sign-in-form" :disabled="isProcessing || !isValid">Войти</v-btn>
</v-card-actions>
</v-card>
</v-flex>
@@ -55,6 +57,14 @@
return {
email: null,
password: null,
isValid: false,
emailRules: [
(value) => !!value || 'Пожалуйста, введите email',
(value) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value) || 'Неправильный email',
],
passwordRules: [
(value) => !!value || 'Пожалуйста введите пароль',
],
};
},
computed: {
@@ -70,7 +80,6 @@
},
watch: {
isUserAuthentificated(val) {
console.log(val);
if (val === true) {
this.$router.push('/');
}

15
src/views/SignUp.vue
View File

@@ -15,7 +15,7 @@
{{error}}
</v-alert>
<v-form>
<v-form id="sign-up-form" v-model="isValid" @submit.prevent="signUp">
<v-text-field
prepend-icon="person"
v-model="email"
@@ -23,6 +23,7 @@
label="Email"
type="email"
required
:rules="emailRules"
>
</v-text-field>
@@ -34,13 +35,14 @@
id="password"
type="password"
required
:rules="passwordRules"
>
</v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" @click.prevent="signUp" :disabled="isProcessing">Зарегистрироваться</v-btn>
<v-btn type="submit" color="primary" form="sign-up-form" :disabled="isProcessing || !isValid">Зарегистрироваться</v-btn>
</v-card-actions>
</v-card>
</v-flex>
@@ -55,6 +57,15 @@
return {
email: null,
password: null,
isValid: false,
emailRules: [
(value) => !!value || 'Пожалуйста, введите email',
(value) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value) || 'Неправильный email',
],
passwordRules: [
(value) => !!value || 'Пожалуйста введите пароль',
(value) => (value && value.length >= 6) || 'Пароль слишком короткий - минимум 6 символов',
],
};
},
computed: {