Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cleanup and simplify the settings password code #2982

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Cleanup and simplify the settings password code
absidue committed Dec 19, 2022
commit 8a67c6718e8e8fe20513c383d42a5ca490b762a1
11 changes: 5 additions & 6 deletions src/renderer/components/password-dialog/password-dialog.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
.card {
position: relative;
width: 85%;
height: 25%;
margin: auto;
box-sizing: border-box;
width: 85%;
margin: auto;
box-sizing: border-box;
}

.passwordInput {
width: 100%;
width: 100%;
}
47 changes: 8 additions & 39 deletions src/renderer/components/password-dialog/password-dialog.js
Original file line number Diff line number Diff line change
@@ -1,58 +1,27 @@
import Vue from 'vue'
import { mapActions } from 'vuex'
import FtCard from '../ft-card/ft-card.vue'
import FtInput from '../ft-input/ft-input.vue'
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
import FtPrompt from '../ft-prompt/ft-prompt.vue'

export default Vue.extend({
name: 'PasswordDialog',
components: {
'ft-input': FtInput,
'ft-card': FtCard,
'ft-flex-box': FtFlexBox,
'ft-prompt': FtPrompt,
},
emits: ['settingsUnlocked'],
data: function() {
return {
password: '',
showIncorrectPassword: false
}
'ft-card': FtCard
},
emits: ['unlocked'],
computed: {
getStoredPassword: function() {
settingsPassword: function () {
return this.$store.getters.getSettingsPassword
},
incorrectPassword: function() {
return this.password !== '' && !this.unlocked
},
unlocked: function() {
return this.getStoredPassword === '' || this.password === this.getStoredPassword
}
},
watch: {
unlocked(val, oldVal) {
if (val !== oldVal) {
this.propagateUnlockStatus()
}
},
},
mounted: function () {
this.propagateUnlockStatus()
this.$refs.password.focus()
},
methods: {
handleLock: function () {
this.password = ''
this.showIncorrectPassword = false
},
propagateUnlockStatus: function() {
this.$emit('settingsUnlocked', this.unlocked)
},
...mapActions([
'updateSettingsPassword'
]),

handlePasswordInput: function (input) {
if (input === this.settingsPassword) {
this.$emit('unlocked')
}
}
}
})
38 changes: 13 additions & 25 deletions src/renderer/components/password-dialog/password-dialog.vue
Original file line number Diff line number Diff line change
@@ -1,30 +1,18 @@
<template>
<div>
<ft-card
class="card"
>
<h3>{{ $t("Settings.Password Dialog.Enter Password To Unlock") }}</h3>
<ft-card
class="card"
>
<h3>{{ $t("Settings.Password Dialog.Enter Password To Unlock") }}</h3>

<ft-flex-box>
<ft-input
ref="password"
:placeholder="$t('Settings.Password Dialog.Password')"
:show-action-button="false"
input-type="password"
class="passwordInput"
:value="password"
@input="e => password = e"
/>
</ft-flex-box>
<ft-prompt
v-if="showIncorrectPassword"
:label="$t('Settings.Password Dialog.Password Incorrect')"
:option-names="[$t('Ok')]"
:option-values="['ok']"
@click="handleLock"
/>
</ft-card>
</div>
<ft-input
ref="password"
:placeholder="$t('Settings.Password Dialog.Password')"
:show-action-button="false"
input-type="password"
class="passwordInput"
@input="handlePasswordInput"
/>
</ft-card>
</template>

<script src="./password-dialog.js" />
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.centerButton {
align-self: center;
}
22 changes: 3 additions & 19 deletions src/renderer/components/password-settings/password-settings.js
Original file line number Diff line number Diff line change
@@ -13,30 +13,19 @@ export default Vue.extend({
'ft-flex-box': FtFlexBox,
'ft-button': FtButton,
},
emits: ['settingsUnlocked'],
data: function() {
return {
password: '',
}
},
computed: {
getStoredPassword: function() {
settingsPassword: function() {
return this.$store.getters.getSettingsPassword
},
hasStoredPassword: function() {
return this.getStoredPassword !== ''
},
unlocked: function() {
return this.getStoredPassword === '' || this.password === this.getStoredPassword
return this.settingsPassword !== ''
}
},
watch: {
unlocked(val, oldVal) {
if (val !== oldVal) {
this.propagateUnlockStatus()
}
},
},
methods: {
handleSetPassword: function () {
this.updateSettingsPassword(this.password)
@@ -46,13 +35,8 @@ export default Vue.extend({
this.updateSettingsPassword('')
this.password = ''
},
propagateUnlockStatus: function() {
this.$emit('settingsUnlocked', this.unlocked)
},

...mapActions([
'updateSettingsPassword'
]),

])
}
})
56 changes: 28 additions & 28 deletions src/renderer/components/password-settings/password-settings.vue
Original file line number Diff line number Diff line change
@@ -2,35 +2,35 @@
<ft-settings-section
:title="$t('Settings.Password Settings.Password Settings')"
>
<div>
<ft-flex-box
v-if="hasStoredPassword"
class="settingsFlexStart460px"
>
<ft-button
:label="$t('Settings.Password Settings.Remove Password')"
@click="handleRemovePassword"
/>
</ft-flex-box>
<ft-flex-box
v-else
class="settingsFlexStart460px"
>
<ft-input
:placeholder="$t('Settings.Password Settings.Set Password To Prevent Access')"
:show-action-button="false"
:show-label="true"
input-type="password"
:value="password"
@input="e => password = e"
/>
<ft-button
:label="$t('Settings.Password Settings.Set Password')"
@click="handleSetPassword"
/>
</ft-flex-box>
</div>
<ft-flex-box
v-if="hasStoredPassword"
class="settingsFlexStart460px"
>
<ft-button
:label="$t('Settings.Password Settings.Remove Password')"
@click="handleRemovePassword"
/>
</ft-flex-box>
<ft-flex-box
v-else
class="settingsFlexStart460px"
>
<ft-input
:placeholder="$t('Settings.Password Settings.Set Password To Prevent Access')"
:show-action-button="false"
:show-label="true"
input-type="password"
:value="password"
@input="e => password = e"
/>
<ft-button
class="centerButton"
:label="$t('Settings.Password Settings.Set Password')"
@click="handleSetPassword"
/>
</ft-flex-box>
</ft-settings-section>
</template>

<script src="./password-settings.js" />
<style scoped src="./password-settings.css" />
14 changes: 9 additions & 5 deletions src/renderer/views/Settings/Settings.js
Original file line number Diff line number Diff line change
@@ -36,17 +36,21 @@ export default Vue.extend({
},
data: function () {
return {
settingsUnlocked: false
unlocked: false
}
},
computed: {
usingElectron: function () {
return process.env.IS_ELECTRON
},

settingsPassword: function () {
return this.$store.getters.getSettingsPassword
}
},
methods: {
handleSettingsUnlocked: function (n) {
this.settingsUnlocked = n
},
mounted: function () {
if (this.settingsPassword === '') {
this.unlocked = true
}
}
})
17 changes: 7 additions & 10 deletions src/renderer/views/Settings/Settings.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<div v-if="settingsUnlocked">
<template v-if="unlocked">
<general-settings />
<hr>
<theme-settings />
@@ -27,15 +27,12 @@
<hr v-if="usingElectron">
<experimental-settings v-if="usingElectron" />
<hr>
<password-settings
@settingsUnlocked="handleSettingsUnlocked"
/>
</div>
<div v-else>
<password-dialog
@settingsUnlocked="handleSettingsUnlocked"
/>
</div>
<password-settings />
</template>
<password-dialog
v-else
@unlocked="unlocked = true"
/>
</div>
</template>