Skip to content

Refactor notice-bar positioning in Keycloak Vue app #1057

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
davinotdavid wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Refactor notice-bar positioning in Keycloak Vue app #1057

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0eff432
Consolidate message-bars into BaseTemplate and move them below logo
davinotdavid Jul 3, 2026
153df99
Better vertical distancing for logo, notice and panel-contents
davinotdavid Jul 3, 2026
f1db467
Remove unused variables
davinotdavid Jul 3, 2026
cfd5f73
Remove duplicated .logo-link
davinotdavid Jul 3, 2026
ff8d4bb
Add extra guard for RegisterView notice-bar
davinotdavid Jul 6, 2026
eb55788
Cleanup unused CSS
davinotdavid Jul 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 21 additions & 13 deletions keycloak/themes/tbpro/assets/vue/BaseTemplate.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<script setup lang="ts">
import { ref } from 'vue';
import ThundermailLogo from '@kc/svg/thundermail-logo-blue.svg';
import MessageBar from '@kc/vue/components/MessageBar.vue';

const clientUrl = window._page.currentView?.clientUrl;

</script>

<template>
Expand All @@ -18,6 +17,11 @@ const clientUrl = window._page.currentView?.clientUrl;
<a :href="clientUrl" class="logo-link">
<img :src="ThundermailLogo" alt="Thundermail" class="base-template__logo" />
</a>

<div id="message-bar" class="message-bar">
<message-bar />
</div>

