From 909cd05b85287cfc5314cd97c9b81570850cf5cc Mon Sep 17 00:00:00 2001
From: Cameron Clark <cameron.clark@hey.com>
Date: Fri, 15 Jan 2021 11:16:52 +0000
Subject: [PATCH 1/7] feat(wizard): add initial page with v-stepper for wizard

---
 pages/wizard.vue | 156 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 156 insertions(+)
 create mode 100644 pages/wizard.vue

diff --git a/pages/wizard.vue b/pages/wizard.vue
new file mode 100644
index 00000000000..707c80a852f
--- /dev/null
+++ b/pages/wizard.vue
@@ -0,0 +1,156 @@
+<template>
+  <v-container fill-height>
+    <v-row align="center" justify="center">
+      <v-col cols="12" sm="12" md="12" xl="8">
+        <h1 class="text-h4 mb-6 text-center">{{ heading }}</h1>
+        <v-stepper v-model="wizardStage" class="transparent-background">
+          <v-stepper-header>
+            <v-stepper-step
+              :complete="wizardStage > 1"
+              step="1"
+              :editable="maxWizardStage > 0"
+            >
+              {{ $t('wizard.languageLocale') }}
+            </v-stepper-step>
+
+            <v-divider></v-divider>
+
+            <v-stepper-step
+              :complete="wizardStage > 2"
+              step="2"
+              :editable="maxWizardStage > 1"
+            >
+              {{ $t('wizard.administratorAccount') }}
+            </v-stepper-step>
+
+            <v-divider></v-divider>
+
+            <v-stepper-step
+              :complete="wizardStage > 3"
+              step="3"
+              :editable="maxWizardStage > 2"
+            >
+              {{ $t('wizard.preferredMetadataLanguage') }}
+            </v-stepper-step>
+
+            <v-divider></v-divider>
+
+            <v-stepper-step
+              :complete="wizardStage > 4"
+              step="4"
+              :editable="maxWizardStage > 3"
+            >
+              {{ $t('wizard.remoteAccess') }}
+            </v-stepper-step>
+          </v-stepper-header>
+
+          <v-stepper-items>
+            <v-stepper-content step="1">
+              <wizard-language class="pt-4" @step-complete="changeStep" />
+            </v-stepper-content>
+
+            <v-stepper-content step="2">
+              <wizard-admin-account
+                class="pt-4"
+                @step-complete="changeStep"
+                @previous-step="previousStep"
+              />
+            </v-stepper-content>
+
+            <v-stepper-content step="3">
+              <wizard-metadata
+                class="pt-4"
+                @step-complete="changeStep"
+                @previous-step="previousStep"
+              />
+            </v-stepper-content>
+
+            <v-stepper-content step="4">
+              <wizard-remote-access
+                class="pt-4"
+                @step-complete="changeStep"
+                @previous-step="previousStep"
+              />
+            </v-stepper-content>
+          </v-stepper-items>
+        </v-stepper>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapActions } from 'vuex';
+
+export default Vue.extend({
+  layout: 'fullpage',
+  auth: false,
+  data() {
+    return {
+      wizardStage: 1,
+      maxWizardStage: 1
+    };
+  },
+  head() {
+    return {
+      title: this.$store.state.page.title
+    };
+  },
+  computed: {
+    heading(): string {
+      switch (this.wizardStage) {
+        case 1:
+          return this.$t('wizard.languageLocale');
+        case 2:
+          return this.$t('wizard.administratorAccount');
+        case 3:
+          return this.$t('wizard.preferredMetadataLanguage');
+        case 4:
+          return this.$t('wizard.remoteAccess');
+      }
+      return '';
+    }
+  },
+  created() {
+    this.setPageTitle({ title: this.$t('wizard.setupWizard') });
+    this.setDeviceProfile();
+  },
+  methods: {
+    ...mapActions('deviceProfile', ['setDeviceProfile']),
+    ...mapActions('snackbar', ['pushSnackbarMessage']),
+    ...mapActions('page', ['setPageTitle']),
+    async completeWizard(): Promise<void> {
+      try {
+        await this.$api.startup.completeWizard();
+        // Redirect to setup complete page
+        this.$router.push('/login');
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        this.pushSnackbarMessage({
+          message: this.$t('wizard.completeError'),
+          color: 'success'
+        });
+      }
+    },
+    changeStep({ step }: { step: number }): void {
+      if (step === 4) this.completeWizard();
+      else this.wizardStage += 1;
+
+      // This allows the return to previous steps, but not going forward past incomplete steps
+      if (this.wizardStage > this.maxWizardStage)
+        this.maxWizardStage = this.wizardStage;
+    },
+    previousStep(): void {
+      this.wizardStage -= 1;
+    }
+  }
+});
+</script>
+
+<style scoped>
+.transparent-background {
+  background-color: transparent !important;
+}
+</style>

