Skip to content

Commit 0002324

Browse files
kovarenkovaren
committed
[APIM-11537] New design for login form.
1 parent b78ae48 commit 0002324

File tree

6 files changed

+121
-32
lines changed

6 files changed

+121
-32
lines changed

‎gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,16 @@
1717
-->
1818
<form [formGroup]="logInForm" (ngSubmit)="logIn()" class="log-in__form__container">
1919
<mat-card appearance="outlined" class="log-in">
20-
<mat-card-header>
21-
<mat-card-title i18n="@@logInTitle">Log in</mat-card-title>
20+
<mat-card-header class="log-in__form__header">
21+
<mat-card-title class="log-in__form__title" i18n="@@logInTitle">Login</mat-card-title>
2222
</mat-card-header>
23-
<mat-card-content>
23+
<mat-card-content class="log-in__form__content">
2424
@if (isLocalLoginEnabled()) {
2525
<div class="log-in__form">
2626
<div class="log-in__form__fields">
2727
<mat-form-field appearance="outline" class="log-in__form__input">
2828
<mat-label i18n="@@logInUsername">Username</mat-label>
29-
<input matInput formControlName="username" appearance="outlined" />
29+
<input matInput formControlName="username" />
3030
@if (logInForm.controls.username.hasError('required')) {
3131
<mat-error i18n="@@logInUsernameErrorRequired">Username is required</mat-error>
3232
}
@@ -39,7 +39,7 @@
3939
}
4040
</mat-form-field>
4141
@if (error() === 401) {
42-
<mat-error i18n="@@logInError401">The username or password you entered is incorrect, please try again.</mat-error>
42+
<mat-error class="log-in__form__error" i18n="@@logInError401">The username or password you entered is incorrect, please try again.</mat-error>
4343
}
4444
</div>
4545
<div class="log-in__form__buttons">
@@ -48,7 +48,7 @@
4848
type="submit"
4949
mat-flat-button
5050
i18n="@@logInAction"
51-
class="log-in__form__submit secondary-button">
51+
class="log-in__form__submit primary-button">
5252
Log in
5353
</button>
5454
<a class="log-in__form__forgot-password" i18n="@@resetPasswordAction" routerLink="reset-password"> Forgot password? </a>
@@ -71,7 +71,7 @@
7171
(click)="authenticateSSO(provider)">
7272
<div class="log-in__sso__idp__container">
7373
<img class="log-in__sso__idp__logo" [src]="'assets/images/idp/' + getProviderLogo(provider)" alt="Provider Logo" />
74-
{{ provider.name }}
74+
<span class="log-in__sso__idp__label" i18n="@@logInSsoLabelPrefix">Continue with {{ provider.name }}</span>
7575
</div>
7676
</button>
7777
}

