web/satellite: update app css to append asterisk (*) to labels of req…

…uired inputs Added styling to auto-append asterisk (*) to labels of required inputs. Added missing required attribute to text fields with 'required' validation rule. Fixed small back navigation bug for create access grant flow. Fixed file name typo for Applications page. This change resolves post-merge comments of those changes #12452 and #12495. Change-Id: I163e6999441501a92b2ea7a05bdc1d869d0cabeb
storj · Feb 26, 2024 · 3bc8735 · 3bc8735
1 parent c06e9be
commit 3bc8735
Show file tree

Hide file tree

Showing 12 changed files with 22 additions and 5 deletions.
diff --git a/web/satellite/src/assets/apps/mastadon.png → web/satellite/src/assets/apps/mastodon.png b/web/satellite/src/assets/apps/mastadon.png → web/satellite/src/assets/apps/mastodon.png
diff --git a/web/satellite/src/components/dialogs/CreateAccessDialog.vue b/web/satellite/src/components/dialogs/CreateAccessDialog.vue
@@ -341,6 +341,10 @@ const stepInfos: Record<CreateAccessStep, StepInfo> = {
 
     [CreateAccessStep.ConfirmDetails]: new StepInfo(
         () => {
+            if (accessTypes.value.includes(AccessType.APIKey)) {
+                return CreateAccessStep.ChoosePermission;
+            }
+
             switch (passphraseOption.value) {
             case PassphraseOption.EnterNewPassphrase: return CreateAccessStep.EnterNewPassphrase;
             case PassphraseOption.GenerateNewPassphrase: return CreateAccessStep.PassphraseGenerated;

diff --git a/web/satellite/src/components/dialogs/CreateProjectDialog.vue b/web/satellite/src/components/dialogs/CreateProjectDialog.vue
@@ -55,6 +55,7 @@
                                 persistent-counter
                                 :hide-details="false"
                                 autofocus
+                                required
                             />
                             <v-btn
                                 v-if="!isDescriptionShown"

diff --git a/web/satellite/src/components/dialogs/EnterBucketPassphraseDialog.vue b/web/satellite/src/components/dialogs/EnterBucketPassphraseDialog.vue
@@ -52,6 +52,7 @@
                                 :hide-details="false"
                                 :rules="[ RequiredRule ]"
                                 autofocus
+                                required
                             >
                                 <template #append-inner>
                                     <password-input-eye-icons

diff --git a/web/satellite/src/components/dialogs/EnterProjectPassphraseDialog.vue b/web/satellite/src/components/dialogs/EnterProjectPassphraseDialog.vue
@@ -55,6 +55,7 @@
                                 :hide-details="false"
                                 :rules="[ RequiredRule ]"
                                 autofocus
+                                required
                             >
                                 <template #append-inner>
                                     <password-input-eye-icons

diff --git a/web/satellite/src/components/dialogs/accountSetupSteps/BusinessStep.vue b/web/satellite/src/components/dialogs/accountSetupSteps/BusinessStep.vue
@@ -28,7 +28,7 @@
                         id="First Name"
                         v-model="firstName"
                         :rules="[RequiredRule]"
-                        label="First Name*"
+                        label="First Name"
                         hide-details="auto"
                         required
                     />
@@ -48,7 +48,7 @@
                         id="Company Name"
                         v-model="companyName"
                         :rules="[RequiredRule]"
-                        label="Company Name*"
+                        label="Company Name"
                         hide-details="auto"
                         required
                     />
@@ -59,7 +59,7 @@
                         v-model="position"
                         :rules="[RequiredRule]"
                         :items="['Executive/C-Level', 'Director', 'Manager', 'Software Developer', 'Partner', 'Student/Professor', 'Other']"
-                        label="Job Role*"
+                        label="Job Role"
                         variant="outlined"
                         hide-details="auto"
                         required

diff --git a/web/satellite/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue b/web/satellite/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue
@@ -18,6 +18,7 @@
                     :hide-details="false"
                     :rules="[ RequiredRule ]"
                     autofocus
+                    required
                     class="mt-2 mb-n4"
                 >
                     <template #append-inner>

diff --git a/web/satellite/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue b/web/satellite/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue
@@ -26,6 +26,7 @@
                             :rules="passphraseRules"
                             :hide-details="false"
                             autofocus
+                            required
                         >
                             <template #append-inner>
                                 <password-input-eye-icons

diff --git a/web/satellite/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue b/web/satellite/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue
@@ -15,6 +15,7 @@
                     :rules="nameRules"
                     maxlength="100"
                     class="mb-n2"
+                    required
                 />
             </v-col>
             <v-col cols="12">
@@ -26,7 +27,7 @@
                             :key="accessType"
                             v-model="typeInfos[accessType].model.value"
                             density="compact"
-                            :hide-details="true"
+                            hide-details
                         >
                             <template #label>
                                 <span>{{ typeInfos[accessType].name }}</span>

diff --git a/web/satellite/src/styles/styles.scss b/web/satellite/src/styles/styles.scss
@@ -493,6 +493,11 @@ table {
   background: rgb(var(--v-theme-background));
 }
 
+.v-field .v-field-label:has(~ .v-field__input:required)::after,
+.v-field .v-field-label:has(~ .v-field__input > input:required)::after {
+  content: "*";
+}
+
 // fix for the table footer info width being too big for its small content
 // a huge min-width was added in Vuetify 3.4.11
 // https://github.com/vuetifyjs/vuetify/commit/a5254a2bada424c0bbdbc9d86fcea2afb6a86dc2

diff --git a/web/satellite/src/types/applications.ts b/web/satellite/src/types/applications.ts
@@ -17,7 +17,7 @@ import HammerspaceIcon from '@/assets/apps/hammerspace.png';
 import ElementsIcon from '@/assets/apps/elements.png';
 import DockerIcon from '@/assets/apps/docker.png';
 import PixelfedIcon from '@/assets/apps/pixelfed.png';
-import MastodonIcon from '@/assets/apps/mastadon.png';
+import MastodonIcon from '@/assets/apps/mastodon.png';
 import DataverseIcon from '@/assets/apps/dataverse.png';
 import CyberDuckIcon from '@/assets/apps/cyberduck.png';
 import AtempoIcon from '@/assets/apps/atempo.png';

diff --git a/web/satellite/src/views/Signup.vue b/web/satellite/src/views/Signup.vue
@@ -80,6 +80,7 @@
                                     hide-details="auto"
                                     :type="showPassword ? 'text' : 'password'"
                                     :rules="passwordRules"
+                                    required
                                     @update:focused="showPasswordStrength = !showPasswordStrength"
                                 >
                                     <template #append-inner>
@@ -106,6 +107,7 @@
                                 hide-details="auto"
                                 :type="showPassword ? 'text' : 'password'"
                                 :rules="repeatPasswordRules"
+                                required
                             >
                                 <template #append-inner>
                                     <password-input-eye-icons