<div class="panel-contents">
<slot />
</div>
Expand Down Expand Up @@ -66,7 +70,6 @@ section {
width: 100%;
height: auto;
min-height: 100vh;
max-height: var(--max-card-height);
Comment thread
MelissaAutumn marked this conversation as resolved.
display: flex;
align-items: stretch;
justify-content: center;
Expand All @@ -90,11 +93,22 @@ section {
height: 100%;
display: flex;
flex-direction: column;
gap: 3rem;
padding: 6rem 2rem;

&:has(.notice-bar) {
padding: 6rem 2rem;
.message-bar {
margin-block-end: 1.5rem;
}

.logo-link {
display: block;
text-decoration: none;
width: min-content;
margin-block-end: 2rem;

.logo {
height: 36px;
width: auto;
}
}
}
}
Expand Down Expand Up @@ -146,13 +160,7 @@ section {
min-height: auto;

.panel {


padding: 6rem 10rem 5.625rem 6rem;

&:has(.notice-bar) {
padding: 6rem 10rem 5.625rem 6rem;
}
padding: 6rem 6rem 5.625rem 6rem;
}

.panel-contents {
Expand Down
6 changes: 0 additions & 6 deletions keycloak/themes/tbpro/assets/vue/components/MessageBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,3 @@ const messageType = computed(() => {
<template>
<notice-bar data-testid="notice-bar" class="notice-bar" :type="messageType" v-if="message?.type">{{ message?.summary }}</notice-bar>
</template>

<style scoped>
.notice-bar {
margin-bottom: var(--space-12);
}
</style>
16 changes: 0 additions & 16 deletions keycloak/themes/tbpro/assets/vue/views/ConfigToptView/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import {
import { computed, ref, useTemplateRef } from "vue";
import { i18n } from '@kc/composables/i18n.js';
import CancelForm from '@kc/vue/components/CancelForm.vue';
import MessageBar from "@kc/vue/components/MessageBar.vue";

const isManualMode = ref(false);
const formAction = window._page.currentView?.formAction;
const settingsForm = useTemplateRef('settings-form');
Expand Down Expand Up @@ -117,8 +115,6 @@ export default {


<template>
<message-bar/>

<h2>{{ $t('loginTotpTitle') }}</h2>
<cancel-form ref="cancel-form" :action="formAction" cancelId="cancelTOTPBtn" cancelValue="true"
cancelName="cancel-aia"/>
Expand Down Expand Up @@ -201,18 +197,6 @@ export default {
</template>

<style scoped>
.logo-link {
display: block;
text-decoration: none;
margin-block-end: 2.8125rem;

.logo {
height: 36px;
width: auto;
transition: opacity 0.2s ease;
}
}

h2 {
font-size: 1.5rem;
font-family: metropolis;
Expand Down
15 changes: 0 additions & 15 deletions keycloak/themes/tbpro/assets/vue/views/DeleteCredentialView/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
import { DangerButton, PrimaryButton } from '@thunderbirdops/services-ui';
import { useTemplateRef } from 'vue';
import CancelForm from '@kc/vue/components/CancelForm.vue';
import MessageBar from '@kc/vue/components/MessageBar.vue';

const formAction = window._page.currentView?.formAction;
const loginForm = useTemplateRef('login-form');
const cancelForm = useTemplateRef('cancel-form');
Expand All @@ -27,7 +25,6 @@ export default {
</script>

<template>
<message-bar/>
<h2>{{ deleteCredentialTitle }}</h2>
<cancel-form ref="cancel-form" :action="formAction" cancelId="kc-decline" cancelValue="$t('doCancel')"
cancelName="cancel-aia"/>
Expand All @@ -43,18 +40,6 @@ export default {
</template>

<style scoped>
.logo-link {
display: block;
text-decoration: none;
margin-block-end: 2.8125rem;

.logo {
height: 36px;
width: auto;
transition: opacity 0.2s ease;
}
}

h2 {
font-size: 1.5rem;
font-family: metropolis;
Expand Down
27 changes: 0 additions & 27 deletions keycloak/themes/tbpro/assets/vue/views/ErrorView/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script setup lang="ts">
import MessageBar from '@kc/vue/components/MessageBar.vue';
import { BrandButton } from '@thunderbirdops/services-ui';
import { PhArrowLeft } from '@phosphor-icons/vue';

Expand All @@ -14,8 +13,6 @@ export default {
</script>

<template>
<message-bar/>

<h2>{{ $t('errorTitle') }}</h2>
<template v-if="actionUrl">
<div class="button-container">
Expand All @@ -29,14 +26,6 @@ export default {
</template>

<style scoped>
.notice-bar {
position: absolute;
top: 1rem;
left: 1.5rem;
right: 1.5rem;
z-index: 1;
}

h2 {
font-size: 1.5rem;
font-family: metropolis;
Expand All @@ -49,20 +38,4 @@ h2 {
.button-container {
width: fit-content;
}

.logo-link {
display: block;
text-decoration: none;
margin-block-end: 2.8125rem;

.logo {
height: 36px;
width: auto;
transition: opacity 0.2s ease;

&:hover {
opacity: 0.8;
}
}
}
</style>
26 changes: 0 additions & 26 deletions keycloak/themes/tbpro/assets/vue/views/ForgotPasswordView/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<script setup lang="ts">
import { TextInput, PrimaryButton, NoticeBar, NoticeBarTypes } from "@thunderbirdops/services-ui";
import { ref, computed, useTemplateRef } from 'vue';
import MessageBar from '@kc/vue/components/MessageBar.vue';

const errors = window._page.currentView?.errors;
const formAction = window._page.currentView?.formAction;
Expand Down Expand Up @@ -30,7 +29,6 @@ export default {

<template>
<notice-bar :type="NoticeBarTypes.Critical" v-if="usernameError">{{ $t('forgotPasswordError') }}</notice-bar>
<message-bar v-else/>

<h2>{{ $t('emailForgotTitle') }}</h2>
<form
Expand Down Expand Up @@ -67,14 +65,6 @@ export default {
</template>

<style scoped>
.notice-bar {
position: absolute;
top: 1rem;
left: 1.5rem;
right: 1.5rem;
z-index: 1;
}

h2 {
font-size: 1.5rem;
font-family: metropolis;
Expand All @@ -84,22 +74,6 @@ h2 {
margin: 0 0 1.5rem 0;
}

.logo-link {
display: block;
text-decoration: none;
margin-block-end: 2.8125rem;

.logo {
height: 36px;
width: auto;
transition: opacity 0.2s ease;

&:hover {
opacity: 0.8;
}
}
}

.form-elements {
display: flex;
flex-direction: column;
Expand Down
10 changes: 0 additions & 10 deletions keycloak/themes/tbpro/assets/vue/views/InfoView/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script setup lang="ts">
import MessageBar from '@kc/vue/components/MessageBar.vue';
import { BrandButton } from '@thunderbirdops/services-ui';
import { PhArrowRight } from '@phosphor-icons/vue';
import { computed } from 'vue';
Expand Down Expand Up @@ -39,7 +38,6 @@ export default {
</h1>
<p class="text" v-if="isVerifyEmailAction">{{ $t('infoVerifyEmailText') }}</p>
<p class="text" v-else-if="isAccountUpdated">{{ $t('infoAccountUpdatedText') }}</p>
<message-bar v-if="messageHeader && messageHeader !== message?.summary" />
</header>
<main>
<ul class="required-actions" v-if="!isSingleAction">
Expand All @@ -57,14 +55,6 @@ export default {
</template>

<style scoped>
.notice-bar {
position: absolute;
top: 1rem;
left: 1.5rem;
right: 1.5rem;
z-index: 1;
}

.required-actions {
margin: 0;
margin-bottom: 1.5rem;
Expand Down
2 changes: 0 additions & 2 deletions keycloak/themes/tbpro/assets/vue/views/LoginRecoveryAuthnCodeView/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<script setup>
import { TextInput, PrimaryButton, LinkButton } from "@thunderbirdops/services-ui";
import { computed, useTemplateRef } from "vue";
import MessageBar from '@kc/vue/components/MessageBar.vue';
import CancelForm from '@kc/vue/components/CancelForm.vue';

const formAction = window._page.currentView?.formAction;
Expand Down Expand Up @@ -36,7 +35,6 @@ export default {
<h2>{{ $t('authRecoveryCodeHeader') }}</h2>
<form id="kc-recovery-code-login-form" ref="login-form" method="POST" :action="formAction" @submit.prevent="onSubmit"
@keyup.enter="onSubmit">
<message-bar/>
<div class="form-elements">
<text-input data-testid="recovery-code-input" id="recoveryCodeInput" name="recoveryCodeInput"
autocomplete="off" required autofocus :error="recoveryError">
Expand Down
2 changes: 0 additions & 2 deletions keycloak/themes/tbpro/assets/vue/views/LoginTotpView/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<script setup>
import { TextInput, PrimaryButton, SelectInput, LinkButton } from "@thunderbirdops/services-ui";
import { computed, ref, useTemplateRef } from "vue";
import MessageBar from '@kc/vue/components/MessageBar.vue';
import CancelForm from '@kc/vue/components/CancelForm.vue';

const errors = window._page.currentView?.errors;
Expand Down Expand Up @@ -38,7 +37,6 @@ export default {
<h2>{{ $t('doLogIn') }}</h2>
<form id="kc-form-login" ref="login-form" method="POST" :action="formAction" @submit.prevent="onSubmit"
@keyup.enter="onSubmit">
<message-bar/>
<div class="form-elements">
<!-- #1011: with a single credential there's nothing to choose, so hide the
selector (matches stock Keycloak's `userOtpCredentials?size gt 1` guard). -->
Expand Down
35 changes: 5 additions & 30 deletions keycloak/themes/tbpro/assets/vue/views/LoginView/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,13 @@
import { ref, computed, useTemplateRef } from 'vue';
import { TextInput, BrandButton, CheckboxInput, NoticeBar, NoticeBarTypes } from '@thunderbirdops/services-ui';
import { PhArrowRight } from '@phosphor-icons/vue';
import MessageBar from '@kc/vue/components/MessageBar.vue';
import ThunderbirdLogoLight from '@kc/svg/thunderbird-pro-light.svg';
import { TBPRO_WAIT_LIST } from '@kc/defines';

const firstError = window._page.currentView?.firstError;
const formAction = window._page.currentView?.formAction;
const rememberMe = window._page.currentView?.rememberMe;
const forgotPasswordUrl = window._page.currentView?.forgotPasswordUrl;
const registerUrl = window._page.currentView?.registerUrl;
const supportUrl = window._page.currentView?.supportUrl;
const clientUrl = window._page.currentView?.clientUrl;
const loginForm = useTemplateRef('login-form');
const message = window._page?.message;
const tbProPrimaryDomain = window._page.currentView?.tbProPrimaryDomain;
Expand Down Expand Up @@ -63,9 +59,8 @@ export default {
</script>

<template>
<notice-bar :type="NoticeBarTypes.Critical" v-if="firstError">{{ firstError }}</notice-bar>
<message-bar v-else-if="message?.type" />
<notice-bar :type="NoticeBarTypes.Info" v-else>
<notice-bar :type="NoticeBarTypes.Critical" v-if="firstError" class="notice-bar-login">{{ firstError }}</notice-bar>
<notice-bar :type="NoticeBarTypes.Info" v-else-if="!message?.type" class="notice-bar-login">
Comment thread
MelissaAutumn marked this conversation as resolved.
<i18n-t keypath="inviteOnly" tag="span">
<a :href="TBPRO_WAIT_LIST" data-testid="go-to-invite-only-url" target="_blank">{{ $t('inviteOnlyAction') }}</a>
</i18n-t>
Expand Down Expand Up @@ -158,28 +153,8 @@ export default {
</template>

<style scoped>
.notice-bar {
position: absolute;
top: 1rem;
left: 1.5rem;
right: 1.5rem;
z-index: 1;
}

.logo-link {
display: block;
text-decoration: none;
margin-block-end: 2.8125rem;

.logo {
height: 36px;
width: auto;
transition: opacity 0.2s ease;

&:hover {
opacity: 0.8;
}
}
.notice-bar-login {
margin-bottom: 1.5rem;
}

h2 {
Expand All @@ -197,7 +172,7 @@ form {
}

.forgot-password-link {
display: block;
display: inline-block;
font-size: 0.6875rem;
color: var(--colour-ti-muted);
margin-block-end: 2rem;
Expand Down
Loading
Loading