From 9ba85fc87276ba7870a737b96205a67e01147ba2 Mon Sep 17 00:00:00 2001 From: dannc Date: Sun, 17 Feb 2019 14:31:28 +0700 Subject: [PATCH] Add form validation, improve submitting, add sign-out logic --- package.json | 3 + src/components/AppHeader.vue | 18 ++++-- src/main.js | 6 ++ src/store/general.js | 2 +- src/store/user.js | 12 ++-- src/views/SignIn.vue | 15 ++++- src/views/SignUp.vue | 15 ++++- yarn.lock | 114 ++++++++++++++++++++++++++++------- 8 files changed, 148 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 124205d..83c26ca 100644 --- 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" } } diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 6256bc4..7818532 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -23,6 +23,10 @@ {{item.title}} + + + Выйти + @@ -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', - }, ]; } diff --git a/src/main.js b/src/main.js index b39d2c8..62df333 100644 --- 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, diff --git a/src/store/general.js b/src/store/general.js index e8432ea..0761448 100644 --- 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; }, }, diff --git a/src/store/user.js b/src/store/user.js index 837d2a7..9418cb6 100644 --- 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); diff --git a/src/views/SignIn.vue b/src/views/SignIn.vue index babaa95..aae6d67 100644 --- a/src/views/SignIn.vue +++ b/src/views/SignIn.vue @@ -15,7 +15,7 @@ {{error}} - + @@ -34,13 +35,14 @@ id="password" type="password" required + :rules="passwordRules" > - Войти + Войти @@ -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('/'); } diff --git a/src/views/SignUp.vue b/src/views/SignUp.vue index b6b937a..576d5c5 100644 --- a/src/views/SignUp.vue +++ b/src/views/SignUp.vue @@ -15,7 +15,7 @@ {{error}} - + @@ -34,13 +35,14 @@ id="password" type="password" required + :rules="passwordRules" > - Зарегистрироваться + Зарегистрироваться @@ -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: { diff --git a/yarn.lock b/yarn.lock index 1c130a9..9a6a51c 100644 --- 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"