From 98b040472de06c110455b2475bee13ab7717394b Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Feb 2024 17:12:16 +0100
Subject: [PATCH 01/16] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`entr?=
 =?UTF-8?q?y/analysis/modules/Login.vue`=20to=20composition=20API=20and=20?=
 =?UTF-8?q?`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/entry/analysis/modules/Login.vue | 57 ++++++++++-----------
 1 file changed, 27 insertions(+), 30 deletions(-)

diff --git a/client/src/entry/analysis/modules/Login.vue b/client/src/entry/analysis/modules/Login.vue
index 3555469d2f0a..bb5065992143 100644
--- a/client/src/entry/analysis/modules/Login.vue
+++ b/client/src/entry/analysis/modules/Login.vue
@@ -1,18 +1,39 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { getGalaxyInstance } from "@/app";
+import { useConfig } from "@/composables/config";
+
+import ChangePassword from "@/components/Login/ChangePassword.vue";
+import LoginIndex from "@/components/Login/LoginIndex.vue";
+
+const router = useRouter();
+const { config, isConfigLoaded } = useConfig();
+
+const hasToken = computed(() => {
+    return router.currentRoute.query.token || router.currentRoute.query.expired_user;
+});
+const sessionCsrfToken = computed(() => {
+    return getGalaxyInstance().session_csrf_token;
+});
+</script>
+
 <template>
     <div class="overflow-auto m-3">
         <ChangePassword
             v-if="hasToken"
-            :expired-user="$route.query.expired_user"
-            :message-text="$route.query.message"
-            :message-variant="$route.query.status"
-            :token="$route.query.token" />
+            :expired-user="router.currentRoute.query.expired_user"
+            :message-text="router.currentRoute.query.message"
+            :message-variant="router.currentRoute.query.status"
+            :token="router.currentRoute.query.token" />
         <LoginIndex
-            v-else
+            v-else-if="isConfigLoaded"
             :allow-user-creation="config.allow_user_creation"
             :enable-oidc="config.enable_oidc"
             :mailing-join-addr="config.mailing_join_addr"
             :prefer-custos-login="config.prefer_custos_login"
-            :redirect="$route.query.redirect"
+            :redirect="router.currentRoute.query.redirect"
             :registration-warning-message="config.registration_warning_message"
             :server-mail-configured="config.server_mail_configured"
             :session-csrf-token="sessionCsrfToken"
@@ -22,27 +43,3 @@
             :welcome-url="config.welcome_url" />
     </div>
 </template>
-
-<script>
-import { getGalaxyInstance } from "app";
-import ChangePassword from "components/Login/ChangePassword";
-import LoginIndex from "components/Login/LoginIndex";
-
-export default {
-    components: {
-        ChangePassword,
-        LoginIndex,
-    },
-    computed: {
-        config() {
-            return getGalaxyInstance().config;
-        },
-        hasToken() {
-            return this.$route.query.token || this.$route.query.expired_user;
-        },
-        sessionCsrfToken() {
-            return getGalaxyInstance().session_csrf_token;
-        },
-    },
-};
-</script>

From e0eb3867844068c240bf0f619f5fe6c547368f07 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Feb 2024 17:21:31 +0100
Subject: [PATCH 02/16] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Logi?=
 =?UTF-8?q?nIndex.vue`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Login/LoginIndex.vue | 119 +++++++--------------
 1 file changed, 39 insertions(+), 80 deletions(-)

diff --git a/client/src/components/Login/LoginIndex.vue b/client/src/components/Login/LoginIndex.vue
index 3d9d79abf828..c74cc7a54fe9 100644
--- a/client/src/components/Login/LoginIndex.vue
+++ b/client/src/components/Login/LoginIndex.vue
@@ -1,3 +1,42 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import LoginForm from "@/components/Login/LoginForm.vue";
+import RegisterForm from "@/components/Login/RegisterForm.vue";
+
+interface Props {
+    sessionCsrfToken: string;
+    redirect?: string;
+    termsUrl?: string;
+    welcomeUrl?: string;
+    enableOidc?: boolean;
+    showLoginLink?: boolean;
+    showResetLink?: boolean;
+    mailingJoinAddr?: string;
+    allowUserCreation: boolean;
+    preferCustosLogin?: boolean;
+    serverMailConfigured?: boolean;
+    showWelcomeWithLogin?: boolean;
+    registrationWarningMessage?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+    showLoginLink: true,
+    showResetLink: true,
+    redirect: undefined,
+    termsUrl: undefined,
+    welcomeUrl: undefined,
+    mailingJoinAddr: undefined,
+    registrationWarningMessage: undefined,
+});
+
+const showLogin = ref(true);
+
+function toggleLogin() {
+    showLogin.value = !showLogin.value;
+}
+</script>
+
 <template>
     <div>
         <LoginForm
@@ -25,83 +64,3 @@
             @toggle-login="toggleLogin" />
     </div>
 </template>
-<script>
-import BootstrapVue from "bootstrap-vue";
-import Vue from "vue";
-
-import LoginForm from "./LoginForm";
-import RegisterForm from "./RegisterForm";
-
-Vue.use(BootstrapVue);
-
-export default {
-    components: {
-        LoginForm,
-        RegisterForm,
-    },
-    props: {
-        allowUserCreation: {
-            type: Boolean,
-            required: true,
-        },
-        showResetLink: {
-            type: Boolean,
-            default: true,
-        },
-        enableOidc: {
-            type: Boolean,
-            default: false,
-        },
-        mailingJoinAddr: {
-            type: String,
-            default: null,
-        },
-        preferCustosLogin: {
-            type: Boolean,
-            default: false,
-        },
-        redirect: {
-            type: String,
-            default: null,
-        },
-        registrationWarningMessage: {
-            type: String,
-            default: null,
-        },
-        showLoginLink: {
-            type: Boolean,
-            default: true,
-        },
-        sessionCsrfToken: {
-            type: String,
-            required: true,
-        },
-        serverMailConfigured: {
-            type: Boolean,
-            default: false,
-        },
-        showWelcomeWithLogin: {
-            type: Boolean,
-            default: false,
-        },
-        termsUrl: {
-            type: String,
-            default: null,
-        },
-        welcomeUrl: {
-            type: String,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            showLogin: true,
-        };
-    },
-    methods: {
-        toggleLogin() {
-            this.showLogin = !this.showLogin;
-        },
-    },
-};
-</script>

