refactor(ui): new settings interface

- New appearance for the Settings inputs.
- New Unitary Tests to insure the correct behavior on the
refactored components

Author: luannmoreira

ui/package-lock.json

@@ -21,7 +21,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@mdi/font": "7.2.96",
+    "@mdi/font": "^7.4.47",
     "@productdevbook/chatwoot": "github:shellhub-io/chatwoot#build",
     "@rollup/plugin-inject": "^5.0.3",
     "@rushstack/eslint-patch": "^1.2.0",

ui/package.json

@@ -50,7 +50,7 @@ const {
   publicKeyRemove,
   // Namespace
   namespaceCreate,
-  NamespaceEdit,
+  namespaceEdit,
   namespaceAddMember,
   namespaceEditMember,
   namespaceRemoveMember,
@@ -106,7 +106,7 @@ export const actions: { [key: string]: any } = {
   },
   namespace: {
     create: namespaceCreate,
-    rename: NamespaceEdit,
+    rename: namespaceEdit,
     addMember: namespaceAddMember,
     editMember: namespaceEditMember,
     removeMember: namespaceRemoveMember,

ui/src/authorizer.ts

@@ -50,10 +50,7 @@
           class="pl-2 pr-2 mr-4"
           data-test="user-menu-btn"
         >
-          <v-avatar size="x-small" color="primary" class="border">
-            <v-img v-if="!avatarLoadingFailed" :src="avatar" v-on:error="avatarLoadingFailed = true" data-test="user-avatar" />
-            <v-icon color="surface" v-if="avatarLoadingFailed" data-test="user-not-found-avatar">mdi-account</v-icon>
-          </v-avatar>
+          <UserIcon size="1.5rem" :email="userEmail" data-test="user-icon" />
         </v-btn>
       </template>
       <v-list class="bg-v-theme-surface">
@@ -101,11 +98,12 @@ import {
   ref,
 } from "vue";
 import { useRouter, useRoute, RouteLocationRaw, RouteLocation } from "vue-router";
-import { computedAsync, useEventListener } from "@vueuse/core";
+import { useEventListener } from "@vueuse/core";
 import { useChatWoot } from "@productdevbook/chatwoot/vue";
 import { useStore } from "../../store";
 import { createNewClient } from "../../api/http";
 import handleError from "../../utils/handleError";
+import UserIcon from "../User/UserIcon.vue";
 import Notification from "./Notifications/Notification.vue";
 import { envVariables } from "@/envVariables";
 
@@ -137,17 +135,6 @@ const identifier = computed(() => store.getters["support/getIdentifier"]);
 const currentUser = computed(() => store.getters["auth/currentUser"]);
 const isDarkMode = ref(getStatusDarkMode.value === "dark");
 
-const avatarLoadingFailed = ref(false);
-const avatar = computedAsync(
-  async () => {
-    const encoder = new TextEncoder();
-    const data = encoder.encode(store.getters["auth/email"]);
-    const hash = await crypto.subtle.digest("SHA-256", data);
-    const digest = Array.from(new Uint8Array(hash)).map((b) => b.toString(16).padStart(2, "0")).join("");
-    return `https://gravatar.com/avatar/${digest}?d=404`;
-  },
-  "",
-);
 const showNavigationDrawer = defineModel<boolean>();
 
 const triggerClick = (item: MenuItem): void => {

ui/src/components/AppBar/AppBar.vue

@@ -1,11 +1,4 @@
 <template>
-  <v-btn
-    @click="openDialog"
-    color="primary"
-    tabindex="0"
-    variant="elevated"
-    data-test="disable-dialog-btn"
-  >Disable MFA</v-btn>
   <v-dialog
     max-width="400px"
     scrollable
@@ -52,22 +45,6 @@
               @keyup.enter="verificationCode ? mfaValidate() : false"
               label="Verification Code"
               variant="underlined" />
-            <v-card-actions class="justify-center pa-0">
-              <v-row class="ml-4 mr-4">
-                <v-col>
-                  <v-btn
-                    :disabled="!verificationCode"
-                    data-test="verify-btn"
-                    color="primary"
-                    variant="tonal"
-                    block
-                    @click="mfaValidate()"
-                  >
-                    Verify
-                  </v-btn>
-                </v-col>
-              </v-row>
-            </v-card-actions>
             <v-row>
               <v-col class="text-subtitle-2 mt-2">
                 If you lost your MFA TOPT Provider, and want to use your recovery code,
@@ -83,6 +60,22 @@
                 </v-btn>
               </v-col>
             </v-row>
+            <v-card-actions class="justify-center pa-0">
+              <v-row class="ml-4 mr-4 mt-2">
+                <v-col>
+                  <v-btn
+                    :disabled="!verificationCode"
+                    data-test="verify-btn"
+                    color="primary"
+                    variant="tonal"
+                    block
+                    @click="mfaValidate()"
+                  >
+                    Verify
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-card-actions>
           </v-window-item>
           <v-window-item :value="2">
             <v-slide-y-reverse-transition v-if="showAlert">
@@ -174,15 +167,13 @@ import handleError from "@/utils/handleError";
 import Logo from "@/assets/logo-inverted.png";
 import { INotificationsSuccess } from "@/interfaces/INotifications";
 
-const emits = defineEmits(["success"]);
-
 const store = useStore();
 const verificationCode = ref("");
 const recoveryCode = ref("");
 const el = ref<number>(1);
 const showAlert = ref(false);
 const alertMessage = ref("");
-const showDialog = ref(false);
+const showDialog = defineModel({ default: false });
 const userMail = computed(() => localStorage.getItem("email"));
 
 const mfaValidate = async () => {
@@ -201,7 +192,7 @@ const mfaValidate = async () => {
       "snackbar/showSnackbarSuccessAction",
       INotificationsSuccess.cancelMfa,
     );
-    emits("success");
+    showDialog.value = false;
   } catch (error) {
     if (axios.isAxiosError(error)) {
       const axiosError = error as AxiosError;
@@ -248,9 +239,5 @@ const close = () => {
   el.value = 1;
 };
 
-const openDialog = () => {
-  showDialog.value = true;
-};
-
-defineExpose({ el });
+defineExpose({ el, showDialog });
 </script>