From 6f79ab0955be750c51be28ef3dc32b52e27cb719 Mon Sep 17 00:00:00 2001
From: Vitaliy Klachkov <blackst0ne.ru@gmail.com>
Date: Fri, 16 Mar 2018 11:45:11 +1100
Subject: [PATCH] WIP: Add authentication page (#88)

* Add sign out functionality

* Add sign in and sign out functionality

* Slight refactoring

* Add redirection after signing in

* Update auth form

* Update remember me feature

* Add Remember me feature

* Update idleness interval

* Update authorization form
---
 package.json                           |   1 +
 src/components/AppHeader.vue           |  28 +++-
 src/components/Events.vue              |   2 +-
 src/components/event/LastEvents.vue    |   2 +-
 src/components/event/Settlements.vue   |   2 +-
 src/components/users/Authorization.vue | 197 +++++++++++++++++++++++++
 src/components/users/ResetPassword.vue |   0
 src/helpers/axios.js                   |  19 +++
 src/{helpers.js => helpers/math.js}    |   0
 src/main.js                            |  17 ++-
 src/router/index.js                    |  10 +-
 src/settings/api.js                    |   1 +
 src/store/index.js                     |   9 +-
 src/store/plugins/axios.js             |  16 ++
 src/store/plugins/user_activity.js     |  14 ++
 src/store/user.js                      |  37 +++--
 yarn.lock                              |  10 ++
 17 files changed, 333 insertions(+), 32 deletions(-)
 create mode 100644 src/components/users/ResetPassword.vue
 create mode 100644 src/helpers/axios.js
 rename src/{helpers.js => helpers/math.js} (100%)
 create mode 100644 src/store/plugins/axios.js
 create mode 100644 src/store/plugins/user_activity.js

diff --git a/package.json b/package.json
index 1093550e..92c3b47b 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "axios": "^0.16.2",
     "bootstrap": "4.0.0-beta.2",
     "chart.js": "^2.7.0",
+    "idle-vue": "^2.0.5",
     "vue": "^2.4.2",
     "vue-axios": "^2.0.2",
     "vue-chartjs": "^2.8.7",
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index c6bb3583..9a9166af 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -26,15 +26,35 @@
             <router-link :to="{ name: 'Analytics' }" key="analytics">Аналитика</router-link>
           </span>
 
-          <router-link to="events">
-            Войти
-            <i class="fa fa-long-arrow-right align-middle" aria-hidden="true" />
-          </router-link>
+          <span v-if="$store.getters.user.authorized">
+            <a href="javascript:void(0)" v-on:click="signOut" key="sign-out">
+              Выйти
+              <i class="fa fa-times"></i>
+            </a>
+          </span>
+          <span v-else>
+            <router-link :to="{ name: 'UserAuthorization' }" key="sign-in">
+              Войти
+              <i class="fa fa-long-arrow-right align-middle" aria-hidden="true" />
+            </router-link>
+          </span>
         </b-col>
       </b-row>
     </header>
 </template>
 
+<script>
+  export default {
+    methods: {
+      signOut: function() {
+        this.$store.dispatch('signOut')
+        this.$router.go()
+      }
+    }
+  }
+</script>
+
+
 <style lang="scss" scoped>
   @import '../assets/scss/global.scss';
 
diff --git a/src/components/Events.vue b/src/components/Events.vue
index d43ee9c1..ea1c4e93 100644
--- a/src/components/Events.vue
+++ b/src/components/Events.vue
@@ -54,7 +54,7 @@ require('moment/locale/ru')
 import CountersHeader from '@/components/CountersHeader.vue'
 import Filters from '@/components/Filters.vue'
 import Spinner from 'vue-simple-spinner'
-import { round } from '@/helpers.js'
+import { round } from '@/helpers/math.js'
 
 export default {
   components: { CountersHeader, Filters, Spinner },
diff --git a/src/components/event/LastEvents.vue b/src/components/event/LastEvents.vue
index 01ec8d79..3a2adb2c 100644
--- a/src/components/event/LastEvents.vue
+++ b/src/components/event/LastEvents.vue
@@ -27,7 +27,7 @@
   const moment = require('moment')
   require('moment/locale/ru')
 
-  import { round } from '@/helpers.js'
+  import { round } from '@/helpers/math.js'
 
   export default {
     props: ['event'],
diff --git a/src/components/event/Settlements.vue b/src/components/event/Settlements.vue
index c98bd22a..efd00958 100644
--- a/src/components/event/Settlements.vue
+++ b/src/components/event/Settlements.vue
@@ -23,7 +23,7 @@
 <script>
   import Spinner from 'vue-simple-spinner'
   import { convertMsk64 } from '@/map_functions.js'
-  import { round } from '@/helpers.js'
+  import { round } from '@/helpers/math.js'
 
   export default {
     components: { Spinner },
diff --git a/src/components/users/Authorization.vue b/src/components/users/Authorization.vue
index e69de29b..e71ed29f 100644
--- a/src/components/users/Authorization.vue
+++ b/src/components/users/Authorization.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="sign-in">
+    <b-row class="breadcrumbs" no-gutters>
+      <b-col cols="12">
+        <b-breadcrumb :items="breadcrumbs" />
+      </b-col>
+    </b-row>
+
+    <b-row>
+      <b-col cols="6" offset="3">
+        <div class="validation-error">{{ validationError }}</div>
+
+        <b-form class="sign-in-form"
+                ref="form"
+                :validated="form.validated"
+                novalidate>
+          <b-form-group>
+            <b-form-input type="email"
+                          :disabled="form.fields.email.disabled"
+                          :state="form.fields.email.state"
+                          v-model="form.fields.email.value"
+                          maxlength="150"
+                          pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
+                          placeholder="Электронная почта"
+                          required>
+            </b-form-input>
+            <b-form-invalid-feedback>{{ form.messages.email }}</b-form-invalid-feedback>
+          </b-form-group>
+
+          <b-form-group>
+            <b-form-input type="password"
+                          :disabled="form.fields.password.disabled"
+                          :state="form.fields.password.state"
+                          v-model="form.fields.password.value"
+                          placeholder="Пароль"
+                          minlength="6"
+                          maxlength="150"
+                          required>
+            </b-form-input>
+            <b-form-invalid-feedback>{{ form.messages.password }}</b-form-invalid-feedback>
+          </b-form-group>
+        </b-form>
+
+        <b-form-group>
+          <b-form-checkbox v-model="form.fields.rememberMe.value">Запомнить меня</b-form-checkbox>
+
+          <router-link :to="{ name: 'UserResetPassword' }" key="reset-password" class="reset-password-link">
+            Сбросить пароль
+          </router-link>
+        </b-form-group>
+
+        <b-button type="submit"
+                  variant="send-request"
+                  :disabled="form.submitButtonDisabled"
+                  v-on:click="onSubmit">
+                  Войти
+        </b-button>
+
+        <div class="registration-block">
+          <router-link :to="{ name: 'UserRegistration' }" key="registration">
+            Зарегистрироваться
+          </router-link>
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        breadcrumbs: [
+          {
+            text: 'Главная',
+            href: this.$router.resolve({ name: 'Mainpage' }).href
+          }, {
+            text: 'Вход',
+            active: true
+          }
+        ],
+        form: {
+          fields: {
+            email: { value: '', disabled: false, state: null },
+            password: { value: '', disabled: false, state: null },
+            rememberMe: { value: '', disabled: false }
+          },
+          messages: {
+            email: 'Некорректная электронная почта',
+            password: 'Некорректный пароль'
+          },
+          submitButtonDisabled: false,
+          validated: false
+        },
+        redirectTo: '?',
+        validationError: ''
+      }
+    },
+    methods: {
+      enableFields: function() {
+        this.changeFieldsDisabledState(false)
+      },
+      changeFieldsDisabledState: function(state) {
+        Object.keys(this.form.fields).forEach(key => {
+          this.form.fields[key].disabled = state
+        })
+
+        this.form.submitButtonDisabled = state
+      },
+      disableFields: function() {
+        this.changeFieldsDisabledState(true)
+      },
+      onSubmit: function() {
+        this.form.validated = true
+
+        if (!this.$refs.form.checkValidity()) return
+
+        const payload = {
+          password: this.form.fields.password.value,
+          username: this.form.fields.email.value
+        }
+
+        this.disableFields()
+
+        this.$http.post(this.$root.$options.settings.api.endpointUserAuthorization, payload)
+          .then(response => {
+            this.$store.dispatch('authorizeUser', {
+              accessToken: response.data.access_token,
+              refreshToken: response.data.refresh_token,
+              rememberMe: this.form.fields.rememberMe.value
+            })
+            this.$router.push(this.redirectTo)
+          })
+          .catch(error => {
+            if (error.response) {
+              this.validationError = error.response.data.message
+
+              this.enableFields()
+            } else {
+              console.log(error)
+            }
+          })
+      }
+    },
+    beforeRouteEnter: (to, from, next) => {
+      next(vm => {
+        vm.redirectTo = from.path
+      })
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../../assets/scss/global';
+
+  .breadcrumbs {
+    .breadcrumb {
+      background-color: transparent;
+      margin-top: 4%;
+      padding-left: 0;
+      padding-top: 0;
+
+      .active {
+        color: $color-gray-dark;
+      }
+    }
+  }
+
+  .validation-error {
+    color: red;
+    text-align: center;
+  }
+
+  .sign-in-form {
+    border-bottom: 1px solid $color-gray-light;
+    padding-bottom: 3%;
+    margin-bottom: 3%;
+  }
+
+  .btn {
+    width: 100%;
+  }
+
+  .btn-send-request {
+    background-color: $color-blue;
+    color: $color-white;
+  }
+
+  .reset-password-link {
+    float: right;
+  }
+
+  .registration-block {
+    padding-top: 3%;
+    text-align: center;
+  }
+</style>
diff --git a/src/components/users/ResetPassword.vue b/src/components/users/ResetPassword.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/helpers/axios.js b/src/helpers/axios.js
new file mode 100644
index 00000000..96c1a75d
--- /dev/null
+++ b/src/helpers/axios.js
@@ -0,0 +1,19 @@
+import store from '../store'
+import axios from 'axios'
+
+import ApiSettings from '../settings/api.js'
+
+export function axiosSetAuthorizationHeaders() {
+  const apiToken = store.getters.user.accessToken
+
+  if (apiToken) {
+    const apiSettings = new ApiSettings()
+    const apiType = apiSettings.authorizationType
+
+    axios.defaults.headers.common['Authorization'] = `${apiType} ${apiToken}`
+  }
+}
+
+export function axiosRemoveAuthorizationHeaders() {
+  delete axios.defaults.headers.common['Authorization']
+}
diff --git a/src/helpers.js b/src/helpers/math.js
similarity index 100%
rename from src/helpers.js
rename to src/helpers/math.js
diff --git a/src/main.js b/src/main.js
index e699c76c..d394f095 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,10 +7,12 @@ import router from './router'
 import store from './store'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
+import IdleVue from 'idle-vue'
 
 import ApiSettings from './settings/api.js'
 import EventsSettings from './settings/events.js'
 import StationsSettings from './settings/stations.js'
+import { axiosSetAuthorizationHeaders } from './helpers/axios'
 
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
@@ -19,14 +21,13 @@ Vue.config.productionTip = false
 
 Vue.use(VueAxios, axios)
 Vue.use(BootstrapVue)
+Vue.use(IdleVue, {
+  idleTime: 600000,
+  startAtIdle: true,
+  store
+})
 
-const apiSettings = new ApiSettings()
-
-// Set axios authorization headers.
-const apiToken = store.getters.user.token
-const apiType = apiSettings.authorizationType
-
-if (apiToken) axios.defaults.headers.common['Authorization'] = `${apiType} ${apiToken}`
+axiosSetAuthorizationHeaders()
 
 /* eslint-disable no-new */
 new Vue({
@@ -34,7 +35,7 @@ new Vue({
   router,
   store,
   settings: {
-    api: apiSettings,
+    api: new ApiSettings(),
     events: EventsSettings,
     stations: StationsSettings
   },
diff --git a/src/router/index.js b/src/router/index.js
index bd188c19..eb1f0e92 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,9 +5,10 @@ import Analytics from '@/components/Analytics'
 import Event from '@/components/Event'
 import Events from '@/components/Events'
 import StaticPage from '@/components/StaticPage'
-import UserAuthorization from '@/components/users/Authorization'
 import UserEmailConfirmation from '@/components/users/Confirmation'
+import UserAuthorization from '@/components/users/Authorization'
 import UserRegistration from '@/components/users/Registration'
+import UserResetPassword from '@/components/users/ResetPassword'
 
 Vue.use(Router)
 
@@ -29,10 +30,15 @@ export default new Router({
       component: UserEmailConfirmation
     },
     {
-      path: '/sign_in',
+      path: '/sign-in',
       name: 'UserAuthorization',
       component: UserAuthorization
     },
+    {
+      path: '/reset-password',
+      name: 'UserResetPassword',
+      component: UserResetPassword
+    },
     {
       path: '/analytics',
       name: 'Analytics',
diff --git a/src/settings/api.js b/src/settings/api.js
index 890113da..ce821922 100644
--- a/src/settings/api.js
+++ b/src/settings/api.js
@@ -12,6 +12,7 @@ class Config {
     this.endpointPurposesList = `${this.baseURL}/${this.version}/user/purposesList`
     this.endpointStations = `${this.baseURL}/${this.version}/stations`
     this.endpointSystemInfo = `${this.baseURL}/${this.version}/systemInfo`
+    this.endpointUserAuthorization = `https://oauth-client-test.geophystech.ru/token`
     this.endpointUserRegistration = `${this.baseURL}/${this.version}/user/register`
   }
 
diff --git a/src/store/index.js b/src/store/index.js
index 91c07a25..98b4d0ed 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,6 +5,8 @@ import app from './app'
 import user from './user'
 
 import createPersistedState from 'vuex-persistedstate'
+import axiosAuthorizationHeaders from './plugins/axios'
+import userActivity from './plugins/user_activity'
 
 Vue.use(Vuex)
 
@@ -13,14 +15,15 @@ export default new Vuex.Store({
     app: app,
     user: user
   },
-  plugins: [createPersistedState({
+  plugins: [axiosAuthorizationHeaders, createPersistedState({
     filter: (mutation) => {
       switch (mutation.type) {
         case 'setCurrentTileProvider':
         case 'setPlateBoundaries':
-        case 'setUser': return true
+        case 'authorizeUser':
+        case 'unauthorizeUser': return true
         default: return false
       }
     }
-  })]
+  }), userActivity]
 })
diff --git a/src/store/plugins/axios.js b/src/store/plugins/axios.js
new file mode 100644
index 00000000..6a43a630
--- /dev/null
+++ b/src/store/plugins/axios.js
@@ -0,0 +1,16 @@
+import { axiosSetAuthorizationHeaders, axiosRemoveAuthorizationHeaders } from '../../helpers/axios'
+
+const axiosAuthorizationHeaders = store => {
+  store.subscribe((mutation, state) => {
+    switch (mutation.type) {
+      case 'authorizeUser':
+        axiosSetAuthorizationHeaders()
+        break
+      case 'unauthorizeUser':
+        axiosRemoveAuthorizationHeaders()
+        break
+    }
+  })
+}
+
+export default axiosAuthorizationHeaders
diff --git a/src/store/plugins/user_activity.js b/src/store/plugins/user_activity.js
new file mode 100644
index 00000000..91749803
--- /dev/null
+++ b/src/store/plugins/user_activity.js
@@ -0,0 +1,14 @@
+const userActivity = store => {
+  store.subscribe((mutation, state) => {
+    // Force user to sign out if activity is idle AND user has not set `Remember me` option on authorization.
+    if (mutation.type === 'idleVue/IDLE_CHANGED' &&
+        mutation.payload &&
+        store.getters.user.authorized &&
+        !store.getters.user.rememberMe) {
+      store.dispatch('signOut')
+      location.reload()
+    }
+  })
+}
+
+export default userActivity
diff --git a/src/store/user.js b/src/store/user.js
index e2a2e17b..81f1a48d 100644
--- a/src/store/user.js
+++ b/src/store/user.js
@@ -1,31 +1,44 @@
 export default {
   state: {
     authorized: false,
-    token: null,
-    refreshToken: null
+    accessToken: null,
+    refreshToken: null,
+    rememberMe: false
   },
   getters: {
     user: state => {
       return {
         authorized: state.authorized,
-        token: state.token,
-        refreshToken: state.refreshToken
+        accessToken: state.accessToken,
+        refreshToken: state.refreshToken,
+        rememberMe: state.rememberMe
       }
     }
   },
   mutations: {
-    setUser(state, { key, value }) {
-      state[key] = value
+    authorizeUser(state, values) {
+      state.authorized = true
+      state.accessToken = values.accessToken
+      state.refreshToken = values.refreshToken
+      state.rememberMe = values.rememberMe
+    },
+    unauthorizeUser(state, values) {
+      state.authorized = false
+      state.accessToken = null
+      state.refreshToken = null
+      state.rememberMe = null
     }
   },
   actions: {
-    setUserAuthorized({ commit, state }, value) {
-      commit('setUser', { key: 'authorized', value: value })
+    authorizeUser({ commit, state }, values) {
+      commit('authorizeUser', {
+        accessToken: values.accessToken,
+        refreshToken: values.refreshToken,
+        rememberMe: values.rememberMe
+      })
     },
-    setUserTokens({ commit, state }, value) {
-      commit('setUser', { key: 'token', value: value.token })
-      commit('setUser', { key: 'refreshToken', value: value.refreshToken })
-      commit('setUser', { key: 'authorized', value: true })
+    signOut({ commit, state }) {
+      commit('unauthorizeUser')
     }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 4b57ec54..9e36d0bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3173,6 +3173,16 @@ icss-utils@^2.1.0:
   dependencies:
     postcss "^6.0.1"
 
+idle-js@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/idle-js/-/idle-js-0.1.3.tgz#1343fc601fc2bee66cc11ae763f846368e3174ad"
+
+idle-vue@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/idle-vue/-/idle-vue-2.0.5.tgz#300e3ccd958170c4d7efa7cc9aece86078bef576"
+  dependencies:
+    idle-js "^0.1.3"
+
 ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"