Skip to content

Commit 89f61f9

Browse files
derick-montaguerfrandse
derick-montague
authored and
rfrandse
committed
Update login page layout
This update will: - Change the positioning of the form to be on the left - Add the built on OpenBMC logo to the bottom right corner of the screen - Add the ability to include a GUI custom name using a .env variable. If the variable is not present, the login page will not include the <h1> section heading element. - Remove the word "logo" from the alt attribute for the company logo image used in the application header and on the login page. Github story: openbmc#63 Signed-off-by: Derick Montague <[email protected]> Change-Id: I83ac5aecff0b3858c3ab5f38ab1aaa603d59acf1
1 parent ef583ee commit 89f61f9

File tree

8 files changed

+181
-116
lines changed

8 files changed

+181
-116
lines changed

‎.env.ibm

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
NODE_ENV=production
22
VUE_APP_ENV_NAME=ibm
33
VUE_APP_COMPANY_NAME="IBM"
4+
VUE_APP_GUI_NAME="BMC System Management"
45
CUSTOM_STYLES=true
56
CUSTOM_APP_NAV=true
67
CUSTOM_ROUTER=true

‎src/assets/images/built-on-openbmc-logo.svg

+13
Loading

‎src/assets/images/logo-login.svg renamed to ‎src/assets/images/login-company-logo.svg

File renamed without changes.

