Skip to content

Commit 47750b1

Browse files
ahmedhamidawanahmedhamidawan
committed
make style adjustments to allow for the welcome page to render
1 parent 5fb4e95 commit 47750b1

2 files changed

Lines changed: 78 additions & 62 deletions

File tree

‎client/src/components/Login/LoginForm.vue‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,11 @@ const confirmURL = ref(urlParams.has("confirm") && urlParams.get("confirm") == "
6666
6767
const excludeIdps = computed(() => (connectExternalProvider.value ? [connectExternalProvider.value] : undefined));
6868
69+
/** This decides if all login options should be displayed in column style
70+
* (one below the other) or horizontally.
71+
*/
72+
const loginColumnDisplay = computed(() => Boolean(props.showWelcomeWithLogin && props.welcomeUrl));
73+
6974
function toggleLogin() {
7075
emit("toggle-login");
7176
}
@@ -146,8 +151,8 @@ function returnToLogin() {
146151
</script>
147152

148153
<template>
149-
<div class="container">
150-
<div class="row justify-content-md-center">
154+
<div class="login-form">
155+
<div class="d-flex justify-content-md-center">
151156
<template v-if="!confirmURL">
152157
<div>
153158
<BAlert :show="!!messageText" :variant="messageVariant">
@@ -167,7 +172,7 @@ function returnToLogin() {
167172
<span>{{ localize("Welcome to Galaxy, please log in") }}</span>
168173
</BCardHeader>
169174

170-
<BCardBody class="d-flex">
175+
<BCardBody :class="{ 'd-flex w-100': !loginColumnDisplay }">
171176
<div>
172177
<!-- standard internal galaxy login -->
173178
<BFormGroup
@@ -222,14 +227,21 @@ function returnToLogin() {
222227
</BButton>
223228
</div>
224229

225-
<VerticalSeparator v-if="enableOidc">
226-
<span v-localize>or</span>
227-
</VerticalSeparator>
228-
229-
<div v-if="enableOidc" class="m-1">
230-
<!-- OIDC login-->
231-
<ExternalLogin login-page :exclude-idps="excludeIdps" />
232-
</div>
230+
<template v-if="enableOidc">
231+
<VerticalSeparator v-if="!loginColumnDisplay">
232+
<span v-localize>or</span>
233+
</VerticalSeparator>
234+
235+
<hr v-else class="w-100" />
236+
237+
<div class="m-1 w-100">
238+
<!-- OIDC login-->
239+
<ExternalLogin
240+
login-page
241+
:exclude-idps="excludeIdps"
242+
:column-display="loginColumnDisplay" />
243+
</div>
244+
</template>
233245
</BCardBody>
234246

235247
<BCardFooter>
@@ -268,7 +280,7 @@ function returnToLogin() {
268280
@setRedirect="setRedirect" />
269281
</template>
270282

271-
<div v-if="showWelcomeWithLogin && props.welcomeUrl" class="col">
283+
<div v-if="showWelcomeWithLogin && props.welcomeUrl" class="w-100">
272284
<BEmbed type="iframe" :src="withPrefix(props.welcomeUrl)" aspect="1by1" />
273285
</div>
274286
</div>
@@ -279,4 +291,7 @@ function returnToLogin() {
279291
.card-body {
280292
overflow: visible;
281293
}
294+
.login-form {
295+
margin: 0rem 10rem;
296+
}
282297
</style>

‎client/src/components/User/ExternalIdentities/ExternalLogin.vue‎

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,13 @@ type OIDCConfig = Record<
3030
interface Props {
3131
loginPage?: boolean;
3232
excludeIdps?: string[];
33+
columnDisplay?: boolean;
3334
}
3435
3536
const props = withDefaults(defineProps<Props>(), {
3637
loginPage: false,
3738
excludeIdps: () => [],
39+
columnDisplay: true,
3840
});
3941
4042
const { config, isConfigLoaded } = useConfig();
@@ -188,7 +190,7 @@ function getIdpPreference() {
188190
{{ messageText }}
189191
</BAlert>
190192

191-
<BForm id="externalLogin" :class="{ 'h-100': !messageText, 'd-flex': loginPage }">
193+
<BForm id="externalLogin" :class="{ 'h-100': !messageText, 'd-flex': !props.columnDisplay }">
192194
<!-- OIDC login-->
193195
<div v-if="cilogonListShow" class="cilogon">
194196
<div v-if="props.loginPage">
@@ -276,57 +278,48 @@ function getIdpPreference() {
276278
</p>
277279
</div>
278280

279-
<VerticalSeparator v-if="loginPage && cilogonListShow && Object.keys(filteredOIDCIdps).length > 0">
280-
<span v-localize>or</span>
281-
</VerticalSeparator>
281+
<template v-if="cilogonListShow && Object.keys(filteredOIDCIdps).length > 0">
282+
<VerticalSeparator v-if="!props.columnDisplay">
283+
<span v-localize>or</span>
284+
</VerticalSeparator>
282285

283-
<span
284-
v-if="isConfigLoaded"
285-
class="d-flex flex-column h-100"
286-
:class="loginPage && !messageText ? 'justify-content-center' : ''"
287-
style="row-gap: 1rem">
286+
<hr v-else class="w-100" />
287+
</template>
288+
289+
<span v-if="isConfigLoaded" class="oidc-idps-grid">
288290
<div v-for="(iDPInfo, idp) in filteredOIDCIdps" :key="idp">
289-
<span v-if="iDPInfo['icon']">
290-
<BButton
291-
variant="link"
292-
class="d-block p-0 text-decoration-none"
293-
:class="loginPage && !messageText ? 'w-100' : ''"
294-
:disabled="loading"
295-
@click="submitOIDCLogin(idp)">
296-
<img
297-
:src="iDPInfo['icon']"
298-
height="35"
299-
:alt="`Sign in with ${capitalizeFirstLetter(idp)}`" />
300-
</BButton>
301-
</span>
302-
<span v-else-if="iDPInfo['custom_button_text']">
303-
<BButton
304-
variant="outline-primary"
305-
class="d-block"
306-
:class="loginPage && !messageText ? 'w-100' : ''"
307-
:disabled="loading"
308-
@click="submitOIDCLogin(idp)">
309-
<i :class="oIDCIdps[idp]" />
310-
Sign in with {{ iDPInfo["custom_button_text"] }}
311-
</BButton>
312-
</span>
313-
<span v-else>
314-
<BButton
315-
variant="outline-primary"
316-
class="d-block"
317-
:class="loginPage && !messageText ? 'w-100' : ''"
318-
:disabled="loading"
319-
@click="submitOIDCLogin(idp)">
320-
<i :class="oIDCIdps[idp]" />
321-
Sign in with
322-
<span v-if="iDPInfo['label']">
323-
{{ iDPInfo["label"].charAt(0).toUpperCase() + iDPInfo["label"].slice(1) }}
324-
</span>
325-
<span v-else>
326-
{{ capitalizeFirstLetter(idp) }}
327-
</span>
328-
</BButton>
329-
</span>
291+
<BButton
292+
v-if="iDPInfo['icon']"
293+
variant="link"
294+
class="d-block p-0 text-decoration-none"
295+
:disabled="loading"
296+
@click="submitOIDCLogin(idp)">
297+
<img :src="iDPInfo['icon']" height="35" :alt="`Sign in with ${capitalizeFirstLetter(idp)}`" />
298+
</BButton>
299+
<BButton
300+
v-else-if="iDPInfo['custom_button_text']"
301+
variant="outline-primary"
302+
class="d-block"
303+
:disabled="loading"
304+
@click="submitOIDCLogin(idp)">
305+
<i :class="oIDCIdps[idp]" />
306+
Sign in with {{ iDPInfo["custom_button_text"] }}
307+
</BButton>
308+
<BButton
309+
v-else
310+
variant="outline-primary"
311+
class="d-block"
312+
:disabled="loading"
313+
@click="submitOIDCLogin(idp)">
314+
<i :class="oIDCIdps[idp]" />
315+
Sign in with
316+
<span v-if="iDPInfo['label']">
317+
{{ iDPInfo["label"].charAt(0).toUpperCase() + iDPInfo["label"].slice(1) }}
318+
</span>
319+
<span v-else>
320+
{{ capitalizeFirstLetter(idp) }}
321+
</span>
322+
</BButton>
330323
</div>
331324
</span>
332325
</BForm>
@@ -337,4 +330,12 @@ function getIdpPreference() {
337330
.card-body {
338331
overflow: visible;
339332
}
333+
.oidc-idps-grid {
334+
display: grid;
335+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
336+
gap: 0.5rem;
337+
width: 100%;
338+
height: 100%;
339+
justify-items: center;
340+
}
340341
</style>

0 commit comments

Comments
 (0)
⚡