Skip to content

Commit 2aebe38

Browse files
andre-codeciyer
andre-code
and
ciyer
authored
feat: modify login theme layout and texts (#2884) (#26)
 Co-authored-by: Chandrasekhar Ramakrishnan <ciyer@users.noreply.github.com>
1 parent 982ebbc commit 2aebe38

3 files changed

Lines changed: 199 additions & 15 deletions

File tree

‎renku_theme/login/login.ftl‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<#import "template.ftl" as layout>
2+
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
3+
<#if section = "header">
4+
${msg("loginAccountTitle")}
5+
<#elseif section = "socialProviders" >
6+
<#if realm.password && social.providers??>
7+
<div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
8+
<h2 class="login-section-title-providers">${msg("identity-provider-login-label")}</h2>
9+
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
10+
<#list social.providers as p>
11+
<a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
12+
type="button" href="${p.loginUrl}">
13+
<#if p.iconClasses?has_content>
14+
<i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
15+
<span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">${p.displayName!}</span>
16+
<#else>
17+
<span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
18+
</#if>
19+
</a>
20+
</#list>
21+
</ul>
22+
</div>
23+
</#if>
24+
<#elseif section = "form">
25+
<div id="kc-form">
26+
<div id="kc-form-wrapper">
27+
<#if realm.password>
28+
<h2 class="login-section-title-form">${msg("loginFormLabel")}</h2>
29+
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
30+
<#if !usernameHidden??>
31+
<div class="${properties.kcFormGroupClass!}">
32+
<label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
33+
34+
<input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off"
35+
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
36+
/>
37+
38+
<#if messagesPerField.existsError('username','password')>
39+
<span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
40+
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
41+
</span>
42+
</#if>
43+
44+
</div>
45+
</#if>
46+
47+
<div class="${properties.kcFormGroupClass!}">
48+
<label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
49+
50+
<input tabindex="2" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="off"
51+
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
52+
/>
53+
54+
<#if usernameHidden?? && messagesPerField.existsError('username','password')>
55+
<span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
56+
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
57+
</span>
58+
</#if>
59+
60+
</div>
61+
62+
<div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
63+
<div id="kc-form-options">
64+
<#if realm.rememberMe && !usernameHidden??>
65+
<div class="checkbox">
66+
<label>
67+
<#if login.rememberMe??>
68+
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" checked> ${msg("rememberMe")}
69+
<#else>
70+
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox"> ${msg("rememberMe")}
71+
</#if>
72+
</label>
73+
</div>
74+
</#if>
75+
</div>
76+
<div class="${properties.kcFormOptionsWrapperClass!}">
77+
<#if realm.resetPasswordAllowed>
78+
<span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
79+
</#if>
80+
</div>
81+
82+
</div>
83+
84+
<div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
85+
<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
86+
<input tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
87+
</div>
88+
</form>
89+
</#if>
90+
</div>
91+
92+
</div>
93+
<#if realm.password && social.providers??>
94+
<div id="login-separator">
95+
<div class="separator"></div>
96+
OR
97+
<div class="separator"></div>
98+
</div>
99+
</#if>
100+
<#elseif section = "info" >
101+
<#if realm.password && realm.registrationAllowed && !registrationDisabled??>
102+
<div id="kc-registration-container">
103+
<div id="kc-registration">
104+
<span>${msg("noAccount")} <a tabindex="6"
105+
href="${url.registrationUrl}">${msg("doRegister")}</a></span>
106+
</div>
107+
</div>
108+
</#if>
109+
</#if>
110+
111+
</@layout.registrationLayout>

‎renku_theme/login/messages/messages_en.properties‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
loginAccountTitle=Welcome to RenkuLab!
2+
loginFormLabel=Log in with your RenkuLab account
3+
4+
# Identity provider
5+
identity-provider-login-label=Sign up or Log in with

‎renku_theme/login/resources/css/login.css‎

Lines changed: 83 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,15 @@
1919
background: #07182b;
2020
}
2121

