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");
     });
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>
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..9422c8af8f88 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_external_label=${provider_label}`,
+        }));
+
+        const wrapper = await mountLoginForm();
+
         expect(wrapper.find(".card-header").exists()).toBe(false);
+
         const alert = wrapper.find(".alert");
         expect(alert.classes()).toContain("alert-info");
         expect(alert.text()).toContain(`There already exists a user with the email ${external_email}`);
         expect(alert.text()).toContain(`In order to associate this account with ${provider_label}`);
+
         const inputs = wrapper.findAll("input");
         expect(inputs.length).toBe(2);
+
         const usernameField = inputs.at(0);
         expect(usernameField.attributes("type")).toBe("text");
-        expect(usernameField.element.disabled).toBe(true);
-        expect(usernameField.element.value).not.toBe("");
-        expect(usernameField.element.value).toContain(external_email);
+        expect((usernameField.element as HTMLInputElement).disabled).toBe(true);
+        expect((usernameField.element as HTMLInputElement).value).not.toBe("");
+        expect((usernameField.element as HTMLInputElement).value).toContain(external_email);
+
         const pwdField = inputs.at(1);
         expect(pwdField.attributes("type")).toBe("password");
-        expect(pwdField.element.value).toBe("");
+        expect((pwdField.element as HTMLInputElement).value).toBe("");
+
         await pwdField.setValue("test_pwd");
+
         const submitButton = wrapper.find("button[type='submit']");
+
         await submitButton.trigger("submit");
-        const postedData = JSON.parse(axiosMock.history.post[0].data);
+
+        const postedData = JSON.parse(axiosMock.history.post?.[0]?.data);
         expect(postedData.login).toBe(external_email);
         expect(postedData.password).toBe("test_pwd");
-        const postedURL = axiosMock.history.post[0].url;
+
+        const postedURL = axiosMock.history.post?.[0]?.url;
         expect(postedURL).toBe("/user/login");
     });
 });
diff --git a/client/src/components/Login/LoginForm.vue b/client/src/components/Login/LoginForm.vue
index 626265bf1c9a..54e460a42c02 100644
--- a/client/src/components/Login/LoginForm.vue
+++ b/client/src/components/Login/LoginForm.vue
@@ -1,47 +1,207 @@
+<script setup lang="ts">
+import axios, { type AxiosError } from "axios";
+import {
+    BAlert,
+    BButton,
+    BCard,
+    BCardBody,
+    BCardFooter,
+    BCardHeader,
+    BEmbed,
+    BForm,
+    BFormGroup,
+    BFormInput,
+    BFormText,
+} from "bootstrap-vue";
+import { computed, 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>(), {
+    showResetLink: true,
+    redirect: undefined,
+    termsUrl: undefined,
+    welcomeUrl: undefined,
+    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 passwordState = ref<boolean | null>(null);
+const loading = ref(false);
+const messageText = ref("");
+const messageVariant = ref<"info" | "danger">("info");
+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;
+    }
+
+    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) {
+            window.location.href = withPrefix(`/root/login?expired_user=${response.data.expired_user}`);
+        } else if (connectExternalProvider.value) {
+            window.location.href = withPrefix("/user/external_ids?connect_external=true");
+        } else if (response.data.redirect) {
+            window.location.href = withPrefix(encodeURI(response.data.redirect));
+        } else {
+            window.location.href = withPrefix("/");
+        }
+    } 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;
+
+        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.";
+        }
+        if (message === "Invalid password.") {
+            passwordState.value = false;
+        }
+    }
+}
+
+function setRedirect(url: string) {
+    localStorage.setItem("redirect_url", url);
+}
+
+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 (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+        messageVariant.value = "danger";
+        const errMsg = error.response?.data && error.response.data.err_msg;
+        messageText.value = errMsg || "Password reset failed for an unknown reason.";
+    } finally {
+        loading.value = false;
+    }
+}
+
+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">
+                        <!-- eslint-disable-next-line vue/no-v-html -->
                         <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">
-                                <span>{{ headerWelcome }}</span>
-                            </b-card-header>
-                            <b-card-body>
+                    </BAlert>
+
+                    <BForm id="login" @submit.prevent="submitLogin()">
+                        <BCard no-body>
+                            <BCardHeader v-if="!connectExternalProvider">
+                                <span>{{ localize("Welcome to Galaxy, please log in") }}</span>
+                            </BCardHeader>
+
+                            <BCardBody>
                                 <div>
                                     <!-- standard internal galaxy login -->
-                                    <b-form-group :label="labelNameAddress" label-for="login-form-name">
-                                        <b-form-input
+                                    <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" />
-                                        <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="localize('Password')" label-for="login-form-password">
+                                        <BFormInput
                                             id="login-form-password"
                                             v-model="password"
+                                            required
+                                            :state="passwordState"
                                             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 +209,20 @@
                                                 @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" :disabled="loading">
+                                        {{ localize("Login") }}
+                                    </BButton>
                                 </div>
                                 <div v-if="enableOidc">
                                     <!-- OIDC login-->
-                                    <ExternalLogin :login_page="true" :exclude_idps="[connectExternalProvider]" />
+                                    <ExternalLogin login-page :exclude-idps="excludeIdps" />
                                 </div>
-                            </b-card-body>
-                            <b-card-footer>
+                            </BCardBody>
+
+                            <BCardFooter>
                                 <span v-if="!connectExternalProvider">
                                     Don't have an account?
                                     <span v-if="allowUserCreation">
@@ -82,9 +246,9 @@
                                         Return to login here.
                                     </a>
                                 </span>
-                            </b-card-footer>
-                        </b-card>
-                    </b-form>
+                            </BCardFooter>
+                        </BCard>
+                    </BForm>
                 </div>
             </template>
             <template v-else>
@@ -93,157 +257,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;
 }
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>
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.");
     });
 });
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>
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");
     });
diff --git a/client/src/components/Login/RegisterForm.vue b/client/src/components/Login/RegisterForm.vue
index 0a8e9d31a3f2..0cf70309b8d0 100644
--- a/client/src/components/Login/RegisterForm.vue
+++ b/client/src/components/Login/RegisterForm.vue
@@ -1,86 +1,196 @@
+<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>
+                                    <ExternalLogin />
+                                </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"
+                                        required />
+                                </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
+                                        type="password"
+                                        required />
+                                </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
+                                        type="password"
+                                        required />
+                                </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
+                                        type="text"
+                                        required />
+
+                                    <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 +199,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 +211,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>
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..29df7f8e9d2c 100644
--- a/client/src/components/User/ExternalIdentities/ExternalLogin.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
@@ -1,70 +1,243 @@
+<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 oIDCIdps.value.cilogon || 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();
+    }
+});
+
+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`));
+
+        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.";
+    } finally {
+        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}`));
+
+        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.";
+    } finally {
+        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="messageText" :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 +250,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;
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 3555469d2f0a..2a0789f2204e 100644
--- a/client/src/entry/analysis/modules/Login.vue
+++ b/client/src/entry/analysis/modules/Login.vue
@@ -1,18 +1,41 @@
+<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" />
+            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
+            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"
             :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 +45,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>
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)