Merge pull request #17564 from itisAliRH/login-refactors

Login components refactors

client/src/components/Login/ChangePassword.test.js → client/src/components/Login/ChangePassword.test.ts

@@ -1,25 +1,26 @@
-import { mount } from "@vue/test-utils";
+import { mount, Wrapper } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { getLocalVue } from "tests/jest/helpers";
-import { withPrefix } from "utils/redirect";
 
-import MountTarget from "./ChangePassword";
+import { withPrefix } from "@/utils/redirect";
+
+import MountTarget from "./ChangePassword.vue";
 
-// mock routes
 jest.mock("utils/redirect");
+
 const mockSafePath = jest.fn();
-withPrefix.mockImplementation(() => mockSafePath);
+(withPrefix as jest.Mock).mockImplementation(mockSafePath);
 
 const localVue = getLocalVue(true);
 
 describe("ChangePassword", () => {
-    let wrapper;
-    let axiosMock;
+    let wrapper: Wrapper<Vue>;
+    let axiosMock: MockAdapter;
 
     beforeEach(() => {
         axiosMock = new MockAdapter(axios);
-        wrapper = mount(MountTarget, {
+        wrapper = mount(MountTarget as object, {
             propsData: {
                 messageText: "message_text",
                 messageVariant: "message_variant",
@@ -35,17 +36,25 @@ describe("ChangePassword", () => {
     it("basics", async () => {
         const cardHeader = wrapper.find(".card-header");
         expect(cardHeader.text()).toBe("Change your password");
+
         const inputs = wrapper.findAll("input");
         expect(inputs.length).toBe(2);
+
         const firstPwdField = inputs.at(0);
         expect(firstPwdField.attributes("type")).toBe("password");
+
         await firstPwdField.setValue("test_first_pwd");
+
         const secondPwdField = inputs.at(1);
         expect(secondPwdField.attributes("type")).toBe("password");
+
         await secondPwdField.setValue("test_second_pwd");
+
         const submitButton = wrapper.find("button[type='submit']");
+
         await submitButton.trigger("submit");
-        const postedData = JSON.parse(axiosMock.history.post[0].data);
+
+        const postedData = JSON.parse(axiosMock.history.post?.[0]?.data);
         expect(postedData.password).toBe("test_first_pwd");
         expect(postedData.confirm).toBe("test_second_pwd");
     });
@@ -55,15 +64,21 @@ describe("ChangePassword", () => {
             token: "test_token",
             expiredUser: "expired_user",
         });
+
         const input = wrapper.find("input");
         expect(input.attributes("type")).toBe("password");
+
         await input.setValue("current_password");
+
         const submitButton = wrapper.find("button[type='submit']");
+
         await submitButton.trigger("submit");
-        const postedData = JSON.parse(axiosMock.history.post[0].data);
+
+        const postedData = JSON.parse(axiosMock.history.post?.[0]?.data);
         expect(postedData.token).toBe("test_token");
         expect(postedData.id).toBe("expired_user");
         expect(postedData.current).toBe("current_password");
+
         const alert = wrapper.find(".alert");
         expect(alert.text()).toBe("message_text");
     });

client/src/components/Login/ChangePassword.vue

@@ -1,73 +1,67 @@
-<template>
-    <b-form @submit.prevent="submit">
-        <b-alert v-if="!!message" :variant="variant" show>
-            {{ message }}
-        </b-alert>
-        <b-card header="Change your password">
-            <b-form-group v-if="expiredUser" label="Current Password">
-                <b-form-input v-model="current" type="password" />
-            </b-form-group>
-            <b-form-group label="New Password"> <b-form-input v-model="password" type="password" /> </b-form-group>
-            <b-form-group label="Confirm password"> <b-form-input v-model="confirm" type="password" /> </b-form-group>
-            <b-button type="submit">Save new password</b-button>
-        </b-card>
-    </b-form>
-</template>
-<script>
+<script setup lang="ts">
 import axios from "axios";
-import BootstrapVue from "bootstrap-vue";
-import { withPrefix } from "utils/redirect";
-import Vue from "vue";
+import { BAlert, BButton, BCard, BForm, BFormGroup, BFormInput } from "bootstrap-vue";
+import { ref } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { withPrefix } from "@/utils/redirect";
+
+interface Props {
+    token?: string;
+    expiredUser?: string;
+    messageText?: string;
+    messageVariant?: string;
+}
+
+const props = defineProps<Props>();
+
+const router = useRouter();
+
+const confirm = ref(null);
+const current = ref(null);
+const password = ref(null);
+const message = ref(props.messageText);
+const variant = ref(props.messageVariant);
 
-Vue.use(BootstrapVue);
+async function submit() {
+    try {
+        await axios.post(withPrefix("/user/change_password"), {
+            token: props.token,
+            id: props.expiredUser,
+            current: current.value,
+            password: password.value,
+            confirm: confirm.value,
+        });
 
-export default {
-    props: {
-        token: {
-            type: String,
-            default: null,
-        },
-        expiredUser: {
-            type: String,
-            default: null,
-        },
-        messageText: {
-            type: String,
-            default: null,
-        },
-        messageVariant: {
-            type: String,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            password: null,
-            confirm: null,
-            current: null,
-            message: this.messageText,
-            variant: this.messageVariant,
-        };
-    },
-    methods: {
-        submit() {
-            axios
-                .post(withPrefix("/user/change_password"), {
-                    token: this.token,
-                    id: this.expiredUser,
-                    current: this.current,
-                    password: this.password,
-                    confirm: this.confirm,
-                })
-                .then((response) => {
-                    window.location = withPrefix(`/`);
-                })
-                .catch((error) => {
-                    this.variant = "danger";
-                    const message = error.response && error.response.data && error.response.data.err_msg;
-                    this.message = message || "Password change failed for an unknown reason.";
-                });
-        },
-    },
-};
+        router.push("/");
+    } catch (error: any) {
+        variant.value = "danger";
+        const errMsg = error.response && error.response.data && error.response.data.err_msg;
+        message.value = errMsg || "Password change failed for an unknown reason.";
+    }
+}
 </script>
+
+<template>
+    <BForm @submit.prevent="submit">
+        <BAlert v-if="!!message" :variant="variant" show>
+            {{ message }}
+        </BAlert>
+
+        <BCard header="Change your password">
+            <BFormGroup v-if="expiredUser" label="Current Password">
+                <BFormInput v-model="current" type="password" />
+            </BFormGroup>
+
+            <BFormGroup label="New Password">
+                <BFormInput v-model="password" type="password" />
+            </BFormGroup>
+
+            <BFormGroup label="Confirm password">
+                <BFormInput v-model="confirm" type="password" />
+            </BFormGroup>
+
+            <BButton type="submit">Save new password</BButton>
+        </BCard>
+    </BForm>
+</template>

client/src/components/Login/LoginForm.test.js → client/src/components/Login/LoginForm.test.ts

@@ -1,62 +1,82 @@
+import { getLocalVue } from "@tests/jest/helpers";
 import { mount } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import { getLocalVue } from "tests/jest/helpers";
 
-import MountTarget from "./LoginForm";
+import MountTarget from "./LoginForm.vue";
 
 const localVue = getLocalVue(true);
 
+async function mountLoginForm() {
+    const wrapper = mount(MountTarget as object, {
+        propsData: {
+            sessionCsrfToken: "sessionCsrfToken",
+        },
+        localVue,
+        stubs: {
+            ExternalLogin: true,
+        },
+    });
+
+    return wrapper;
+}
+
 describe("LoginForm", () => {
-    let wrapper;
-    let axiosMock;
+    let axiosMock: MockAdapter;
 
     beforeEach(() => {
         axiosMock = new MockAdapter(axios);
-        wrapper = mount(MountTarget, {
-            propsData: {
-                sessionCsrfToken: "sessionCsrfToken",
-            },
-            localVue,
-            stubs: {
-                ExternalLogin: true,
-            },
-        });
     });
 
     afterEach(() => {
         axiosMock.reset();
     });
 
     it("basics", async () => {
+        const wrapper = await mountLoginForm();
+
         const cardHeader = wrapper.find(".card-header");
         expect(cardHeader.text()).toBe("Welcome to Galaxy, please log in");
+
         const inputs = wrapper.findAll("input");
         expect(inputs.length).toBe(2);
+
         const usernameField = inputs.at(0);
         expect(usernameField.attributes("type")).toBe("text");
+
         await usernameField.setValue("test_user");
+
         const pwdField = inputs.at(1);
         expect(pwdField.attributes("type")).toBe("password");
+
         await pwdField.setValue("test_pwd");
+
         const submitButton = wrapper.find("button[type='submit']");
         await submitButton.trigger("submit");
-        const postedData = JSON.parse(axiosMock.history.post[0].data);
+
+        const postedData = JSON.parse(axiosMock.history.post?.[0]?.data);
         expect(postedData.login).toBe("test_user");
         expect(postedData.password).toBe("test_pwd");
     });
 
     it("props", async () => {
-        const $register = "[id='register-toggle']";
+        const wrapper = await mountLoginForm();
+
+        console.log(wrapper.html());
+
+        const $register = "#register-toggle";
         expect(wrapper.findAll($register).length).toBe(0);
+
         await wrapper.setProps({
             allowUserCreation: true,
             enableOidc: true,
             showWelcomeWithLogin: true,
             welcomeUrl: "welcome_url",
         });
+
         const register = wrapper.find($register);
-        expect(register.text()).toBeLocalizationOf("Register here.");
+        (expect(register.text()) as any).toBeLocalizationOf("Register here.");
+
         const welcomePage = wrapper.find("iframe");
         expect(welcomePage.attributes("src")).toBe("welcome_url");
     });
@@ -65,33 +85,46 @@ describe("LoginForm", () => {
         const external_email = "[email protected]";
         const provider_id = "test_provider";
         const provider_label = "Provider";
-        await wrapper.setData({
-            connectExternalEmail: external_email,
-            connectExternalProvider: provider_id,
-            connectExternalLabel: provider_label,
-        });
+
+        const originalLocation = window.location;
+        jest.spyOn(window, "location", "get").mockImplementation(() => ({
+            ...originalLocation,
+            search: `?connect_external_email=${external_email}&connect_external_provider=${provider_id}&connect_external_label=${provider_label}`,
+        }));
+
+        const wrapper = await mountLoginForm();
+
         expect(wrapper.find(".card-header").exists()).toBe(false);
+
         const alert = wrapper.find(".alert");
         expect(alert.classes()).toContain("alert-info");
         expect(alert.text()).toContain(`There already exists a user with the email ${external_email}`);
         expect(alert.text()).toContain(`In order to associate this account with ${provider_label}`);
+
         const inputs = wrapper.findAll("input");
         expect(inputs.length).toBe(2);
+
         const usernameField = inputs.at(0);
         expect(usernameField.attributes("type")).toBe("text");
-        expect(usernameField.element.disabled).toBe(true);
-        expect(usernameField.element.value).not.toBe("");
-        expect(usernameField.element.value).toContain(external_email);
+        expect((usernameField.element as HTMLInputElement).disabled).toBe(true);
+        expect((usernameField.element as HTMLInputElement).value).not.toBe("");
+        expect((usernameField.element as HTMLInputElement).value).toContain(external_email);
+
         const pwdField = inputs.at(1);
         expect(pwdField.attributes("type")).toBe("password");
-        expect(pwdField.element.value).toBe("");
+        expect((pwdField.element as HTMLInputElement).value).toBe("");
+
         await pwdField.setValue("test_pwd");
+
         const submitButton = wrapper.find("button[type='submit']");
+
         await submitButton.trigger("submit");
-        const postedData = JSON.parse(axiosMock.history.post[0].data);
+
+        const postedData = JSON.parse(axiosMock.history.post?.[0]?.data);
         expect(postedData.login).toBe(external_email);
         expect(postedData.password).toBe("test_pwd");
-        const postedURL = axiosMock.history.post[0].url;
+
+        const postedURL = axiosMock.history.post?.[0]?.url;
         expect(postedURL).toBe("/user/login");
     });
 });