feat(fe): add password form component

Added animation for running task status.

web2/src/components/ChangePasswordForm.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-form
+    ref="form"
+    lazy-validation
+    v-model="formValid"
+  >
+    <v-alert
+      :value="formError"
+      color="error"
+      class="pb-2"
+    >{{ formError }}</v-alert>
+
+    <v-text-field
+      v-model="item.password"
+      label="Password"
+      :rules="[v => !!v || 'Email is required']"
+      required
+      :disabled="formSaving"
+    ></v-text-field>
+  </v-form>
+</template>
+<script>
+import ItemFormBase from '@/components/ItemFormBase';
+
+export default {
+  mixins: [ItemFormBase],
+
+  methods: {
+    async loadData() {
+      this.item = {};
+    },
+
+    getItemsUrl() {
+      return null;
+    },
+
+    getSingleItemUrl() {
+      return null;
+    },
+
+    getRequestOptions() {
+      return {
+        method: 'post',
+        url: `/api/users/${this.itemId}/password`,
+      };
+    },
+  },
+};
+</script>

web2/src/components/ItemFormBase.js

@@ -70,6 +70,10 @@ export default {
       }
     },
 
+    getRequestOptions() {
+      return {};
+    },
+
     /**
      * Saves or creates item via API.
      * @returns {Promise<null>} null if validation didn't pass or user data if user saved.
@@ -92,6 +96,7 @@ export default {
             : this.getSingleItemUrl(),
           responseType: 'json',
           data: this.item,
+          ...(this.getRequestOptions()),
         })).data;
 
         this.$emit('save', {

web2/src/lib/delay.js

@@ -1,3 +1,3 @@
 export default function delay(milliseconds = 100) {
-  return new Promise(resolve => setTimeout(resolve, milliseconds));
+  return new Promise((resolve) => setTimeout(resolve, milliseconds));
 }

web2/src/router/index.js

@@ -13,7 +13,6 @@ import Team from '../views/project/Team.vue';
 import Users from '../views/Users.vue';
 import Auth from '../views/Auth.vue';
 import New from '../views/project/New.vue';
-import ChangePassword from '../views/ChangePassword.vue';
 
 Vue.use(VueRouter);
 
@@ -74,10 +73,6 @@ const routes = [
     path: '/users',
     component: Users,
   },
-  {
-    path: '/change-password',
-    component: ChangePassword,
-  },
 ];
 
 const router = new VueRouter({

web2/src/views/ChangePassword.vue

@@ -1,112 +0,0 @@
-<template>
-  <v-container
-    fluid
-    fill-height
-    align-center
-    justify-center
-    class="pa-0"
-  >
-    <v-form
-      ref="changePasswordForm"
-      lazy-validation
-      v-model="changePasswordFormValid"
-      style="width: 300px;"
-    >
-
-      <v-alert
-        :value="changePasswordError"
-        color="error"
-        style="margin-bottom: 20px;"
-      >{{ changePasswordError }}</v-alert>
-
-      <v-text-field
-        v-model="newPassword"
-        label="Password"
-        :rules="passwordRules"
-        type="password"
-        counter
-        required
-      ></v-text-field>
-
-      <v-text-field
-        v-model="newPassword2"
-        label="Repeat password"
-        type="password"
-        required
-        counter
-        style="margin-bottom: 20px;"
-      ></v-text-field>
-
-      <div class="text-xs-right">
-        <v-btn
-          color="primary"
-          @click="changePassword"
-          style="margin-right: 0;"
-          align-end
-        >
-          Change password
-        </v-btn>
-      </div>
-    </v-form>
-  </v-container>
-</template>
-
-<script>
-import axios from 'axios';
-import EventBus from '@/event-bus';
-import { getErrorMessage } from '@/lib/error';
-
-export default {
-  data() {
-    return {
-      changePasswordFormValid: false,
-      changePasswordError: null,
-      changePasswordInProgress: false,
-      newPassword: '',
-      newPassword2: '',
-
-      passwordRules: [
-        (v) => !!v || 'Password is required',
-        (v) => v.length >= 6 || 'Password too short. Min 6 characters',
-      ],
-    };
-  },
-
-  methods: {
-    async changePassword() {
-      this.changePasswordError = null;
-
-      if (!this.$refs.changePasswordForm.validate()) {
-        return;
-      }
-
-      if (this.newPassword !== this.newPassword2) {
-        this.changePasswordError = 'Passwords not equal';
-        return;
-      }
-
-      this.changePasswordInProgress = true;
-
-      try {
-        await axios({
-          method: 'post',
-          url: '/v1/session/change-password',
-          data: {
-            token: this.$route.query.token,
-            password: this.newPassword,
-          },
-        });
-        await this.$router.replace('/');
-        EventBus.$emit('i-snackbar', {
-          color: 'success',
-          text: 'Password changed',
-        });
-      } catch (err) {
-        this.changePasswordError = getErrorMessage(err);
-      } finally {
-        this.changePasswordInProgress = false;
-      }
-    },
-  },
-};
-</script>