Login changes

README.md

@@ -14,6 +14,7 @@ This repository contains the information and references needed to run [Sunbird](
 ## Prerequisites
 This section should expand as open source contributions to support multiple run times increase over time. Presently, the software and reference steps consider the following tech stack:
 
+
 Required:
 
 - Linux, preferably Ubuntu

ansible/artifacts/sunbird/login/login.ftl

@@ -8,9 +8,8 @@
     <div class="fullpage-background-image">
     <div class="container-wrapper">
                 <div class="ui header centered mb-8">
-                    <img onerror="" alt="">
-                    <h2 id="signIn" class="signInHead mt-8 mb-8">${msg("loginDiksha")}</h2>
                     <p class="subtitle">Login</p>
+                    <p id="signIn" class="info mt-8 mb-8">${msg("loginDiksha")} <span class="required">*</span></p>
                 </div>
                 <p id="mergeAccountMessage" class="hide mb-0 textCenter">${msg("mergeAccountMessage")}</p>
                 <p id="migrateAccountMessage" class="hide mb-0 textCenter">${msg("migrateAccountMessage")}</p>
@@ -30,12 +29,14 @@
                             <#elseif !realm.registrationEmailAsUsername>${msg("emailOrPhone")}
                             <#else>${msg("email")}
                             </#if>
+                            <span class="required">*</span>
                         </label>
                         <label id="usernameLabelPlaceholder" for="username" class="activeLabelColor hide">
                             <#if !realm.loginWithEmailAllowed>${msg("username")}
                             <#elseif !realm.registrationEmailAsUsername>${msg("placeholderForEmailOrPhone")}
                             <#else>${msg("email")}
                             </#if>
+                            <span class="required">*</span>
                         </label>
                          <#if usernameEditDisabled??>
                          <#-- TODO: need to find alternative for prepopulating username -->
@@ -48,10 +49,12 @@
                         <div>
                             <label id="passwordLabel" for="password" class="">
                                 ${msg("password")}
+                                <span class="required">*</span>
                             </label>
 
                             <label id="passwordLabelPlaceholder" for="password" class="activeLabelColor hide">
                                 ${msg("placeholderForPassword")}
+                                <span class="required">*</span>
                             </label>
                         </div>
                         <input placeholder="${msg('passwordPlaceholder')}" class=" mt-8" id="password" onfocusin="inputBoxFocusIn(this)" onfocusout="inputBoxFocusOut(this)" name="password" type="password" autocomplete="current-password" />
@@ -64,7 +67,7 @@
                     </div>
                     <div class="forgot-password">
                       <#if realm.resetPasswordAllowed>
-                        <a id="fgtKeycloakFlow" class="ui right floated forgetPasswordLink hide" tabindex="0" onclick="javascript:storeLocation(); javascript:makeDivUnclickable(); javascript:storeForgotPasswordLocation(event);" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a>
+                      ${msg("forgotAccount")}
                         <div id="fgtPortalFlow" role="link" class="ui right floated forgetPasswordLink hide" tabindex="0" onclick="javascript:makeDivUnclickable(); javascript:createTelemetryEvent(event); javascript:forgetPassword('/recover/identify/account');">${msg("doForgotPassword")}</div>
                       </#if>
                     </div>
@@ -73,10 +76,15 @@
                     <div class="field mb-8">
                         <button id="login" onclick="doLogin(event)" class="mt-24 sb-btn sb-btn-normal sb-btn-primary width-100">${msg("login")}</button>
                     </div>
-                  <#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
+
+                    <div class="mt-16">
+                    <label class="register-lbl">${msg("noAccount")} </label>
+                    </div>
+                    <#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
                     <div id="kc-registration" class="field">
                                 <div class="ui content signUpMsg">
-                                    ${msg("noAccount")} <span id="signup" role="link" tabindex="0" class="registerLink" onclick=navigate('self')>${msg("registerHere")}</span>
+                                    <button id="login" onclick="doLogin(event)" class="mt-8 sb-btn sb-btn-normal sb-btn-primary width-100 register-btn"><span id="signup" role="link" tabindex="0" class="registerLink" onclick=navigate('self')>${msg("registerHere")}</span></button>
+
                                 </div>
                     </div>
                   </#if>

ansible/artifacts/sunbird/login/messages/messages_en.properties

@@ -13,7 +13,7 @@ doNo=No
 doContinue=Continue
 doAccept=Accept
 doDecline=Decline
-doForgotPassword=Forgot password?
+doForgotPassword=Reset password
 doClickHere=Click here
 doImpersonate=Impersonate
 kerberosNotConfigured=Kerberos Not Configured
@@ -53,6 +53,7 @@ recaptchaNotConfigured=Recaptcha is required, but not configured
 consentDenied=Consent denied.
 
 noAccount=Don''t have an account?
+forgotAccount=Did you forget the password?
 username=Username or Mobile number
 goBack=<<Go Back
 mergeAccountMessage=Enter Mobile number / Email Address OR use Login with Google to identify the account from which you want to merge usage details
@@ -271,5 +272,5 @@ user_not_found=This Email Address/Mobile Number doesn''t belong to a valid user
 p3pPolicy=CP="This is not a P3P policy!"
 usernamePlaceholder = Enter your Registered Email address/Mobile number
 passwordPlaceholder = Enter your password
-loginDiksha = Welcome to UPSMF
+loginDiksha = All the required fields are marked with an
 registerHere = Register here

ansible/artifacts/sunbird/login/resources/css/login.css

@@ -1,9 +1,10 @@
 @import "./fonts/notosans/notosans.css";
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap');
 body{
     font-family: "Noto Sans";
     position: relative;
     letter-spacing: 0.2px;
-    background: #edf4f9;
+    /* background: #edf4f9; */
 }
 .fullpage-background-image{
     width: 100% !important;
@@ -53,7 +54,7 @@ input{
     border: 1px solid #9B9B9B !important;
 }
 input:focus{
-    border: 1px solid #024f9d !important;
+    border: 1px solid rgba(236,73,51,1) !important;
 }
 .signInWithGoogle{
     position: absolute;
@@ -97,6 +98,9 @@ input:focus{
     text-align: left;
     /*margin-top: auto !important;*/
     margin-bottom: 10px !important;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
 }
 .formMsg{
     font-size: 16px;
@@ -111,12 +115,14 @@ input:focus{
     text-align: center;
 }
 p.subtitle {
-    color: #333333;
-    font-size: 18px;
-    font-weight: bold;
-    letter-spacing: 0;
-    line-height: 26px;
+    opacity: 1;
+    color: rgba(0,0,0,1);
+    font-size: 24px;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: 0px;
     text-align: center;
+    margin-bottom: 8px;
 }
 .ui.form .field>label {
     font-size: 14px;
@@ -264,16 +270,26 @@ a{
     color: #024f9d !important;
 }
 .registerLink{
-    color: #024f9d;
-    font-weight: bold;
-    text-decoration: underline;
+    opacity: 1;
+    font-size: 14px;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: 0px;
+    text-align: right;
 }
 .registerLink:hover,
 .registerLink:focus{
     font-weight: bold;
     outline:none;
     cursor: pointer;
 }
+.register-btn:hover.registerLink{
+    color: rgba(236,73,51,1);
+}
+
+.register-btn {
+    color: rgba(236,73,51,1);
+}
 
 .pointer {
     cursor: pointer;
@@ -386,7 +402,9 @@ h1, h2, h3, h4, h5,
 }
 
 .sb-btn-primary:hover {
-    background-color: #002e50;
+    background-color: #FFF5F3;
+    border-color: rgba(236,73,51,1);
+    color: rgba(236,73,51,1);
 }
 
 .sb-btn-success {
@@ -453,7 +471,7 @@ h1, h2, h3, h4, h5,
     justify-content: center;
     height: 100%;
     padding: 32px;
-    background: #edf4f9;
+    /* background-image: linear-gradient(180deg, rgba(246, 170, 156, 1) 0%, rgba(253, 227, 222, 1) 100%) !important; */
 }
 .container-wrapper {
     max-width: 328px;
@@ -473,6 +491,19 @@ h1, h2, h3, h4, h5,
 .forgot-password {
     font-size:11px;
     color:#333;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-items: baseline;
+}
+.forgot-password p{
+    opacity: 1;
+    color: rgba(0,0,0,1);
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: 0px;
+    text-align: left;
 }
 .forgot-password:hover {
     color:#024f9d;
@@ -602,9 +633,9 @@ h1, h2, h3, h4, h5,
         background-size: cover;
         background-repeat: no-repeat;
         min-height: 100vh;
-        background: url(../img/onboard_bg.svg) no-repeat center center fixed;
+        background: url(../img/bg.png) no-repeat center center fixed;
         background-size: cover;
-
+        background-color: #000; 
     }
     .fullpage-background-image{
         max-width: 1008px !important;
@@ -637,4 +668,97 @@ h1, h2, h3, h4, h5,
   input:focus-visible{
     outline: 1px #fe0000 solid !important;
     border-radius: 5px;
-  }
+  }
+
+
+  .kc-container-wrapper{
+    /* opacity: 1; */
+    /* background-image: linear-gradient(90deg, rgba(236, 80, 51, 1) 0%, rgba(253, 235, 232, 1) 100%); */
+    }
+    .fullpage-background-image {
+
+        background: #ffffff;
+        max-width: 661px !important;    width: 100%;    padding: 40px !important;    /* box-shadow: 0 2px 16px 0 rgba(0,0,0,0.2) !important; */    border-radius: 8px !important;    min-height: 480px;		    opacity: 1;
+    }
+
+    .activeLabelColor{    color: #000000 !important;
+    }
+
+    .forgetPasswordLink{
+                color: #024f9d;
+                font-size: 12px;
+                line-height: 17px;
+                float: right;
+                color: rgba(236,73,51,1) !important;
+                font-size: 14px;
+                font-weight: 700;
+                font-style: normal;
+                letter-spacing: 0px;
+                text-align: right;
+                display: block !important;
+    }
+    .sb-btn-primary{
+                border-color: rgba(236,73,51,1);
+                background-color: rgba(236,73,51,1);
+                color: white;
+                opacity: 1;
+                color: rgba(255,255,255,1);
+                font-size: 14px;
+                font-weight: 400;
+                font-style: normal;
+                letter-spacing: 0px;
+                text-align: center;
+    }
+header .navigation {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    min-height: 80px;
+    max-height: 80px;
+    min-width: 100%;
+    z-index: 10;
+    background: white;
+    border-bottom: 2px solid white;
+}
+
+.register-lbl {
+    font-size: 11px;
+    color: #333;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-items: baseline;
+}
+
+header .navigation .logo{
+    margin-left: 20px;
+}
+header .navigation .logo img {
+    width: 291px;
+    height: 48px;
+}
+header .navigation .logo h1{
+    color: #b1d4e0;
+    font-size: 30px;
+    line-height: 38px;
+}
+.info {
+    opacity: 1;
+    color: rgba(0,0,0,0.8);
+    font-family: "NotoSans";
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: 0px;
+}
+span.required {
+    color: #e55a28;
+    font-size: 14px;
+}
+
+
+
+
+
+