diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index 54ac740e414ed..8573a6d1c35b1 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -8,6 +8,11 @@ export default Vue.extend({
'ft-tooltip': FtTooltip
},
props: {
+ inputType: {
+ type: String,
+ required: false,
+ default: 'text'
+ },
placeholder: {
type: String,
required: true
@@ -97,6 +102,11 @@ export default Vue.extend({
if (val !== oldVal) {
this.updateVisibleDataList()
}
+ },
+ value(val, oldVal) {
+ if (val !== oldVal) {
+ this.inputData = val
+ }
}
},
mounted: function () {
@@ -253,6 +263,10 @@ export default Vue.extend({
this.inputData = text
},
+ focus() {
+ this.$refs.input.focus()
+ },
+
...mapActions([
'getYoutubeUrlInfo'
])
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index 20fd3c648b3a8..1453173f9a67c 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -42,7 +42,7 @@
v-model="inputData"
:list="idDataList"
class="ft-input"
- type="text"
+ :type="inputType"
:placeholder="placeholder"
:disabled="disabled"
:spellcheck="spellcheck"
diff --git a/src/renderer/components/password-dialog/password-dialog.css b/src/renderer/components/password-dialog/password-dialog.css
new file mode 100644
index 0000000000000..8769c42f1af6d
--- /dev/null
+++ b/src/renderer/components/password-dialog/password-dialog.css
@@ -0,0 +1,10 @@
+.card {
+ position: relative;
+ width: 85%;
+ height: 25%;
+ margin: auto;
+ box-sizing: border-box;
+}
+.passwordInput {
+ width: 100%;
+}
diff --git a/src/renderer/components/password-dialog/password-dialog.js b/src/renderer/components/password-dialog/password-dialog.js
new file mode 100644
index 0000000000000..1e2212157147d
--- /dev/null
+++ b/src/renderer/components/password-dialog/password-dialog.js
@@ -0,0 +1,58 @@
+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
+ }
+ },
+ computed: {
+ getStoredPassword: 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'
+ ]),
+
+ }
+})
diff --git a/src/renderer/components/password-dialog/password-dialog.vue b/src/renderer/components/password-dialog/password-dialog.vue
new file mode 100644
index 0000000000000..f7b6300d15845
--- /dev/null
+++ b/src/renderer/components/password-dialog/password-dialog.vue
@@ -0,0 +1,31 @@
+
+
+
+ {{ $t("Settings.Password Dialog.Enter Password To Unlock") }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/components/password-settings/password-settings.js b/src/renderer/components/password-settings/password-settings.js
new file mode 100644
index 0000000000000..40e9f482f2609
--- /dev/null
+++ b/src/renderer/components/password-settings/password-settings.js
@@ -0,0 +1,58 @@
+import Vue from 'vue'
+import { mapActions } from 'vuex'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtInput from '../ft-input/ft-input.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtButton from '../ft-button/ft-button.vue'
+
+export default Vue.extend({
+ name: 'PasswordSettings',
+ components: {
+ 'ft-settings-section': FtSettingsSection,
+ 'ft-input': FtInput,
+ 'ft-flex-box': FtFlexBox,
+ 'ft-button': FtButton,
+ },
+ emits: ['settingsUnlocked'],
+ data: function() {
+ return {
+ password: '',
+ }
+ },
+ computed: {
+ getStoredPassword: function() {
+ return this.$store.getters.getSettingsPassword
+ },
+ hasStoredPassword: function() {
+ return this.getStoredPassword !== ''
+ },
+ unlocked: function() {
+ return this.getStoredPassword === '' || this.password === this.getStoredPassword
+ }
+ },
+ watch: {
+ unlocked(val, oldVal) {
+ if (val !== oldVal) {
+ this.propagateUnlockStatus()
+ }
+ },
+ },
+ methods: {
+ handleSetPassword: function () {
+ this.updateSettingsPassword(this.password)
+ this.password = ''
+ },
+ handleRemovePassword: function () {
+ this.updateSettingsPassword('')
+ this.password = ''
+ },
+ propagateUnlockStatus: function() {
+ this.$emit('settingsUnlocked', this.unlocked)
+ },
+
+ ...mapActions([
+ 'updateSettingsPassword'
+ ]),
+
+ }
+})
diff --git a/src/renderer/components/password-settings/password-settings.vue b/src/renderer/components/password-settings/password-settings.vue
new file mode 100644
index 0000000000000..5ba0279b7e944
--- /dev/null
+++ b/src/renderer/components/password-settings/password-settings.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 40090fd358b82..9e4873f33ad57 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -274,7 +274,8 @@ const state = {
screenshotAskPath: false,
screenshotFolderPath: '',
screenshotFilenamePattern: '%Y%M%D-%H%N%S',
- fetchSubscriptionsAutomatically: true
+ fetchSubscriptionsAutomatically: true,
+ settingsPassword: ''
}
const stateWithSideEffects = {
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 92ce91804c166..b88fc425e7559 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -12,6 +12,8 @@ import ProxySettings from '../../components/proxy-settings/proxy-settings.vue'
import SponsorBlockSettings from '../../components/sponsor-block-settings/sponsor-block-settings.vue'
import ParentControlSettings from '../../components/parental-control-settings/parental-control-settings.vue'
import ExperimentalSettings from '../../components/experimental-settings/experimental-settings.vue'
+import PasswordSettings from '../../components/password-settings/password-settings.vue'
+import PasswordDialog from '../../components/password-dialog/password-dialog.vue'
export default Vue.extend({
name: 'Settings',
@@ -28,11 +30,23 @@ export default Vue.extend({
'sponsor-block-settings': SponsorBlockSettings,
'download-settings': DownloadSettings,
'parental-control-settings': ParentControlSettings,
- 'experimental-settings': ExperimentalSettings
+ 'experimental-settings': ExperimentalSettings,
+ 'password-settings': PasswordSettings,
+ 'password-dialog': PasswordDialog,
+ },
+ data: function () {
+ return {
+ settingsUnlocked: false
+ }
},
computed: {
usingElectron: function () {
return process.env.IS_ELECTRON
- }
+ },
+ },
+ methods: {
+ handleSettingsUnlocked: function (n) {
+ this.settingsUnlocked = n
+ },
}
})
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 56f18ec58c32a..e7618dfbb29c9 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -1,30 +1,41 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+