22+
.login-pf header h1 {
23+
font-size: 34px;
24+
text-align: center;
25+
font-weight: bold;
26+
}
27+
2228
.login-pf body {
2329
background-color: #07182b;
24-
25-
height: 800px;
30+
height: 100vh;
2631
background-image: url("../img/background.svg");
2732
background-size: cover;
2833
background-repeat: no-repeat;
@@ -37,11 +42,21 @@ h1 {
3742
font-size: 24px;
3843
}
3944

45+
.form-group {
46+
margin-bottom: 0;
47+
}
48+
4049
.alert {
4150
padding: 5px;
4251
margin-bottom: 15px;
4352
}
4453

54+
.alert-error {
55+
width: 100%;
56+
display: flex;
57+
justify-content: center;
58+
}
59+
4560
a {
4661
background-color: transparent;
4762
color: #009568;
@@ -54,11 +69,13 @@ a {
5469

5570
.renku-login-container {
5671
padding: 1.5rem;
72+
background-color: #09182bbf;
5773
}
5874

5975
@media only screen and (min-width: 768px) {
6076
.renku-login-container {
6177
padding: 10px 85px;
78+
height: 100%;
6279
}
6380
}
6481

@@ -75,6 +92,10 @@ a {
7592
#kc-content-wrapper {
7693
display: flex;
7794
flex-wrap: wrap;
95+
justify-content: center;
96+
align-items: flex-start;
97+
gap: 50px;
98+
flex-direction: row-reverse;
7899
}
79100

80101
div#kc-social-providers h4 {
@@ -84,27 +105,31 @@ div#kc-social-providers h4 {
84105
}
85106

86107
#kc-form {
87-
border-bottom: 1px solid #009568;
88-
margin-right: 40px;
89108
margin-bottom: 20px;
90109
}
91110

111+
#kc-form-login {
112+
width: 300px;
113+
margin: auto;
114+
}
115+
92116
#kc-form label {
93117
display: block;
94118
font-weight: normal;
95119
}
96120

97121
#kc-form-buttons {
98-
text-align: right;
122+
text-align: left;
99123
}
100124

101125
#kc-info {
102126
width: 100%;
103127
margin-bottom: 20px;
128+
text-align: center;
104129
}
105130

106131
#kc-page-title {
107-
margin-bottom: 20px;
132+
margin-bottom: 40px;
108133
}
109134

110135
input[type="text"],
@@ -136,11 +161,11 @@ input[type="submit"] {
136161

137162
padding: 10px;
138163
margin-top: 10px;
139-
width: 150px;
164+
width: 300px;
140165
}
141166

142167
input[type="submit"]:hover {
143-
background: #009568;
168+
background: #007A6C;
144169
color: #ffffff;
145170
}
146171

@@ -211,6 +236,7 @@ span.pf-m-error.required {
211236

212237
div#kc-header {
213238
background-image: url("../img/logo.svg");
239+
background-color: #07182b;
214240
background-size: cover;
215241
background-repeat: no-repeat;
216242
width: 200px;
@@ -257,7 +283,6 @@ div.social-login span {
257283

258284
div#kc-social-providers {
259285
background-color: rgba(7, 24, 43, 0.3);
260-
margin-right: 40px;
261286
margin-bottom: 20px;
262287
}
263288

@@ -267,17 +292,17 @@ div#kc-social-providers hr {
267292

268293
div#kc-social-providers ul {
269294
list-style: none;
270-
margin: 0;
271-
padding-left: 5px;
272-
padding-right: 0;
273-
padding-bottom: 0;
274-
padding-top: 3px;
295+
padding: 0;
296+
display: flex;
297+
flex-direction: column;
298+
align-items: center;
275299
}
276300

277301
div#kc-social-providers ul a {
278302
display: list-item;
279303
padding-left: 20px;
280304
margin-bottom: 20px;
305+
width: 300px;
281306
}
282307

283308
div#kc-social-providers a {
@@ -300,11 +325,54 @@ div#kc-social-providers a {
300325
}
301326

302327
div#kc-social-providers a:hover {
303-
background: #009568;
328+
background: #007A6C;
304329
color: #ffffff;
305330
}
306331

307332
div#kc-social-providers a:active {
308333
background: #009568;
309334
color: #ffffff;
310335
}
336+
337+
.login-section-title-providers {
338+
margin-bottom: 40px;
339+
}
340+
.login-section-title-form {
341+
margin-bottom: 35px;
342+
}
343+
344+
#login-separator {
345+
display: flex;
346+
flex-direction: column;
347+
align-items: center;
348+
gap: 20px;
349+
margin-top: 50px;
350+
}
351+
352+
#login-separator .separator {
353+
width: 1px;
354+
height: 110px;
355+
background-color: #ffffff7d;
356+
}
357+
358+
@media only screen and (max-width: 1080px) {
359+
#kc-content-wrapper {
360+
align-items: center;
361+
flex-direction: column-reverse;
362+
}
363+
#login-separator {
364+
flex-direction: row;
365+
margin: 20px;
366+
}
367+
#login-separator .separator {
368+
width: 100px;
369+
height: 1px;
370+
}
371+
div#kc-social-providers ul {
372+
margin-bottom: 0;
373+
gap: 40px;
374+
}
375+
div#kc-social-providers ul a {
376+
margin: 0;
377+
}
378+
}

0 commit comments

Comments
 (0)