diff --git a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_de.properties b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_de.properties index 2f32bfb77..1daf5e17a 100644 --- a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_de.properties +++ b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_de.properties @@ -1,3 +1,7 @@ usernameOrEmail=Benutzername -loginAccountTitle=Bei IBM Cloud Pak anmelden +loginAccountTitle=Anmelden doLogIn=Anmelden +identity-provider-login-label=Alternative logins +loginProfileTitle=Update account information +loginIdpReviewProfileTitle=Update account information +doForgotPassword=Forgot password? \ No newline at end of file diff --git a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_en.properties b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_en.properties index 5b9f1e508..c023792bd 100644 --- a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_en.properties +++ b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_en.properties @@ -1,3 +1,7 @@ usernameOrEmail=Username -loginAccountTitle=Log in to IBM Cloud Pak +loginAccountTitle=Log in doLogIn=Log in +identity-provider-login-label=Alternative logins +loginProfileTitle=Update account information +loginIdpReviewProfileTitle=Update account information +doForgotPassword=Forgot password? diff --git a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_es.properties b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_es.properties index d852606f8..00c1fdbe2 100644 --- a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_es.properties +++ b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_es.properties @@ -1,3 +1,7 @@ usernameOrEmail=Nombre de usuario -loginAccountTitle=Inicie sesión en IBM Cloud Pak +loginAccountTitle=Inicie sesión doLogIn=Iniciar sesión +identity-provider-login-label=Alternative logins +loginProfileTitle=Update account information +loginIdpReviewProfileTitle=Update account information +doForgotPassword=Forgot password? \ No newline at end of file diff --git a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_fr.properties b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_fr.properties index be0af4861..b5e718575 100644 --- a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_fr.properties +++ b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_fr.properties @@ -1,3 +1,7 @@ usernameOrEmail=Nom d'utilisateur -loginAccountTitle=Connexion à IBM Cloud Pak +loginAccountTitle=Connexion doLogIn=Connexion +identity-provider-login-label=Alternative logins +loginProfileTitle=Update account information +loginIdpReviewProfileTitle=Update account information +doForgotPassword=Forgot password? \ No newline at end of file diff --git a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_it.properties b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_it.properties index f39fad2ad..5a16f3f60 100644 --- a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_it.properties +++ b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_it.properties @@ -1,3 +1,7 @@ usernameOrEmail=Nome utente -loginAccountTitle=Accedere a IBM Cloud Pak +loginAccountTitle=Accedi doLogIn=Accedi +identity-provider-login-label=Alternative logins +loginProfileTitle=Update account information +loginIdpReviewProfileTitle=Update account information +doForgotPassword=Forgot password? \ No newline at end of file diff --git a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_ja.properties b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_ja.properties index d2d14d919..ef7cd76ee 100644 --- a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_ja.properties +++ b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_ja.properties @@ -1,3 +1,7 @@ usernameOrEmail=ユーザー名 -loginAccountTitle=IBM Cloud Pak にログイン +loginAccountTitle=ログイン doLogIn=ログイン +identity-provider-login-label=Alternative logins +loginProfileTitle=Update account information +loginIdpReviewProfileTitle=Update account information +doForgotPassword=Forgot password? \ No newline at end of file diff --git a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_ko.properties b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_ko.properties index 20f8ef3c1..33a2a394b 100644 --- a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_ko.properties +++ b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_ko.properties @@ -1,3 +1,7 @@ usernameOrEmail=사용자 이름 -loginAccountTitle=IBM Cloud Pak에 로그인 +loginAccountTitle=로그인 doLogIn=로그인 +identity-provider-login-label=Alternative logins +loginProfileTitle=Update account information +loginIdpReviewProfileTitle=Update account information +doForgotPassword=Forgot password? \ No newline at end of file diff --git a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_pt_BR.properties b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_pt_BR.properties index 05d18e089..895a7dec7 100644 --- a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_pt_BR.properties +++ b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_pt_BR.properties @@ -1,3 +1,7 @@ usernameOrEmail=Nome do usuário -loginAccountTitle=Efetue login no IBM Cloud Pak +loginAccountTitle=Efetuar login doLogIn=Efetuar login +identity-provider-login-label=Alternative logins +loginProfileTitle=Update account information +loginIdpReviewProfileTitle=Update account information +doForgotPassword=Forgot password? \ No newline at end of file diff --git a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_zh_CN.properties b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_zh_CN.properties index c7c18c098..62bbe79e5 100644 --- a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_zh_CN.properties +++ b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_zh_CN.properties @@ -1,3 +1,7 @@ usernameOrEmail=用户名 -loginAccountTitle=登录 IBM Cloud Pak +loginAccountTitle=登录 doLogIn=登录 +identity-provider-login-label=Alternative logins +loginProfileTitle=Update account information +loginIdpReviewProfileTitle=Update account information +doForgotPassword=Forgot password? \ No newline at end of file diff --git a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_zh_TW.properties b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_zh_TW.properties index 943f4fce5..63d995d4d 100644 --- a/hack/keycloak-themes/theme/cloudpak/login/messages/messages_zh_TW.properties +++ b/hack/keycloak-themes/theme/cloudpak/login/messages/messages_zh_TW.properties @@ -1,3 +1,7 @@ usernameOrEmail=使用者名稱 -loginAccountTitle=登入 IBM Cloud Pak +loginAccountTitle=登入 doLogIn=登入 +identity-provider-login-label=Alternative logins +loginProfileTitle=Update account information +loginIdpReviewProfileTitle=Update account information +doForgotPassword=Forgot password? \ No newline at end of file diff --git a/hack/keycloak-themes/theme/cloudpak/login/resources/css/styles.css b/hack/keycloak-themes/theme/cloudpak/login/resources/css/styles.css index 1cc913989..f9ba2f2d0 100755 --- a/hack/keycloak-themes/theme/cloudpak/login/resources/css/styles.css +++ b/hack/keycloak-themes/theme/cloudpak/login/resources/css/styles.css @@ -11,35 +11,26 @@ body { body .login-pf-page { font-family: IBM Plex Sans, Helvetica Neue, Arial, sans-serif; + padding-top: 0px; + background: #161616 !important; } -.login-pf-page .login-pf-header h1 { - line-height: 1.4; - letter-spacing: 0; - color: #f4f4f4; - font-size: 28px; +.login-pf-page a { + color: #0f62fe; } - -/* -sample image usage +/* set ibm cloudpak header */ .kc-logo-text { - display: none; - background-image: url(../img/ibm-logo.png); + background-image: url(../img/login-header.svg); background-repeat: no-repeat; - height: 128px; - width: 320px; + height: 48px; + width: 100%; margin: 0 auto; } .kc-logo-text span { display: none; } -*/ -/* Turn off logo text */ -#kc-header { - display: none; -} #kc-locale-wrapper { display: none; @@ -56,17 +47,35 @@ sample image usage .login-pf-page .card-pf { background: #161616; - margin: 60px auto auto auto; - max-width: 500px; + margin: 56px auto auto auto; + width: 288px; + padding: 0px; +} + +.login-pf-page .login-pf-header { + margin-bottom: 40px; +} + +.login-pf-page .login-pf-header h1 { + line-height: 40px; + letter-spacing: 0; + color: #f4f4f4; + font-size: 32px; + text-align: left; + margin: 0px; } /* input fields and labels */ .pf-c-form__label.pf-c-form__label-text { margin: .5rem 0; color: #c6c6c6; + font-size: 12px; + line-height: 16px; + letter-spacing: .32px; } -#username,#password,#password-new,#password-confirm { +#username,#password,#password-new,#password-confirm,#email,#firstName,#lastName { + height: 48px; background-color: #262626; background: #262626; font-size: .875rem; @@ -84,15 +93,22 @@ sample image usage #username[aria-invalid=true], #password[aria-invalid=true] { border: none; - border: 2px solid #ffb3b8; + border: 2px solid #fa4d56; + background-image: var(--pf-c-form-control--invalid--BackgroundUrl); + background-position: var(--pf-c-form-control--invalid--BackgroundPosition); + background-size: var(--pf-c-form-control--invalid--BackgroundSize); + background-repeat: no-repeat; } #input-error { - color: #ffb3b8; + color: #ff8389; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.32px; } /* input fields */ -#username:focus,#password:focus,#password-new:focus,#password-confirm:focus { +#username:focus,#password:focus,#password-new:focus,#password-confirm:focus,#email:focus,#firstName:focus,#lastName:focus { outline: 2px solid #fff; outline-offset: -2px; } @@ -104,7 +120,7 @@ sample image usage color: #fff; min-height: 3rem; cursor: pointer; - text-align: center; + text-align: left; font-size: .875rem; font-weight: 300; letter-spacing: .16px; @@ -120,9 +136,71 @@ sample image usage box-shadow: inset 0 0 0 1px #fff,inset 0 0 0 2px #161616; } -/* Turn off view password button */ -.pf-c-button.pf-m-control { - display: none; +/* show password button */ +.pf-c-input-group .pf-c-button.pf-m-control { + background-color: #262626; + color: #ffffff; + /*border-bottom: 1px solid #6f6f6f; puts text field line under button + outline: 2px solid transparent;*/ + height: 48px; +} + +/* The following block of styling is to get the carbon checkbox */ +.checkbox label { + padding-left: 27px; + padding-top: 2px; +} +label:has( > input[type=checkbox]:focus)::before { + outline: 2px solid #fff; + outline-offset: 1px; +} +label:has( > input[type=checkbox]:checked)::before { + border-width: 1px; + border-color: #f4f4f4; + background-color: #f4f4f4; +} +label:has( > input[type=checkbox]:checked)::after { + transform: scale(1) rotate(-45deg); +} +label:has( > input[type=checkbox])::before { + position: absolute; + top: .125rem; + left: 0; + width: 1rem; + height: 1rem; + border: 1px solid #f4f4f4; + margin: .125rem .125rem .125rem .1875rem; + background-color: transparent; + border-radius: 1px; + content: ""; +} +label:has( > input[type=checkbox])::after { + position: absolute; + top: .5rem; + left: .4375rem; + width: .5625rem; + height: .3125rem; + border-bottom: 2px solid #161616; + border-left: 2px solid #161616; + margin-top: -.1875rem; + background: none; + content: ""; + transform: scale(0) rotate(-45deg); + transform-origin: bottom right; +} +#rememberMe { + position: absolute; + overflow: hidden; + width: 1px; + height: 1px; + padding: 0; + border: 0; + margin: -1px; + clip: rect(0,0,0,0); + visibility: inherit; + white-space: nowrap; + top: 1.25rem; + left: .7rem; } /* additional providers styling */ @@ -131,7 +209,7 @@ sample image usage } .kc-social-item { - text-align: center; + text-align: left; } .kc-social-links li { @@ -150,22 +228,30 @@ sample image usage } .pf-c-button.kc-social-item { - background-color: #393939; + background-color: transparent; color: #ffffff; border-width: 1px; border-style: solid; - border-color: transparent; + border-color: #ffffff; text-decoration: none; outline: none; + font-size: 14px; + line-height: 18px; + letter-spacing: 0.16px; + font-weight: 300; + padding: 13px 10px 13px 10px; } .pf-c-button.kc-social-item:focus { + background-color: #ffffff; + color: #161616; border-color: #fff; box-shadow: inset 0 0 0 1px #fff,inset 0 0 0 2px #161616; } .pf-c-button.kc-social-item:hover { - background-color: #474747; + background-color: #ffffff; + color: #161616; border-width: 1px; border-style: solid; border-color: transparent; @@ -178,7 +264,16 @@ sample image usage border-color: transparent; } +#kc-social-providers h4 { + font-size: 12px; + line-height: 16px; + letter-spacing: .32px; + color: #c6c6c6; + font-weight: 400; +} + .kc-social-provider-logo { + display: none; font-size: 23px; width: 30px; height: 25px; @@ -193,10 +288,10 @@ a:visited,:active { /* Warning dialog - required for set new password */ .alert-warning.pf-c-alert.pf-m-inline.pf-m-warning { - background: #f4f4f4; + background: #262626; border-left: 3px solid #f1c21b; border-top: none; - + height: 66px; } .alert-warning.pf-c-alert.pf-m-inline.pf-m-warning .pf-c-alert__icon { @@ -209,23 +304,23 @@ a:visited,:active { } .pf-c-alert__title.kc-feedback-text { - color: #161616; - font-size: .875rem; - font-weight: 600; - line-height: 1.28572; + color: #f4f4f4; + font-size: 14px; + font-weight: 200; + line-height: 18px; letter-spacing: .16px; margin: 0 .25rem 0 0; } /* error dialog */ .alert-error.pf-c-alert.pf-m-inline.pf-m-danger { - background: #f4f4f4; - color: #161616; + background: #262626; + color: #f4f4f4; border-left: 3px solid #da1e28; border-top: none; - font-size: .875rem; - font-weight: 600; - line-height: 1.28572; + font-size: 14px; + font-weight: 200; + line-height: 18px; letter-spacing: .16px; margin: 0 .25rem 0 0; } diff --git a/hack/keycloak-themes/theme/cloudpak/login/resources/img/login-header.svg b/hack/keycloak-themes/theme/cloudpak/login/resources/img/login-header.svg new file mode 100644 index 000000000..d46c07864 --- /dev/null +++ b/hack/keycloak-themes/theme/cloudpak/login/resources/img/login-header.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +