Minor refactor

Signed-off-by: Christopher Ng <chrng8@gmail.com>

diff --git a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue
index 1ff7014ed731e33b775413e37433d6364191d04a..e831740fc5c33d9dac6ee19cbf4271418973149a 100644 (file)
--- a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue
+++ b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue
@@ -31,7 +31,7 @@
                        autocapitalize="none"
                        autocomplete="on"
                        autocorrect="off"
-                       required="true"
+                       required
                        @input="onDisplayNameChange">
 
                <div class="displayname__actions-container">
@@ -104,7 +104,7 @@ export default {
 
                handleResponse({ displayName, status, errorMessage, error }) {
                        if (status === 'ok') {
-                               // Ensure that local initialDiplayName state reflects server state
+                               // Ensure that local state reflects server state
                                this.initialDisplayName = displayName
                                this.showCheckmarkIcon = true
                                setTimeout(() => { this.showCheckmarkIcon = false }, 2000)
@@ -124,9 +124,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-       .displayname {
-               display: grid;
-               align-items: center;
+.displayname {
+       display: grid;
+       align-items: center;
 
                input {
                        grid-area: 1 / 1;
@@ -142,38 +142,38 @@ export default {
                        color: var(--color-main-text);
                }
 
-               .displayname__actions-container {
-                       grid-area: 1 / 1;
-                       justify-self: flex-end;
-                       height: 30px;
-
-                       display: flex;
-                       gap: 0 2px;
-                       margin-right: 5px;
-
-                       .icon-checkmark,
-                       .icon-error {
-                               height: 30px !important;
-                               min-height: 30px !important;
-                               width: 30px !important;
-                               min-width: 30px !important;
-                               top: 0;
-                               right: 0;
-                               float: none;
-                       }
+       .displayname__actions-container {
+               grid-area: 1 / 1;
+               justify-self: flex-end;
+               height: 30px;
+
+               display: flex;
+               gap: 0 2px;
+               margin-right: 5px;
+
+               .icon-checkmark,
+               .icon-error {
+                       height: 30px !important;
+                       min-height: 30px !important;
+                       width: 30px !important;
+                       min-width: 30px !important;
+                       top: 0;
+                       right: 0;
+                       float: none;
                }
        }
+}
 
-       .fade-enter,
-       .fade-leave-to {
-               opacity: 0;
-       }
+.fade-enter,
+.fade-leave-to {
+       opacity: 0;
+}
 
-       .fade-enter-active {
-               transition: opacity 200ms ease-out;
-       }
+.fade-enter-active {
+       transition: opacity 200ms ease-out;
+}
 
-       .fade-leave-active {
-               transition: opacity 300ms ease-out;
-       }
+.fade-leave-active {
+       transition: opacity 300ms ease-out;
+}
 </style>

diff --git a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue
index 05b4836b61566e8eeeca3fb7079f5c104c577539..f15e02fe1c90b259d506852fcfd1bd219062fd30 100644 (file)
--- a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue
+++ b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue
@@ -87,4 +87,5 @@ export default {
                        cursor: default;
                }
        }
+}
 </style>

diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
index 036c35425a2ff380d9fe0bb2b06f1709380541a6..d6328a8da33a973828e7f1c3399b42d7bc134e52 100644 (file)
--- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
@@ -23,6 +23,7 @@
        <div>
                <div class="email">
                        <input
+                               id="email"
                                ref="email"
                                type="email"
                                :name="inputName"
@@ -31,7 +32,7 @@
                                autocapitalize="none"
                                autocomplete="on"
                                autocorrect="off"
-                               required="true"
+                               required
                                @input="onEmailChange">
 
                        <div class="email__actions-container">
@@ -277,7 +278,7 @@ export default {
 
                handleResponse({ email, status, errorMessage, error }) {
                        if (status === 'ok') {
-                               // Ensure that local initialEmail state reflects server state
+                               // Ensure that local state reflects server state
                                this.initialEmail = email
                                this.showCheckmarkIcon = true
                                setTimeout(() => { this.showCheckmarkIcon = false }, 2000)
@@ -297,9 +298,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-       .email {
-               display: grid;
-               align-items: center;
+.email {
+       display: grid;
+       align-items: center;
 
                input {
                        grid-area: 1 / 1;
@@ -320,48 +321,53 @@ export default {
                        justify-self: flex-end;
                        height: 30px;
 
-                       display: flex;
-                       gap: 0 2px;
-                       margin-right: 5px;
+       .email__actions-container {
+               grid-area: 1 / 1;
+               justify-self: flex-end;
+               height: 30px;
 
-                       .email__actions {
-                               opacity: 0.4 !important;
+               display: flex;
+               gap: 0 2px;
+               margin-right: 5px;
 
-                               &:hover {
-                                       opacity: 0.8 !important;
-                               }
+               .email__actions {
+                       opacity: 0.4 !important;
 
-                               &::v-deep button {
-                                       height: 30px !important;
-                                       min-height: 30px !important;
-                                       width: 30px !important;
-                                       min-width: 30px !important;
-                               }
+                       &:hover {
+                               opacity: 0.8 !important;
                        }
 
-                       .icon-checkmark,
-                       .icon-error {
+                       &::v-deep button {
                                height: 30px !important;
                                min-height: 30px !important;
                                width: 30px !important;
                                min-width: 30px !important;
-                               top: 0;
-                               right: 0;
-                               float: none;
                        }
                }
-       }
 
-       .fade-enter,
-       .fade-leave-to {
-               opacity: 0;
+               .icon-checkmark,
+               .icon-error {
+                       height: 30px !important;
+                       min-height: 30px !important;
+                       width: 30px !important;
+                       min-width: 30px !important;
+                       top: 0;
+                       right: 0;
+                       float: none;
+               }
        }
+}
 
-       .fade-enter-active {
-               transition: opacity 200ms ease-out;
-       }
+.fade-enter,
+.fade-leave-to {
+       opacity: 0;
+}
 
-       .fade-leave-active {
-               transition: opacity 300ms ease-out;
-       }
+.fade-enter-active {
+       transition: opacity 200ms ease-out;
+}
+
+.fade-leave-active {
+       transition: opacity 300ms ease-out;
+}
 </style>

diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
index a78bae03ed761a92b53fdbaa2a51a3d3950a1507..52bca9a2f4923cca34a0a128d73890ea82b155cb 100644 (file)
--- a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
@@ -171,4 +171,5 @@ export default {
                        cursor: default;
                }
        }
+}
 </style>

diff --git a/apps/settings/src/components/PersonalInfo/shared/AddButton.vue b/apps/settings/src/components/PersonalInfo/shared/AddButton.vue
index 32605c3fdcf9f9823eb376fce248a4e84ac7641b..07fc5bbcdbd3c4a1b7a982a5224d05849f5ee264 100644 (file)
--- a/apps/settings/src/components/PersonalInfo/shared/AddButton.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/AddButton.vue
@@ -22,7 +22,7 @@
 <template>
        <button
                :disabled="disabled"
-               @click.stop.prevent="onClick">
+               v-on="$listeners">
                <span class="icon icon-add" />
                {{ t('settings', 'Add') }}
        </button>
@@ -38,12 +38,6 @@ export default {
                        default: true,
                },
        },
-
-       methods: {
-               onClick(e) {
-                       this.$emit('click', e)
-               },
-       },
 }
 </script>
 

diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
index ab5afe060c84bab4ece900526674326ec482437d..e4ff0846a07daa304f3feb8bbb79c5b4597936fb 100644 (file)
--- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -68,7 +68,7 @@ export default {
                },
                isEditable: {
                        type: Boolean,
-                       required: true,
+                       default: true,
                },
                isMultiValueSupported: {
                        type: Boolean,
@@ -76,7 +76,7 @@ export default {
                },
                isValidSection: {
                        type: Boolean,
-                       default: true,
+                       default: false,
                },
                labelFor: {
                        type: String,