From 549d658c2f25216361aa30557c54cad9facd3b40 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Feb 2024 17:33:26 +0100
Subject: [PATCH 03/16] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Regi?=
 =?UTF-8?q?sterForm.vue`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Login/RegisterForm.vue | 331 +++++++++----------
 1 file changed, 165 insertions(+), 166 deletions(-)

diff --git a/client/src/components/Login/RegisterForm.vue b/client/src/components/Login/RegisterForm.vue
index 0a8e9d31a3f2..8fab303e6bc5 100644
--- a/client/src/components/Login/RegisterForm.vue
+++ b/client/src/components/Login/RegisterForm.vue
@@ -1,86 +1,188 @@
+<script setup lang="ts">
+import axios from "axios";
+import {
+    BAlert,
+    BButton,
+    BCard,
+    BCardBody,
+    BCardFooter,
+    BCardHeader,
+    BCollapse,
+    BForm,
+    BFormCheckbox,
+    BFormGroup,
+    BFormInput,
+    BFormText,
+} from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import { Toast } from "@/composables/toast";
+import localize from "@/utils/localization";
+import { withPrefix } from "@/utils/redirect";
+
+import ExternalLogin from "@/components/User/ExternalIdentities/ExternalLogin.vue";
+
+interface Props {
+    sessionCsrfToken: string;
+    redirect?: string;
+    termsUrl?: string;
+    enableOidc?: boolean;
+    showLoginLink?: boolean;
+    mailingJoinAddr?: string;
+    preferCustosLogin?: boolean;
+    serverMailConfigured?: boolean;
+    registrationWarningMessage?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "toggle-login"): void;
+}>();
+
+const email = ref(null);
+const confirm = ref(null);
+const password = ref(null);
+const username = ref(null);
+const subscribe = ref(null);
+const messageText = ref(null);
+const disableCreate = ref(false);
+const labelPassword = ref(localize("Password"));
+const labelPublicName = ref(localize("Public name"));
+const labelEmailAddress = ref(localize("Email address"));
+const labelConfirmPassword = ref(localize("Confirm password"));
+const labelSubscribe = ref(localize("Subscribe to mailing list"));
+
+const custosPreferred = computed(() => {
+    return props.enableOidc && props.preferCustosLogin;
+});
+
+function toggleLogin() {
+    emit("toggle-login");
+}
+
+async function submit() {
+    disableCreate.value = true;
+
+    try {
+        const response = await axios.post(withPrefix("/user/create"), {
+            email: email.value,
+            username: username.value,
+            password: password.value,
+            confirm: confirm.value,
+            subscribe: subscribe.value,
+            session_csrf_token: props.sessionCsrfToken,
+        });
+
+        if (response.data.message && response.data.status) {
+            Toast.info(response.data.message);
+        }
+
+        window.location.href = props.redirect || withPrefix("/");
+    } catch (error: any) {
+        disableCreate.value = false;
+        const errMsg = error.response.data && error.response.data.err_msg;
+        messageText.value = errMsg || "Registration failed for an unknown reason.";
+    }
+}
+</script>
+
 <template>
     <div class="container">
         <div class="row justify-content-md-center">
             <div class="col col-lg-6">
-                <b-alert :show="!!registrationWarningMessage" variant="info">
+                <BAlert :show="!!registrationWarningMessage" variant="info">
                     <!-- eslint-disable-next-line vue/no-v-html -->
                     <span v-html="registrationWarningMessage" />
-                </b-alert>
-                <b-alert :show="!!messageText" :variant="messageVariant">
+                </BAlert>
+
+                <BAlert :show="!!messageText" variant="danger">
                     {{ messageText }}
-                </b-alert>
-                <b-form id="registration" @submit.prevent="submit()">
-                    <b-card no-body>
+                </BAlert>
+
+                <BForm id="registration" @submit.prevent="submit()">
+                    <BCard no-body>
                         <!-- OIDC and Custos enabled and prioritized: encourage users to use it instead of local registration -->
                         <span v-if="custosPreferred">
-                            <b-card-header v-b-toggle.accordion-oidc role="button">
+                            <BCardHeader v-b-toggle.accordion-oidc role="button">
                                 Register using institutional account
-                            </b-card-header>
-                            <b-collapse id="accordion-oidc" visible role="tabpanel" accordion="registration_acc">
-                                <b-card-body>
+                            </BCardHeader>
+
+                            <BCollapse id="accordion-oidc" visible role="tabpanel" accordion="registration_acc">
+                                <BCardBody>
                                     Create a Galaxy account using an institutional account (e.g.:Google/JHU). This will
                                     redirect you to your institutional login through Custos.
                                     <ExternalLogin :login_page="false" />
-                                </b-card-body>
-                            </b-collapse>
+                                </BCardBody>
+                            </BCollapse>
                         </span>
+
                         <!-- Local Galaxy Registration -->
-                        <b-card-header v-if="!custosPreferred" v-localize>Create a Galaxy account</b-card-header>
-                        <b-card-header v-else v-localize v-b-toggle.accordion-register role="button">
+                        <BCardHeader v-if="!custosPreferred" v-localize>Create a Galaxy account</BCardHeader>
+                        <BCardHeader v-else v-localize v-b-toggle.accordion-register role="button">
                             Or, register with email
-                        </b-card-header>
-                        <b-collapse
+                        </BCardHeader>
+
+                        <BCollapse
                             id="accordion-register"
                             :visible="!custosPreferred"
                             role="tabpanel"
                             accordion="registration_acc">
-                            <b-card-body>
-                                <b-form-group :label="labelEmailAddress" label-for="register-form-email">
-                                    <b-form-input id="register-form-email" v-model="email" name="email" type="text" />
-                                </b-form-group>
-                                <b-form-group :label="labelPassword" label-for="register-form-password">
-                                    <b-form-input
+                            <BCardBody>
+                                <BFormGroup :label="labelEmailAddress" label-for="register-form-email">
+                                    <BFormInput id="register-form-email" v-model="email" name="email" type="text" />
+                                </BFormGroup>
+
+                                <BFormGroup :label="labelPassword" label-for="register-form-password">
+                                    <BFormInput
                                         id="register-form-password"
                                         v-model="password"
                                         name="password"
                                         type="password" />
-                                </b-form-group>
-                                <b-form-group :label="labelConfirmPassword" label-for="register-form-confirm">
-                                    <b-form-input
+                                </BFormGroup>
+
+                                <BFormGroup :label="labelConfirmPassword" label-for="register-form-confirm">
+                                    <BFormInput
                                         id="register-form-confirm"
                                         v-model="confirm"
                                         name="confirm"
                                         type="password" />
-                                </b-form-group>
-                                <b-form-group :label="labelPublicName" label-for="register-form-username">
-                                    <b-form-input
+                                </BFormGroup>
+
+                                <BFormGroup :label="labelPublicName" label-for="register-form-username">
+                                    <BFormInput
                                         id="register-form-username"
                                         v-model="username"
                                         name="username"
                                         type="text" />
-                                    <b-form-text v-localize
-                                        >Your public name is an identifier that will be used to generate addresses for
+
+                                    <BFormText v-localize>
+                                        Your public name is an identifier that will be used to generate addresses for
                                         information you share publicly. Public names must be at least three characters
                                         in length and contain only lower-case letters, numbers, dots, underscores, and
                                         dashes ('.', '_', '-').
-                                    </b-form-text>
-                                </b-form-group>
-                                <b-form-group v-if="mailingJoinAddr && serverMailConfigured">
-                                    <b-form-checkbox
+                                    </BFormText>
+                                </BFormGroup>
+
+                                <BFormGroup v-if="mailingJoinAddr && serverMailConfigured">
+                                    <BFormCheckbox
                                         id="register-form-subscribe"
                                         v-model="subscribe"
                                         name="subscribe"
                                         type="checkbox">
                                         {{ labelSubscribe }}
-                                    </b-form-checkbox>
-                                </b-form-group>
-                                <b-button v-localize name="create" type="submit" :disabled="disableCreate">
+                                    </BFormCheckbox>
+                                </BFormGroup>
+
+                                <BButton v-localize name="create" type="submit" :disabled="disableCreate">
                                     Create
-                                </b-button>
-                            </b-card-body>
-                        </b-collapse>
-                        <b-card-footer v-if="showLoginLink">
+                                </BButton>
+                            </BCardBody>
+                        </BCollapse>
+
+                        <BCardFooter v-if="showLoginLink">
                             <span v-localize>Already have an account?</span>
+
                             <a
                                 id="login-toggle"
                                 v-localize
@@ -89,10 +191,11 @@
                                 @click.prevent="toggleLogin">
                                 Log in here.
                             </a>
-                        </b-card-footer>
-                    </b-card>
-                </b-form>
+                        </BCardFooter>
+                    </BCard>
+                </BForm>
             </div>
+
             <div v-if="termsUrl" class="col position-relative embed-container">
                 <iframe title="terms-of-use" :src="termsUrl" frameborder="0" class="terms-iframe"></iframe>
                 <div v-localize class="scroll-hint">↓ Scroll to review ↓</div>
@@ -100,131 +203,27 @@
         </div>
     </div>
 </template>
-<script>
-import axios from "axios";
-import BootstrapVue from "bootstrap-vue";
-import ExternalLogin from "components/User/ExternalIdentities/ExternalLogin";
-import _l from "utils/localization";
-import { withPrefix } from "utils/redirect";
-import Vue from "vue";
-
-Vue.use(BootstrapVue);
-
-export default {
-    components: {
-        ExternalLogin,
-    },
-    props: {
-        enableOidc: {
-            type: Boolean,
-            default: false,
-        },
-        showLoginLink: {
-            type: Boolean,
-            default: false,
-        },
-        mailingJoinAddr: {
-            type: String,
-            default: null,
-        },
-        preferCustosLogin: {
-            type: Boolean,
-            default: false,
-        },
-        redirect: {
-            type: String,
-            default: null,
-        },
-        registrationWarningMessage: {
-            type: String,
-            default: null,
-        },
-        serverMailConfigured: {
-            type: Boolean,
-            default: false,
-        },
-        sessionCsrfToken: {
-            type: String,
-            required: true,
-        },
-        termsUrl: {
-            type: String,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            disableCreate: false,
-            email: null,
-            password: null,
-            username: null,
-            confirm: null,
-            subscribe: null,
-            messageText: null,
-            messageVariant: null,
-            labelEmailAddress: _l("Email address"),
-            labelPassword: _l("Password"),
-            labelConfirmPassword: _l("Confirm password"),
-            labelPublicName: _l("Public name"),
-            labelSubscribe: _l("Subscribe to mailing list"),
-        };
-    },
-    computed: {
-        custosPreferred() {
-            return this.enableOidc && this.preferCustosLogin;
-        },
-    },
-    methods: {
-        toggleLogin() {
-            this.$emit("toggle-login");
-        },
-        submit() {
-            this.disableCreate = true;
-            axios
-                .post(withPrefix("/user/create"), {
-                    email: this.email,
-                    username: this.username,
-                    password: this.password,
-                    confirm: this.confirm,
-                    subscribe: this.subscribe,
-                    session_csrf_token: this.sessionCsrfToken,
-                })
-                .then((response) => {
-                    if (response.data.message && response.data.status) {
-                        alert(response.data.message);
-                    }
-                    window.location = this.redirect || withPrefix("/");
-                })
-                .catch((error) => {
-                    this.disableCreate = false;
-                    this.messageVariant = "danger";
-                    const message = error.response.data && error.response.data.err_msg;
-                    this.messageText = message || "Registration failed for an unknown reason.";
-                });
-        },
-    },
-};
-</script>
-<style scoped>
+
+<style scoped lang="scss">
 .embed-container {
     position: relative;
-}
 
-.scroll-hint {
-    position: absolute;
-    bottom: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: rgba(255, 255, 255, 0.9);
-    border: 1px solid #ccc;
-    padding: 2px 5px;
-    border-radius: 4px;
-}
+    .terms-iframe {
+        width: 100%;
+        height: 90vh;
+        border: none;
+        overflow-y: auto;
+    }
 
-.terms-iframe {
-    width: 100%;
-    height: 90vh;
-    border: none;
-    overflow-y: auto;
+    .scroll-hint {
+        position: absolute;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: rgba(255, 255, 255, 0.9);
+        border: 1px solid #ccc;
+        padding: 2px 5px;
+        border-radius: 4px;
+    }
 }
 </style>

From 68e6f4c03c4324afcdf9b68a259b6cef33f050be Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Feb 2024 18:21:59 +0100
Subject: [PATCH 04/16] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Regi?=
 =?UTF-8?q?sterForm`=20tests=20to=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...isterForm.test.js => RegisterForm.test.ts} | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)
 rename client/src/components/Login/{RegisterForm.test.js => RegisterForm.test.ts} (72%)

diff --git a/client/src/components/Login/RegisterForm.test.js b/client/src/components/Login/RegisterForm.test.ts
similarity index 72%
rename from client/src/components/Login/RegisterForm.test.js
rename to client/src/components/Login/RegisterForm.test.ts
index ffd81fccbfba..db5c2ee1083a 100644
--- a/client/src/components/Login/RegisterForm.test.js
+++ b/client/src/components/Login/RegisterForm.test.ts
@@ -1,19 +1,20 @@
-import { mount } from "@vue/test-utils";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, Wrapper } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import { getLocalVue } from "tests/jest/helpers";
 
