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

2025-12-25 12:52:35 +03:00 · 2019-02-17 14:31:28 +07:00
parent f726e97822
commit 9ba85fc872
8 changed files with 148 additions and 37 deletions
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
    "vue": "2.5.22",
    "vue-router": "3.0.1",
    "vuetify": "1.5.1",
+    "vuetify-confirm": "0.2.1",
    "vuex": "3.0.1"
  },
  "devDependencies": {
@@ -27,6 +28,8 @@
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
    "vue-template-compiler": "^2.5.21"
  }
 }
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -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',
-                        },
                    ];
                }

--- a/src/main.js
+++ b/src/main.js
@@ -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,
--- a/src/store/general.js
+++ b/src/store/general.js
@@ -10,7 +10,7 @@ export default {
        setError(state, payload) {
            state.error = payload;
        },
-        cleanError(state) {
+        clearError(state) {
            state.error = null;
        },
    },
--- a/src/store/user.js
+++ b/src/store/user.js
@@ -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);
--- a/src/views/SignIn.vue
+++ b/src/views/SignIn.vue
@@ -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('/');
                }
--- a/src/views/SignUp.vue
+++ b/src/views/SignUp.vue
@@ -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: {
--- a/yarn.lock
+++ b/yarn.lock
@@ -1290,6 +1290,11 @@ alphanum-sort@^1.0.0:
  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=

+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+  integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
+
 ansi-colors@^3.0.0:
  version "3.2.3"
  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.3.tgz#57d35b8686e851e2cc04c403f1c00203976a1813"
@@ -2465,6 +2470,11 @@ css-loader@^1.0.1:
    postcss-value-parser "^3.3.0"
    source-list-map "^2.0.0"

+css-parse@1.7.x:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
+  integrity sha1-Mh9s9zeCpv91ERE5D8BeLGV9jJs=
+
 css-select-base-adapter@~0.1.0:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
@@ -2637,6 +2647,13 @@ de-indent@^1.0.2:
  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=

+debug@*, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
 debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3:
  version "2.6.9"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2651,13 +2668,6 @@ debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
  dependencies:
    ms "^2.1.1"

-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
-  dependencies:
-    ms "^2.1.1"
-
 decamelize@^1.1.1, decamelize@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -3605,7 +3615,7 @@ find-up@^3.0.0:
  dependencies:
    locate-path "^3.0.0"

-firebase@^5.8.3:
+firebase@5.8.3:
  version "5.8.3"
  resolved "https://registry.yarnpkg.com/firebase/-/firebase-5.8.3.tgz#7a69c2fb81150ce1fa43de5a26b3faa88edd6770"
  integrity sha512-moOAgvuxhP9ASVNc5ssOj6NL64fj85Ks49gz8qu5BUlLzFheDTF+jYdp1yyZH9bd3fGQxXAwiXJYjR3nllPnmQ==
@@ -3807,6 +3817,18 @@ glob-to-regexp@^0.3.0:
  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
  integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=

+glob@7.0.x:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+  integrity sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@^7.1.3:
  version "7.1.3"
  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
@@ -4904,6 +4926,11 @@ lodash.clone@^4.5.0:
  resolved "https://registry.yarnpkg.com/lodash.clone/-/lodash.clone-4.5.0.tgz#195870450f5a13192478df4bc3d23d2dea1907b6"
  integrity sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y=

+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
 lodash.defaultsdeep@^4.6.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.0.tgz#bec1024f85b1bd96cbea405b23c14ad6443a6f81"
@@ -5009,7 +5036,7 @@ map-visit@^1.0.0:
  dependencies:
    object-visit "^1.0.0"

-material-design-icons-iconfont@^4.0.4:
+material-design-icons-iconfont@4.0.4:
  version "4.0.4"
  resolved "https://registry.yarnpkg.com/material-design-icons-iconfont/-/material-design-icons-iconfont-4.0.4.tgz#8f1eb68bd59a42944209907bfd1eb997405bf162"
  integrity sha512-jz4P9uLPrbEbzhEsEKuN+5N1TgBFdc4Dslzx/wc22D7FKT/Aelgs/HP8mB3LGI893NND5Rw6xpvZoiXtukB5zw==
@@ -6851,6 +6878,11 @@ safe-regex@^1.1.0:
  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

+sax@0.5.x:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
+  integrity sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=
+
 sax@^1.2.4, sax@~1.2.4:
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -7119,6 +7151,13 @@ source-map-url@^0.4.0:
  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=

+source-map@0.1.x:
+  version "0.1.43"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+  integrity sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=
+  dependencies:
+    amdefine ">=0.0.4"
+
 source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6:
  version "0.5.7"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -7392,6 +7431,27 @@ stylehacks@^4.0.0:
    postcss "^7.0.0"
    postcss-selector-parser "^3.0.0"

+stylus-loader@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-3.0.2.tgz#27a706420b05a38e038e7cacb153578d450513c6"
+  integrity sha512-+VomPdZ6a0razP+zinir61yZgpw2NfljeSsdUF5kJuEzlo3khXhY19Fn6l8QQz1GRJGtMCo8nG5C04ePyV7SUA==
+  dependencies:
+    loader-utils "^1.0.2"
+    lodash.clonedeep "^4.5.0"
+    when "~3.6.x"
+
+stylus@^0.54.5:
+  version "0.54.5"
+  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"
+  integrity sha1-QrlWCTHKcJDOhRWnmLqeaqPW3Hk=
+  dependencies:
+    css-parse "1.7.x"
+    debug "*"
+    glob "7.0.x"
+    mkdirp "0.5.x"
+    sax "0.5.x"
+    source-map "0.1.x"
+
 supports-color@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -7926,10 +7986,10 @@ vue-loader@^15.6.2:
    vue-hot-reload-api "^2.3.0"
    vue-style-loader "^4.1.0"

-vue-router@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
-  integrity sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg==
+vue-router@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
+  integrity sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w==

 vue-style-loader@^4.1.0:
  version "4.1.2"
@@ -7952,20 +8012,25 @@ vue-template-es2015-compiler@^1.8.2:
  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.8.2.tgz#dd73e80ba58bb65dd7a8aa2aeef6089cf6116f2a"
  integrity sha512-cliV19VHLJqFUYbz/XeWXe5CO6guzwd0yrrqqp0bmjlMP3ZZULY7fu8RTC4+3lmHwo6ESVDHFDsvjB15hcR5IA==

-vue@^2.5.22:
-  version "2.6.6"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.6.tgz#dde41e483c11c46a7bf523909f4f2f816ab60d25"
-  integrity sha512-Y2DdOZD8sxApS+iUlwv1v8U1qN41kq6Kw45lM6nVZKhygeWA49q7VCCXkjXqeDBXgurrKWkYQ9cJeEJwAq0b9Q==
+vue@2.5.22:
+  version "2.5.22"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.22.tgz#3bf88041af08b8539c37b268b70ca79245e9cc30"
+  integrity sha512-pxY3ZHlXNJMFQbkjEgGVMaMMkSV1ONpz+4qB55kZuJzyJOhn6MSy/YZdzhdnumegNzVTL/Dn3Pp4UrVBYt1j/g==

-vuetify@^1.5.1:
+vuetify-confirm@0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/vuetify-confirm/-/vuetify-confirm-0.2.1.tgz#93547d260f3730e5d5e509f167f3b57f27b01565"
+  integrity sha512-zmoQmhovBB4w/y7T13fq+tvT47FW8xahSaeUE7U1HuahR0je33dLesZysiJGFypkleQWjlEfXaXt8rBb902tjw==
+
+vuetify@1.5.1:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.5.1.tgz#422e0ec31c080494446559bfcf0b0ba0c749f74e"
  integrity sha512-f/9al/DZzUEk5YWNaF/AMRZEQViSBjIqx/fRz6DF397O/rCOZt1VnjmqHqQizioiWy6M2zWVbrUvx4pCfQK3Ig==

-vuex@^3.0.1:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.0.tgz#634b81515cf0cfe976bd1ffe9601755e51f843b9"
-  integrity sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg==
+vuex@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"
+  integrity sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w==

 watchpack@^1.5.0:
  version "1.6.0"
@@ -8138,6 +8203,11 @@ whatwg-fetch@>=0.10.0:
  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
  integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==

+when@~3.6.x:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.6.4.tgz#473b517ec159e2b85005497a13983f095412e34e"
+  integrity sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=
+
 which-module@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"