Merge pull request #9 from femioladeji/password-settings-page

Add support to password apps configuration

Author: femioladeji

manifest.json

@@ -3,7 +3,7 @@
     "name": "Screentime",
     "description": "To keep track and manage your time on sites that reduce productivity. You can set the number of minutes you want and time frames",
     "short_name": "screentime",
-    "version": "4.1.0",
+    "version": "4.2.0",
     "browser_action": {
       "default_popup": "index.html",
       "default_icon" : "images/icon_128.png"

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "screentime",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -11,6 +11,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "bcryptjs": "^2.4.3",
     "chart.js": "^2.7.3",
     "vue": "^2.5.17",
     "vue-chartjs": "^3.4.0",

package.json

@@ -1,6 +1,6 @@
 const data = {
   timer: {
-    '2019-08-15': {
+    '2020-08-24': {
       instagram: 2000,
       youtube: 2240,
       twitter: 2000,

src/assets/js/dev_storage.js

@@ -6,6 +6,7 @@ storage.initialize();
 export const DATAKEY = 'timer';
 export const CONFIGKEY = 'sites';
 export const SETTINGSKEY = 'settings';
+export const PASSWORDKEY = 'password';
 
 const ALLGRADIENTS = [
   { from: '#5CEAF3', to: '#ACABE0' },

src/assets/js/utils.js

@@ -94,6 +94,10 @@ body {
   text-align: center;
 }
 
+.text-error {
+  color: #d34f4f;
+}
+
 .content {
   padding: 5% 30px;
   min-height: 320px;
@@ -371,9 +375,10 @@ a {
   background: #649EF7;
 }
 
-.settings {
+.settings .box {
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 20px;
 }
 
 .settings .theme-buttons {
@@ -382,6 +387,10 @@ a {
   border: 1px solid #E0E0E0;
 }
 
+.settings .form input {
+  width: 284px;
+}
+
 .settings .theme-buttons .btn {
   border: none;
   width: 50%;

src/assets/main.css

@@ -14,7 +14,6 @@
         <div class="site-actions">
           <switch-button @toggle="update" v-model="each.control"></switch-button>
           <router-link class="edit" :to="{ name: 'Advanced', params: { name: key }}">
-            <!-- <img src="../assets/images/edit.png" /> -->
           </router-link>
           <img @click="remove(key)" src="../assets/images/trash.png" />
         </div>

src/components/Apps.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <router-view v-if="isPageUnlocked"></router-view>
+    <div v-else class="content">
+      <form v-on:submit.prevent="unlockPage" class="form">
+        <div class="input-field">
+          <label>Enter password to edit configuration</label>
+          <input v-model="password" type="password" />
+        </div>
+        <p v-if="errorMessage" class="text-center text-error">{{ errorMessage }}</p>
+        <button type="submit" class="btn save">Continue</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import bcrypt from 'bcryptjs';
+import utils, { SETTINGSKEY } from '../assets/js/utils';
+
+export default {
+  name: 'AppsConfiguration',
+  data() {
+    return {
+      password: '',
+      currentPassword: '',
+      pageUnlocked: false,
+      errorMessage: ''
+    };
+  },
+  computed: {
+    isPageUnlocked() {
+      return !this.currentPassword || this.pageUnlocked;
+    }
+  },
+  methods: {
+    async getPassword() {
+      const password = await utils.getData(SETTINGSKEY);
+      this.currentPassword = password.password;
+    },
+    unlockPage() {
+      if (bcrypt.compareSync(this.password, this.currentPassword)) {
+        this.pageUnlocked = true;
+        this.errorMessage = '';
+      } else {
+        this.errorMessage = 'Please enter a valid password';
+      }
+    }
+  },
+  mounted() {
+    this.getPassword();
+  }
+};
+</script>

src/components/AppsConfiguration.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="content">
-    <div class="box settings">
-        Theme settings
-        <div class="theme-buttons">
+    <div class="settings">
+        <div class="box">
+          Theme settings
+          <div class="theme-buttons">
             <button
               @click="setTheme('flash')"
               class="btn"
@@ -15,19 +16,44 @@
               :disabled="theme == 'batman'">
                 Batman
             </button>
+          </div>
         </div>
+        <form class="form" @submit.prevent="savePassword">
+          <div v-if="isCurrentPassword" class="box">
+            Current Password
+            <div>
+              <input v-model="oldPassword" type="password" />
+            </div>
+          </div>
+          <div class="box">
+            New Password
+            <div>
+              <input v-model="newPassword" type="password" />
+            </div>
+          </div>
+          <div v-if="errorMessage" class="text-center text-error">{{ errorMessage }}</div>
+          <div>
+            <button type="submit" class="btn save">{{ buttonCaption }}</button>
+          </div>
+        </form>
     </div>
   </div>
 </template>
 
 <script>
-import utils, { SETTINGSKEY } from '../assets/js/utils';
+import bcrypt from 'bcryptjs';
+import utils, { SETTINGSKEY, PASSWORDKEY } from '../assets/js/utils';
 
 export default {
   name: 'Settings',
   data() {
     return {
-      theme: ''
+      theme: '',
+      newPassword: '',
+      oldPassword: '',
+      isCurrentPassword: '',
+      errorMessage: '',
+      buttonCaption: 'Save Password'
     };
   },
   methods: {
@@ -40,11 +66,44 @@ export default {
       }
       utils.saveConfiguration(SETTINGSKEY, { theme });
       this.theme = theme;
+    },
+    async getTheme() {
+      const settings = await utils.getData(SETTINGSKEY);
+      this.theme = settings.theme || 'flash';
+    },
+    async getPassword() {
+      const password = await utils.getData(SETTINGSKEY);
+      this.isCurrentPassword = password.password;
+    },
+    async savePassword() {
+      if (this.newPassword) {
+        if (this.isCurrentPassword
+            && !bcrypt.compareSync(this.oldPassword, this.isCurrentPassword)) {
+          this.errorMessage = 'Invalid old password';
+        } else {
+          const hashedPassword = bcrypt.hashSync(this.newPassword, 10);
+          await utils.saveConfiguration(SETTINGSKEY, {
+            [PASSWORDKEY]: hashedPassword
+          });
+          this.buttonCaption = 'Saving...';
+          this.errorMessage = '';
+          setTimeout(() => {
+            this.resetFields(hashedPassword);
+          }, 1500);
+        }
+      }
+    },
+    resetFields(hashedPassword) {
+      this.newPassword = '';
+      this.oldPassword = '';
+      this.errorMessage = '';
+      this.isCurrentPassword = hashedPassword;
+      this.buttonCaption = 'Save Password';
     }
   },
-  async mounted() {
-    const settings = await utils.getData(SETTINGSKEY);
-    this.theme = settings.theme || 'flash';
+  mounted() {
+    this.getTheme();
+    this.getPassword();
   }
 };
 </script>

src/components/Settings.vue

@@ -5,6 +5,7 @@ import Apps from '@/components/Apps';
 import Index from '@/components/Index';
 import Settings from '@/components/Settings';
 import Advanced from '@/components/Advanced';
+import AppsConfiguration from '@/components/AppsConfiguration';
 
 Vue.use(Router);
 
@@ -15,24 +16,30 @@ export default new Router({
       name: 'Index',
       component: Index
     },
-    {
-      path: '/app',
-      name: 'apps',
-      component: Apps
-    },
     {
       path: '/add',
       name: 'Add',
       component: Add
     },
-    {
-      path: '/app/:name',
-      name: 'Advanced',
-      component: Advanced
-    },
     {
       path: '/settings',
       component: Settings
+    },
+    {
+      path: '/app',
+      component: AppsConfiguration,
+      children: [
+        {
+          path: '/',
+          name: 'apps',
+          component: Apps
+        },
+        {
+          path: '/:name',
+          name: 'Advanced',
+          component: Advanced
+        }
+      ]
     }
   ]
 });