Migrate PasswordSettings and PasswordDialog to the composition API

src/renderer/components/PasswordDialog/PasswordDialog.vue

@@ -0,0 +1,45 @@
+<template>
+  <FtCard
+    class="card"
+  >
+    <h3>{{ $t("Settings.Password Dialog.Enter Password To Unlock") }}</h3>
+
+    <FtInput
+      ref="password"
+      :placeholder="$t('Settings.Password Dialog.Password')"
+      :show-action-button="false"
+      input-type="password"
+      class="passwordInput"
+      @input="handlePasswordInput"
+    />
+  </FtCard>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+
+import FtCard from '../ft-card/ft-card.vue'
+import FtInput from '../ft-input/ft-input.vue'
+
+import store from '../../store/index'
+
+const emit = defineEmits(['unlocked'])
+
+const password = ref(null)
+
+onMounted(() => {
+  password.value.focus()
+})
+
+const settingsPassword = computed(() => {
+  return store.getters.getSettingsPassword
+})
+
+function handlePasswordInput(input) {
+  if (input === settingsPassword.value) {
+    emit('unlocked')
+  }
+}
+</script>
+
+<style scoped src="./PasswordDialog.css" />

src/renderer/components/PasswordSettings/PasswordSettings.vue

@@ -0,0 +1,67 @@
+<template>
+  <FtSettingsSection
+    :title="$t('Settings.Password Settings.Password Settings')"
+  >
+    <FtFlexBox
+      v-if="hasStoredPassword"
+      class="settingsFlexStart460px"
+    >
+      <FtButton
+        :label="$t('Settings.Password Settings.Remove Password')"
+        @click="handleRemovePassword"
+      />
+    </FtFlexBox>
+    <FtFlexBox
+      v-else
+      class="settingsFlexStart460px"
+    >
+      <FtInput
+        :placeholder="$t('Settings.Password Settings.Set Password To Prevent Access')"
+        :show-action-button="false"
+        show-label
+        input-type="password"
+        :value="password"
+        @input="e => password = e"
+        @keydown.enter.native="handleSetPassword"
+      />
+      <FtButton
+        class="centerButton"
+        :label="$t('Settings.Password Settings.Set Password')"
+        @click="handleSetPassword"
+      />
+    </FtFlexBox>
+  </FtSettingsSection>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+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'
+
+import store from '../../store/index'
+
+const settingsPassword = computed(() => {
+  return store.getters.getSettingsPassword
+})
+
+const hasStoredPassword = computed(() => {
+  return settingsPassword.value !== ''
+})
+
+const password = ref('')
+
+function handleSetPassword() {
+  store.dispatch('updateSettingsPassword', password.value)
+  password.value = ''
+}
+
+function handleRemovePassword() {
+  store.dispatch('updateSettingsPassword', '')
+  password.value = ''
+}
+</script>
+
+<style scoped src="./PasswordSettings.css" />

src/renderer/views/Settings/Settings.js

@@ -13,8 +13,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'
+import PasswordSettings from '../../components/PasswordSettings/PasswordSettings.vue'
+import PasswordDialog from '../../components/PasswordDialog/PasswordDialog.vue'
 import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 import FtSettingsMenu from '../../components/ft-settings-menu/ft-settings-menu.vue'