From 466d2a7a2b468c130c627b0f2ec800a443b410e2 Mon Sep 17 00:00:00 2001 From: Jeet Viramgama <64732692+jv18creator@users.noreply.github.com> Date: Fri, 2 Feb 2024 21:23:37 +0530 Subject: [PATCH] refactor: redesign web-pages for Janssen #1302 (#7258) * feat: redesign Janssen device authentication page #7203 Signed-off-by: Jeet Viramgama * refactor(css): login template trimmed Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): apply correct color Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): make style name more generic Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): update style name Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): add background color to body Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): remove login box Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): jans logo styles Signed-off-by: Jeet Viramgama * refactor(html): remove syntax error Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(html): remove duplicated style Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): add body style Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): css and html changes for login page Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): remove absolute position Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): basic html without css Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): make css class name generic Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): add form background Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): fixed frame-6 Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): add styles Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): login changes Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * feat: redesign sign-in page #7202 Signed-off-by: Jeet Viramgama * refactor(html): replace gluu logo with jans Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(html): fix placeholder text in the input boxes Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(html): move logo outside of form to stabilize it when across forms Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(html): comment out non-functional elements from page - Commented `remember me` check box - Commented `sign up` link - Commented `forgot password` As discussed in [this chat](https://chat.gluu.org/group/documentation?msg=3Ksg5GxZ4QL2WbRCK) Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(html): adjust padding Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(css): remove bold styling Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> * refactor(html): remove overflow of device auth & login page Signed-off-by: Jeet Viramgama * chore(css): reduce spacing & font-size by 20% Signed-off-by: Jeet Viramgama --------- Signed-off-by: Jeet Viramgama Signed-off-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> Co-authored-by: ossdhaval <343411+ossdhaval@users.noreply.github.com> --- .../WEB-INF/incl/layout/login-template.xhtml | 109 +---- .../main/webapp/device_authorization.xhtml | 41 +- .../server/src/main/webapp/login.xhtml | 371 ++++++++++-------- .../src/main/webapp/stylesheet/style.css | 166 ++++++-- 4 files changed, 367 insertions(+), 320 deletions(-) diff --git a/jans-auth-server/server/src/main/webapp/WEB-INF/incl/layout/login-template.xhtml b/jans-auth-server/server/src/main/webapp/WEB-INF/incl/layout/login-template.xhtml index 80358378747..9d9a3d1c512 100644 --- a/jans-auth-server/server/src/main/webapp/WEB-INF/incl/layout/login-template.xhtml +++ b/jans-auth-server/server/src/main/webapp/WEB-INF/incl/layout/login-template.xhtml @@ -1,117 +1,38 @@ + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> + xmlns:ui="http://xmlns.jcp.org/jsf/facelets" + xmlns:f="http://xmlns.jcp.org/jsf/core" + xmlns:h="http://xmlns.jcp.org/jsf/html"> <ui:insert name="pageTitle" /> + type='image/x-icon' /> + href="#{webConfigurationService.getCssLocation()}/style.css" /> + href="#{webConfigurationService.getCssLocation()}/bootstrap.min.css" /> + href="#{webConfigurationService.getCssLocation()}/fontawesome.min.css" /> + href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" /> - \ No newline at end of file + diff --git a/jans-auth-server/server/src/main/webapp/device_authorization.xhtml b/jans-auth-server/server/src/main/webapp/device_authorization.xhtml index 699c7fdd835..9bcfa21ff00 100644 --- a/jans-auth-server/server/src/main/webapp/device_authorization.xhtml +++ b/jans-auth-server/server/src/main/webapp/device_authorization.xhtml @@ -22,30 +22,32 @@ - + + +
-
+
-
+
-
- +
+
-
+
-
-
+
+
- -
+ +
-  -  +
 - 