From ff1c47b8726c6fe576d7a93fe394be02b813b915 Mon Sep 17 00:00:00 2001
From: Cameron Clark <cameron.clark@hey.com>
Date: Fri, 15 Jan 2021 11:17:23 +0000
Subject: [PATCH 2/7] feat(wizard): redirect to startup wizard if
 StartupWizardCompleted is false

---
 store/servers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/store/servers.ts b/store/servers.ts
index c7cbbc04c11..87d5f7018c2 100644
--- a/store/servers.ts
+++ b/store/servers.ts
@@ -51,7 +51,7 @@ export const actions: ActionTree<ServerState, ServerState> = {
 
       if (compareVersions.compare(data.Version || '', '10.7.0', '>=')) {
         if (!data.StartupWizardCompleted) {
-          // Redirect To Startup Wizard
+          this.$router.push('/wizard');
         } else {
           commit('SET_SERVER_USED', {
             publicInfo: data,

From 3034e5180e32c4650c5d8deec97c9fc736781310 Mon Sep 17 00:00:00 2001
From: Cameron Clark <cameron.clark@hey.com>
Date: Fri, 15 Jan 2021 11:18:27 +0000
Subject: [PATCH 3/7] feat(wizard): add wizard page for admin account

---
 components/wizard/WizardAdminAccount.vue | 97 ++++++++++++++++++++++++
 plugins/veeValidate.ts                   |  7 ++
 2 files changed, 104 insertions(+)
 create mode 100644 components/wizard/WizardAdminAccount.vue

diff --git a/components/wizard/WizardAdminAccount.vue b/components/wizard/WizardAdminAccount.vue
new file mode 100644
index 00000000000..a442d88c1ca
--- /dev/null
+++ b/components/wizard/WizardAdminAccount.vue
@@ -0,0 +1,97 @@
+<template>
+  <validation-observer v-slot="{ invalid }">
+    <v-form ref="form" v-model="validInputs">
+      <validation-provider v-slot="{ errors }" name="username" rules="required">
+        <v-text-field
+          v-model="admin.Name"
+          outlined
+          :label="$t('username')"
+          type="username"
+          :error-messages="errors"
+          required
+        ></v-text-field>
+      </validation-provider>
+      <validation-provider
+        v-slot="{ errors }"
+        rules="bothPasswordsSame:@confirm"
+      >
+        <v-text-field
+          v-model="admin.Password"
+          outlined
+          :label="$t('password')"
+          :append-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
+          :type="showPassword ? 'text' : 'password'"
+          :error-messages="errors"
+          @click:append="() => (showPassword = !showPassword)"
+        ></v-text-field>
+      </validation-provider>
+
+      <validation-provider v-slot="{ errors }" name="confirm" rules="">
+        <v-text-field
+          v-model="passwordCheck"
+          outlined
+          :label="$t('wizard.confirmPassword')"
+          :append-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
+          :type="showPassword ? 'text' : 'password'"
+          :error-messages="errors"
+          @click:append="() => (showPassword = !showPassword)"
+        ></v-text-field>
+      </validation-provider>
+
+      <v-btn color="secondary" @click="$emit('previous-step', { step: 2 })">
+        {{ $t('previous') }}
+      </v-btn>
+      <v-btn
+        color="primary"
+        :disabled="invalid"
+        :loading="loading"
+        @click="createAdminAccount"
+      >
+        {{ $t('next') }}
+      </v-btn>
+    </v-form>
+  </validation-observer>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapActions } from 'vuex';
+
+export default Vue.extend({
+  data() {
+    return {
+      admin: {
+        Name: '',
+        Password: ''
+      },
+      passwordCheck: '',
+      showPassword: false,
+      loading: false
+    };
+  },
+  methods: {
+    ...mapActions('snackbar', ['pushSnackbarMessage']),
+    async createAdminAccount(): Promise<void> {
+      this.loading = true;
+      try {
+        const token = `MediaBrowser Client="${this.$store.state.deviceProfile.clientName}", Device="${this.$store.state.deviceProfile.deviceName}", DeviceId="${this.$store.state.deviceProfile.deviceId}", Version="${this.$store.state.deviceProfile.clientVersion}"`;
+        this.$auth.ctx.app.$axios.setHeader('X-Emby-Authorization', token);
+
+        await this.$api.startup.updateStartupUser({
+          startupUserDto: this.admin
+        });
+
+        this.$emit('step-complete', { step: 2 });
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        this.pushSnackbarMessage({
+          message: this.$t('wizard.setAdminError'),
+          color: 'error'
+        });
+      }
+      this.loading = false;
+    }
+  }
+});
+</script>
diff --git a/plugins/veeValidate.ts b/plugins/veeValidate.ts
index df443bda56f..aa5f9071a79 100644
--- a/plugins/veeValidate.ts
+++ b/plugins/veeValidate.ts
@@ -9,6 +9,13 @@ extend('mustBeUrl', (value: string): boolean => {
   return /^https?:\/\/.+/.test(value);
 });
 
+extend('bothPasswordsSame', {
+  params: ['target'],
+  validate(value, { target }) {
+    return value === target;
+  }
+});
+
 const veeValidate: Plugin = ({ app }) => {
   configure({
     defaultMessage: (_field, values) => {

From 49d0bef3d8d8bcecfb7224dffa9572209326270d Mon Sep 17 00:00:00 2001
From: Cameron Clark <cameron.clark@hey.com>
Date: Fri, 15 Jan 2021 11:18:44 +0000
Subject: [PATCH 4/7] feat(wizard): add wizard page for remove access

---
 components/wizard/WizardRemoteAccess.vue | 54 ++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 components/wizard/WizardRemoteAccess.vue

diff --git a/components/wizard/WizardRemoteAccess.vue b/components/wizard/WizardRemoteAccess.vue
new file mode 100644
index 00000000000..de334213a84
--- /dev/null
+++ b/components/wizard/WizardRemoteAccess.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <v-checkbox
+      v-model="allowRemoteAccess"
+      :label="$t('wizard.allowRemoteAccess')"
+    />
+    <v-checkbox v-model="enableUPNP" :label="$t('enableUPNP')" />
+    <v-btn color="secondary" @click="$emit('previous-step')">
+      {{ $t('previous') }}
+    </v-btn>
+    <v-btn :loading="loading" color="primary" @click="setRemoteAccess">
+      {{ $t('finish') }}
+    </v-btn>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapActions } from 'vuex';
+
+export default Vue.extend({
+  data() {
+    return {
+      allowRemoteAccess: false,
+      enableUPNP: false,
+      loading: false
+    };
+  },
+  methods: {
+    ...mapActions('snackbar', ['pushSnackbarMessage']),
+    async setRemoteAccess(): Promise<void> {
+      this.loading = true;
+      try {
+        await this.$api.startup.setRemoteAccess({
+          startupRemoteAccessDto: {
+            EnableRemoteAccess: this.allowRemoteAccess,
+            EnableAutomaticPortMapping: this.enableUPNP
+          }
+        });
+
+        this.$emit('step-complete', { step: 4 });
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        this.pushSnackbarMessage({
+          message: this.$t('wizard.setRemoteError'),
+          color: 'error'
+        });
+      }
+      this.loading = false;
+    }
+  }
+});
+</script>

From fc7ef3391dd4b2e690ab3649671e1936e1bc4cac Mon Sep 17 00:00:00 2001
From: Cameron Clark <cameron.clark@hey.com>
Date: Fri, 15 Jan 2021 11:19:03 +0000
Subject: [PATCH 5/7] feat(wizard): add wizard page for language

---
 components/wizard/WizardLanguage.vue | 81 ++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 components/wizard/WizardLanguage.vue

diff --git a/components/wizard/WizardLanguage.vue b/components/wizard/WizardLanguage.vue
new file mode 100644
index 00000000000..184903b796b
--- /dev/null
+++ b/components/wizard/WizardLanguage.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <v-select
+      v-model="UICulture"
+      :loading="loading"
+      outlined
+      :label="$t('wizard.preferedLanguage')"
+      required
+      item-text="Name"
+      item-value="Value"
+      :items="culturesList"
+    />
+    <v-btn color="primary" @click="setLanguage">
+      {{ $t('next') }}
+    </v-btn>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapActions } from 'vuex';
+import {
+  LocalizationOption,
+  StartupConfigurationDto
+} from '@jellyfin/client-axios';
+
+export default Vue.extend({
+  auth: false,
+  data() {
+    return {
+      UICulture: 'en-GB',
+      culturesList: [] as LocalizationOption[],
+      initialConfig: {} as StartupConfigurationDto,
+      loading: false
+    };
+  },
+  async created() {
+    this.loading = true;
+    try {
+      this.initialConfig = (
+        await this.$api.startup.getStartupConfiguration()
+      ).data;
+
+      this.UICulture = this.initialConfig?.UICulture || 'en-GB';
+
+      this.culturesList = (
+        await this.$api.localization.getLocalizationOptions()
+      ).data;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+    this.loading = false;
+  },
+  methods: {
+    ...mapActions('snackbar', ['pushSnackbarMessage']),
+    async setLanguage(): Promise<void> {
+      this.loading = true;
+      try {
+        this.$i18n.setLocale(this.UICulture);
+        await this.$api.startup.updateInitialConfiguration({
+          startupConfigurationDto: {
+            ...this.initialConfig,
+            UICulture: this.UICulture
+          }
+        });
+
+        this.$emit('step-complete', { step: 1 });
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        this.pushSnackbarMessage({
+          message: this.$t('wizard.setLanguageError'),
+          color: 'error'
+        });
+      }
+      this.loading = false;
+    }
+  }
+});
+</script>

From 5711023371d48152d1574b923b1ecfadcbfb4038 Mon Sep 17 00:00:00 2001
From: Cameron Clark <cameron.clark@hey.com>
Date: Fri, 15 Jan 2021 11:19:20 +0000
Subject: [PATCH 6/7] feat(wizard): add wizard page for metadata

---
 components/wizard/WizardMetadata.vue | 87 ++++++++++++++++++++++++++++
 locales/en-US.json                   | 22 ++++++-
 2 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 components/wizard/WizardMetadata.vue

diff --git a/components/wizard/WizardMetadata.vue b/components/wizard/WizardMetadata.vue
new file mode 100644
index 00000000000..bb0aa379302
--- /dev/null
+++ b/components/wizard/WizardMetadata.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <v-select
+      v-model="metadataLanguage"
+      outlined
+      :label="$t('metadataLanguage')"
+      required
+      item-text="DisplayName"
+      item-value="TwoLetterISOLanguageName"
+      :items="cultureOptions"
+    />
+    <v-select
+      v-model="metadataCountry"
+      outlined
+      :label="$t('metadataCountry')"
+      required
+      item-text="DisplayName"
+      item-value="TwoLetterISORegionName"
+      :items="countryOptions"
+    />
+    <v-btn color="secondary" @click="$emit('previous-step', { step: 2 })">
+      {{ $t('previous') }}
+    </v-btn>
+    <v-btn :loading="loading" color="primary" @click="setMetadata">{{
+      $t('next')
+    }}</v-btn>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  CountryInfo,
+  CultureDto,
+  StartupConfigurationDto
+} from '@jellyfin/client-axios';
+import Vue from 'vue';
+import { mapActions } from 'vuex';
+
+export default Vue.extend({
+  data() {
+    return {
+      metadataLanguage: '',
+      metadataCountry: '',
+      initialConfig: {} as StartupConfigurationDto,
+      cultureOptions: [] as CultureDto[],
+      countryOptions: [] as CountryInfo[],
+      loading: false
+    };
+  },
+  async created() {
+    this.initialConfig = (
+      await this.$api.startup.getStartupConfiguration()
+    ).data;
+
+    this.metadataLanguage = this.initialConfig?.MetadataCountryCode || '';
+    this.metadataCountry = this.initialConfig?.PreferredMetadataLanguage || '';
+
+    this.cultureOptions = (await this.$api.localization.getCultures()).data;
+    this.countryOptions = (await this.$api.localization.getCountries()).data;
+  },
+  methods: {
+    ...mapActions('snackbar', ['pushSnackbarMessage']),
+    async setMetadata(): Promise<void> {
+      this.loading = true;
+      try {
+        await this.$api.startup.updateInitialConfiguration({
+          startupConfigurationDto: {
+            ...this.initialConfig,
+            MetadataCountryCode: this.metadataLanguage,
+            PreferredMetadataLanguage: this.metadataCountry
+          }
+        });
+
+        this.$emit('step-complete', { step: 3 });
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        this.pushSnackbarMessage({
+          message: this.$t('wizard.setMetadataError'),
+          color: 'error'
+        });
+      }
+      this.loading = false;
+    }
+  }
+});
+</script>
diff --git a/locales/en-US.json b/locales/en-US.json
index 8a6070415cf..5a7a23743fe 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -273,13 +273,33 @@
   "usernameRequired": "Username is required",
   "validation": {
     "mustBeUrl": "This field must be a valid URL",
-    "required": "This field is required"
+    "required": "This field is required",
+    "bothPasswordsSame": "Both passwords must be the save"
   },
   "version": "Version",
   "video": "Video",
   "videoTypes": "Video Types",
   "viewDetails": "View details",
   "vueClientVersion": "Vue client version",
+  "wizard": {
+    "confirmPassword": "Confirm password",
+    "setupWizard": "Setup wizard",
+    "setAdminError": "Unable to create an admin account.",
+    "setLanguageError": "Unable to set client language.",
+    "setMetadataError": "Unable to set metadata languages.",
+    "setRemoteError": "Unable to set remote access settings.",
+    "languageSuccessfullySet": "Language successfully set.",
+    "userSuccessfullySet": "User successfully set.",
+    "metadataLanguagesSet": "Metadata languages set.",
+    "remoteAccessSet": "Remote access set.",
+    "completeError": "Unable to complete startup wizard.",
+    "preferredMetadataLanguage": "Preferred metadata language",
+    "preferedLanguage": "Prefered language",
+    "languageLocale": "Language and locale",
+    "administratorAccount": "Administrator account",
+    "allowRemoteAccess": "Allow remote access to the server",
+    "remoteAccess": "Remote Access"
+  },
   "writer": "Writer",
   "writing": "Writing",
   "year": "Year",

From 8454395143ee979eb772bccce037a79479db1425 Mon Sep 17 00:00:00 2001
From: Cameron Clark <cameron.clark@hey.com>
Date: Fri, 15 Jan 2021 11:23:16 +0000
Subject: [PATCH 7/7] fix(fix build): add ts-ignore

---
 plugins/veeValidate.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/plugins/veeValidate.ts b/plugins/veeValidate.ts
index aa5f9071a79..81e341ffca3 100644
--- a/plugins/veeValidate.ts
+++ b/plugins/veeValidate.ts
@@ -11,6 +11,8 @@ extend('mustBeUrl', (value: string): boolean => {
 
 extend('bothPasswordsSame', {
   params: ['target'],
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   validate(value, { target }) {
     return value === target;
   }