From d48b3342f73eea3beee51742279595b89eef5ccf Mon Sep 17 00:00:00 2001
From: Luann Moreira <luannmcurioso@gmail.com>
Date: Tue, 7 Nov 2023 13:14:26 -0300
Subject: [PATCH] refactor(ui): refactored profile settings to vue 3
 composition api

This commit is aimed to refactor the profile settings to Vue 3 Composition
Api and create unitary tests for it's functions and store methods.
---
 ui/src/components/Setting/SettingProfile.vue  | 399 ++++++++----------
 .../components/Setting/SettingProfile.spec.ts | 214 ++++++++++
 .../__snapshots__/SettingProfile.spec.ts.snap | 306 ++++++++++++++
 3 files changed, 707 insertions(+), 212 deletions(-)
 create mode 100644 ui/tests/components/Setting/SettingProfile.spec.ts
 create mode 100644 ui/tests/components/Setting/__snapshots__/SettingProfile.spec.ts.snap

diff --git a/ui/src/components/Setting/SettingProfile.vue b/ui/src/components/Setting/SettingProfile.vue
index 6eb11ad6cd1..26e9e647a1a 100644
--- a/ui/src/components/Setting/SettingProfile.vue
+++ b/ui/src/components/Setting/SettingProfile.vue
@@ -3,7 +3,7 @@
     <v-row align="center" justify="center" class="mt-4">
       <v-col sm="8">
         <v-row>
-          <v-col>
+          <v-col data-test="account-header">
             <h3>Account</h3>
           </v-col>
 
@@ -13,17 +13,18 @@
             <v-btn
               v-if="!editDataStatus"
               color="primary"
+              data-test="change-data-btn"
               @click="editDataStatus = !editDataStatus"
             >
               Change Data
             </v-btn>
 
             <div v-if="editDataStatus" class="d-flex align-center">
-              <v-btn class="mr-2" color="primary" @click="cancel('data')">
+              <v-btn data-test="cancel-btn" class="mr-2" color="primary" @click="cancel('data')">
                 Cancel
               </v-btn>
 
-              <v-btn color="primary" @click="updateUserData"> Save </v-btn>
+              <v-btn data-test="update-user-btn" color="primary" @click="updateUserData"> Save </v-btn>
             </div>
           </v-col>
         </v-row>
@@ -64,7 +65,7 @@
         <v-divider class="mb-6" />
 
         <v-row>
-          <v-col>
+          <v-col data-test="password-header">
             <h3>Password</h3>
           </v-col>
 
@@ -75,17 +76,19 @@
               v-if="!editPasswordStatus"
               color="primary"
               @click="editPasswordStatus = !editPasswordStatus"
+              data-test="change-password-btn"
             >
               Change Password
             </v-btn>
 
             <div v-if="editPasswordStatus" class="d-flex align-center">
-              <v-btn class="mr-2" color="primary" @click="cancel('password')">
+              <v-btn data-test="cancel-password-btn" class="mr-2" color="primary" @click="cancel('password')">
                 Cancel
               </v-btn>
 
               <v-btn
                 color="primary"
+                data-test="update-password-btn"
                 @click="updatePassword"
                 :disabled="hasUpdatePasswordError"
               > Save </v-btn>
@@ -141,9 +144,9 @@
   </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { defineComponent, ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useField } from "vee-validate";
 import axios, { AxiosError } from "axios";
 import * as yup from "yup";
@@ -151,225 +154,197 @@ import { useStore } from "../../store";
 import { INotificationsSuccess } from "../../interfaces/INotifications";
 import handleError from "@/utils/handleError";
 
