Merge pull request #934 from project-sunbird/release-2.5.0

Release 2.5.0 to master
project-sunbird · Nov 22, 2019 · e26ae85 · e26ae85
2 parents aed726d + c155e0c
commit e26ae85
Show file tree

Hide file tree

Showing 62 changed files with 1,908 additions and 375 deletions.
diff --git a/ansible/artifacts/sunbird/login/login.ftl b/ansible/artifacts/sunbird/login/login.ftl
@@ -11,7 +11,7 @@
             <div class="ui column height-fix">
                 <div class="ui header centered">
                     <img onerror="" alt="">
-                    <div id="signIn" class="signInHead mt-27">${msg("doSignIn")}</div>
+                    <div id="signIn" class="signInHead mt-27">${msg("loginDiksha")}</div>
                 </div>
                 <p id="mergeAccountMessage" class="hide mb-0 textCenter">${msg("mergeAccountMessage")}</p>
                 <p id="migrateAccountMessage" class="hide mb-0 textCenter">${msg("migrateAccountMessage")}</p>
@@ -39,10 +39,10 @@
                             </#if>
                         </label>
                         <#if usernameEditDisabled??>
-                        <input class="mt-8" id="username" name="username" value="${(login.username!'')?html}" type="text" disabled />
+                          <#-- TODO: need to find alternative for prepopulating username -->
+                        <input class="mt-8" id="username" name="username" type="text" disabled />
                         <#else>
-                        <input class="mt-8" id="username" name="username" onfocusin="inputBoxFocusIn(this)" onfocusout="inputBoxFocusOut(this)" value="${(login.username!'')?html}" type="text" autofocus autocomplete="off" />
-                        </#if>
+                        <input class="mt-8" id="username" name="username" onfocusin="inputBoxFocusIn(this)" onfocusout="inputBoxFocusOut(this)" type="text" autofocus autocomplete="off" />                        </#if>
                     </div>
                     <div class="field">
                         <div>
@@ -51,7 +51,7 @@
                             </label>
                             <#if realm.resetPasswordAllowed>
                                 <a id="fgtKeycloakFlow" class="ui right floated forgetPasswordLink hide" tabindex="1" onclick="javascript:storeLocation(); javascript:makeDivUnclickable()" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a>
-                                <div id="fgtPortalFlow" class="ui right floated forgetPasswordLink hide" tabindex="1" onclick="javascript:redirect('/recover/identify/account');javascript:makeDivUnclickable()">${msg("doForgotPassword")}</div>
+                                <div id="fgtPortalFlow" class="ui right floated forgetPasswordLink hide" tabindex="1" onclick="javascript:forgetPassword('/recover/identify/account');javascript:makeDivUnclickable()">${msg("doForgotPassword")}</div>
                             </#if>
                             <label id="passwordLabelPlaceholder" for="password" class="activeLabelColor hide">
                                 ${msg("placeholderForPassword")}
@@ -61,11 +61,11 @@
                     <span class="ui text error hide" id="inCorrectPasswordError">${msg("inCorrectPasswordError")}</span>
                     </div>
                     <div class="field">
-                        <button id="login" class="mt-36 ui fluid button">${msg("doSignIn")}</button>
+                        <button id="login" class="mt-16 sb-btn sb-btn-normal sb-btn-primary width-100">${msg("doLogIn")}</button>
                     </div>
 
                     <div id="selfSingUp" class="hide">
-                        <p class="or mb-30 mt-30 textCenter">OR</p>
+                        <p class="or my-16 textCenter">OR</p>
                         <div class="field">
                             <#if realm.password && social.providers??>
                                 <!--div id="kc-social-providers">
@@ -76,18 +76,18 @@
                                     </#list>
                                 </div-->
                             </#if>