‎gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss‎

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
* See the License for the specific language governing permissions and
1414
* limitations under the License.
1515
*/
16+
@use '../../scss/theme';
17+
1618
:host {
1719
display: flex;
1820
justify-content: center;
@@ -21,21 +23,37 @@
2123
.log-in {
2224
display: flex;
2325
flex-flow: column;
24-
gap: 32px;
26+
gap: 20px;
27+
background: #{theme.$background-color};
2528

2629
&__form {
2730
display: flex;
2831
flex-flow: column;
29-
gap: 12px;
32+
gap: 16px;
33+
34+
&__header {
35+
padding: 20px 20px 0;
36+
}
37+
38+
&__title {
39+
font-size: 18px;
40+
font-weight: 700;
41+
}
3042

3143
&__container {
32-
width: 100%;
44+
width: 400px;
3345
max-width: 500px;
46+
border-radius: 8px;
47+
}
48+
49+
&__content:last-child {
50+
padding: 0 20px 20px;
3451
}
3552

3653
&__fields {
3754
display: flex;
3855
flex-flow: column;
56+
gap: 8px;
3957
}
4058

4159
&__buttons {
@@ -50,7 +68,7 @@
5068

5169
&__forgot-password {
5270
margin-top: 5px;
53-
color: var(--mdc-outlined-button-label-text-color);
71+
color: #{theme.$primary-main-color};
5472
font-size: 14px;
5573
text-align: center;
5674
text-decoration: none;
@@ -59,6 +77,11 @@
5977
text-decoration: underline;
6078
}
6179
}
80+
81+
&__error {
82+
text-align: center;
83+
font-size: 14px;
84+
}
6285
}
6386

6487
&__sso {
@@ -71,11 +94,12 @@
7194
display: flex;
7295
height: 30px;
7396
align-items: center;
74-
margin: 16px 0 0;
97+
margin: 20px 0 4px;
98+
font-size: 14px;
7599

76100
&__line {
77101
width: 100%;
78-
border-top: 1px solid var(--mdc-outlined-card-outline-color);
102+
border-top: 1px solid #{theme.$card-border-color};
79103
}
80104

81105
&__label {
@@ -86,13 +110,18 @@
86110
align-items: center;
87111
justify-content: center;
88112
margin: auto;
89-
background: var(--gio-app-card-background-color);
113+
background: #{theme.$background-color};
90114
inset: 0;
91115
}
92116
}
93117

94118
&__idp {
95119
width: 100%;
120+
font-weight: bold;
121+
color: #{theme.$button-text-text-color};
122+
white-space: nowrap;
123+
overflow: hidden;
124+
padding: 0 18px;
96125

97126
&__container {
98127
display: flex;
@@ -104,6 +133,16 @@
104133
width: 23px;
105134
height: 23px;
106135
}
136+
137+
::ng-deep .mdc-button__label {
138+
white-space: nowrap;
139+
overflow: hidden;
140+
}
141+
142+
&__label {
143+
overflow: hidden;
144+
text-overflow: ellipsis;
145+
}
107146
}
108147
}
109148
}