-export default defineComponent({
-  setup() {
-    const store = useStore();
-    const editDataStatus = ref(false);
-    const editPasswordStatus = ref(false);
-    const show = ref(false);
-    const showCurrentPassword = ref(false);
-    const showNewPassword = ref(false);
-    const showConfirmPassword = ref(false);
-
-    const {
-      value: name,
-      errorMessage: nameError,
-      setErrors: setNameError,
-    } = useField<string>("name", yup.string().required(), {
-      initialValue: "",
-    });
-
-    const {
-      value: username,
-      errorMessage: usernameError,
-      setErrors: setUsernameError,
-    } = useField<string>("username", yup.string().required(), {
-      initialValue: "",
-    });
-
-    const {
-      value: email,
-      errorMessage: emailError,
-      setErrors: setEmailError,
-    } = useField<string>("email", yup.string().email().required(), {
-      initialValue: "",
-    });
-
-    const {
-      value: currentPassword,
-      errorMessage: currentPasswordError,
-      resetField: resetCurrentPassword,
-    } = useField<string>("currentPassword", yup.string().required(), {
-      initialValue: "",
-    });
-
-    const {
-      value: newPassword,
-      errorMessage: newPasswordError,
-      setErrors: setNewPasswordError,
-      resetField: resetNewPassword,
-    } = useField<string>(
-      "newPassword",
-      yup.string().required().min(5).max(30),
-      {
-        initialValue: "",
-      },
-    );
-
-    const {
-      value: newPasswordConfirm,
-      errorMessage: newPasswordConfirmError,
-      setErrors: setNewPasswordConfirmError,
-      resetField: resetNewPasswordConfirm,
-    } = useField<string>(
-      "newPasswordConfirm",
-      yup
-        .string()
-        .required()
-        .test(
-          "passwords-match",
-          "Passwords do not match",
-          (value) => newPassword.value === value,
-        ),
-      {
-        initialValue: "",
-      },
-    );
-
-    const setUserData = () => {
-      name.value = store.getters["auth/currentName"];
-      username.value = store.getters["auth/currentUser"];
-      email.value = store.getters["auth/email"];
-    };
+const store = useStore();
+const editDataStatus = ref(false);
+const editPasswordStatus = ref(false);
+const showCurrentPassword = ref(false);
+const showNewPassword = ref(false);
+const showConfirmPassword = ref(false);
+
+const {
+  value: name,
+  errorMessage: nameError,
+  setErrors: setNameError,
+} = useField<string>("name", yup.string().required(), {
+  initialValue: "",
+});
 
-    onMounted(() => {
-      setUserData();
-    });
+const {
+  value: username,
+  errorMessage: usernameError,
+  setErrors: setUsernameError,
+} = useField<string>("username", yup.string().required(), {
+  initialValue: "",
+});
 
-    const hasUserDataError = computed(() => nameError.value || usernameError.value || emailError.value);
+const {
+  value: email,
+  errorMessage: emailError,
+  setErrors: setEmailError,
+} = useField<string>("email", yup.string().email().required(), {
+  initialValue: "",
+});
 
-    const enableEdit = (form: string) => {
-      if (form === "data") {
-        editDataStatus.value = !editDataStatus.value;
-      } else if (form === "password") {
-        editPasswordStatus.value = !editPasswordStatus.value;
-      }
+const {
+  value: currentPassword,
+  errorMessage: currentPasswordError,
+  resetField: resetCurrentPassword,
+} = useField<string>("currentPassword", yup.string().required(), {
+  initialValue: "",
+});
+
+const {
+  value: newPassword,
+  errorMessage: newPasswordError,
+  setErrors: setNewPasswordError,
+  resetField: resetNewPassword,
+} = useField<string>(
+  "newPassword",
+  yup.string().required().min(5).max(30),
+  {
+    initialValue: "",
+  },
+);
+
+const {
+  value: newPasswordConfirm,
+  errorMessage: newPasswordConfirmError,
+  setErrors: setNewPasswordConfirmError,
+  resetField: resetNewPasswordConfirm,
+} = useField<string>(
+  "newPasswordConfirm",
+  yup
+    .string()
+    .required()
+    .test(
+      "passwords-match",
+      "Passwords do not match",
+      (value) => newPassword.value === value,
+    ),
+  {
+    initialValue: "",
+  },
+);
+
+const setUserData = () => {
+  name.value = store.getters["auth/currentName"];
+  username.value = store.getters["auth/currentUser"];
+  email.value = store.getters["auth/email"];
+};
+
+onMounted(() => {
+  setUserData();
+});
+
+const hasUserDataError = computed(() => nameError.value || usernameError.value || emailError.value);
+
+const enableEdit = (form: string) => {
+  if (form === "data") {
+    editDataStatus.value = !editDataStatus.value;
+  } else if (form === "password") {
+    editPasswordStatus.value = !editPasswordStatus.value;
+  }
+};
+
+const updateUserData = async () => {
+  if (!hasUserDataError.value) {
+    const data = {
+      id: store.getters["auth/id"],
+      name: name.value,
+      username: username.value,
+      email: email.value,
     };
 
-    const updateUserData = async () => {
-      if (!hasUserDataError.value) {
-        const data = {
-          id: store.getters["auth/id"],
-          name: name.value,
-          username: username.value,
-          email: email.value,
-        };
-
-        try {
-          await store.dispatch("users/patchData", data);
-          store.dispatch("auth/changeUserData", data);
-          store.dispatch(
-            "snackbar/showSnackbarSuccessAction",
-            INotificationsSuccess.profileData,
-          );
-          enableEdit("data");
-        } catch (error: unknown) {
-          if (axios.isAxiosError(error)) {
-            const axiosError = error as AxiosError;
-            if (axiosError.response?.status === 409) {
-              // @ts-expect-error axiosError.response.data is an array
-              axiosError.response.data.forEach((field: string) => {
-                if (field === "username") setUsernameError("This username already exists");
-                else if (field === "name") setNameError("This name already exists");
-                else if (field === "email") setEmailError("This email already exists");
-              });
-            } else if (axiosError.response?.status === 400) {
-              // @ts-expect-error axiosError.response.data is an array
-              axiosError.response.data.forEach((field: string) => {
-                if (field === "username") setUsernameError("This username is invalid !");
-                else if (field === "name") setNameError("This name is invalid !");
-                else if (field === "email") setEmailError("This email is invalid !");
-              });
-            }
-          } else {
-            store.dispatch("snackbar/showSnackbarErrorDefault");
-            handleError(error);
-          }
-        }
+    try {
+      await store.dispatch("users/patchData", data);
+      store.dispatch("auth/changeUserData", data);
+      store.dispatch(
+        "snackbar/showSnackbarSuccessAction",
+        INotificationsSuccess.profileData,
+      );
+      enableEdit("data");
+    } catch (error: unknown) {
+      const axiosError = error as AxiosError;
+      switch (axios.isAxiosError(error)) {
+        case axiosError.response?.status === 409:
+          // @ts-expect-error axiosError.response.data is an array
+          axiosError.response.data.forEach((field: string) => {
+            if (field === "username") setUsernameError("This username already exists");
+            else if (field === "name") setNameError("This name already exists");
+            else if (field === "email") setEmailError("This email already exists");
+          });
+          break;
+        case axiosError.response?.status === 400:
+          // @ts-expect-error axiosError.response.data is an array
+          axiosError.response.data.forEach((field: string) => {
+            if (field === "username") setUsernameError("This username is invalid !");
+            else if (field === "name") setNameError("This name is invalid !");
+            else if (field === "email") setEmailError("This email is invalid !");
+          });
+          break;
+        default:
+          store.dispatch("snackbar/showSnackbarErrorDefault");
+          handleError(error);
+          break;
       }
-    };
+    }
+  }
+};
 
-    const hasUpdatePasswordError = computed(() => (
-      Boolean(currentPasswordError.value)
+const hasUpdatePasswordError = computed(() => (
+  Boolean(currentPasswordError.value)
         || Boolean(newPasswordError.value)
         || Boolean(newPasswordConfirmError.value)
         || newPassword.value === ""
         || newPasswordConfirm.value === ""
         || currentPassword.value === ""
-    ));
-
-    const resetPasswordFields = () => {
-      resetCurrentPassword();
-      resetNewPassword();
-      resetNewPasswordConfirm();
+));
+
+const resetPasswordFields = () => {
+  resetCurrentPassword();
+  resetNewPassword();
+  resetNewPasswordConfirm();
+};
+
+const updatePassword = async () => {
+  if (!hasUpdatePasswordError.value) {
+    const data = {
+      id: store.getters["auth/id"],
+      currentPassword: currentPassword.value,
+      newPassword: newPassword.value,
     };
 
-    const updatePassword = async () => {
-      if (!hasUpdatePasswordError.value) {
-        const data = {
-          id: store.getters["auth/id"],
-          currentPassword: currentPassword.value,
-          newPassword: newPassword.value,
-        };
-
-        try {
-          await store.dispatch("users/patchPassword", data);
-          store.dispatch(
-            "snackbar/showSnackbarSuccessAction",
-            INotificationsSuccess.profilePassword,
-          );
-          enableEdit("password");
-          resetPasswordFields();
-        } catch (error: unknown) {
-          if (axios.isAxiosError(error)) {
-            const axiosError = error as AxiosError;
-            if (axiosError.response?.status === 403) {
-              // failed password
-              setNewPasswordError("Your password doesn't match");
-              setNewPasswordConfirmError("Your password doesn't match");
-            }
-          } else {
-            store.dispatch("snackbar/showSnackbarErrorDefault");
-            handleError(error);
-          }
+    try {
+      await store.dispatch("users/patchPassword", data);
+      store.dispatch(
+        "snackbar/showSnackbarSuccessAction",
+        INotificationsSuccess.profilePassword,
+      );
+      enableEdit("password");
+      resetPasswordFields();
+    } catch (error: unknown) {
+      if (axios.isAxiosError(error)) {
+        const axiosError = error as AxiosError;
+        if (axiosError.response?.status === 403) {
+          // failed password
+          setNewPasswordError("Your password doesn't match");
+          setNewPasswordConfirmError("Your password doesn't match");
         }
+      } else {
+        store.dispatch("snackbar/showSnackbarErrorDefault");
+        handleError(error);
       }
-    };
-
-    const cancel = (type: string) => {
-      if (type === "data") {
-        setUserData();
-        editDataStatus.value = !editDataStatus.value;
-      } else if (type === "password") {
-        resetPasswordFields();
-        editPasswordStatus.value = !editPasswordStatus.value;
-      }
-    };
-
-    return {
-      editDataStatus,
-      name,
-      nameError,
-      username,
-      usernameError,
-      email,
-      emailError,
-      editPasswordStatus,
-      currentPassword,
-      currentPasswordError,
-      newPassword,
-      newPasswordError,
-      newPasswordConfirm,
-      newPasswordConfirmError,
-      show,
-      showCurrentPassword,
-      showNewPassword,
-      showConfirmPassword,
-      hasUpdatePasswordError,
-      updateUserData,
-      updatePassword,
-      cancel,
-    };
-  },
-});
+    }
+  }
+};
+
+const cancel = (type: string) => {
+  if (type === "data") {
+    setUserData();
+    editDataStatus.value = !editDataStatus.value;
+  } else if (type === "password") {
+    resetPasswordFields();
+    editPasswordStatus.value = !editPasswordStatus.value;
+  }
+};
 </script>
diff --git a/ui/tests/components/Setting/SettingProfile.spec.ts b/ui/tests/components/Setting/SettingProfile.spec.ts
new file mode 100644
index 00000000000..3ab20674f05
--- /dev/null
+++ b/ui/tests/components/Setting/SettingProfile.spec.ts
@@ -0,0 +1,214 @@
+import { createVuetify } from "vuetify";
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { beforeEach, afterEach, describe, expect, it, vi } from "vitest";
+import MockAdapter from "axios-mock-adapter";
+import { nextTick } from "vue";
+import SettingProfile from "@/components/Setting/SettingProfile.vue";
+import { namespacesApi, usersApi } from "@/api/http";
+import { store, key } from "@/store";
+import { router } from "@/router";
+import { envVariables } from "@/envVariables";
+import { SnackbarPlugin } from "@/plugins/snackbar";
+
+type SettingProfileWrapper = VueWrapper<InstanceType<typeof SettingProfile>>;
+
+describe("Settings Namespace", () => {
+  let wrapper: SettingProfileWrapper;
+
+  const vuetify = createVuetify();
+
+  let mockNamespace: MockAdapter;
+
+  let mockUser: MockAdapter;
+
+  const members = [
+    {
+      id: "xxxxxxxx",
+      username: "test",
+      role: "owner",
+    },
+  ];
+
+  const namespaceData = {
+    name: "test",
+    owner: "test",
+    tenant_id: "fake-tenant-data",
+    members,
+    settings: {
+      session_record: true,
+    },
+    max_devices: 3,
+    devices_count: 3,
+    created_at: "",
+  };
+
+  const authData = {
+    status: "",
+    token: "",
+    user: "test",
+    name: "test",
+    tenant: "fake-tenant-data",
+    email: "test@test.com",
+    id: "xxxxxxxx",
+    role: "owner",
+  };
+
+  const session = true;
+
+  beforeEach(async () => {
+    vi.useFakeTimers();
+    localStorage.setItem("tenant", "fake-tenant-data");
+    envVariables.isCloud = true;
+
+    mockNamespace = new MockAdapter(namespacesApi.getAxios());
+    mockUser = new MockAdapter(usersApi.getAxios());
+
+    mockNamespace.onGet("http://localhost:3000/api/namespaces/fake-tenant-data").reply(200, namespaceData);
+    mockUser.onGet("http://localhost:3000/api/users/security").reply(200, session);
+
+    store.commit("auth/authSuccess", authData);
+    store.commit("namespaces/setNamespace", namespaceData);
+    store.commit("security/setSecurity", session);
+
+    wrapper = mount(SettingProfile, {
+      global: {
+        plugins: [[store, key], vuetify, router, SnackbarPlugin],
+        config: {
+          errorHandler: () => { /* ignore global error handler */ },
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  it("Is a Vue instance", () => {
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("Renders the component", () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("Data is defined", () => {
+    expect(wrapper.vm.$data).toBeDefined();
+  });
+
+  it("Renders components", async () => {
+    expect(wrapper.find('[data-test="account-header"]').exists());
+    expect(wrapper.find('[data-test="change-data-btn"]').exists());
+    expect(wrapper.find('[data-test="cancel-btn"]').exists());
+    expect(wrapper.find('[data-test="update-user-btn"]').exists());
+    expect(wrapper.find('[data-test="name-text"]').exists());
+    expect(wrapper.find('[data-test="username-text"]').exists());
+    expect(wrapper.find('[data-test="email-text"]').exists());
+    expect(wrapper.find('[data-test="password-header"]').exists());
+    expect(wrapper.find('[data-test="change-password-btn"]').exists());
+    expect(wrapper.find('[data-test="cancel-password-btn"]').exists());
+    expect(wrapper.find('[data-test="update-password-btn"]').exists());
+    expect(wrapper.find('[data-test="password-text"]').exists());
+    expect(wrapper.find('[data-test="newPassword-text"]').exists());
+    expect(wrapper.find('[data-test="confirmNewPassword-text"]').exists());
+  });
+
+  it("Successfully changes user data", async () => {
+    const changeUserData = {
+      email: "test@test.com",
+      name: "test",
+      username: "test",
+      id: "xxxxxxxx",
+    };
+
+    await wrapper.findComponent('[data-test="change-data-btn"]').trigger("click");
+
+    mockUser.onPatch("http://localhost:3000/api/users/xxxxxxxx/data").reply(200);
+
+    const changeDataSpy = vi.spyOn(store, "dispatch");
+    await wrapper.findComponent('[data-test="update-user-btn"]').trigger("click");
+
+    vi.runOnlyPendingTimers();
+
+    await nextTick();
+    await flushPromises();
+    expect(changeDataSpy).toHaveBeenCalledWith("users/patchData", changeUserData);
+    expect(changeDataSpy).toHaveBeenCalledWith("auth/changeUserData", changeUserData);
+  });
+
+  it("Successfully changes user password", async () => {
+    const changePasswordData = {
+      currentPassword: "test",
+      newPassword: "test123",
+      id: "xxxxxxxx",
+    };
+
+    await wrapper.findComponent('[data-test="change-password-btn"]').trigger("click");
+
+    mockUser.onPatch("http://localhost:3000/api/users/xxxxxxxx/password").reply(200);
+
+    const changePasswordSpy = vi.spyOn(store, "dispatch");
+    await wrapper.findComponent('[data-test="password-text"]').setValue("test");
+    await wrapper.findComponent('[data-test="newPassword-text"]').setValue("test123");
+    await wrapper.findComponent('[data-test="confirmNewPassword-text"]').setValue("test123");
+
+    await wrapper.findComponent('[data-test="update-password-btn"]').trigger("click");
+
+    vi.runOnlyPendingTimers();
+
+    await nextTick();
+    await flushPromises();
+    expect(changePasswordSpy).toHaveBeenCalledWith("users/patchPassword", changePasswordData);
+  });
+
+  it("Fails changes user data", async () => {
+    const changeUserData = {
+      email: "test@test.com",
+      name: "test",
+      username: "test",
+      id: "xxxxxxxx",
+    };
+
+    mockUser.onPatch("http://localhost:3000/api/users/xxxxxxxx/data").reply(401);
+
+    const changeDataSpy = vi.spyOn(store, "dispatch");
+    await wrapper.findComponent('[data-test="change-data-btn"]').trigger("click");
+
+    await wrapper.findComponent('[data-test="update-user-btn"]').trigger("click");
+
+    vi.runOnlyPendingTimers();
+
+    await nextTick();
+    await flushPromises();
+    expect(changeDataSpy).toHaveBeenCalledWith("users/patchData", changeUserData);
+    await flushPromises();
+    expect(changeDataSpy).toHaveBeenCalledWith("snackbar/showSnackbarErrorDefault");
+  });
+
+  it("Fails changes user password", async () => {
+    const changePasswordData = {
+      currentPassword: "test",
+      newPassword: "test123",
+      id: "xxxxxxxx",
+    };
+
+    await wrapper.findComponent('[data-test="change-password-btn"]').trigger("click");
+
+    mockUser.onPatch("http://localhost:3000/api/users/xxxxxxxx/password").reply(401);
+
+    const changePasswordSpy = vi.spyOn(store, "dispatch");
+    await wrapper.findComponent('[data-test="password-text"]').setValue("test");
+    await wrapper.findComponent('[data-test="newPassword-text"]').setValue("test123");
+    await wrapper.findComponent('[data-test="confirmNewPassword-text"]').setValue("test123");
+
+    await wrapper.findComponent('[data-test="update-password-btn"]').trigger("click");
+
+    vi.runOnlyPendingTimers();
+
+    await nextTick();
+    await flushPromises();
+    expect(changePasswordSpy).toHaveBeenCalledWith("users/patchPassword", changePasswordData);
+    await flushPromises();
+    expect(changePasswordSpy).toHaveBeenCalledWith("snackbar/showSnackbarErrorDefault");
+  });
+});
diff --git a/ui/tests/components/Setting/__snapshots__/SettingProfile.spec.ts.snap b/ui/tests/components/Setting/__snapshots__/SettingProfile.spec.ts.snap
new file mode 100644
index 00000000000..da68bb0e1fa
--- /dev/null
+++ b/ui/tests/components/Setting/__snapshots__/SettingProfile.spec.ts.snap
@@ -0,0 +1,306 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Settings Namespace > Renders the component 1`] = `
+"<div class=\\"v-container v-locale--is-ltr\\">
+  <div class=\\"v-row align-center justify-center mt-4\\">
+    <div class=\\"v-col-sm-8 v-col\\">
+      <div class=\\"v-row\\">
+        <div class=\\"v-col\\" data-test=\\"account-header\\">
+          <h3>Account</h3>
+        </div>
+        <div class=\\"v-spacer\\"></div>
+        <div class=\\"v-col-md-auto v-col ml-auto\\"><button type=\\"button\\" class=\\"v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated\\" data-test=\\"change-data-btn\\"><span class=\\"v-btn__overlay\\"></span><span class=\\"v-btn__underlay\\"></span>
+            <!----><span class=\\"v-btn__content\\" data-no-activator=\\"\\"> Change Data </span>
+            <!---->
+            <!---->
+          </button>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class=\\"mt-4 pl-4 pr-4\\">
+        <div class=\\"v-input v-input--horizontal v-input--density-default v-locale--is-ltr v-input--dirty v-input--disabled v-text-field v-text-field--plain-underlined\\" data-test=\\"name-text\\">
+          <!---->
+          <div class=\\"v-input__control\\">
+            <div class=\\"v-field v-field--active v-field--disabled v-field--dirty v-field--variant-underlined v-theme--light v-locale--is-ltr\\">
+              <div class=\\"v-field__overlay\\"></div>
+              <div class=\\"v-field__loader\\">
+                <div class=\\"v-progress-linear v-theme--light v-locale--is-ltr\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
+                  <!---->
+                  <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
+                  <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+                    <div class=\\"v-progress-linear__indeterminate\\">
+                      <div class=\\"v-progress-linear__indeterminate long\\"></div>
+                      <div class=\\"v-progress-linear__indeterminate short\\"></div>
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <div class=\\"v-field__field\\" data-no-activator=\\"\\">
+                <!----><label class=\\"v-label v-field-label\\" for=\\"input-1\\">
+                  <!---->Name
+                </label>
+                <!----><input disabled=\\"\\" size=\\"1\\" type=\\"text\\" id=\\"input-1\\" aria-describedby=\\"input-1-messages\\" required=\\"\\" class=\\"v-field__input\\">
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <div class=\\"v-field__outline\\">
+                <!----><label class=\\"v-label v-field-label v-field-label--floating\\" aria-hidden=\\"true\\" for=\\"input-1\\">
+                  <!---->Name
+                </label>
+              </div>
+            </div>
+          </div>
+          <!---->
+          <div class=\\"v-input__details\\">
+            <transition-group-stub name=\\"slide-y-transition\\" tag=\\"div\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\" class=\\"v-messages\\" role=\\"alert\\" aria-live=\\"polite\\" id=\\"input-1-messages\\">
+              <!---->
+            </transition-group-stub>
+            <!---->
+          </div>
+        </div>
+        <div class=\\"v-input v-input--horizontal v-input--density-default v-locale--is-ltr v-input--dirty v-input--disabled v-text-field v-text-field--plain-underlined\\" data-test=\\"username-text\\">
+          <!---->
+          <div class=\\"v-input__control\\">
+            <div class=\\"v-field v-field--active v-field--disabled v-field--dirty v-field--variant-underlined v-theme--light v-locale--is-ltr\\">
+              <div class=\\"v-field__overlay\\"></div>
+              <div class=\\"v-field__loader\\">
+                <div class=\\"v-progress-linear v-theme--light v-locale--is-ltr\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
+                  <!---->
+                  <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
+                  <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+                    <div class=\\"v-progress-linear__indeterminate\\">
+                      <div class=\\"v-progress-linear__indeterminate long\\"></div>
+                      <div class=\\"v-progress-linear__indeterminate short\\"></div>
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <div class=\\"v-field__field\\" data-no-activator=\\"\\">
+                <!----><label class=\\"v-label v-field-label\\" for=\\"input-3\\">
+                  <!---->Username
+                </label>
+                <!----><input disabled=\\"\\" size=\\"1\\" type=\\"text\\" id=\\"input-3\\" aria-describedby=\\"input-3-messages\\" required=\\"\\" class=\\"v-field__input\\">
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <div class=\\"v-field__outline\\">
+                <!----><label class=\\"v-label v-field-label v-field-label--floating\\" aria-hidden=\\"true\\" for=\\"input-3\\">
+                  <!---->Username
+                </label>
+              </div>
+            </div>
+          </div>
+          <!---->
+          <div class=\\"v-input__details\\">
+            <transition-group-stub name=\\"slide-y-transition\\" tag=\\"div\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\" class=\\"v-messages\\" role=\\"alert\\" aria-live=\\"polite\\" id=\\"input-3-messages\\">
+              <!---->
+            </transition-group-stub>
+            <!---->
+          </div>
+        </div>
+        <div class=\\"v-input v-input--horizontal v-input--density-default v-locale--is-ltr v-input--dirty v-input--disabled v-text-field v-text-field--plain-underlined\\" data-test=\\"email-text\\">
+          <!---->
+          <div class=\\"v-input__control\\">
+            <div class=\\"v-field v-field--active v-field--disabled v-field--dirty v-field--variant-underlined v-theme--light v-locale--is-ltr\\">
+              <div class=\\"v-field__overlay\\"></div>
+              <div class=\\"v-field__loader\\">
+                <div class=\\"v-progress-linear v-theme--light v-locale--is-ltr\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
+                  <!---->
+                  <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
+                  <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+                    <div class=\\"v-progress-linear__indeterminate\\">
+                      <div class=\\"v-progress-linear__indeterminate long\\"></div>
+                      <div class=\\"v-progress-linear__indeterminate short\\"></div>
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <div class=\\"v-field__field\\" data-no-activator=\\"\\">
+                <!----><label class=\\"v-label v-field-label\\" for=\\"input-5\\">
+                  <!---->Email
+                </label>
+                <!----><input disabled=\\"\\" size=\\"1\\" type=\\"text\\" id=\\"input-5\\" aria-describedby=\\"input-5-messages\\" required=\\"\\" class=\\"v-field__input\\">
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <div class=\\"v-field__outline\\">
+                <!----><label class=\\"v-label v-field-label v-field-label--floating\\" aria-hidden=\\"true\\" for=\\"input-5\\">
+                  <!---->Email
+                </label>
+              </div>
+            </div>
+          </div>
+          <!---->
+          <div class=\\"v-input__details\\">
+            <transition-group-stub name=\\"slide-y-transition\\" tag=\\"div\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\" class=\\"v-messages\\" role=\\"alert\\" aria-live=\\"polite\\" id=\\"input-5-messages\\">
+              <!---->
+            </transition-group-stub>
+            <!---->
+          </div>
+        </div>
+      </div>
+      <hr class=\\"v-divider v-theme--light mt-6\\" aria-orientation=\\"horizontal\\" role=\\"separator\\">
+      <hr class=\\"v-divider v-theme--light mb-6\\" aria-orientation=\\"horizontal\\" role=\\"separator\\">
+      <div class=\\"v-row\\">
+        <div class=\\"v-col\\" data-test=\\"password-header\\">
+          <h3>Password</h3>
+        </div>
+        <div class=\\"v-spacer\\"></div>
+        <div class=\\"v-col-md-auto v-col ml-auto\\"><button type=\\"button\\" class=\\"v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated\\" data-test=\\"change-password-btn\\"><span class=\\"v-btn__overlay\\"></span><span class=\\"v-btn__underlay\\"></span>
+            <!----><span class=\\"v-btn__content\\" data-no-activator=\\"\\"> Change Password </span>
+            <!---->
+            <!---->
+          </button>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class=\\"mt-4 pl-4 pr-4\\">
+        <div class=\\"v-input v-input--horizontal v-input--density-default v-locale--is-ltr v-input--disabled v-text-field v-text-field--plain-underlined mb-4\\" data-test=\\"password-text\\">
+          <!---->
+          <div class=\\"v-input__control\\">
+            <div class=\\"v-field v-field--disabled v-field--variant-underlined v-theme--light v-locale--is-ltr\\">
+              <div class=\\"v-field__overlay\\"></div>
+              <div class=\\"v-field__loader\\">
+                <div class=\\"v-progress-linear v-theme--light v-locale--is-ltr\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
+                  <!---->
+                  <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
+                  <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+                    <div class=\\"v-progress-linear__indeterminate\\">
+                      <div class=\\"v-progress-linear__indeterminate long\\"></div>
+                      <div class=\\"v-progress-linear__indeterminate short\\"></div>
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <div class=\\"v-field__field\\" data-no-activator=\\"\\">
+                <!----><label class=\\"v-label v-field-label\\" for=\\"input-8\\">
+                  <!---->Current password
+                </label>
+                <!----><input disabled=\\"\\" size=\\"1\\" type=\\"password\\" id=\\"input-8\\" aria-describedby=\\"input-8-messages\\" required=\\"\\" class=\\"v-field__input\\">
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <div class=\\"v-field__outline\\">
+                <!----><label class=\\"v-label v-field-label v-field-label--floating\\" aria-hidden=\\"true\\" for=\\"input-8\\">
+                  <!---->Current password
+                </label>
+              </div>
+            </div>
+          </div>
+          <div class=\\"v-input__append\\"><i class=\\"mdi-eye-off mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable\\" role=\\"button\\" aria-hidden=\\"false\\" aria-label=\\"Current password appended action\\"></i>
+            <!---->
+          </div>
+          <div class=\\"v-input__details\\">
+            <transition-group-stub name=\\"slide-y-transition\\" tag=\\"div\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\" class=\\"v-messages\\" role=\\"alert\\" aria-live=\\"polite\\" id=\\"input-8-messages\\">
+              <!---->
+            </transition-group-stub>
+            <!---->
+          </div>
+        </div>
+        <div class=\\"v-input v-input--horizontal v-input--density-default v-locale--is-ltr v-input--disabled v-text-field v-text-field--plain-underlined mb-4\\" data-test=\\"newPassword-text\\">
+          <!---->
+          <div class=\\"v-input__control\\">
+            <div class=\\"v-field v-field--disabled v-field--variant-underlined v-theme--light v-locale--is-ltr\\">
+              <div class=\\"v-field__overlay\\"></div>
+              <div class=\\"v-field__loader\\">
+                <div class=\\"v-progress-linear v-theme--light v-locale--is-ltr\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
+                  <!---->
+                  <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
+                  <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+                    <div class=\\"v-progress-linear__indeterminate\\">
+                      <div class=\\"v-progress-linear__indeterminate long\\"></div>
+                      <div class=\\"v-progress-linear__indeterminate short\\"></div>
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <div class=\\"v-field__field\\" data-no-activator=\\"\\">
+                <!----><label class=\\"v-label v-field-label\\" for=\\"input-10\\">
+                  <!---->New password
+                </label>
+                <!----><input disabled=\\"\\" size=\\"1\\" type=\\"password\\" id=\\"input-10\\" aria-describedby=\\"input-10-messages\\" required=\\"\\" class=\\"v-field__input\\">
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <div class=\\"v-field__outline\\">
+                <!----><label class=\\"v-label v-field-label v-field-label--floating\\" aria-hidden=\\"true\\" for=\\"input-10\\">
+                  <!---->New password
+                </label>
+              </div>
+            </div>
+          </div>
+          <div class=\\"v-input__append\\"><i class=\\"mdi-eye-off mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable\\" role=\\"button\\" aria-hidden=\\"false\\" aria-label=\\"New password appended action\\"></i>
+            <!---->
+          </div>
+          <div class=\\"v-input__details\\">
+            <transition-group-stub name=\\"slide-y-transition\\" tag=\\"div\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\" class=\\"v-messages\\" role=\\"alert\\" aria-live=\\"polite\\" id=\\"input-10-messages\\">
+              <!---->
+            </transition-group-stub>
+            <!---->
+          </div>
+        </div>
+        <div class=\\"v-input v-input--horizontal v-input--density-default v-locale--is-ltr v-input--disabled v-text-field v-text-field--plain-underlined mb-4\\" data-test=\\"confirmNewPassword-text\\">
+          <!---->
+          <div class=\\"v-input__control\\">
+            <div class=\\"v-field v-field--disabled v-field--variant-underlined v-theme--light v-locale--is-ltr\\">
+              <div class=\\"v-field__overlay\\"></div>
+              <div class=\\"v-field__loader\\">
+                <div class=\\"v-progress-linear v-theme--light v-locale--is-ltr\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
+                  <!---->
+                  <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
+                  <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+                    <div class=\\"v-progress-linear__indeterminate\\">
+                      <div class=\\"v-progress-linear__indeterminate long\\"></div>
+                      <div class=\\"v-progress-linear__indeterminate short\\"></div>
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <div class=\\"v-field__field\\" data-no-activator=\\"\\">
+                <!----><label class=\\"v-label v-field-label\\" for=\\"input-12\\">
+                  <!---->Confirm new password
+                </label>
+                <!----><input disabled=\\"\\" size=\\"1\\" type=\\"password\\" id=\\"input-12\\" aria-describedby=\\"input-12-messages\\" required=\\"\\" class=\\"v-field__input\\">
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <div class=\\"v-field__outline\\">
+                <!----><label class=\\"v-label v-field-label v-field-label--floating\\" aria-hidden=\\"true\\" for=\\"input-12\\">
+                  <!---->Confirm new password
+                </label>
+              </div>
+            </div>
+          </div>
+          <div class=\\"v-input__append\\"><i class=\\"mdi-eye-off mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable\\" role=\\"button\\" aria-hidden=\\"false\\" aria-label=\\"Confirm new password appended action\\"></i>
+            <!---->
+          </div>
+          <div class=\\"v-input__details\\">
+            <transition-group-stub name=\\"slide-y-transition\\" tag=\\"div\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\" class=\\"v-messages\\" role=\\"alert\\" aria-live=\\"polite\\" id=\\"input-12-messages\\">
+              <!---->
+            </transition-group-stub>
+            <!---->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;