From d0c3a59f44118819e840898db1ec227b2785f9fc Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Wed, 9 Aug 2023 14:08:46 +0300
Subject: [PATCH] web/satellite: differentiate password and passphrase
 autocomplete inputs

Added unique autocomplete values for password and passphrase inputs to make browser native autocomplete feature work correctly.

Issue:
https://github.com/storj/storj/issues/6151

Change-Id: I38e1bfed46beb47b3be1a620ce2a4996359feafc
---
 .../createFlow/steps/EnterPassphraseStep.vue  | 15 ++++++++++++-
 .../src/components/common/VInput.vue          |  4 ++++
 .../components/modals/ChangePasswordModal.vue | 14 +++++++++----
 .../modals/EnterBucketPassphraseModal.vue     | 17 ++++++++++++++-
 .../modals/EnterPassphraseModal.vue           | 19 ++++++++++++++++-
 .../manageProjectPassphrase/SwitchStep.vue    | 21 +++++++++++++++++--
 web/satellite/src/views/AuthorizeArea.vue     | 10 ++++++++-
 web/satellite/src/views/LoginArea.vue         |  8 +++++++
 web/satellite/src/views/ResetPassword.vue     |  5 ++---
 9 files changed, 100 insertions(+), 13 deletions(-)

diff --git a/web/satellite/src/components/accessGrants/createFlow/steps/EnterPassphraseStep.vue b/web/satellite/src/components/accessGrants/createFlow/steps/EnterPassphraseStep.vue
index 45db69b64..7f717807c 100644
--- a/web/satellite/src/components/accessGrants/createFlow/steps/EnterPassphraseStep.vue
+++ b/web/satellite/src/components/accessGrants/createFlow/steps/EnterPassphraseStep.vue
@@ -8,7 +8,8 @@
             <VInput
                 label="Encryption Passphrase"
                 placeholder="Enter Encryption Passphrase"
-                :is-password="true"
+                is-password
+                :autocomplete="autocompleteValue"
                 :init-value="passphrase"
                 @setData="setPassphrase"
             />
@@ -50,6 +51,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
+import { useProjectsStore } from '@/store/modules/projectsStore';
+
 import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue';
 import Toggle from '@/components/accessGrants/createFlow/components/Toggle.vue';
 import VButton from '@/components/common/VButton.vue';
@@ -68,8 +71,18 @@ const props = withDefaults(defineProps<{
     isNewPassphrase: false,
 });
 
+const projectsStore = useProjectsStore();
+
 const isPassphraseSaved = ref<boolean>(false);
 
+/**
+ * Returns formatted autocomplete value.
+ */
+const autocompleteValue = computed((): string => {
+    const projectID = projectsStore.state.selectedProject.id;
+    return `section-${projectID?.toLowerCase()} new-password`;
+});
+
 /**
  * Indicates if continue button is disabled.
  */
diff --git a/web/satellite/src/components/common/VInput.vue b/web/satellite/src/components/common/VInput.vue
index 5ded35627..505080595 100644
--- a/web/satellite/src/components/common/VInput.vue
+++ b/web/satellite/src/components/common/VInput.vue
@@ -30,6 +30,7 @@
             :cols="40"
             :maxlength="maxSymbols"
             :disabled="disabled"
+            :autocomplete="autocomplete"
             wrap="hard"
             @input="onInput"
             @change="onInput"
@@ -45,6 +46,7 @@
             :style="style.inputStyle"
             :maxlength="maxSymbols"
             :disabled="disabled"
+            :autocomplete="autocomplete"
             @input="onInput"
             @change="onInput"
             @focus="showPasswordStrength"