-
-
+
+
@@ -86,8 +87,8 @@ - - + + - - - - - - - - - - - -
- - - -
- - + function checkRemembeMe() { + if ($('#rememberme').is(':checked')) { + localStorage.usrname = document.getElementById("loginForm:username").value; + localStorage.chkbx = $('#rememberme').val(); + } else { + localStorage.usrname = ''; + localStorage.chkbx = ''; + } + } + + function fillPlatformField() { + try { + re = /^([^\.]+\.[^\.]+)\..+/; + result = re.exec(platform.version); + if (result != null) { + platform.version=result[1]; + } + document.getElementById("loginForm:platform").value = JSON.stringify(platform); + } catch (e) { + } + } + + diff --git a/jans-auth-server/server/src/main/webapp/stylesheet/style.css b/jans-auth-server/server/src/main/webapp/stylesheet/style.css index ce9c5a2de65..4e0169b2465 100644 --- a/jans-auth-server/server/src/main/webapp/stylesheet/style.css +++ b/jans-auth-server/server/src/main/webapp/stylesheet/style.css @@ -1,3 +1,4 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap'); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 10,10; @@ -42,7 +43,6 @@ h6 { clear: both; } html { - overflow-y: scroll; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; @@ -192,7 +192,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21c87a', end .container{ width: auto; } - + } @@ -236,7 +236,7 @@ login-panel { margin-top: 12px; display:none; float: left; - + } .not_body li .pop_tog p { color: #777; @@ -339,7 +339,7 @@ login-panel { background: #e7e7e7; } -.body{font-family: 'Open Sans', sans-serif;} +.body{font-family: 'Lato', 'Open Sans', sans-serif;} .bs-docs-section { padding: 30px 0px; } @@ -404,7 +404,7 @@ login-panel { padding-top: 23px; padding-bottom: 20px; } - + #pbar_outerdiv{ width: 100%; height: 20px; @@ -416,10 +416,10 @@ login-panel { overflow: hidden; } #pbar_innerdiv{ - background-color: #e1e1e1; z-index: 2; height: 100%; + background-color: #e1e1e1; z-index: 2; height: 100%; } - - + + .forgot_link a{color:#777} .login_bx { @@ -429,7 +429,7 @@ login-panel { max-width: 800px; margin: 0 auto; margin-top:50px; -} +} .login_bx .paddin_bx { padding: 0; } @@ -506,15 +506,15 @@ login-panel { .pin{background:#b9191c} .git{background:#3a586a} -.pay{background:#2e508f} +.pay{background:#2e508f} .fsquare{background:#2852cd} -.other{background:#d5d5d5} +.other{background:#d5d5d5} .wk{background:#13557d} .yout{background:#f52d24} -.wind{background:#0f69b0} +.wind{background:#0f69b0} .wordp{background:#226a88} -.insta{background:#497394} +.insta{background:#497394} .button_social ul.sm-social li { @@ -570,7 +570,7 @@ login-panel { } .paddin_bx p{text-align: center;} .button a.android {margin-bottom: 16px;} -} +} @media (max-width:320px){ .button_social li a @@ -650,28 +650,42 @@ input.btn.btn-done { padding: 0 19px; } -.device-authz-container { - padding: 20px 20px 40px; - max-width: 500px; +.jans-page-backgrond-color { + background-color: #150001; +} + +.jans-form-container { + padding: calc(40px - (40px * 0.2)) calc(40px - (40px * 0.2)) calc(50px - (50px * 0.2)) calc(40px - (40px * 0.2)); + max-width: 60%; margin: 0 auto; - border-radius: 10px; - background: white; - border: 1px solid #008b8b; + border-radius: 12px; + background: #2C1A1A; + box-shadow: 10px 20px 20px 0px rgba(0, 0, 0, 0.28); + color: #fff; +} + +@media only screen and (max-width: 780px){ + .jans-form-container { + max-width: 100%; + padding: 20px 20px 25px 20px; + } } .device-authz-title { font-weight: bold; - font-size: 18px; - text-align: center; - padding: 10px 0; + font-size: calc(38px - (38px * 0.2)); + text-align: left; } .device-authz-subtitle { - padding: 10px 0; + font-size: calc(20px - (20px * 0.2)); + text-align: left; + max-width: 90%; + font-weight: normal !important; } .device-authz-button { - margin: 30px 0 0; + margin-top: 32px; } .device-authz-init-btn { @@ -682,29 +696,113 @@ input.btn.btn-done { margin: 0 !important; } +.no-padding { + padding: 0 !important; +} + .device-authz-label { - margin-top: 20px; - text-align: center; + margin-top: 32px; + text-align: left; + font-size: calc(20px - (20px * 0.2)); + font-weight: normal !important; } .device-authz-static-code { margin-top: 10px !important; text-align: center; font-weight: bold; - font-size: 30px; + font-size: calc(30px - (30px * 0.2)); } .device-authz-input-container { - margin-top: 10px !important; + margin-top: 20px !important; text-align: center; font-weight: bold; - font-size: 25px !important; + font-size: calc(25px - (25px * 0.2)) !important; } -.device-authz-input-code { +.device-authz-continue-btn { + background-color: #00BE79; + color:white; + font-size: calc(20px - (20px * 0.2)) !important; + width: 100%; + font-weight: bold !important; + padding: 8px 0 !important; + border-radius: 7px !important; +} + +.device-authz-input-code, .app-input-styles { text-align: center; font-weight: bold !important; - font-size: 25px !important; - height: 45px !important; - width: 40% !important; + font-size: calc(25px - (25px * 0.2)) !important; + height: 50px !important; + background-color: transparent !important; + border: 2px solid #fff !important; + color: #fff !important; +} + +.app-input-styles::placeholder { + font-size: calc(20px - (20px * 0.2)) !important; + font-family: 'Lato'; +} + +.app-input-styles { + font-size: calc(20px - (20px * 0.2)) !important; + text-align: left !important; + padding: 6px 10px !important; + font-weight: normal !important; +} + +.absolute-logo { + position: absolute; + top: 0; + left: 0%; + transform: translate(5%, 5%) scale(0.8); + z-index: 11; +} + +@media only screen and (max-height: 780px), (max-width: 620px) { + .absolute-logo { + transform: translate(-10%, 0%) scale(0.7) !important; + } +} + +.remember-me__text { + font-size: calc(17px - (17px * 0.2)) !important; +} + +.remember-me__input { + width: 16px; + height: 16px; + padding: 10px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + accent-color: #00BE79; +} + +.mt-4 { + margin-top: 4rem; +} + +.error-text { + color: #FF7F7F; +} + +.mt-8 { + margin-top: 2rem; +} + +.mt-7 { + margin-top: 1.75rem; +} + +.login__sign-up--link { + color: #00BE79; + border-bottom: 1px solid #00BE79; +} + +.text-lg { + font-size: calc(18px - (18px * 0.2)) !important; } \ No newline at end of file