‎src/components/AppHeader/AppHeader.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export default {
130130
data() {
131131
return {
132132
isNavigationOpen: false,
133-
altLogo: `${process.env.VUE_APP_COMPANY_NAME} logo`,
133+
altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC',
134134
};
135135
},
136136
computed: {

‎src/layouts/LoginLayout.vue

+81-27
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,34 @@
11
<template>
22
<main>
3-
<b-container class="login-container" fluid>
4-
<b-row class="login-row" align-v="center">
5-
<b-col class="login-branding mt-5 mb-5 text-center" md="6">
6-
<div class="login-branding__container">
3+
<div class="login-container">
4+
<div class="login-main">
5+
<div>
6+
<div class="login-brand mb-5">
77
<img
8-
class="logo"
9-
width="200px"
10-
src="@/assets/images/logo-login.svg"
8+
width="90px"
9+
src="@/assets/images/login-company-logo.svg"
1110
:alt="altLogo"
1211
/>
13-
<h1>OpenBMC</h1>
1412
</div>
15-
</b-col>
16-
<b-col md="6">
17-
<router-view />
18-
</b-col>
19-
</b-row>
20-
</b-container>
13+
<h1 v-if="customizableGuiName" class="h3 mb-5">
14+
{{ customizableGuiName }}
15+
</h1>
16+
<router-view class="login=form form-background" />
17+
</div>
18+
</div>
19+
<div class="login-aside">
20+
<div class="login-aside__logo-brand">
21+
<!-- Add Secondary brand logo if needed -->
22+
</div>
23+
<div class="login-aside__logo-bmc">
24+
<img
25+
height="60px"
26+
src="@/assets/images/built-on-openbmc-logo.svg"
27+
alt="Built on OpenBMC"
28+
/>
29+
</div>
30+
</div>
31+
</div>
2132
</main>
2233
</template>
2334

@@ -26,33 +37,76 @@ export default {
2637
name: 'LoginLayout',
2738
data() {
2839
return {
29-
altLogo: `${process.env.VUE_APP_COMPANY_NAME} logo`,
40+
altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC',
41+
customizableGuiName: process.env.VUE_APP_GUI_NAME || '',
3042
};
3143
},
3244
};
3345
</script>
3446

3547
<style lang="scss" scoped>
3648
.login-container {
37-
@include media-breakpoint-up(md) {
38-
background: linear-gradient(
39-
to right,
40-
theme-color('light') 50%,
41-
gray('200') 50%
42-
);
49+
background: gray('100');
50+
display: flex;
51+
flex-direction: column;
52+
gap: $spacer * 2;
53+
max-width: 1400px;
54+
min-width: 320px;
55+
min-height: 100vh;
56+
justify-content: space-around;
57+
58+
@include media-breakpoint-up('md') {
59+
background: $white;
60+
flex-direction: row;
61+
}
62+
}
63+
64+
.login-main {
65+
min-height: 50vh;
66+
padding: $spacer * 3;
67+
68+
@include media-breakpoint-up('md') {
69+
background: gray('100');
70+
display: flex;
71+
flex-direction: column;
72+
flex: 1 1 75%;
73+
min-height: 100vh;
74+
justify-content: center;
75+
align-items: center;
4376
}
4477
}
4578
46-
.login-row {
47-
@include media-breakpoint-up(md) {
79+
.login-form {
80+
@include media-breakpoint-up('md') {
81+
max-width: 360px;
82+
}
83+
}
84+
85+
.login-aside {
86+
display: flex;
87+
align-items: flex-end;
88+
justify-content: flex-end;
89+
gap: $spacer * 1.5;
90+
margin-right: $spacer * 3;
91+
margin-bottom: $spacer;
92+
93+
@include media-breakpoint-up('md') {
4894
min-height: 100vh;
95+
padding-bottom: $spacer;
96+
flex: 1 1 25%;
97+
margin-bottom: 0;
4998
}
5099
}
51100
52-
.login-branding__container {
53-
@include media-breakpoint-up(md) {
54-
float: right;
55-
margin-right: 4rem;
101+
.login-aside__logo-brand:not(:empty) {
102+
&::after {
103+
content: '';
104+
display: inline-block;
105+
height: 2.5rem;
106+
width: 2px;
107+
background-color: gray('200');
108+
margin-left: $spacer * 1.5;
109+
vertical-align: middle;
56110
}
57111
}
58112
</style>

‎src/views/ChangePassword/ChangePassword.vue

+67-63
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,73 @@
11
<template>
2-
<div class="change-password-container mx-auto ml-md-5 mb-3">
2+
<div class="change-password-container">
33
<alert variant="danger" class="mb-4">
44
<p v-if="changePasswordError">
55
{{ $t('pageChangePassword.changePasswordError') }}
66
</p>
77
<p v-else>{{ $t('pageChangePassword.changePasswordAlertMessage') }}</p>
88
</alert>
9-
<dl>
10-
<dt>{{ $t('pageChangePassword.username') }}</dt>
11-
<dd>{{ username }}</dd>
12-
</dl>
13-
<b-form novalidate @submit.prevent="changePassword">
14-
<b-form-group
15-
label-for="password"
16-
:label="$t('pageChangePassword.newPassword')"
17-
>
18-
<input-password-toggle>
19-
<b-form-input
20-
id="password"
21-
v-model="form.password"
22-
autofocus="autofocus"
23-
type="password"
24-
:state="getValidationState($v.form.password)"
25-
class="form-control-with-button"
26-
@change="$v.form.password.$touch()"
27-
>
28-
</b-form-input>
29-
<b-form-invalid-feedback role="alert">
30-
<template v-if="!$v.form.password.required">
31-
{{ $t('global.form.fieldRequired') }}
32-
</template>
33-
</b-form-invalid-feedback>
34-
</input-password-toggle>
35-
</b-form-group>
36-
<b-form-group
37-
label-for="password-confirm"
38-
:label="$t('pageChangePassword.confirmNewPassword')"
39-
>
40-
<input-password-toggle>
41-
<b-form-input
42-
id="password-confirm"
43-
v-model="form.passwordConfirm"
44-
type="password"
45-
:state="getValidationState($v.form.passwordConfirm)"
46-
class="form-control-with-button"
47-
@change="$v.form.passwordConfirm.$touch()"
48-
>
49-
</b-form-input>
50-
<b-form-invalid-feedback role="alert">
51-
<template v-if="!$v.form.passwordConfirm.required">
52-
{{ $t('global.form.fieldRequired') }}
53-
</template>
54-
<template v-else-if="!$v.form.passwordConfirm.sameAsPassword">
55-
{{ $t('global.form.passwordsDoNotMatch') }}
56-
</template>
57-
</b-form-invalid-feedback>
58-
</input-password-toggle>
59-
</b-form-group>
60-
<div class="text-right">
61-
<b-button type="button" variant="link" @click="goBack">
62-
{{ $t('pageChangePassword.goBack') }}
63-
</b-button>
64-
<b-button type="submit" variant="primary">
65-
{{ $t('pageChangePassword.changePassword') }}
66-
</b-button>
67-
</div>
68-
</b-form>
9+
<div class="change-password__form-container">
10+
<dl>
11+
<dt>{{ $t('pageChangePassword.username') }}</dt>
12+
<dd>{{ username }}</dd>
13+
</dl>
14+
<b-form novalidate @submit.prevent="changePassword">
15+
<b-form-group
16+
label-for="password"
17+
:label="$t('pageChangePassword.newPassword')"
18+
>
19+
<input-password-toggle>
20+
<b-form-input
21+
id="password"
22+
v-model="form.password"
23+
autofocus="autofocus"
24+
type="password"
25+
:state="getValidationState($v.form.password)"
26+
class="form-control-with-button"
27+
@change="$v.form.password.$touch()"
28+
>
29+
</b-form-input>
30+
<b-form-invalid-feedback role="alert">
31+
<template v-if="!$v.form.password.required">
32+
{{ $t('global.form.fieldRequired') }}
33+
</template>
34+
</b-form-invalid-feedback>
35+
</input-password-toggle>
36+
</b-form-group>
37+
<b-form-group
38+
label-for="password-confirm"
39+
:label="$t('pageChangePassword.confirmNewPassword')"
40+
>
41+
<input-password-toggle>
42+
<b-form-input
43+
id="password-confirm"
44+
v-model="form.passwordConfirm"
45+
type="password"
46+
:state="getValidationState($v.form.passwordConfirm)"
47+
class="form-control-with-button"
48+
@change="$v.form.passwordConfirm.$touch()"
49+
>
50+
</b-form-input>
51+
<b-form-invalid-feedback role="alert">
52+
<template v-if="!$v.form.passwordConfirm.required">
53+
{{ $t('global.form.fieldRequired') }}
54+
</template>
55+
<template v-else-if="!$v.form.passwordConfirm.sameAsPassword">
56+
{{ $t('global.form.passwordsDoNotMatch') }}
57+
</template>
58+
</b-form-invalid-feedback>
59+
</input-password-toggle>
60+
</b-form-group>
61+
<div class="text-right">
62+
<b-button type="button" variant="link" @click="goBack">
63+
{{ $t('pageChangePassword.goBack') }}
64+
</b-button>
65+
<b-button type="submit" variant="primary">
66+
{{ $t('pageChangePassword.changePassword') }}
67+
</b-button>
68+
</div>
69+
</b-form>
70+
</div>
6971
</div>
7072
</template>
7173

@@ -124,7 +126,9 @@ export default {
124126
</script>
125127

126128
<style lang="scss" scoped>
127-
.change-password-container {
128-
max-width: 360px;
129+
.change-password__form-container {
130+
@include media-breakpoint-up('md') {
131+
max-width: 360px;
132+
}
129133
}
130134
</style>

‎src/views/Login/Login.vue

+17-24
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<template>
2-
<b-form
3-
class="login-form mx-auto ml-md-5 mb-3"
4-
novalidate
5-
@submit.prevent="login"
6-
>
2+
<b-form class="login-form" novalidate @submit.prevent="login">
73
<alert class="login-error mb-4" :show="authError" variant="danger">
84
<p id="login-error-alert">
95
{{ $t('pageLogin.alert.message') }}
@@ -37,25 +33,27 @@
3733
</b-form-group>
3834
<div class="login-form__section mb-3">
3935
<label for="password">{{ $t('pageLogin.password') }}</label>
40-
<b-form-input
41-
id="password"
42-
v-model="userInfo.password"
43-
aria-describedby="login-error-alert password-required"
44-
:state="getValidationState($v.userInfo.password)"
45-
type="password"
46-
data-test-id="login-input-password"
47-
@input="$v.userInfo.password.$touch()"
48-
>
49-
</b-form-input>
36+
<input-password-toggle>
37+
<b-form-input
38+
id="password"
39+
v-model="userInfo.password"
40+
aria-describedby="login-error-alert password-required"
41+
:state="getValidationState($v.userInfo.password)"
42+
type="password"
43+
data-test-id="login-input-password"
44+
class="form-control-with-button"
45+
@input="$v.userInfo.password.$touch()"
46+
>
47+
</b-form-input>
48+
</input-password-toggle>
5049
<b-form-invalid-feedback id="password-required" role="alert">
5150
<template v-if="!$v.userInfo.password.required">
5251
{{ $t('global.form.fieldRequired') }}
5352
</template>
5453
</b-form-invalid-feedback>
5554
</div>
5655
<b-button
57-
block
58-
class="mt-5"
56+
class="mt-3"
5957
type="submit"
6058
variant="primary"
6159
data-test-id="login-button-submit"
@@ -70,10 +68,11 @@ import { required } from 'vuelidate/lib/validators';
7068
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
7169
import i18n from '@/i18n';
7270
import Alert from '@/components/Global/Alert';
71+
import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
7372
7473
export default {
7574
name: 'Login',
76-
components: { Alert },
75+
components: { Alert, InputPasswordToggle },
7776
mixins: [VuelidateMixin],
7877
data() {
7978
return {
@@ -141,9 +140,3 @@ export default {
141140
},
142141
};
143142
</script>
144-
145-
<style lang="scss" scoped>
146-
.login-form {
147-
max-width: 360px;
148-
}
149-
</style>

‎tests/unit/__snapshots__/AppHeader.spec.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ exports[`AppHeader.vue should render correctly 1`] = `
5454
to="/"
5555
>
5656
<img
57-
alt="undefined logo"
57+
alt="Built on OpenBMC"
5858
class="header-logo"
5959
src="@/assets/images/logo-header.svg"
6060
/>

0 commit comments

Comments
 (0)