-import MountTarget from "./RegisterForm";
+import MountTarget from "./RegisterForm.vue";
 
 const localVue = getLocalVue(true);
 
 describe("RegisterForm", () => {
-    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: {
                 sessionCsrfToken: "sessionCsrfToken",
             },
@@ -27,18 +28,23 @@ describe("RegisterForm", () => {
 
     it("basics", async () => {
         const cardHeader = wrapper.find(".card-header");
-        expect(cardHeader.text()).toBeLocalizationOf("Create a Galaxy account");
+        (expect(cardHeader.text()) as any).toBeLocalizationOf("Create a Galaxy account");
+
         const inputs = wrapper.findAll("input");
         expect(inputs.length).toBe(4);
+
         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.email).toBe("test_user");
         expect(postedData.password).toBe("test_pwd");
     });

From bf60535d2f421c1e613135edd334fe24f4184f97 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Feb 2024 17:52:40 +0100
Subject: [PATCH 05/16] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Logi?=
 =?UTF-8?q?nForm.vue`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Login/LoginForm.vue | 345 +++++++++++-----------
 1 file changed, 175 insertions(+), 170 deletions(-)

diff --git a/client/src/components/Login/LoginForm.vue b/client/src/components/Login/LoginForm.vue
index 626265bf1c9a..5278e7221d84 100644
--- a/client/src/components/Login/LoginForm.vue
+++ b/client/src/components/Login/LoginForm.vue
@@ -1,47 +1,192 @@
+<script setup lang="ts">
+import axios from "axios";
+import {
+    BAlert,
+    BButton,
+    BCard,
+    BCardBody,
+    BCardFooter,
+    BCardHeader,
+    BEmbed,
+    BForm,
+    BFormGroup,
+    BFormInput,
+    BFormText,
+} from "bootstrap-vue";
+import { ref } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import localize from "@/utils/localization";
+import { withPrefix } from "@/utils/redirect";
+
+import NewUserConfirmation from "@/components/Login/NewUserConfirmation.vue";
+import ExternalLogin from "@/components/User/ExternalIdentities/ExternalLogin.vue";
+
+interface Props {
+    sessionCsrfToken: string;
+    redirect?: string;
+    termsUrl?: string;
+    welcomeUrl?: string;
+    enableOidc?: boolean;
+    showResetLink?: boolean;
+    allowUserCreation?: boolean;
+    showWelcomeWithLogin?: boolean;
+    registrationWarningMessage?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    enableOidc: false,
+    showResetLink: true,
+    redirect: undefined,
+    termsUrl: undefined,
+    welcomeUrl: undefined,
+    allowUserCreation: true,
+    showWelcomeWithLogin: false,
+    registrationWarningMessage: undefined,
+});
+
+const emit = defineEmits<{
+    (e: "toggle-login"): void;
+    (e: "set-redirect", url: string): void;
+}>();
+
+const router = useRouter();
+
+const urlParams = new URLSearchParams(window.location.search);
+
+const login = ref("");
+const password = ref(null);
+const messageText = ref("");
+const labelPassword = ref(localize("Password"));
+const messageVariant = ref<"info" | "danger">("info");
+const headerWelcome = ref(localize("Welcome to Galaxy, please log in"));
+const labelNameAddress = ref(localize("Public Name or Email Address"));
+const connectExternalEmail = ref(urlParams.get("connect_external_email"));
+const connectExternalLabel = ref(urlParams.get("connect_externallocalizeabel"));
+const connectExternalProvider = ref(urlParams.get("connect_external_provider"));
+const confirmURL = ref(urlParams.has("confirm") && urlParams.get("confirm") == "true");
+
+function toggleLogin() {
+    emit("toggle-login");
+}
+
+async function submitLogin() {
+    let redirect: string | null;
+
+    if (connectExternalEmail.value) {
+        login.value = connectExternalEmail.value;
+    }
+
+    if (localStorage.getItem("redirect_url")) {
+        redirect = localStorage.getItem("redirect_url");
+    } else {
+        redirect = props.redirect;
+    }
+
+    try {
+        const response = await axios.post(withPrefix("/user/login"), {
+            login: login.value,
+            password: password.value,
+            redirect: redirect,
+            session_csrf_token: props.sessionCsrfToken,
+        });
+
+        if (response.data.message && response.data.status) {
+            alert(response.data.message);
+        }
+
+        if (response.data.expired_user) {
+            router.push(`/root/login?expired_user=${response.data.expired_user}`);
+        } else if (connectExternalProvider.value) {
+            router.push("/user/external_ids?connect_external=true");
+        } else if (response.data.redirect) {
+            router.push(encodeURI(response.data.redirect));
+        } else {
+            window.location.href = withPrefix("/");
+        }
+    } catch (error: any) {
+        messageVariant.value = "danger";
+        const message = error.response && error.response.data && error.response.data.err_msg;
+
+        if (connectExternalProvider.value && message && message.toLowerCase().includes("invalid")) {
+            messageText.value = message + " Try logging in to the existing account through an external provider below.";
+        } else {
+            messageText.value = message || "Login failed for an unknown reason.";
+        }
+    }
+}
+
+function setRedirect(url: string) {
+    localStorage.setItem("redirect_url", url);
+}
+
+async function resetLogin() {
+    try {
+        const response = await axios.post(withPrefix("/user/reset_password"), { email: login.value });
+        messageVariant.value = "info";
+        messageText.value = response.data.message;
+    } catch (error: any) {
+        messageVariant.value = "danger";
+        const errMsg = error.response.data && error.response.data.err_msg;
+        messageText.value = errMsg || "Password reset failed for an unknown reason.";
+    }
+}
+
+function returnToLogin() {
+    router.push("/login/start");
+}
+</script>
+
 <template>
     <div class="container">
         <div class="row justify-content-md-center">
             <template v-if="!confirmURL">
                 <div class="col col-lg-6">
-                    <b-alert :show="!!messageText" :variant="messageVariant">
+                    <BAlert :show="!!messageText" :variant="messageVariant">
                         <span v-html="messageText" />
-                    </b-alert>
-                    <b-alert :show="!!connectExternalProvider" variant="info">
+                    </BAlert>
+
+                    <BAlert :show="!!connectExternalProvider" variant="info">
                         There already exists a user with the email <i>{{ connectExternalEmail }}</i
                         >. In order to associate this account with <i>{{ connectExternalLabel }}</i
                         >, you must first login to your existing account.
-                    </b-alert>
-                    <b-form id="login" @submit.prevent="submitLogin()">
-                        <b-card no-body>
-                            <b-card-header v-if="!connectExternalProvider">
+                    </BAlert>
+
+                    <BForm id="login" @submit.prevent="submitLogin()">
+                        <BCard no-body>
+                            <BCardHeader v-if="!connectExternalProvider">
                                 <span>{{ headerWelcome }}</span>
-                            </b-card-header>
-                            <b-card-body>
+                            </BCardHeader>
+
+                            <BCardBody>
                                 <div>
                                     <!-- standard internal galaxy login -->
-                                    <b-form-group :label="labelNameAddress" label-for="login-form-name">
-                                        <b-form-input
+                                    <BFormGroup :label="labelNameAddress" label-for="login-form-name">
+                                        <BFormInput
                                             v-if="!connectExternalProvider"
                                             id="login-form-name"
                                             v-model="login"
                                             name="login"
                                             type="text" />
-                                        <b-form-input
+                                        <BFormInput
                                             v-else
                                             id="login-form-name"
                                             disabled
                                             :value="connectExternalEmail"
                                             name="login"
                                             type="text" />
-                                    </b-form-group>
-                                    <b-form-group :label="labelPassword" label-for="login-form-password">
-                                        <b-form-input
+                                    </BFormGroup>
+
+                                    <BFormGroup :label="labelPassword" label-for="login-form-password">
+                                        <BFormInput
                                             id="login-form-password"
                                             v-model="password"
                                             name="password"
                                             type="password" />
-                                        <b-form-text v-if="showResetLink">
+
+                                        <BFormText v-if="showResetLink">
                                             <span v-localize>Forgot password?</span>
+
                                             <a
                                                 v-localize
                                                 href="javascript:void(0)"
@@ -49,16 +194,18 @@
                                                 @click.prevent="resetLogin">
                                                 Click here to reset your password.
                                             </a>
-                                        </b-form-text>
-                                    </b-form-group>
-                                    <b-button v-localize name="login" type="submit">Login</b-button>
+                                        </BFormText>
+                                    </BFormGroup>
+
+                                    <BButton v-localize name="login" type="submit">Login</BButton>
                                 </div>
                                 <div v-if="enableOidc">
                                     <!-- OIDC login-->
                                     <ExternalLogin :login_page="true" :exclude_idps="[connectExternalProvider]" />
                                 </div>
-                            </b-card-body>
-                            <b-card-footer>
+                            </BCardBody>
+
+                            <BCardFooter>
                                 <span v-if="!connectExternalProvider">
                                     Don't have an account?
                                     <span v-if="allowUserCreation">
@@ -82,9 +229,9 @@
                                         Return to login here.
                                     </a>
                                 </span>
-                            </b-card-footer>
-                        </b-card>
-                    </b-form>
+                            </BCardFooter>
+                        </BCard>
+                    </BForm>
                 </div>
             </template>
             <template v-else>
@@ -93,157 +240,15 @@
                     :terms-url="termsUrl"
                     @setRedirect="setRedirect" />
             </template>
-            <div v-if="showWelcomeWithLogin" class="col">
-                <b-embed type="iframe" :src="welcomeUrlWithRoot" aspect="1by1" />
+
+            <div v-if="showWelcomeWithLogin && props.welcomeUrl" class="col">
+                <BEmbed type="iframe" :src="withPrefix(props.welcomeUrl)" aspect="1by1" />
             </div>
         </div>
     </div>
 </template>
 
-<script>
-import axios from "axios";
-import BootstrapVue from "bootstrap-vue";
-import ExternalLogin from "components/User/ExternalIdentities/ExternalLogin";
-import _l from "utils/localization";
-import { withPrefix } from "utils/redirect";
-import Vue from "vue";
-
-import NewUserConfirmation from "./NewUserConfirmation";
-
-Vue.use(BootstrapVue);
-
-export default {
-    components: {
-        ExternalLogin,
-        NewUserConfirmation,
-    },
-    props: {
-        allowUserCreation: {
-            type: Boolean,
-            default: false,
-        },
-        enableOidc: {
-            type: Boolean,
-            default: false,
-        },
-        redirect: {
-            type: String,
-            default: null,
-        },
-        registrationWarningMessage: {
-            type: String,
-            default: null,
-        },
-        sessionCsrfToken: {
-            type: String,
-            required: true,
-        },
-        showWelcomeWithLogin: {
-            type: Boolean,
-            default: false,
-        },
-        showResetLink: {
-            type: Boolean,
-            default: true,
-        },
-        termsUrl: {
-            type: String,
-            default: null,
-        },
-        welcomeUrl: {
-            type: String,
-            default: null,
-        },
-    },
-    data() {
-        const urlParams = new URLSearchParams(window.location.search);
-        return {
-            login: null,
-            password: null,
-            url: null,
-            messageText: null,
-            messageVariant: null,
-            headerWelcome: _l("Welcome to Galaxy, please log in"),
-            labelNameAddress: _l("Public Name or Email Address"),
-            labelPassword: _l("Password"),
-            confirmURL: urlParams.has("confirm") && urlParams.get("confirm") == "true",
-            connectExternalEmail: urlParams.get("connect_external_email"),
-            connectExternalProvider: urlParams.get("connect_external_provider"),
-            connectExternalLabel: urlParams.get("connect_external_label"),
-        };
-    },
-    computed: {
-        welcomeUrlWithRoot() {
-            return withPrefix(this.welcomeUrl);
-        },
-    },
-    methods: {
-        toggleLogin() {
-            this.$emit("toggle-login");
-        },
-        submitLogin() {
-            let redirect = this.redirect;
-            if (this.connectExternalEmail) {
-                this.login = this.connectExternalEmail;
-            }
-            if (localStorage.getItem("redirect_url")) {
-                redirect = localStorage.getItem("redirect_url");
-            }
-            axios
-                .post(withPrefix("/user/login"), {
-                    login: this.login,
-                    password: this.password,
-                    redirect: redirect,
-                    session_csrf_token: this.sessionCsrfToken,
-                })
-                .then(({ data }) => {
-                    if (data.message && data.status) {
-                        alert(data.message);
-                    }
-                    if (data.expired_user) {
-                        window.location = withPrefix(`/root/login?expired_user=${data.expired_user}`);
-                    } else if (this.connectExternalProvider) {
-                        window.location = withPrefix("/user/external_ids?connect_external=true");
-                    } else if (data.redirect) {
-                        window.location = encodeURI(data.redirect);
-                    } else {
-                        window.location = withPrefix("/");
-                    }
-                })
-                .catch((error) => {
-                    this.messageVariant = "danger";
-                    const message = error.response && error.response.data && error.response.data.err_msg;
-                    if (this.connectExternalProvider && message && message.toLowerCase().includes("invalid")) {
-                        this.messageText =
-                            message + " Try logging in to the existing account through an external provider below.";
-                    } else {
-                        this.messageText = message || "Login failed for an unknown reason.";
-                    }
-                });
-        },
-        setRedirect(url) {
-            localStorage.setItem("redirect_url", url);
-        },
-        resetLogin() {
-            axios
-                .post(withPrefix("/user/reset_password"), { email: this.login })
-                .then((response) => {
-                    this.messageVariant = "info";
-                    this.messageText = response.data.message;
-                })
-                .catch((error) => {
-                    this.messageVariant = "danger";
-                    const message = error.response.data && error.response.data.err_msg;
-                    this.messageText = message || "Password reset failed for an unknown reason.";
-                });
-        },
-        returnToLogin() {
-            window.location = withPrefix("/login/start");
-        },
-    },
-};
-</script>
-<style scoped>
+<style scoped lang="scss">
 .card-body {
     overflow: visible;
 }

From 54bf2f320223deb08f76fef7fa2c3070bcd3b62c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Feb 2024 18:05:10 +0100
Subject: [PATCH 06/16] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`NewU?=
 =?UTF-8?q?serConfirmation.vue`=20to=20composition=20API=20and=20`typeScri?=
 =?UTF-8?q?pt`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Login/NewUserConfirmation.vue  | 181 ++++++++++--------
 1 file changed, 97 insertions(+), 84 deletions(-)

diff --git a/client/src/components/Login/NewUserConfirmation.vue b/client/src/components/Login/NewUserConfirmation.vue
index 48c0d4104f48..48aa790f64a9 100644
--- a/client/src/components/Login/NewUserConfirmation.vue
+++ b/client/src/components/Login/NewUserConfirmation.vue
@@ -1,17 +1,87 @@
+<script setup lang="ts">
+import axios from "axios";
+import {
+    BAlert,
+    BButton,
+    BCard,
+    BCardBody,
+    BCardFooter,
+    BEmbed,
+    BForm,
+    BFormCheckbox,
+    BFormGroup,
+} from "bootstrap-vue";
+import { ref } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { withPrefix } from "@/utils/redirect";
+
+interface Props {
+    termsUrl?: string;
+    registrationWarningMessage?: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "setRedirect", value: string): void;
+}>();
+
+const router = useRouter();
+
+const urlParams = new URLSearchParams(window.location.search);
+
+const messageText = ref("");
+const termsRead = ref(false);
+const messageVariant = ref("");
+const provider = ref(urlParams.get("provider"));
+const token = ref(urlParams.get("provider_token"));
+
+function login() {
+    // set url to redirect user to 3rd party management after login
+    emit("setRedirect", "/user/external_ids");
+    router.push("/login");
+}
+
+async function submit() {
+    if (!provider.value || !token.value) {
+        messageVariant.value = "danger";
+        messageText.value = "Missing provider and/or token.";
+    } else {
+        try {
+            const response = await axios.post(withPrefix(`/authnz/${provider.value}/create_user?token=${token.value}`));
+
+            if (response.data.redirect_uri) {
+                router.push(response.data.redirect_uri);
+            } else {
+                router.push("/");
+            }
+        } catch (error: any) {
+            messageVariant.value = "danger";
+            const errMsg = error.response.data && error.response.data.err_msg;
+            messageText.value = errMsg || "Login failed for an unknown reason.";
+        }
+    }
+}
+</script>
+
 <template>
     <div class="container">
         <div class="row justify-content-md-center">
             <div class="col col-lg-6">
-                <b-alert :show="!!registrationWarningMessage" variant="info">
+                <BAlert :show="!!registrationWarningMessage" variant="info">
                     {{ registrationWarningMessage }}
-                </b-alert>
-                <b-alert :show="!!messageText" :variant="messageVariant">
+                </BAlert>
+
+                <BAlert :show="!!messageText" :variant="messageVariant">
                     {{ messageText }}
-                </b-alert>
-                <b-form id="confirmation" @submit.prevent="submit()">
-                    <b-card no-body header="Confirm new account creation">
-                        <b-card-body>
+                </BAlert>
+
+                <BForm id="confirmation" @submit.prevent="submit()">
+                    <BCard no-body header="Confirm new account creation">
+                        <BCardBody>
                             <p>Looks like you are about to create a new account!</p>
+
                             <p>
                                 Do you already have a Galaxy account? If so, click
                                 <em>'No, go back to login'</em> to log in using your existing username and password to
@@ -22,101 +92,44 @@
                                     More details here.
                                 </a>
                             </p>
+
                             <p>
                                 If you wish to continue and create a new account, select
                                 <em>'Yes, create new account'</em>.
                             </p>
+
                             <p>
                                 Reminder: Registration and usage of multiple accounts is tracked and such accounts are
                                 subject to termination and data deletion on public Galaxy servers. Connect existing
                                 account now to continue to use your existing data and avoid possible loss of data.
                             </p>
-                            <b-form-group>
-                                <b-form-checkbox v-model="termsRead">
+
+                            <BFormGroup>
+                                <BFormCheckbox v-model="termsRead">
                                     I have read and accept these terms to create a new Galaxy account.
-                                </b-form-checkbox>
-                            </b-form-group>
-                            <b-button name="confirm" type="submit" :disabled="!termsRead" @click.prevent="submit">
+                                </BFormCheckbox>
+                            </BFormGroup>
+
+                            <BButton name="confirm" type="submit" :disabled="!termsRead" @click.prevent="submit">
                                 Yes, create new account
-                            </b-button>
-                            <b-button name="cancel" type="submit" @click.prevent="login">No, go back to login</b-button>
-                        </b-card-body>
-                        <b-card-footer>
+                            </BButton>
+
+                            <BButton name="cancel" type="submit" @click.prevent="login"> No, go back to login </BButton>
+                        </BCardBody>
+
+                        <BCardFooter>
                             Already have an account?
                             <a id="login-toggle" href="javascript:void(0)" role="button" @click.prevent="login">
                                 Log in here.
                             </a>
-                        </b-card-footer>
-                    </b-card>
-                </b-form>
+                        </BCardFooter>
+                    </BCard>
+                </BForm>
             </div>
+
             <div v-if="termsUrl" class="col">
-                <b-embed type="iframe" :src="termsUrlwithRoot" aspect="1by1" />
+                <BEmbed type="iframe" :src="withPrefix(termsUrl)" aspect="1by1" />
             </div>
         </div>
     </div>
 </template>
-<script>
-import axios from "axios";
-import BootstrapVue from "bootstrap-vue";
-import { withPrefix } from "utils/redirect";
-import Vue from "vue";
-
-Vue.use(BootstrapVue);
-
-export default {
-    props: {
-        registrationWarningMessage: {
-            type: String,
-            default: null,
-        },
-        termsUrl: {
-            type: String,
-            default: null,
-        },
-    },
-    data() {
-        const urlParams = new URLSearchParams(window.location.search);
-        return {
-            messageText: null,
-            messageVariant: null,
-            provider: urlParams.get("provider"),
-            termsRead: false,
-            token: urlParams.get("provider_token"),
-        };
-    },
-    computed: {
-        termsUrlwithRoot() {
-            return withPrefix(this.termsUrl);
-        },
-    },
-    methods: {
-        login() {
-            // set url to redirect user to 3rd party management after login
-            this.$emit("setRedirect", "/user/external_ids");
-            window.location = withPrefix("/login");
-        },
-        submit() {
-            if (!this.provider || !this.token) {
-                this.messageVariant = "danger";
-                this.messageText = "Missing provider and/or token.";
-            } else {
-                axios
-                    .post(withPrefix(`/authnz/${this.provider}/create_user?token=${this.token}`))
-                    .then((response) => {
-                        if (response.data.redirect_uri) {
-                            window.location = response.data.redirect_uri;
-                        } else {
-                            window.location = withPrefix("/");
-                        }
-                    })
-                    .catch((error) => {
-                        this.messageVariant = "danger";
-                        const message = error.response.data && error.response.data.err_msg;
-                        this.messageText = message || "Login failed for an unknown reason.";
-                    });
-            }
-        },
-    },
-};
-</script>

From dbbf78ea0342d976fce346e1cc7d7ae13eb0793a Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Feb 2024 18:07:23 +0100
Subject: [PATCH 07/16] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Chan?=
 =?UTF-8?q?gePassword.vue`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Login/ChangePassword.vue   | 132 +++++++++---------
 1 file changed, 63 insertions(+), 69 deletions(-)

diff --git a/client/src/components/Login/ChangePassword.vue b/client/src/components/Login/ChangePassword.vue
index 9f47887b0278..24575bc1d9a3 100644
--- a/client/src/components/Login/ChangePassword.vue
+++ b/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>

From f879ec5e8e4fd61726accbe7ef962cc657388f60 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Feb 2024 18:31:58 +0100
Subject: [PATCH 08/16] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Chan?=
 =?UTF-8?q?gePassword`=20tests=20to=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...assword.test.js => ChangePassword.test.ts} | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)
 rename client/src/components/Login/{ChangePassword.test.js => ChangePassword.test.ts} (81%)

diff --git a/client/src/components/Login/ChangePassword.test.js b/client/src/components/Login/ChangePassword.test.ts
similarity index 81%
rename from client/src/components/Login/ChangePassword.test.js
rename to client/src/components/Login/ChangePassword.test.ts
index a48a25107714..cc8ad816ef18 100644
--- a/client/src/components/Login/ChangePassword.test.js
+++ b/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");
     });

From 682c1ee7c4e6ad19025a06809e43d7d982f6396e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 7 Mar 2024 15:24:09 +0100
Subject: [PATCH 09/16] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`NewU?=
 =?UTF-8?q?serConfirmation`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...on.test.js => NewUserConfirmation.test.ts} | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)
 rename client/src/components/Login/{NewUserConfirmation.test.js => NewUserConfirmation.test.ts} (63%)

diff --git a/client/src/components/Login/NewUserConfirmation.test.js b/client/src/components/Login/NewUserConfirmation.test.ts
similarity index 63%
rename from client/src/components/Login/NewUserConfirmation.test.js
rename to client/src/components/Login/NewUserConfirmation.test.ts
index dc8bbf67510a..3085b2986713 100644
--- a/client/src/components/Login/NewUserConfirmation.test.js
+++ b/client/src/components/Login/NewUserConfirmation.test.ts
@@ -1,19 +1,25 @@
-import { mount } from "@vue/test-utils";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, type Wrapper } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import { getLocalVue } from "tests/jest/helpers";
 
-import MountTarget from "./NewUserConfirmation";
+import MountTarget from "./NewUserConfirmation.vue";
 
 const localVue = getLocalVue(true);
 
+const originalLocation = window.location;
+jest.spyOn(window, "location", "get").mockImplementation(() => ({
+    ...originalLocation,
+    search: "?provider=test_provider&provider_token=sample_token",
+}));
+
 describe("NewUserConfirmation", () => {
-    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: {},
             localVue,
         });
@@ -24,31 +30,39 @@ describe("NewUserConfirmation", () => {
     });
 
     it("basics", async () => {
-        await wrapper.setData({
-            provider: "test_provider",
-            token: "sample_token",
-        });
         const cardHeader = wrapper.find(".card-header");
         expect(cardHeader.text()).toBe("Confirm new account creation");
+
         const inputs = wrapper.findAll("input");
         expect(inputs.length).toBe(1);
+
         const checkField = inputs.at(0);
         expect(checkField.attributes("type")).toBe("checkbox");
+
         const submitButton = wrapper.find("button[name='confirm']");
         await submitButton.trigger("click");
-        expect(axiosMock.history.post.length).toBe(0);
+
+        expect(axiosMock.history.post?.length).toBe(0);
+
         await checkField.setChecked();
+
         await submitButton.trigger("click");
-        const postedData = axiosMock.history.post[0];
-        expect(postedData.url).toBe("/authnz/test_provider/create_user?token=sample_token");
+
+        const postedData = axiosMock.history.post?.[0];
+        expect(postedData?.url).toBe("/authnz/test_provider/create_user?token=sample_token");
+
         await wrapper.setProps({ registrationWarningMessage: "registration warning message" });
+
         const alert = wrapper.find(".alert");
         expect(alert.text()).toBe("registration warning message");
+
         await wrapper.setProps({ termsUrl: "terms_url" });
+
         const termsFrame = wrapper.find("iframe");
         expect(termsFrame.attributes("src")).toBe("terms_url");
-        const $toggle = "a[id=login-toggle]";
-        const loginToggle = wrapper.find($toggle);
+
+        const toggle = "a[id=login-toggle]";
+        const loginToggle = wrapper.find(toggle);
         expect(loginToggle.text()).toBe("Log in here.");
     });
 });

From fd15c9ab7f7c64f7a3afd88b83466ba3378f0ec3 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 7 Mar 2024 16:16:43 +0100
Subject: [PATCH 10/16] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Logi?=
 =?UTF-8?q?n`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/entry/analysis/modules/Login.test.js  | 77 ----------------
 .../src/entry/analysis/modules/Login.test.ts  | 89 +++++++++++++++++++
 client/src/entry/analysis/modules/Login.vue   |  2 +
 3 files changed, 91 insertions(+), 77 deletions(-)
 delete mode 100644 client/src/entry/analysis/modules/Login.test.js
 create mode 100644 client/src/entry/analysis/modules/Login.test.ts

diff --git a/client/src/entry/analysis/modules/Login.test.js b/client/src/entry/analysis/modules/Login.test.js
deleted file mode 100644
index 63e583a5d830..000000000000
--- a/client/src/entry/analysis/modules/Login.test.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import { getGalaxyInstance } from "app/singleton";
-import { getLocalVue } from "tests/jest/helpers";
-
-import MountTarget from "./Login";
-
-// mock Galaxy object
-jest.mock("app/singleton");
-const mockGalaxy = {
-    config: {
-        allow_user_creation: true,
-        enable_oidc: true,
-        mailing_join_addr: "mailing_join_addr",
-        prefer_custos_login: true,
-        registration_warning_message: "registration_warning_message",
-        server_mail_configured: true,
-        show_welcome_with_login: true,
-        terms_url: "terms_url",
-        welcome_url: "welcome_url",
-    },
-    user: {
-        isAdmin() {
-            return true;
-        },
-    },
-    session_csrf_token: "session_csrf_token",
-};
-getGalaxyInstance.mockImplementation(() => mockGalaxy);
-const localVue = getLocalVue(true);
-
-describe("Login", () => {
-    it("login index attribute matching", async () => {
-        const wrapper = shallowMount(MountTarget, {
-            localVue,
-            mocks: {
-                $route: {
-                    query: {
-                        redirect: "redirect_url",
-                    },
-                },
-            },
-        });
-        const attributes = wrapper.find("loginindex-stub").attributes();
-        expect(attributes.redirect).toBe("redirect_url");
-        expect(attributes.allowusercreation).toBe("true");
-        expect(attributes.sessioncsrftoken).toBe("session_csrf_token");
-        expect(attributes.enableoidc).toBe("true");
-        expect(attributes.mailingjoinaddr).toBe("mailing_join_addr");
-        expect(attributes.prefercustoslogin).toBe("true");
-        expect(attributes.servermailconfigured).toBe("true");
-        expect(attributes.showwelcomewithlogin).toBe("true");
-        expect(attributes.registrationwarningmessage).toBe("registration_warning_message");
-        expect(attributes.termsurl).toBe("terms_url");
-        expect(attributes.welcomeurl).toBe("welcome_url");
-    });
-
-    it("change password attribute matching", async () => {
-        const wrapper = shallowMount(MountTarget, {
-            localVue,
-            mocks: {
-                $route: {
-                    query: {
-                        token: "test_token",
-                        status: "test_status",
-                        message: "test_message",
-                        expired_user: "test_user",
-                    },
-                },
-            },
-        });
-        const attributes = wrapper.find("changepassword-stub").attributes();
-        expect(attributes.token).toBe("test_token");
-        expect(attributes.expireduser).toBe("test_user");
-        expect(attributes.messagetext).toBe("test_message");
-        expect(attributes.messagevariant).toBe("test_status");
-    });
-});
diff --git a/client/src/entry/analysis/modules/Login.test.ts b/client/src/entry/analysis/modules/Login.test.ts
new file mode 100644
index 000000000000..6e7c81de1a46
--- /dev/null
+++ b/client/src/entry/analysis/modules/Login.test.ts
@@ -0,0 +1,89 @@
+import { createTestingPinia } from "@pinia/testing";
+import { getLocalVue } from "@tests/jest/helpers";
+import { shallowMount } from "@vue/test-utils";
+import { setActivePinia } from "pinia";
+
+import { getGalaxyInstance } from "@/app/singleton";
+
+import Login from "./Login.vue";
+
+const localVue = getLocalVue(true);
+
+const configMock = {
+    allow_user_creation: true,
+    enable_oidc: true,
+    mailing_join_addr: "mailing_join_addr",
+    prefer_custos_login: true,
+    registration_warning_message: "registration_warning_message",
+    server_mail_configured: true,
+    show_welcome_with_login: true,
+    terms_url: "terms_url",
+    welcome_url: "welcome_url",
+};
+
+jest.mock("app/singleton");
+jest.mock("@/composables/config", () => ({
+    useConfig: jest.fn(() => ({
+        config: configMock,
+
+        isConfigLoaded: true,
+    })),
+}));
+
+const mockRouter = (query: object) => ({
+    currentRoute: {
+        query,
+    },
+});
+
+(getGalaxyInstance as jest.Mock).mockReturnValue({ session_csrf_token: "session_csrf_token" });
+
+function shallowMountLogin(routerQuery: object = {}) {
+    const pinia = createTestingPinia();
+    setActivePinia(pinia);
+
+    return shallowMount(Login, {
+        localVue,
+        pinia,
+        mocks: {
+            $router: mockRouter(routerQuery),
+        },
+    });
+}
+
+describe("Login", () => {
+    it("login index attribute matching", async () => {
+        const wrapper = shallowMountLogin({
+            redirect: "redirect_url",
+        });
+
+        const attributes = wrapper.find("#login-index").attributes();
+
+        expect(attributes.redirect).toBe("redirect_url");
+        expect(attributes.allowusercreation).toBe("true");
+        expect(attributes.sessioncsrftoken).toBe("session_csrf_token");
+        expect(attributes.enableoidc).toBe("true");
+        expect(attributes.mailingjoinaddr).toBe("mailing_join_addr");
+        expect(attributes.prefercustoslogin).toBe("true");
+        expect(attributes.servermailconfigured).toBe("true");
+        expect(attributes.showwelcomewithlogin).toBe("true");
+        expect(attributes.registrationwarningmessage).toBe("registration_warning_message");
+        expect(attributes.termsurl).toBe("terms_url");
+        expect(attributes.welcomeurl).toBe("welcome_url");
+    });
+
+    it("change password attribute matching", async () => {
+        const wrapper = shallowMountLogin({
+            token: "test_token",
+            status: "test_status",
+            message: "test_message",
+            expired_user: "test_user",
+        });
+
+        const attributes = wrapper.find("#change-password").attributes();
+        expect(attributes.token).toBe("test_token");
+        expect(attributes.expireduser).toBe("test_user");
+        expect(attributes.messagetext).toBe("test_message");
+        expect(attributes.messagevariant).toBe("test_status");
+    });
+});
diff --git a/client/src/entry/analysis/modules/Login.vue b/client/src/entry/analysis/modules/Login.vue
index bb5065992143..2a0789f2204e 100644
--- a/client/src/entry/analysis/modules/Login.vue
+++ b/client/src/entry/analysis/modules/Login.vue
@@ -23,12 +23,14 @@ const sessionCsrfToken = computed(() => {
     <div class="overflow-auto m-3">
         <ChangePassword
             v-if="hasToken"
+            id="change-password"
             :expired-user="router.currentRoute.query.expired_user"
             :message-text="router.currentRoute.query.message"
             :message-variant="router.currentRoute.query.status"
             :token="router.currentRoute.query.token" />
         <LoginIndex
             v-else-if="isConfigLoaded"
+            id="login-index"
             :allow-user-creation="config.allow_user_creation"
             :enable-oidc="config.enable_oidc"
             :mailing-join-addr="config.mailing_join_addr"

From 8e36c2c7fd77e35d6746dfeab26686a4627c55e9 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 7 Mar 2024 16:58:00 +0100
Subject: [PATCH 11/16] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Logi?=
 =?UTF-8?q?nForm`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{LoginForm.test.js => LoginForm.test.ts}  | 87 +++++++++++++------
 client/src/components/Login/LoginForm.vue     |  2 +-
 2 files changed, 61 insertions(+), 28 deletions(-)
 rename client/src/components/Login/{LoginForm.test.js => LoginForm.test.ts} (63%)

diff --git a/client/src/components/Login/LoginForm.test.js b/client/src/components/Login/LoginForm.test.ts
similarity index 63%
rename from client/src/components/Login/LoginForm.test.js
rename to client/src/components/Login/LoginForm.test.ts
index 1d35caaee6d6..6335809218de 100644
--- a/client/src/components/Login/LoginForm.test.js
+++ b/client/src/components/Login/LoginForm.test.ts
@@ -1,27 +1,31 @@
+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(() => {
@@ -29,34 +33,50 @@ describe("LoginForm", () => {
     });
 
     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 = "test@test.com";
         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_externallocalizeabel=${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");
     });
 });
diff --git a/client/src/components/Login/LoginForm.vue b/client/src/components/Login/LoginForm.vue
index 5278e7221d84..b465289d58bc 100644
--- a/client/src/components/Login/LoginForm.vue
+++ b/client/src/components/Login/LoginForm.vue
@@ -40,7 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
     redirect: undefined,
     termsUrl: undefined,
     welcomeUrl: undefined,
-    allowUserCreation: true,
+    allowUserCreation: false,
     showWelcomeWithLogin: false,
     registrationWarningMessage: undefined,
 });

From 434ddec2b6c8a165cc92689fe7debd8870dbefc2 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 8 Mar 2024 11:47:44 +0100
Subject: [PATCH 12/16] =?UTF-8?q?=E2=9C=94=EF=B8=8F:=20fix=20`LoginForm`?=
 =?UTF-8?q?=20typo=20and=20redirect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Login/LoginForm.test.ts |  2 +-
 client/src/components/Login/LoginForm.vue     | 11 ++++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Login/LoginForm.test.ts b/client/src/components/Login/LoginForm.test.ts
index 6335809218de..9422c8af8f88 100644
--- a/client/src/components/Login/LoginForm.test.ts
+++ b/client/src/components/Login/LoginForm.test.ts
@@ -89,7 +89,7 @@ describe("LoginForm", () => {
         const originalLocation = window.location;
         jest.spyOn(window, "location", "get").mockImplementation(() => ({
             ...originalLocation,
-            search: `?connect_external_email=${external_email}&connect_external_provider=${provider_id}&connect_externallocalizeabel=${provider_label}`,
+            search: `?connect_external_email=${external_email}&connect_external_provider=${provider_id}&connect_external_label=${provider_label}`,
         }));
 
         const wrapper = await mountLoginForm();
diff --git a/client/src/components/Login/LoginForm.vue b/client/src/components/Login/LoginForm.vue
index b465289d58bc..6b008d84fdb4 100644
--- a/client/src/components/Login/LoginForm.vue
+++ b/client/src/components/Login/LoginForm.vue
@@ -35,13 +35,10 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    enableOidc: false,
     showResetLink: true,
     redirect: undefined,
     termsUrl: undefined,
     welcomeUrl: undefined,
-    allowUserCreation: false,
-    showWelcomeWithLogin: false,
     registrationWarningMessage: undefined,
 });
 
@@ -62,7 +59,7 @@ const messageVariant = ref<"info" | "danger">("info");
 const headerWelcome = ref(localize("Welcome to Galaxy, please log in"));
 const labelNameAddress = ref(localize("Public Name or Email Address"));
 const connectExternalEmail = ref(urlParams.get("connect_external_email"));
-const connectExternalLabel = ref(urlParams.get("connect_externallocalizeabel"));
+const connectExternalLabel = ref(urlParams.get("connect_external_label"));
 const connectExternalProvider = ref(urlParams.get("connect_external_provider"));
 const confirmURL = ref(urlParams.has("confirm") && urlParams.get("confirm") == "true");
 
@@ -96,11 +93,11 @@ async function submitLogin() {
         }
 
         if (response.data.expired_user) {
-            router.push(`/root/login?expired_user=${response.data.expired_user}`);
+            window.location.href = withPrefix(`/root/login?expired_user=${response.data.expired_user}`);
         } else if (connectExternalProvider.value) {
-            router.push("/user/external_ids?connect_external=true");
+            window.location.href = withPrefix("/user/external_ids?connect_external=true");
         } else if (response.data.redirect) {
-            router.push(encodeURI(response.data.redirect));
+            window.location.href = withPrefix(encodeURI(response.data.redirect));
         } else {
             window.location.href = withPrefix("/");
         }

From 53ceaab7370c007614a1415286d59f6891a532c7 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 11 Mar 2024 18:38:54 -0500
Subject: [PATCH 13/16] refactor `ExternalLogin` to composition api + ts

---
 client/src/components/Login/LoginForm.vue     |   2 +-
 client/src/components/Login/RegisterForm.vue  |   2 +-
 .../ExternalIdentities/ExternalIdentities.vue |   2 +-
 .../User/ExternalIdentities/ExternalLogin.vue | 406 +++++++++---------
 4 files changed, 210 insertions(+), 202 deletions(-)

diff --git a/client/src/components/Login/LoginForm.vue b/client/src/components/Login/LoginForm.vue
index 6b008d84fdb4..8322b4d046c3 100644
--- a/client/src/components/Login/LoginForm.vue
+++ b/client/src/components/Login/LoginForm.vue
@@ -198,7 +198,7 @@ function returnToLogin() {
                                 </div>
                                 <div v-if="enableOidc">
                                     <!-- OIDC login-->
-                                    <ExternalLogin :login_page="true" :exclude_idps="[connectExternalProvider]" />
+                                    <ExternalLogin login-page :exclude-idps="[connectExternalProvider]" />
                                 </div>
                             </BCardBody>
 
diff --git a/client/src/components/Login/RegisterForm.vue b/client/src/components/Login/RegisterForm.vue
index 8fab303e6bc5..3f4a5259730d 100644
--- a/client/src/components/Login/RegisterForm.vue
+++ b/client/src/components/Login/RegisterForm.vue
@@ -112,7 +112,7 @@ async function submit() {
                                 <BCardBody>
                                     Create a Galaxy account using an institutional account (e.g.:Google/JHU). This will
                                     redirect you to your institutional login through Custos.
-                                    <ExternalLogin :login_page="false" />
+                                    <ExternalLogin />
                                 </BCardBody>
                             </BCollapse>
                         </span>
diff --git a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
index 487a534fc824..6714b06b5da6 100644
--- a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
@@ -85,7 +85,7 @@
 
         <div v-if="enable_oidc" class="external-subheading">
             <h2 class="h-md">Connect Other External Identities</h2>
-            <ExternalLogin :login_page="false" />
+            <ExternalLogin />
         </div>
     </section>
 </template>
diff --git a/client/src/components/User/ExternalIdentities/ExternalLogin.vue b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
index 12f4a28243d0..3d0cca6c51ee 100644
--- a/client/src/components/User/ExternalIdentities/ExternalLogin.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
@@ -1,70 +1,230 @@
+<script setup lang="ts">
+import axios, { type AxiosError } from "axios";
+import { BAlert, BButton, BForm, BFormCheckbox, BFormGroup } from "bootstrap-vue";
+import { computed, onMounted, ref } from "vue";
+import Multiselect from "vue-multiselect";
+
+import { useConfig } from "@/composables/config";
+import { withPrefix } from "@/utils/redirect";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+interface Idp {
+    DisplayName: string;
+    EntityID: string;
+    OrganizationName: string;
+    RandS: boolean;
+}
+type OIDCConfig = Record<string, { icon?: string }>;
+
+interface Props {
+    loginPage?: boolean;
+    excludeIdps?: string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+    loginPage: false,
+    excludeIdps: () => [],
+});
+
+const { config, isConfigLoaded } = useConfig();
+
+const loading = ref(false);
+const messageText = ref<string | null>(null);
+const messageVariant = ref<string | null>(null);
+const cILogonIdps = ref<Idp[]>([]);
+const selected = ref<Idp | null>(null);
+const rememberIdp = ref(false);
+const cilogonOrCustos = ref<string | null>(null);
+const toggleCilogon = ref(false);
+
+const oIDCIdps = computed<OIDCConfig>(() => isConfigLoaded.value ? config.value.oidc : {});
+
+const filteredOIDCIdps = computed(() => {
+    const exclude = ["cilogon", "custos"].concat(props.excludeIdps);
+    const filtered = Object.assign({}, oIDCIdps.value);
+    exclude.forEach((idp) => {
+        delete filtered[idp];
+    });
+    return filtered;
+});
+
+const cilogonListShow = computed(() => {
+    return (
+        Object.prototype.hasOwnProperty.call(oIDCIdps.value, "cilogon") ||
+        Object.prototype.hasOwnProperty.call(oIDCIdps.value, "custos")
+    );
+});
+
+const messageShow = computed(() => messageText.value != null);
+
+const cILogonEnabled = computed(() => Object.prototype.hasOwnProperty.call(oIDCIdps.value, "cilogon"));
+const custosEnabled = computed(() => Object.prototype.hasOwnProperty.call(oIDCIdps.value, "custos"));
+
+onMounted(async () => {
+    rememberIdp.value = getIdpPreference() !== null;
+    // Only fetch CILogonIDPs if custos/cilogon configured
+    if (cilogonListShow.value) {
+        await getCILogonIdps();
+    }
+});
+
+function toggleCILogon(idp: string) {
+    toggleCilogon.value = !toggleCilogon.value;
+    cilogonOrCustos.value = toggleCilogon.value ? idp : null;
+}
+
+async function submitOIDCLogin(idp: string) {
+    loading.value = true;
+    try {
+        const { data } = await axios.post(withPrefix(`/authnz/${idp}/login`));
+        loading.value = false;
+        if (data.redirect_uri) {
+            window.location = data.redirect_uri;
+        }
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+        messageVariant.value = "danger";
+        const message = error.response?.data && error.response.data.err_msg;
+        messageText.value = message || "Login failed for an unknown reason.";
+        loading.value = false;        
+    }
+}
+
+async function submitCILogon(idp: string | null) {
+    if (props.loginPage) {
+        setIdpPreference();
+    }
+    if (!selected.value || !idp) {
+        messageVariant.value = "danger";
+        messageText.value = "Please select an institution.";
+        return;
+    }
+    loading.value = true;
+    try {
+        const { data } = await axios.post(withPrefix(`/authnz/${idp}/login/?idphint=${selected.value.EntityID}`));
+        loading.value = false;
+        localStorage.setItem("galaxy-provider", idp);
+        if (data.redirect_uri) {
+            window.location = data.redirect_uri;
+        }
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+        messageVariant.value = "danger";
+        const message = error.response?.data && error.response.data.err_msg;
+        messageText.value = message || "Login failed for an unknown reason.";
+        loading.value = false;
+    }
+}
+
+async function getCILogonIdps() {
+    try {
+        const { data } = await axios.get(withPrefix("/authnz/get_cilogon_idps"));
+        cILogonIdps.value = data;
+        if (cILogonIdps.value.length == 1) {
+            selected.value = cILogonIdps.value[0]!;
+        } else {
+            // List is originally sorted by OrganizationName which can be different from DisplayName
+            cILogonIdps.value.sort((a, b) => (a.DisplayName > b.DisplayName ? 1 : -1));
+        }
+        if (props.loginPage) {
+            const preferredIdp = getIdpPreference();
+            if (preferredIdp) {
+                const selectedIdp = cILogonIdps.value.find((idp) => idp.EntityID === preferredIdp);
+                if (selectedIdp) {
+                    selected.value = selectedIdp;
+                }
+            }
+        }
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+        messageVariant.value = "danger";
+        const message = error.response?.data && error.response.data.err_msg;
+        messageText.value = message || "Failed to fetch CILogon IdPs.";
+    }
+}
+
+function setIdpPreference() {
+    if (rememberIdp.value && selected.value) {
+        localStorage.setItem("galaxy-remembered-idp", selected.value.EntityID);
+    } else {
+        localStorage.removeItem("galaxy-remembered-idp");
+    }
+}
+
+function getIdpPreference() {
+    return localStorage.getItem("galaxy-remembered-idp");
+}
+</script>
+
 <template>
     <div>
-        <b-alert :show="messageShow" :variant="messageVariant">
+        <BAlert :show="messageShow" :variant="messageVariant">
             {{ messageText }}
-        </b-alert>
-        <b-form id="externalLogin">
+        </BAlert>
+        <BForm id="externalLogin">
             <!-- OIDC login-->
             <hr class="my-4" />
             <div v-if="cilogonListShow" class="cilogon">
-                <div v-if="login_page">
+                <div v-if="props.loginPage">
                     <!--Only Display if CILogon/Custos is configured-->
-                    <b-form-group label="Use existing institutional login">
+                    <BFormGroup label="Use existing institutional login">
                         <Multiselect
                             v-model="selected"
                             placeholder="Select your institution"
-                            :options="cilogon_idps"
+                            :options="cILogonIdps"
                             label="DisplayName"
-                            track-by="EntityID">
-                        </Multiselect>
-                    </b-form-group>
+                            :deselect-label="null"
+                            :allow-empty="false"
+                            track-by="EntityID" />
+                    </BFormGroup>
 
-                    <b-form-group v-if="login_page">
-                        <b-form-checkbox id="remember-idp" v-model="rememberIdp">
+                    <BFormGroup v-if="props.loginPage">
+                        <BFormCheckbox id="remember-idp" v-model="rememberIdp">
                             Remember institution selection
-                        </b-form-checkbox>
-                    </b-form-group>
+                        </BFormCheckbox>
+                    </BFormGroup>
 
-                    <b-button
-                        v-if="cilogon_enabled"
+                    <BButton
+                        v-if="cILogonEnabled"
                         :disabled="loading || selected === null"
                         @click="submitCILogon('cilogon')">
                         <LoadingSpan v-if="loading" message="Signing In" />
                         <span v-else>Sign in with Institutional Credentials*</span>
-                    </b-button>
+                    </BButton>
                     <!--convert to v-else-if to allow only one or the other. if both enabled, put the one that should be default first-->
-                    <b-button
-                        v-if="Object.prototype.hasOwnProperty.call(oidc_idps, 'custos')"
+                    <BButton
+                        v-if="Object.prototype.hasOwnProperty.call(oIDCIdps, 'custos')"
                         :disabled="loading || selected === null"
                         @click="submitCILogon('custos')">
                         <LoadingSpan v-if="loading" message="Signing In" />
                         <span v-else>Sign in with Custos*</span>
-                    </b-button>
+                    </BButton>
                 </div>
 
                 <div v-else>
-                    <b-button v-if="cilogon_enabled" @click="toggleCILogon('cilogon')">
+                    <BButton v-if="cILogonEnabled" @click="toggleCILogon('cilogon')">
                         Sign in with Institutional Credentials*
-                    </b-button>
+                    </BButton>
 
-                    <b-button v-if="custos_enabled" @click="toggleCILogon('custos')">Sign in with Custos*</b-button>
+                    <BButton v-if="custosEnabled" @click="toggleCILogon('custos')">Sign in with Custos*</BButton>
 
-                    <b-form-group v-if="toggle_cilogon">
+                    <BFormGroup v-if="toggleCilogon">
                         <Multiselect
                             v-model="selected"
                             placeholder="Select your institution"
-                            :options="cilogon_idps"
+                            :options="cILogonIdps"
                             label="DisplayName"
-                            track-by="EntityID">
-                        </Multiselect>
+                            :deselect-label="null"
+                            :allow-empty="false"
+                            track-by="EntityID" />
 
-                        <b-button
-                            v-if="toggle_cilogon"
+                        <BButton
+                            v-if="toggleCilogon"
                             :disabled="loading || selected === null"
                             @click="submitCILogon(cilogonOrCustos)">
                             Login*
-                        </b-button>
-                    </b-form-group>
+                        </BButton>
+                    </BFormGroup>
                 </div>
 
                 <p class="mt-3">
@@ -77,178 +237,26 @@
                 </p>
             </div>
 
-            <div v-for="(idp_info, idp) in filtered_oidc_idps" :key="idp" class="m-1">
-                <span v-if="idp_info['icon']">
-                    <b-button variant="link" class="d-block mt-3" @click="submitOIDCLogin(idp)">
-                        <img :src="idp_info['icon']" height="45" :alt="idp" />
-                    </b-button>
-                </span>
-                <span v-else>
-                    <b-button class="d-block mt-3" @click="submitOIDCLogin(idp)">
-                        <i :class="oidc_idps[idp]" />
-                        Sign in with
-                        {{ idp.charAt(0).toUpperCase() + idp.slice(1) }}
-                    </b-button>
-                </span>
-            </div>
-        </b-form>
+            <span v-if="isConfigLoaded">
+                <div v-for="(iDPInfo, idp) in filteredOIDCIdps" :key="idp" class="m-1">
+                    <span v-if="iDPInfo['icon']">
+                        <BButton variant="link" class="d-block mt-3" @click="submitOIDCLogin(idp)">
+                            <img :src="iDPInfo['icon']" height="45" :alt="idp" />
+                        </BButton>
+                    </span>
+                    <span v-else>
+                        <BButton class="d-block mt-3" @click="submitOIDCLogin(idp)">
+                            <i :class="oIDCIdps[idp]" />
+                            Sign in with
+                            {{ idp.charAt(0).toUpperCase() + idp.slice(1) }}
+                        </BButton>
+                    </span>
+                </div>
+            </span>
+        </BForm>
     </div>
 </template>
 
-<script>
-import { getGalaxyInstance } from "app";
-import axios from "axios";
-import BootstrapVue from "bootstrap-vue";
-import LoadingSpan from "components/LoadingSpan";
-import { getAppRoot } from "onload";
-import Vue from "vue";
-import Multiselect from "vue-multiselect";
-
-Vue.use(BootstrapVue);
-
-export default {
-    components: {
-        Multiselect,
-        LoadingSpan,
-    },
-    props: {
-        login_page: {
-            type: Boolean,
-            required: false,
-        },
-        exclude_idps: {
-            type: Array,
-            required: false,
-        },
-    },
-    data() {
-        const galaxy = getGalaxyInstance();
-        return {
-            loading: false,
-            messageText: null,
-            messageVariant: null,
-            enable_oidc: galaxy.config.enable_oidc,
-            oidc_idps: galaxy.config.oidc,
-            cilogon_idps: [],
-            selected: null,
-            rememberIdp: false,
-            cilogonOrCustos: null,
-            toggle_cilogon: false,
-        };
-    },
-    computed: {
-        filtered_oidc_idps() {
-            const exclude = ["cilogon", "custos"].concat(this.exclude_idps);
-            const filtered = Object.assign({}, this.oidc_idps);
-            exclude.forEach((idp) => {
-                delete filtered[idp];
-            });
-            return filtered;
-        },
-        cilogonListShow() {
-            return (
-                Object.prototype.hasOwnProperty.call(this.oidc_idps, "cilogon") ||
-                Object.prototype.hasOwnProperty.call(this.oidc_idps, "custos")
-            );
-        },
-        messageShow() {
-            return this.messageText != null;
-        },
-        cilogon_enabled() {
-            return Object.prototype.hasOwnProperty.call(this.oidc_idps, "cilogon");
-        },
-        custos_enabled() {
-            return Object.prototype.hasOwnProperty.call(this.oidc_idps, "custos");
-        },
-    },
-    created() {
-        this.rememberIdp = this.getIdpPreference() !== null;
-        /* Only fetch CILogonIDPs if custos/cilogon configured */
-        if (this.cilogonListShow) {
-            this.getCILogonIdps();
-        }
-    },
-    methods: {
-        toggleCILogon(idp) {
-            this.toggle_cilogon = !this.toggle_cilogon;
-            this.cilogonOrCustos = this.toggle_cilogon ? idp : null;
-        },
-        submitOIDCLogin(idp) {
-            const rootUrl = getAppRoot();
-            this.loading = true;
-            axios
-                .post(`${rootUrl}authnz/${idp}/login`)
-                .then((response) => {
-                    this.loading = false;
-                    if (response.data.redirect_uri) {
-                        window.location = response.data.redirect_uri;
-                    }
-                })
-                .catch((error) => {
-                    this.messageVariant = "danger";
-                    const message = error.response.data && error.response.data.err_msg;
-                    this.messageText = message || "Login failed for an unknown reason.";
-                    this.loading = false;
-                });
-        },
-        submitCILogon(idp) {
-            const rootUrl = getAppRoot();
-            if (this.login_page) {
-                this.setIdpPreference();
-            }
-            this.loading = true;
-            axios
-                .post(`${rootUrl}authnz/${idp}/login/?idphint=${this.selected.EntityID}`)
-                .then((response) => {
-                    this.loading = false;
-                    localStorage.setItem("galaxy-provider", idp);
-                    if (response.data.redirect_uri) {
-                        window.location = response.data.redirect_uri;
-                    }
-                })
-                .catch((error) => {
-                    this.messageVariant = "danger";
-                    const message = error.response.data && error.response.data.err_msg;
-
-                    this.messageText = message || "Login failed for an unknown reason.";
-                    this.loading = false;
-                });
-        },
-        getCILogonIdps() {
-            const rootUrl = getAppRoot();
-            axios
-                .get(`${rootUrl}authnz/get_cilogon_idps`)
-                .then((response) => {
-                    this.cilogon_idps = response.data;
-                    if (this.cilogon_idps.length == 1) {
-                        this.selected = this.cilogon_idps[0];
-                    } else {
-                        //List is originally sorted by OrganizationName which can be different from DisplayName
-                        this.cilogon_idps.sort((a, b) => (a.DisplayName > b.DisplayName ? 1 : -1));
-                    }
-                })
-                .then(() => {
-                    if (this.login_page) {
-                        const preferredIdp = this.getIdpPreference();
-                        if (preferredIdp) {
-                            this.selected = this.cilogon_idps.find((idp) => idp.EntityID === preferredIdp);
-                        }
-                    }
-                });
-        },
-        setIdpPreference() {
-            if (this.rememberIdp) {
-                localStorage.setItem("galaxy-remembered-idp", this.selected.EntityID);
-            } else {
-                localStorage.removeItem("galaxy-remembered-idp");
-            }
-        },
-        getIdpPreference() {
-            return localStorage.getItem("galaxy-remembered-idp");
-        },
-    },
-};
-</script>
 <style scoped>
 .card-body {
     overflow: visible;

From 826c99701b419723eb22dc48d3f1f7578aeaf85e Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 11 Mar 2024 20:47:45 -0500
Subject: [PATCH 14/16] make login and register field required, add negative
 state to pwd

In case the user types in an invalid password, change the `BFormInput` state to `false` as a visual indicator.
---
 client/src/components/Login/LoginForm.vue     | 46 +++++++++++++------
 client/src/components/Login/RegisterForm.vue  | 16 +++++--
 .../User/ExternalIdentities/ExternalLogin.vue |  4 +-
 3 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Login/LoginForm.vue b/client/src/components/Login/LoginForm.vue
index 8322b4d046c3..ab14ad639639 100644
--- a/client/src/components/Login/LoginForm.vue
+++ b/client/src/components/Login/LoginForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import axios from "axios";
+import axios, { type AxiosError } from "axios";
 import {
     BAlert,
     BButton,
@@ -13,7 +13,7 @@ import {
     BFormInput,
     BFormText,
 } from "bootstrap-vue";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import localize from "@/utils/localization";
@@ -53,22 +53,25 @@ const urlParams = new URLSearchParams(window.location.search);
 
 const login = ref("");
 const password = ref(null);
+const passwordState = ref<boolean | null>(null);
+const loading = ref(false);
 const messageText = ref("");
-const labelPassword = ref(localize("Password"));
 const messageVariant = ref<"info" | "danger">("info");
-const headerWelcome = ref(localize("Welcome to Galaxy, please log in"));
-const labelNameAddress = ref(localize("Public Name or Email Address"));
 const connectExternalEmail = ref(urlParams.get("connect_external_email"));
 const connectExternalLabel = ref(urlParams.get("connect_external_label"));
 const connectExternalProvider = ref(urlParams.get("connect_external_provider"));
 const confirmURL = ref(urlParams.has("confirm") && urlParams.get("confirm") == "true");
 
+const excludeIdps = computed(() => (connectExternalProvider.value ? [connectExternalProvider.value] : undefined));
+
 function toggleLogin() {
     emit("toggle-login");
 }
 
 async function submitLogin() {
     let redirect: string | null;
+    passwordState.value = null;
+    loading.value = true;
 
     if (connectExternalEmail.value) {
         login.value = connectExternalEmail.value;
@@ -101,7 +104,9 @@ async function submitLogin() {
         } else {
             window.location.href = withPrefix("/");
         }
-    } catch (error: any) {
+    } catch (e) {
+        loading.value = false;
+        const error = e as AxiosError<{ err_msg?: string }>;
         messageVariant.value = "danger";
         const message = error.response && error.response.data && error.response.data.err_msg;
 
@@ -110,6 +115,9 @@ async function submitLogin() {
         } else {
             messageText.value = message || "Login failed for an unknown reason.";
         }
+        if (message === "Invalid password.") {
+            passwordState.value = false;
+        }
     }
 }
 
@@ -118,14 +126,18 @@ function setRedirect(url: string) {
 }
 
 async function resetLogin() {
+    loading.value = true;
     try {
         const response = await axios.post(withPrefix("/user/reset_password"), { email: login.value });
         messageVariant.value = "info";
         messageText.value = response.data.message;
-    } catch (error: any) {
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
         messageVariant.value = "danger";
-        const errMsg = error.response.data && error.response.data.err_msg;
+        const errMsg = error.response?.data && error.response.data.err_msg;
         messageText.value = errMsg || "Password reset failed for an unknown reason.";
+    } finally {
+        loading.value = false;
     }
 }
 
@@ -140,6 +152,7 @@ function returnToLogin() {
             <template v-if="!confirmURL">
                 <div class="col col-lg-6">
                     <BAlert :show="!!messageText" :variant="messageVariant">
+                        <!-- eslint-disable-next-line vue/no-v-html -->
                         <span v-html="messageText" />
                     </BAlert>
 
@@ -152,17 +165,20 @@ function returnToLogin() {
                     <BForm id="login" @submit.prevent="submitLogin()">
                         <BCard no-body>
                             <BCardHeader v-if="!connectExternalProvider">
-                                <span>{{ headerWelcome }}</span>
+                                <span>{{ localize("Welcome to Galaxy, please log in") }}</span>
                             </BCardHeader>
 
                             <BCardBody>
                                 <div>
                                     <!-- standard internal galaxy login -->
-                                    <BFormGroup :label="labelNameAddress" label-for="login-form-name">
+                                    <BFormGroup
+                                        :label="localize('Public Name or Email Address')"
+                                        label-for="login-form-name">
                                         <BFormInput
                                             v-if="!connectExternalProvider"
                                             id="login-form-name"
                                             v-model="login"
+                                            required
                                             name="login"
                                             type="text" />
                                         <BFormInput
@@ -174,10 +190,12 @@ function returnToLogin() {
                                             type="text" />
                                     </BFormGroup>
 
-                                    <BFormGroup :label="labelPassword" label-for="login-form-password">
+                                    <BFormGroup :label="localize('Password')" label-for="login-form-password">
                                         <BFormInput
                                             id="login-form-password"
                                             v-model="password"
+                                            required
+                                            :state="passwordState"
                                             name="password"
                                             type="password" />
 
@@ -194,11 +212,13 @@ function returnToLogin() {
                                         </BFormText>
                                     </BFormGroup>
 
-                                    <BButton v-localize name="login" type="submit">Login</BButton>
+                                    <BButton v-localize name="login" type="submit" :disabled="loading">{{
+                                        localize("Login")
+                                    }}</BButton>
                                 </div>
                                 <div v-if="enableOidc">
                                     <!-- OIDC login-->
-                                    <ExternalLogin login-page :exclude-idps="[connectExternalProvider]" />
+                                    <ExternalLogin login-page :exclude-idps="excludeIdps" />
                                 </div>
                             </BCardBody>
 
diff --git a/client/src/components/Login/RegisterForm.vue b/client/src/components/Login/RegisterForm.vue
index 3f4a5259730d..0cf70309b8d0 100644
--- a/client/src/components/Login/RegisterForm.vue
+++ b/client/src/components/Login/RegisterForm.vue
@@ -130,7 +130,12 @@ async function submit() {
                             accordion="registration_acc">
                             <BCardBody>
                                 <BFormGroup :label="labelEmailAddress" label-for="register-form-email">
-                                    <BFormInput id="register-form-email" v-model="email" name="email" type="text" />
+                                    <BFormInput
+                                        id="register-form-email"
+                                        v-model="email"
+                                        name="email"
+                                        type="text"
+                                        required />
                                 </BFormGroup>
 
                                 <BFormGroup :label="labelPassword" label-for="register-form-password">
@@ -138,7 +143,8 @@ async function submit() {
                                         id="register-form-password"
                                         v-model="password"
                                         name="password"
-                                        type="password" />
+                                        type="password"
+                                        required />
                                 </BFormGroup>
 
                                 <BFormGroup :label="labelConfirmPassword" label-for="register-form-confirm">
@@ -146,7 +152,8 @@ async function submit() {
                                         id="register-form-confirm"
                                         v-model="confirm"
                                         name="confirm"
-                                        type="password" />
+                                        type="password"
+                                        required />
                                 </BFormGroup>
 
                                 <BFormGroup :label="labelPublicName" label-for="register-form-username">
@@ -154,7 +161,8 @@ async function submit() {
                                         id="register-form-username"
                                         v-model="username"
                                         name="username"
-                                        type="text" />
+                                        type="text"
+                                        required />
 
                                     <BFormText v-localize>
                                         Your public name is an identifier that will be used to generate addresses for
diff --git a/client/src/components/User/ExternalIdentities/ExternalLogin.vue b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
index 3d0cca6c51ee..a5f48ae4ed14 100644
--- a/client/src/components/User/ExternalIdentities/ExternalLogin.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
@@ -37,7 +37,7 @@ const rememberIdp = ref(false);
 const cilogonOrCustos = ref<string | null>(null);
 const toggleCilogon = ref(false);
 
-const oIDCIdps = computed<OIDCConfig>(() => isConfigLoaded.value ? config.value.oidc : {});
+const oIDCIdps = computed<OIDCConfig>(() => (isConfigLoaded.value ? config.value.oidc : {}));
 
 const filteredOIDCIdps = computed(() => {
     const exclude = ["cilogon", "custos"].concat(props.excludeIdps);
@@ -86,7 +86,7 @@ async function submitOIDCLogin(idp: string) {
         messageVariant.value = "danger";
         const message = error.response?.data && error.response.data.err_msg;
         messageText.value = message || "Login failed for an unknown reason.";
-        loading.value = false;        
+        loading.value = false;
     }
 }
 

From 8094f13ab3237b345c7e1c02c7ba67df7358483d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 12 Mar 2024 14:59:56 +0100
Subject: [PATCH 15/16] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20improvement=20to?=
 =?UTF-8?q?=20`LoginForm`=20and=20`ExternalLogin`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Login/LoginForm.vue     |  6 ++--
 .../User/ExternalIdentities/ExternalLogin.vue | 35 +++++++++++++------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Login/LoginForm.vue b/client/src/components/Login/LoginForm.vue
index ab14ad639639..54e460a42c02 100644
--- a/client/src/components/Login/LoginForm.vue
+++ b/client/src/components/Login/LoginForm.vue
@@ -212,9 +212,9 @@ function returnToLogin() {
                                         </BFormText>
                                     </BFormGroup>
 
-                                    <BButton v-localize name="login" type="submit" :disabled="loading">{{
-                                        localize("Login")
-                                    }}</BButton>
+                                    <BButton v-localize name="login" type="submit" :disabled="loading">
+                                        {{ localize("Login") }}
+                                    </BButton>
                                 </div>
                                 <div v-if="enableOidc">
                                     <!-- OIDC login-->
diff --git a/client/src/components/User/ExternalIdentities/ExternalLogin.vue b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
index a5f48ae4ed14..29df7f8e9d2c 100644
--- a/client/src/components/User/ExternalIdentities/ExternalLogin.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
@@ -21,6 +21,7 @@ interface Props {
     loginPage?: boolean;
     excludeIdps?: string[];
 }
+
 const props = withDefaults(defineProps<Props>(), {
     loginPage: false,
     excludeIdps: () => [],
@@ -42,26 +43,24 @@ const oIDCIdps = computed<OIDCConfig>(() => (isConfigLoaded.value ? config.value
 const filteredOIDCIdps = computed(() => {
     const exclude = ["cilogon", "custos"].concat(props.excludeIdps);
     const filtered = Object.assign({}, oIDCIdps.value);
+
     exclude.forEach((idp) => {
         delete filtered[idp];
     });
+
     return filtered;
 });
 
 const cilogonListShow = computed(() => {
-    return (
-        Object.prototype.hasOwnProperty.call(oIDCIdps.value, "cilogon") ||
-        Object.prototype.hasOwnProperty.call(oIDCIdps.value, "custos")
-    );
+    return oIDCIdps.value.cilogon || oIDCIdps.value.custos;
 });
 
-const messageShow = computed(() => messageText.value != null);
-
-const cILogonEnabled = computed(() => Object.prototype.hasOwnProperty.call(oIDCIdps.value, "cilogon"));
-const custosEnabled = computed(() => Object.prototype.hasOwnProperty.call(oIDCIdps.value, "custos"));
+const cILogonEnabled = computed(() => oIDCIdps.value.cilogon);
+const custosEnabled = computed(() => oIDCIdps.value.custos);
 
 onMounted(async () => {
     rememberIdp.value = getIdpPreference() !== null;
+
     // Only fetch CILogonIDPs if custos/cilogon configured
     if (cilogonListShow.value) {
         await getCILogonIdps();
@@ -75,9 +74,10 @@ function toggleCILogon(idp: string) {
 
 async function submitOIDCLogin(idp: string) {
     loading.value = true;
+
     try {
         const { data } = await axios.post(withPrefix(`/authnz/${idp}/login`));
-        loading.value = false;
+
         if (data.redirect_uri) {
             window.location = data.redirect_uri;
         }
@@ -86,6 +86,7 @@ async function submitOIDCLogin(idp: string) {
         messageVariant.value = "danger";
         const message = error.response?.data && error.response.data.err_msg;
         messageText.value = message || "Login failed for an unknown reason.";
+    } finally {
         loading.value = false;
     }
 }
@@ -94,16 +95,20 @@ async function submitCILogon(idp: string | null) {
     if (props.loginPage) {
         setIdpPreference();
     }
+
     if (!selected.value || !idp) {
         messageVariant.value = "danger";
         messageText.value = "Please select an institution.";
         return;
     }
+
     loading.value = true;
+
     try {
         const { data } = await axios.post(withPrefix(`/authnz/${idp}/login/?idphint=${selected.value.EntityID}`));
-        loading.value = false;
+
         localStorage.setItem("galaxy-provider", idp);
+
         if (data.redirect_uri) {
             window.location = data.redirect_uri;
         }
@@ -112,6 +117,7 @@ async function submitCILogon(idp: string | null) {
         messageVariant.value = "danger";
         const message = error.response?.data && error.response.data.err_msg;
         messageText.value = message || "Login failed for an unknown reason.";
+    } finally {
         loading.value = false;
     }
 }
@@ -119,17 +125,22 @@ async function submitCILogon(idp: string | null) {
 async function getCILogonIdps() {
     try {
         const { data } = await axios.get(withPrefix("/authnz/get_cilogon_idps"));
+
         cILogonIdps.value = data;
+
         if (cILogonIdps.value.length == 1) {
             selected.value = cILogonIdps.value[0]!;
         } else {
             // List is originally sorted by OrganizationName which can be different from DisplayName
             cILogonIdps.value.sort((a, b) => (a.DisplayName > b.DisplayName ? 1 : -1));
         }
+
         if (props.loginPage) {
             const preferredIdp = getIdpPreference();
+
             if (preferredIdp) {
                 const selectedIdp = cILogonIdps.value.find((idp) => idp.EntityID === preferredIdp);
+
                 if (selectedIdp) {
                     selected.value = selectedIdp;
                 }
@@ -158,12 +169,14 @@ function getIdpPreference() {
 
 <template>
     <div>
-        <BAlert :show="messageShow" :variant="messageVariant">
+        <BAlert :show="messageText" :variant="messageVariant">
             {{ messageText }}
         </BAlert>
+
         <BForm id="externalLogin">
             <!-- OIDC login-->
             <hr class="my-4" />
+
             <div v-if="cilogonListShow" class="cilogon">
                 <div v-if="props.loginPage">
                     <!--Only Display if CILogon/Custos is configured-->

From 72971443d906e1b30ab276c69b5ed314fd618299 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 12 Mar 2024 15:00:41 +0100
Subject: [PATCH 16/16] =?UTF-8?q?=E2=9C=94=EF=B8=8F:=20fix=20login=20form?=
 =?UTF-8?q?=20selenium=20tests=20after=20make=20username=20and=20password?=
 =?UTF-8?q?=20required?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/galaxy_test/selenium/test_login.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/galaxy_test/selenium/test_login.py b/lib/galaxy_test/selenium/test_login.py
index a71938ae836c..dbbca9d7a6d7 100644
--- a/lib/galaxy_test/selenium/test_login.py
+++ b/lib/galaxy_test/selenium/test_login.py
@@ -24,7 +24,7 @@ def test_logging_in(self):
 
     @selenium_test
     def test_invalid_logins(self):
-        bad_emails = ["test2@test.org", "test", "", "'; SELECT * FROM galaxy_user WHERE 'u' = 'u';"]
+        bad_emails = ["test2@test.org", "test", "'; SELECT * FROM galaxy_user WHERE 'u' = 'u';"]
         for bad_email in bad_emails:
             self.home()
             self.submit_login(bad_email, assert_valid=False)
@@ -32,7 +32,7 @@ def test_invalid_logins(self):
 
     @selenium_test
     def test_invalid_passwords(self):
-        bad_passwords = ["1234", "", "; SELECT * FROM galaxy_user"]
+        bad_passwords = ["1234", "; SELECT * FROM galaxy_user"]
         for bad_password in bad_passwords:
             self.home()
             self.submit_login(self._get_random_email(), password=bad_password, assert_valid=False)