Refactor and update components (#52)

* Update version

* Add auth expire check

* Add linux build script and update installer scripts

* auth and UI bug fix

* update electron version for dynamically change top bar (#37)

* Update: Electron version to 7.0.0
* Add: Operating system dark mode support
* Update: Private notes size is enlarged

* add menu item became singular

* fix import function (#38)

* Fix import bug after electron update to 7.0.0

* Fix openexternal link issue and add success callback to paddle upgrade

* Refactor copy content functions

* Add detail mixin and implement for all detail pages

* Fix server detail page

* update servers

* Improve search function

* pre-release

* change company logo at detail and create

* added Generate tooltip

* Add custom title bar

* Implement a global search on the title bar

* added closeDevTools

* Update login page style

* fix height

* Fix title-bar drag issue

* added server field

* Update login page

* Fix quit issue

* update version 1.0.2

* add nvm usage to README

* Update electron and axios

* updated electron version

* fix top bar links

* removed paddle script

* add http cookie authentication

* fix check update url

* update version to 1.0.3

* Bump path-parse from 1.0.6 to 1.0.7 (#50)

Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7.
- [Release notes](https://github.com/jbgutierrez/path-parse/releases)
- [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7)

---
updated-dependencies:
- dependency-name: path-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump dns-packet from 1.3.1 to 1.3.4 (#49)

Bumps [dns-packet](https://github.com/mafintosh/dns-packet) from 1.3.1 to 1.3.4.
- [Release notes](https://github.com/mafintosh/dns-packet/releases)
- [Changelog](https://github.com/mafintosh/dns-packet/blob/master/CHANGELOG.md)
- [Commits](mafintosh/dns-packet@v1.3.1...v1.3.4)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump hosted-git-info from 2.8.8 to 2.8.9 (#48)

Bumps [hosted-git-info](https://github.com/npm/hosted-git-info) from 2.8.8 to 2.8.9.
- [Release notes](https://github.com/npm/hosted-git-info/releases)
- [Changelog](https://github.com/npm/hosted-git-info/blob/v2.8.9/CHANGELOG.md)
- [Commits](npm/hosted-git-info@v2.8.8...v2.8.9)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* upgrade electron builder version for mac arm

* update readme for build

* add build information

* add password check and refactor password buttons

* add hover color to button components

* refactor delete and edit buttons on detail pages

* Refactor detail delete buttons

* refactor textarea components

* feature always on top

* update version and readme

Co-authored-by: Oguzhan INAN <oguzhan3488@gmail.com>
Co-authored-by: Faruk Oruç <ooruc471@yandex.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: 4 people

README.md

@@ -58,8 +58,11 @@ yarn build --mac --x64
 yarn build --mac --arm64
 
 # Linux Debian Package
-yarn build --linux deb
+yarn build --linux --x64 
 
 # Windows x64
 yarn build --win --x64
+
+# All Platforms
+yarn run build -wml --arm64 --x64
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "passwall",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": "PassWall <hello@passwall.io>",
   "description": "PassWall Desktop",
   "license": "MIT",
@@ -20,8 +20,6 @@
     "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test",
     "pack": "npm run pack:main && npm run pack:renderer",
     "pack:linux": "electron-packager . passwall --platform linux --arch x64 --out build",
-    "installer:deb": "npx electron-installer-debian --src build/passwall-linux-x64 --arch amd64 --dest installers/ --icon build/icons/512x512.png",
-    "installer:rpm": "npx electron-installer-redhat --src build/passwall-linux-x64 --arch amd64 --dest installers/ --icon build/icons/512x512.png",
     "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
     "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
     "test": "npm run unit",
@@ -58,8 +56,12 @@
     "win": {
       "icon": "build/icons/icon.ico"
     },
-    "linux": {
-      "icon": "build/icons/icon.png"
+    "linux":{
+      "icon": "build/icons/512x512.png",
+      "target":[
+          "deb"
+      ],
+      "category":"Development"
     }
   },
   "dependencies": {
@@ -99,7 +101,7 @@
     "del": "^3.0.0",
     "devtron": "^1.4.0",
     "electron": "^11.4.1",
-    "electron-builder": "22.10",
+    "electron-builder": "^22.11.7",
     "electron-debug": "^1.5.0",
     "electron-devtools-installer": "^2.2.4",
     "electron-packager": "^15.0.0",

src/main/index.js

@@ -65,6 +65,12 @@ function createMenu() {
       label: 'Application',
       submenu: [
         { label: 'About PassWall', selector: 'orderFrontStandardAboutPanel:' },
+        {
+          label: 'Always On Top',
+          click: function() {
+            mainWindow.setAlwaysOnTop(!mainWindow.isAlwaysOnTop())
+          }
+        },
         { type: 'separator' },
         {
           label: 'Quit',

src/renderer/App.vue

@@ -21,20 +21,22 @@
       </div>
       <!-- Right Section -->
       <div class="app-header-right-section" v-if="authenticated">
+        <!-- Always On Top -->
+        <button class="top-btn mr-3" :class="[isAlwaysOnTop ? 'active' : '']" @click="onAlwaysOnTop">
+          <VIcon name="always-on-top" size="14px" v-tooltip="$t('AlwaysOnTop')" />
+        </button>
         <!-- Import -->
-        <button class="c-gray-300 mr-5" @click="onImport">
-          {{ $t('Import') }}
-          <VIcon name="download" size="14px" class="ml-2" />
+        <button class="top-btn mr-3" @click="onImport">
+          <VIcon name="download" size="14px" v-tooltip="$t('Import')" />
         </button>
         <!-- Export -->
-        <button class="c-gray-300 mr-5" @click="onExport">
-          {{ $t('Export') }}
-          <VIcon name="upload" size="14px" class="ml-2" />
+        <button class="top-btn mr-3" @click="onExport">
+          <VIcon name="upload" size="14px" v-tooltip="$t('Export')" />
         </button>
         <!-- Logout -->
         <button class="c-danger mr-3" @click="onClickLogout">
           {{ $t('Logout') }}
-          <VIcon name="logout" size="14px" rotation="180" class="ml-2" />
+          <VIcon name="logout" size="14px" rotation="180" class="ml-2" v-tooltip="$t('Logout')" />
         </button>
       </div>
     </header>
@@ -54,6 +56,12 @@ import { mapActions, mapMutations, mapState } from 'vuex'
 import CryptoUtils from '@/utils/crypto'
 
 export default {
+  data() {
+    return {
+      isAlwaysOnTop: false,
+    }
+  },
+  
   computed: mapState(['authenticated', 'searchQuery']),
 
   methods: {
@@ -77,6 +85,11 @@ export default {
       }
     },
 
+    onAlwaysOnTop() {
+      this.isAlwaysOnTop = !this.isAlwaysOnTop
+      remote.getCurrentWindow().setAlwaysOnTop(!remote.getCurrentWindow().isAlwaysOnTop())
+    },
+
     onClickLogout() {
       this.Logout()
       this.$router.replace({ name: 'Login' })
@@ -219,6 +232,14 @@ export default {
     }
   }
 
+  .top-btn {
+    color: $color-gray-300;
+  }
+
+  .top-btn:hover, .top-btn.active {
+    color: $color-secondary;
+  }
+
   &-right-section {
     display: flex;
     margin-left: auto;

src/renderer/components/CheckPassword.vue

@@ -0,0 +1,87 @@
+<template>
+  <button
+    type="button"
+    @click="checkPassword"
+    class="password-check-btn ml-1"
+    v-tooltip="$t('CheckIfExposed')"
+  >
+    <VIcon name="check" size="14px" />
+  </button>
+</template>
+
+<script>
+import Axios from 'axios'
+import CryptoUtils from '@/utils/crypto'
+
+export default {
+  name: 'CheckPassword',
+
+  props: {
+    password: {
+      type: String,
+      default: ''
+    }
+  },
+
+  methods: {
+    async checkPassword() {
+      let text = ""
+      if (this.password === "") {
+        text = this.$t(`Please enter your password to check if password has been exposed.`)
+        this.$notifyError(text)
+        return
+      }
+      var hash = CryptoUtils.sha1(this.password)
+      var first = hash.substring(0, 5)
+      var last = hash.slice(hash.length - 5)
+      var found = false
+      var times = ""
+
+      try {
+        const response = await Axios.get(`https://api.pwnedpasswords.com/range/${first}`)
+        var returnedPasswords = response.data.split('\n')
+        for (var i = 0; i < returnedPasswords.length; i++) {
+          var row = returnedPasswords[i].split(':')
+          if (row[0].slice(row[0].length - 5) === last) {
+            found = true
+            times = row[1]
+            break
+          }
+        }
+
+        if (found) {
+          text = this.$t(`Password has been exposed ${times} time(s) in data breaches. You should change it.`)
+          this.$notifyWarn(text)
+        } else {
+          text = this.$t(`This password was not found in any known data breaches. It should be safe to use.`)
+          this.$notifySuccess(text)
+        }
+
+      } catch (err) {
+        let text = this.$t('Ooops! Something went wrong!')
+        this.$notifyError(text)
+        // Handle Error Here
+        console.error(err)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.password-check-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: $color-gray-500;
+  color: $color-gray-300;
+}
+
+.password-check-btn:hover {
+  color: $color-secondary;
+}
+
+</style>

src/renderer/components/ClipboardButton.vue

@@ -1,6 +1,6 @@
 <template>
-  <button type="button" class="clipboard-btn" v-clipboard:copy="copy" v-tooltip="$t('Copy')">
-    <VIcon name="duplicate" size="13px" />
+  <button type="button" class="clipboard-btn ml-1" v-clipboard:copy="copy" v-tooltip="$t('Copy')">
+    <VIcon name="duplicate" size="14px" />
   </button>
 </template>
 
@@ -28,4 +28,8 @@ export default {
   background-color: $color-gray-500;
   color: $color-gray-300;
 }
+
+.clipboard-btn:hover {
+  color: $color-secondary;
+}
 </style>

src/renderer/components/DeleteButton.vue

@@ -0,0 +1,37 @@
+<template>
+    <button 
+    class="delete-btn ml-1" 
+    v-tooltip="$t('Delete')"
+    v-on:click="deleteItem"
+    >
+    <VIcon name="trash" size="14px" />
+    </button>
+</template>
+
+<script>
+export default {
+  name: 'DeleteButton',
+  methods: {
+    deleteItem() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.delete-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: $color-gray-500;
+  color: $color-gray-300;
+}
+
+.delete-btn:hover {
+  color: $color-secondary;
+}
+</style>

src/renderer/components/EditButton.vue

@@ -0,0 +1,46 @@
+<template>
+    <button
+    v-if="!isEditMode"
+    class="edit-btn ml-1"
+    v-tooltip="$t('Edit')"
+    v-on="inputListeners"
+    >
+    <VIcon name="pencil" size="14px" />
+    </button>
+</template>
+
+<script>
+export default {
+  name: 'EditButton',
+  data() {
+    return { isEditMode: false }
+  },
+  computed: {
+    inputListeners() {
+      return Object.assign({}, this.$listeners, {
+        click: event => {
+          this.isEditMode = !this.isEditMode
+          return this.$emit('click', this.isEditMode)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.edit-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: $color-gray-500;
+  color: $color-gray-300;
+}
+
+.edit-btn:hover {
+  color: $color-secondary;
+}
+</style>

src/renderer/components/GeneratePassword.vue

@@ -3,7 +3,7 @@
     <button 
       type="button" 
       @click="onClickGenerate" 
-      class="btn-generate-pass"
+      class="btn-generate-pass ml-1"
       v-tooltip="$t('Generate')">
       <VIcon name="refresh" size="14px" />
     </button>
@@ -71,6 +71,10 @@ export default {
   color: $color-gray-300;
 }
 
+.btn-generate-pass:hover {
+  color: $color-secondary;
+}
+
 .generate-password {
   text-align: center;
   border-radius: 4px;

src/renderer/components/ShowPassButton.vue

@@ -0,0 +1,46 @@
+<template>
+  <button
+    type="button"
+    class="showpass-btn ml-1"
+    v-tooltip="$t(isShow ? 'Hide' : 'Show')"
+    v-on="inputListeners"
+  >
+    <VIcon class="c-pointer" :name="isShow ? 'eye-off' : 'eye'" size="14px" />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'ShowPassButton',
+  data() {
+    return { isShow: false }
+  },
+  computed: {
+    inputListeners() {
+      return Object.assign({}, this.$listeners, {
+        click: event => {
+          this.isShow = !this.isShow
+          return this.$emit('click', this.isShow)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showpass-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: $color-gray-500;
+  color: $color-gray-300;
+}
+
+.showpass-btn:hover {
+  color: $color-secondary;
+}
+</style>