-                            <button type="button" class="ui fluid blue basic button googleButton" onclick="navigate('google')">
-                            <img class="signInWithGoogle" src="${url.resourcesPath}/img/google.png">
-                            ${msg("doSignIn")} ${msg("doSignWithGoogle")}
-                            </button>
-							<button type="button" id="stateButton" class="ui fluid blue basic button googleButton stateButton hide" onclick="navigate('state')">
+							<button type="button" id="stateButton" class="sb-btn sb-btn-normal sb-btn-success width-100 mb-16" onclick="navigate('state')">
 								${msg("doSignWithState")}
 							</button>
+                            <button type="button" class="sb-btn sb-btn-normal sb-btn-outline-primary width-100 d-flex flex-ai-center flex-jc-center" onclick="navigate('google')">
+                            <img class="signInWithGoogle" src="${url.resourcesPath}/img/google.png">
+                            ${msg("doLogIn")} ${msg("doSignWithGoogle")}
+                            </button>
                         </div>
                         <#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
                             <div id="kc-registration" class="field">
                                 <div class="ui content signUpMsg">
-                                    ${msg("noAccount")} <span id="signup" tabindex="0" class="registerLink" onclick=navigate('self')>${msg("doRegister")}</span> to access relevant learning material and enroll for courses.
+                                    ${msg("noAccount")} <span id="signup" tabindex="0" class="registerLink" onclick=navigate('self')>${msg("registerHere")}</span>
                                 </div>
                             </div>
                         </#if>

diff --git a/ansible/artifacts/sunbird/login/messages/messages_en.properties b/ansible/artifacts/sunbird/login/messages/messages_en.properties
@@ -1,8 +1,8 @@
-doLogIn=Log In
+doLogIn=Login
 doRegister=Sign Up
 doSignIn=Sign In
 doSignWithGoogle=with Google
-doSignWithState=Sign In with State System
+doSignWithState=Login with State System
 doCancel=Cancel
 doSubmit=Submit
 doReset=Reset
@@ -38,7 +38,7 @@ emailVerifyTitle=Email verification
 emailForgotTitle=Forgot Your Password?
 updatePasswordTitle=Update Password
 newPasswordTitle=Create New Password
-enterEmailPhonenumberToGetCode=Enter your Email ID/ Mobile number and we will send you instructions on how to reset your password
+enterEmailPhonenumberToGetCode=Enter your Email Address/ Mobile number and we will send you instructions on how to reset your password
 codeSuccessTitle=Success code
 codeErrorTitle=Error code\: {0}
 
@@ -53,11 +53,11 @@ consentDenied=Consent denied.
 noAccount=Don''t have an account?
 username=Username or Mobile number
 goBack=&#60;&#60;Go Back
-mergeAccountMessage=Enter Mobile number / Email ID OR use Google Sign in to identify the account from which you want to merge usage details
+mergeAccountMessage=Enter Mobile number / Email Address OR use Google Sign in to identify the account from which you want to merge usage details
 migrateAccountMessage=Confirm the password for the DIKSHA account you want to merge of cick Sign in with Google to sign in using your Gmail account
 inCorrectPasswordError=The password entered is incorrect. Enter the password again.
-emailOrPhone=Mobile number / Email ID
-placeholderForEmailOrPhone=Enter Mobile number / Email ID
+emailOrPhone=Email Address / Mobile number
+placeholderForEmailOrPhone=Enter Email Address / Mobile number
 firstName=First name
 givenName=Given name
 fullName=Full name
@@ -135,7 +135,7 @@ client_admin-cli=Admin CLI
 client_realm-management=Realm Management
 client_broker=Broker
 
-invalidUserMessage=Invalid email ID/Mobile number or password. Please try again with valid credentials
+invalidUserMessage=Invalid Email Address/Mobile number or password. Please try again with valid credentials
 invalidEmailMessage=Invalid email address.
 accountDisabledMessage=Account is disabled, contact admin.
 accountTemporarilyDisabledMessage=Your account has been locked due to too many incorrect login attempts. You can re-attempt to login after 24 hours. Please get in touch with the help desk team for support