‎gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@
1717
-->
1818
<mat-card appearance="outlined" class="reset-password-confirmation">
1919
@if (!isSubmitted) {
20-
<mat-card-header>
21-
<mat-card-title i18n="@@resetPasswordConfirmationTitle">Reset password confirmation</mat-card-title>
20+
<mat-card-header class="reset-password-confirmation__header">
21+
<mat-card-title class="reset-password-confirmation__title" i18n="@@resetPasswordConfirmationTitle">Reset password confirmation</mat-card-title>
2222
</mat-card-header>
2323
@if (!isTokenExpired && !!resetPasswordConfirmationForm) {
24-
<mat-card-content>
24+
<mat-card-content class="reset-password-confirmation__content">
2525
<form class="reset-password-confirmation__form" [formGroup]="resetPasswordConfirmationForm" (ngSubmit)="confirmResetPassword()">
2626
<div class="reset-password-confirmation__form__fields">
2727
<mat-form-field appearance="outline" class="reset-password-confirmation__form__input">
@@ -74,8 +74,8 @@
7474
}
7575
}
7676
@if (isSubmitted) {
77-
<mat-card-header>
78-
<mat-card-title i18n="@@resetPasswordConfirmationDoneTitle">Password reset</mat-card-title>
77+
<mat-card-header class="reset-password-confirmation__header">
78+
<mat-card-title class="reset-password-confirmation__title" i18n="@@resetPasswordConfirmationDoneTitle">Password reset</mat-card-title>
7979
</mat-card-header>
8080

8181
<mat-card-content>

‎gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss‎

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,27 +13,43 @@
1313
* See the License for the specific language governing permissions and
1414
* limitations under the License.
1515
*/
16+
@use '../../../../scss/theme';
17+
1618
:host {
1719
display: flex;
1820
justify-content: center;
1921
}
2022

2123
.reset-password-confirmation {
2224
display: flex;
23-
width: 500px;
25+
width: 400px;
2426
flex-flow: column;
25-
gap: 32px;
27+
gap: 20px;
28+
background: #{theme.$background-color};
29+
30+
&__header {
31+
padding: 20px 20px 0;
32+
}
2633

27-
&__form,
34+
&__title {
35+
font-size: 18px;
36+
font-weight: 700;
37+
}
38+
39+
&__content,
2840
&__expired {
2941
display: flex;
3042
flex-flow: column;
31-
gap: 12px;
43+
gap: 24px;
44+
45+
&:last-child {
46+
padding: 0 20px 20px;
47+
}
3248

33-
&__fields,
3449
&__text {
3550
display: flex;
3651
flex-flow: column;
52+
gap: 8px;
3753
}
3854

3955
&__buttons {
@@ -46,4 +62,22 @@
4662
width: 100%;
4763
}
4864
}
65+
66+
&__form {
67+
display: flex;
68+
flex-flow: column;
69+
gap: 16px;
70+
71+
&__fields {
72+
display: flex;
73+
flex-flow: column;
74+
gap: 8px;
75+
}
76+
77+
&__buttons {
78+
display: flex;
79+
flex-flow: column;
80+
gap: 16px;
81+
}
82+
}
4983
}

‎gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<form [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword()">
1919
<mat-card appearance="outlined" class="reset-password">
2020
@if (!isSubmitted) {
21-
<mat-card-header>
22-
<mat-card-title i18n="@@resetPasswordTitle">Reset password</mat-card-title>
21+
<mat-card-header class="reset-password__form__header">
22+
<mat-card-title class="reset-password__form__title" i18n="@@resetPasswordTitle">Reset password</mat-card-title>
2323
</mat-card-header>
2424
<mat-card-content class="reset-password__form">
2525
<mat-form-field appearance="outline" class="reset-password__form__fields">
@@ -42,15 +42,15 @@
4242
type="submit"
4343
mat-flat-button
4444
i18n="@@resetPasswordAction"
45-
class="reset-password__form__submit secondary-button">
45+
class="reset-password__form__submit primary-button">
4646
Reset password
4747
</button>
48-
<a mat-stroked-button i18n="@@resetPasswordLoginLink" routerLink="/log-in">Log in</a>
48+
<a mat-stroked-button i18n="@@resetPasswordLoginLink" routerLink="/log-in">Back</a>
4949
</div>
5050
</mat-card-content>
5151
} @else {
52-
<mat-card-header>
53-
<mat-card-title i18n="@@resetPasswordResultTitle">Password reset confirmed</mat-card-title>
52+
<mat-card-header class="reset-password__form__header">
53+
<mat-card-title class="reset-password__form__title" i18n="@@resetPasswordResultTitle">Password reset confirmed</mat-card-title>
5454
</mat-card-header>
5555
<mat-card-content class="reset-password__form">
5656
<p i18n="@@resetPasswordResultContent">If the account exists, an email will be sent.</p>

‎gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,38 @@
1313
* See the License for the specific language governing permissions and
1414
* limitations under the License.
1515
*/
16+
@use '../../../scss/theme';
17+
1618
:host {
1719
display: flex;
1820
justify-content: center;
1921
}
2022

2123
.reset-password {
2224
display: flex;
23-
width: 500px;
25+
width: 400px;
2426
flex-flow: column;
25-
gap: 32px;
27+
gap: 20px;
28+
background: #{theme.$background-color};
2629

2730
&__form {
2831
display: flex;
2932
flex-flow: column;
3033
gap: 12px;
3134

35+
&:last-child {
36+
padding: 0 20px 20px;
37+
}
38+
39+
&__header {
40+
padding: 20px 20px 0;
41+
}
42+
43+
&__title {
44+
font-size: 18px;
45+
font-weight: 700;
46+
}
47+
3248
&__fields {
3349
display: flex;
3450
flex-flow: column;

0 commit comments

Comments
 (0)