From cbbf040de24dfdb1ad277c9751c3ee4f339bfcf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20M=C3=A4ki?= <antti@anttimaki.com>
Date: Wed, 22 Jan 2025 16:21:22 +0200
Subject: [PATCH] Improve "enter profile code" phase of profile import modal

- Remove the somewhat unnecessary "You haven't entered a code" and "You
  may import the profile" badges that mostly just look awkward
- Show "Invalid code" badge only if a profile code has been entered
- Remove the big red button when a valid profile code hasn't been
  entered. This looked like an error state before user has entered the
  code. Just disabling the Continue button if the code is invalid seems
  sufficient
- Combine the two remaining buttons into one
- Prevent submitting the form when the download is already in progress,
  both via button and key press
- Move isProfileCodeValid helper to modal components as that's the only
  place where it's used. Remove the unnecessary argument to make the
  method a computed value
---
 src/components/mixins/ProfilesMixin.vue       |  6 ----
 .../profiles-modals/ImportProfileModal.vue    | 33 ++++++++-----------
 2 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/src/components/mixins/ProfilesMixin.vue b/src/components/mixins/ProfilesMixin.vue
index 470b86963..f17f86364 100644
--- a/src/components/mixins/ProfilesMixin.vue
+++ b/src/components/mixins/ProfilesMixin.vue
@@ -4,8 +4,6 @@ import Component from 'vue-class-component';
 
 import sanitize from "sanitize-filename";
 
-const VALID_PROFILE_CODE_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-
 @Component
 export default class ProfilesMixin extends Vue {
 
@@ -35,9 +33,5 @@ export default class ProfilesMixin extends Vue {
         return sanitize(nameToSanitize);
     }
 
-    isProfileCodeValid(profileImportCode: string): boolean {
-        return VALID_PROFILE_CODE_REGEX.test(profileImportCode);
-    }
-
 }
 </script>
diff --git a/src/components/profiles-modals/ImportProfileModal.vue b/src/components/profiles-modals/ImportProfileModal.vue
index a896f9c5a..70ef23421 100644
--- a/src/components/profiles-modals/ImportProfileModal.vue
+++ b/src/components/profiles-modals/ImportProfileModal.vue
@@ -16,6 +16,7 @@ import { ModalCard } from "../all";
 import ProfilesMixin from "../mixins/ProfilesMixin.vue";
 import OnlineModList from "../views/OnlineModList.vue";
 
+const VALID_PROFILE_CODE_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 
 @Component({
     components: { OnlineModList, ModalCard}
@@ -80,6 +81,10 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
         return this.profileMods.unknown.join(', ');
     }
 
+    get isProfileCodeValid(): boolean {
+        return VALID_PROFILE_CODE_REGEX.test(this.profileImportCode);
+    }
+
     // Fired when user selects to import either from file or code.
     async onFileOrCodeSelect(mode: 'FILE' | 'CODE') {
         if (mode === 'FILE') {
@@ -270,39 +275,27 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
         <template v-slot:body>
             <input
                 v-model="profileImportCode"
-                @keyup.enter="isProfileCodeValid(profileImportCode) && onProfileCodeEntered()"
+                @keyup.enter="isProfileCodeValid && !importViaCodeInProgress && onProfileCodeEntered()"
                 id="import-profile-modal-profile-code"
                 class="input"
                 type="text"
                 ref="profileCodeInput"
+                placeholder="Enter the profile code"
                 autocomplete="off"
             />
             <br />
             <br />
-            <span class="tag is-dark" v-if="profileImportCode === ''">You haven't entered a code</span>
-            <span class="tag is-danger" v-else-if="!isProfileCodeValid(profileImportCode)">Invalid code, check for typos</span>
-            <span class="tag is-success" v-else>You may import the profile</span>
+            <span class="tag is-danger" v-if="profileImportCode !== '' && !isProfileCodeValid">
+                Invalid code, check for typos
+            </span>
         </template>
         <template v-slot:footer>
             <button
-                id="modal-import-profile-from-code-invalid"
-                class="button is-danger"
-                v-if="!isProfileCodeValid(profileImportCode)">
-                Fix issues before importing
-            </button>
-            <button
-                disabled
-                id="modal-import-profile-from-code-loading"
-                class="button is-disabled"
-                v-else-if="importViaCodeInProgress">
-                Loading...
-            </button>
-            <button
+                :disabled="!isProfileCodeValid || importViaCodeInProgress"
                 id="modal-import-profile-from-code"
                 class="button is-info"
-                @click="onProfileCodeEntered();"
-                v-else>
-                Continue
+                @click="onProfileCodeEntered();">
+                {{importViaCodeInProgress ? 'Loading...' : 'Continue'}}
             </button>
         </template>
     </ModalCard>