@@ -96,6 +98,7 @@ const props = withDefaults(defineProps<{
     isWhite?: boolean,
     withIcon?: boolean,
     disabled?: boolean,
+    autocomplete?: string,
 }>(), {
     additionalLabel: '',
     initValue: '',
@@ -114,6 +117,7 @@ const props = withDefaults(defineProps<{
     isWhite: false,
     withIcon: false,
     disabled: false,
+    autocomplete: 'off',
 });
 
 const emit = defineEmits(['showPasswordStrength', 'hidePasswordStrength', 'setData']);
diff --git a/web/satellite/src/components/modals/ChangePasswordModal.vue b/web/satellite/src/components/modals/ChangePasswordModal.vue
index 7f2d0249c..4b95b3d6a 100644
--- a/web/satellite/src/components/modals/ChangePasswordModal.vue
+++ b/web/satellite/src/components/modals/ChangePasswordModal.vue
@@ -14,6 +14,7 @@
                     label="Old Password"
                     placeholder="Old Password"
                     is-password
+                    :autocomplete="autocompleteValue"
                     :error="oldPasswordError"
                     @setData="setOldPassword"
                 />
@@ -62,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { AuthHttpApi } from '@/api/auth';
@@ -80,8 +81,8 @@ import VModal from '@/components/common/VModal.vue';
 
 import ChangePasswordIcon from '@/../static/images/account/changePasswordPopup/changePassword.svg';
 
+const { config } = useConfigStore().state;
 const analyticsStore = useAnalyticsStore();
-const configStore = useConfigStore();
 const appStore = useAppStore();
 const notify = useNotify();
 const router = useRouter();
@@ -97,6 +98,13 @@ const newPasswordError = ref<string>('');
 const confirmationPasswordError = ref<string>('');
 const isPasswordStrengthShown = ref<boolean>(false);
 
+/**
+ * Returns formatted autocomplete value.
+ */
+const autocompleteValue = computed((): string => {
+    return `section-${config.satelliteName.substring(0, 2).toLowerCase()} current-password`;
+});
+
 /**
  * Enables password strength info container.
  */
@@ -145,8 +153,6 @@ async function onUpdateClick(): Promise<void> {
         hasError = true;
     }
 
-    const config = configStore.state.config;
-
     if (newPassword.value.length < config.passwordMinimumLength) {
         newPasswordError.value = `Invalid password. Use ${config.passwordMinimumLength} or more characters`;
         hasError = true;
diff --git a/web/satellite/src/components/modals/EnterBucketPassphraseModal.vue b/web/satellite/src/components/modals/EnterBucketPassphraseModal.vue
index 2682f3a19..1ba4e88e2 100644
--- a/web/satellite/src/components/modals/EnterBucketPassphraseModal.vue
+++ b/web/satellite/src/components/modals/EnterBucketPassphraseModal.vue
@@ -20,6 +20,7 @@
                     :error="enterError"
                     role-description="passphrase"
                     is-password
+                    :autocomplete="autocompleteValue"
                     :disabled="isLoading"
                     @setData="setPassphrase"
                 />
@@ -96,6 +97,20 @@ const passphrase = ref<string>('');
 const isLoading = ref<boolean>(false);
 const isWarningState = ref<boolean>(false);
 
+/**
+ * Returns formatted autocomplete value.
+ */
+const autocompleteValue = computed((): string => {
+    return `section-${selectedProjectID.value.toLowerCase()} new-password`;
+});
+
+/**
+ * Returns selected project ID from store.
+ */
+const selectedProjectID = computed((): string => {
+    return projectsStore.state.selectedProject.id;
+});
+
 /**
  * Returns chosen bucket name from store.
  */
@@ -145,7 +160,7 @@ async function onContinue(): Promise<void> {
 
     try {
         bucketsStore.setPassphrase(passphrase.value);
-        await bucketsStore.setS3Client(projectsStore.state.selectedProject.id);
+        await bucketsStore.setS3Client(selectedProjectID.value);
         const count: number = await bucketsStore.getObjectsCount(bucketName.value);
         if (bucketObjectCount.value > count && bucketObjectCount.value <= NUMBER_OF_DISPLAYED_OBJECTS) {
             isWarningState.value = true;
diff --git a/web/satellite/src/components/modals/EnterPassphraseModal.vue b/web/satellite/src/components/modals/EnterPassphraseModal.vue
index a093e8690..b9bf783b2 100644
--- a/web/satellite/src/components/modals/EnterPassphraseModal.vue
+++ b/web/satellite/src/components/modals/EnterPassphraseModal.vue
@@ -19,6 +19,7 @@
                     :error="enterError"
                     role-description="passphrase"
                     is-password
+                    :autocomplete="autocompleteValue"
                     @setData="setPassphrase"
                 />
                 <div class="modal__buttons">
@@ -45,13 +46,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useAppStore } from '@/store/modules/appStore';
 import { useBucketsStore } from '@/store/modules/bucketsStore';
 import { MODALS } from '@/utils/constants/appStatePopUps';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+import { useProjectsStore } from '@/store/modules/projectsStore';
 
 import VModal from '@/components/common/VModal.vue';
 import VInput from '@/components/common/VInput.vue';
@@ -62,10 +64,25 @@ import AccessEncryptionIcon from '@/../static/images/accessGrants/newCreateFlow/
 const analyticsStore = useAnalyticsStore();
 const bucketsStore = useBucketsStore();
 const appStore = useAppStore();
+const projectsStore = useProjectsStore();
 
 const enterError = ref<string>('');
 const passphrase = ref<string>('');
 
+/**
+ * Returns formatted autocomplete value.
+ */
+const autocompleteValue = computed((): string => {
+    return `section-${selectedProjectID.value.toLowerCase()} new-password`;
+});
+
+/**
+ * Returns selected project ID from store.
+ */
+const selectedProjectID = computed((): string => {
+    return projectsStore.state.selectedProject.id;
+});
+
 /**
  * Sets passphrase.
  */
diff --git a/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue b/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue
index 4aa5c5e30..945f7c6f8 100644
--- a/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue
+++ b/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue
@@ -9,10 +9,11 @@
         </p>
         <VInput
             label="Encryption Passphrase"
-            :is-password="true"
+            is-password
             width="100%"
             height="56px"
             placeholder="Enter Encryption Passphrase"
+            :autocomplete="autocompleteValue"
             :error="enterError"
             @setData="setPassphrase"
         />
@@ -40,12 +41,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useNotify } from '@/utils/hooks';
 import { EdgeCredentials } from '@/types/accessGrants';
 import { useAppStore } from '@/store/modules/appStore';
 import { useBucketsStore } from '@/store/modules/bucketsStore';
+import { useProjectsStore } from '@/store/modules/projectsStore';
 
 import VButton from '@/components/common/VButton.vue';
 import VInput from '@/components/common/VInput.vue';
@@ -58,11 +60,26 @@ const props = withDefaults(defineProps<{
 
 const bucketsStore = useBucketsStore();
 const appStore = useAppStore();
+const projectsStore = useProjectsStore();
 const notify = useNotify();
 
 const passphrase = ref<string>('');
 const enterError = ref<string>('');
 
+/**
+ * Returns formatted autocomplete value.
+ */
+const autocompleteValue = computed((): string => {
+    return `section-${selectedProjectID.value.toLowerCase()} new-password`;
+});
+
+/**
+ * Returns selected project ID from store.
+ */
+const selectedProjectID = computed((): string => {
+    return projectsStore.state.selectedProject.id;
+});
+
 /**
  * Sets passphrase input value to local variable.
  * Resets error is present.
diff --git a/web/satellite/src/views/AuthorizeArea.vue b/web/satellite/src/views/AuthorizeArea.vue
index a6ed35691..a1663da53 100644
--- a/web/satellite/src/views/AuthorizeArea.vue
+++ b/web/satellite/src/views/AuthorizeArea.vue
@@ -61,6 +61,7 @@
                                 role-description="passphrase"
                                 placeholder="Passphrase"
                                 :error="passphraseErr"
+                                :autocomplete="autocompleteValue"
                                 is-password
                                 @setData="setPassphrase"
                             />
@@ -88,7 +89,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Validator } from '@/utils/validation';
@@ -156,6 +157,13 @@ const oauthData = ref<{
     scope?: string;
 }>({});
 
+/**
+ * Returns formatted autocomplete value.
+ */
+const autocompleteValue = computed((): string => {
+    return `section-${selectedProjectID.value.toLowerCase()} new-password`;
+});
+
 function slugify(name: string): string {
     name = name.toLowerCase();
     name = name.replace(/\s+/g, '-');
diff --git a/web/satellite/src/views/LoginArea.vue b/web/satellite/src/views/LoginArea.vue
index ee7638bd0..bae881cf2 100644
--- a/web/satellite/src/views/LoginArea.vue
+++ b/web/satellite/src/views/LoginArea.vue
@@ -83,6 +83,7 @@
                             placeholder="Password"
                             :error="passwordError"
                             is-password
+                            :autocomplete="autocompleteValue"
                             role-description="password"
                             @setData="setPassword"
                         />
@@ -222,6 +223,13 @@ const notify = useNotify();
 const router = useRouter();
 const route = useRoute();
 
+/**
+ * Returns formatted autocomplete value.
+ */
+const autocompleteValue = computed((): string => {
+    return `section-${satelliteName.value.substring(0, 2).toLowerCase()} current-password`;
+});
+
 /**
  * Name of the current satellite.
  */
diff --git a/web/satellite/src/views/ResetPassword.vue b/web/satellite/src/views/ResetPassword.vue
index 46e4a79da..a1d363fc4 100644
--- a/web/satellite/src/views/ResetPassword.vue
+++ b/web/satellite/src/views/ResetPassword.vue
@@ -95,8 +95,8 @@ import KeyIcon from '@/../static/images/resetPassword/success.svg';
 import LogoIcon from '@/../static/images/logo.svg';
 import GreyWarningIcon from '@/../static/images/common/greyWarning.svg';
 
+const { config } = useConfigStore().state;
 const analyticsStore = useAnalyticsStore();
-const configStore = useConfigStore();
 const appStore = useAppStore();
 const notify = useNotify();
 const router = useRouter();
@@ -172,7 +172,6 @@ async function onResetClick(): Promise<void> {
  */
 function validateFields(): boolean {
     let isNoErrors = true;
-    const config = configStore.state.config;
 
     if (password.value.length < config.passwordMinimumLength || password.value.length > config.passwordMaximumLength) {
         passwordError.value = 'Invalid password';
@@ -205,7 +204,7 @@ function hidePasswordStrength(): void {
  * Redirects to storj.io homepage.
  */
 function onLogoClick(): void {
-    window.location.href = configStore.state.config.homepageURL;
+    window.location.href = config.homepageURL;
 }
 
 /**