@@ -265,6 +265,9 @@ requiredAction.terms_and_conditions=Terms and Conditions
 requiredAction.UPDATE_PASSWORD=Update Password
 requiredAction.UPDATE_PROFILE=Update Profile
 requiredAction.VERIFY_EMAIL=Verify Email
-user_not_found=This email ID/mobile number doesn''t belong to a valid user
+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 password
+loginDiksha = Log into DIKSHA
+registerHere = Register here
diff --git a/ansible/artifacts/sunbird/login/resources/css/login.css b/ansible/artifacts/sunbird/login/resources/css/login.css
@@ -54,9 +54,9 @@ input:focus{
     border: 1px solid #024f9d !important;
 }
 .signInWithGoogle{
-    vertical-align: bottom;
+    /* vertical-align: bottom; */
     height: 18px !important;
-    margin-right: 5px;
+    margin-right: 8px;
 
 }
 .ui.basic.blue.button.googleButton{
@@ -80,11 +80,13 @@ input:focus{
     color: #F9F9F9;
 }
 .or{
-    color: #9B9B9B;
-    background-image:linear-gradient(#979797,#979797),linear-gradient(#979797,#979797);
+    color: #333;
+    background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);
     background-size:45% 1px;
     background-position:center left,center right;
     background-repeat:no-repeat;
+    font-weight: 700;
+    font-size: 12px;
 }
 .signUpMsg{
     font-size: 12px;
@@ -106,17 +108,17 @@ input:focus{
     font-weight: 500;
 }
 .forgetPasswordLink{
-    color: #9B9B9B !important;
+    color: #024f9d;
     font-size: 12px;
     line-height: 17px;
     float: right;
 }
 .forgetPasswordLink:hover,
 .forgetPasswordLink:focus{
-    color:#024f9d !important;
+    color: #002e50;
     outline: none;
     cursor: pointer;
-    font-weight:bold;
+    /* font-weight:bold; */
 }
 .textCenter {
     text-align: center !important;
@@ -217,8 +219,9 @@ a{
     color: #024f9d !important;
 }
 .registerLink{
-    color: #024f9d !important;
+    color: #024f9d;
     font-weight: bold;
+    text-decoration: underline;
 }
 .registerLink:hover,
 .registerLink:focus{
@@ -292,3 +295,97 @@ h1, h2, h3, h4, h5,
 .cursor-pointer {
     cursor: pointer
 }
+
+.width-100 {
+    width: 100%;
+}
+/* Design System Utilities */
+
+/* 1. Button Utilities */
+
+.sb-btn {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    outline: 0;
+    display: inline-block;
+    border: 1px solid;
+    color: var(--white);
+    cursor: pointer;
+    min-width: 64px;
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    position: relative;
+    text-transform: capitalize;
+    text-decoration: none;
+}
+
+.sb-btn-normal {
+    padding: 8px 16px;
+    height: 36px;
+    font-size: 12px;
+}
+
+.sb-btn-primary {
+    border-color: #024f9d;
+    background-color: #024f9d;
+    color: white;
+}
+
+.sb-btn-primary:hover {
+    background-color: #002e50;
+}
+
+.sb-btn-success {
+    border-color: #07bc81;
+    background-color: #07bc81;
+    color: white;
+}
+
+.sb-btn-success:hover {
+    background-color: #008840;
+    border-color: #008840;
+}
+
+.sb-btn-outline-primary {
+    background-color: white;
+    color: #024f9d;
+    border-color: #024f9d;
+}
+
+.sb-btn-outline-primary:hover {
+    border-color: #002e50;
+    color: #002e50;
+    background-color: #edf4f9;
+}
+
+/* Margin Utilities */
+
+.mb-16 {
+    margin-bottom: 16px !important;
+}
+
+.my-16 {
+    margin: 16px 0 !important;
+}
+
+.mx-16 {
+    margin: 0 16px !important;
+}
+
+/* Flex Utilities */
+
+.d-flex {
+    display: flex !important;
+}
+
+.flex-ai-center {
+    align-items: center !important;
+}
+
+.flex-jc-center {
+    justify-content: center !important;
+}