Feature/general UI (#1172)

* keycloak: OTP code input improvements & browser auto-complete. * keycloak: added Portuguese & Kiswahili languages * keycloak: replaced special characters in all languages * keycloak: forgot password page fix * keycloak: add cancel button to 'update phone number' required action * keycloak: increase size for 'Sign in with Phone' button * yoma: home page welcome message font size * yoma: fixed dashboards * yoma: side-nav menu glitch: no-drag & no-select
didx-xyz · Dec 4, 2024 · 2c5815f · 2c5815f
1 parent 7ec8491
commit 2c5815f
Show file tree

Hide file tree

Showing 28 changed files with 1,587 additions and 385 deletions.
diff --git a/src/keycloak/exports/01-yoma-realm.yaml b/src/keycloak/exports/01-yoma-realm.yaml
@@ -1564,6 +1564,8 @@ supportedLocales:
   - en
   - fr
   - es
+  - pt
+  - sw
 defaultLocale: en
 authenticationFlows:
   - id: 8000e246-e3ce-4540-ba9f-30a79acc2985

diff --git a/src/keycloak/providers/jars/keycloak-phone-provider.jar b/src/keycloak/providers/jars/keycloak-phone-provider.jar
diff --git a/src/keycloak/providers/jars/keycloak-phone-provider.resources.jar b/src/keycloak/providers/jars/keycloak-phone-provider.resources.jar
diff --git a/src/keycloak/providers/jars/keycloak-sms-provider-dummy.jar b/src/keycloak/providers/jars/keycloak-sms-provider-dummy.jar
diff --git a/src/keycloak/providers/jars/keycloak-sms-provider-twilio.jar b/src/keycloak/providers/jars/keycloak-sms-provider-twilio.jar
diff --git a/...ak-phone-provider.resources/src/main/resources/theme/phone/login/login-reset-password.ftl b/...ak-phone-provider.resources/src/main/resources/theme/phone/login/login-reset-password.ftl
@@ -116,16 +116,25 @@
                             <!-- INPUT: verification code -->
                             <div v-otp-input>
                               <div id="otp-input">
-                                <input type="text"
+                                <input
+                                  type="text"
                                   maxlength="1"
                                   pattern="[0-9]*"
                                   inputmode="numeric"
                                   autocomplete="off"
                                   placeholder="_"
-                                  v-for="n in 6"
-                                  :key="n">
+                                  v-for="(n, index) in 6"
+                                  :key="index"
+                                />
                               </div>
-                              <input type="hidden" name="code">
+                              <input
+                                type="text"
+                                name="code"
+                                id="code"
+                                autocomplete="one-time-code"
+                                inputmode="numeric"
+                                style="position: absolute; left: -9999px;"
+                              />
                             </div>
 
                             <#if messagesPerField.existsError('code')>
@@ -240,6 +249,7 @@
                 },
                 resetPhoneVerification() {
                   this.phoneVerified = false;
+                  this.isCodeSent = false;
                   this.resetSendCodeButton = true;
                   this.clearMessages();
                 },

diff --git a/...one-provider.resources/src/main/resources/theme/phone/login/login-update-phone-number.ftl b/...one-provider.resources/src/main/resources/theme/phone/login/login-update-phone-number.ftl
@@ -25,7 +25,7 @@
                 </div>
 
                 <#-- LABEL: code send success -->
-                <div v-if="isCodeSent" aria-live="polite" style="color: green;">
+                <div v-if="isCodeSent" class="form-label" aria-live="polite" style="color: green;">
                   <span style="margin-right: 5px;">✅</span> {{ messageCodeSent }}
                 </div>
 
@@ -61,16 +61,25 @@
                 <!-- INPUT: verification code -->
                 <div v-otp-input>
                   <div id="otp-input">
-                    <input type="text"
+                    <input
+                      type="text"
                       maxlength="1"
                       pattern="[0-9]*"
                       inputmode="numeric"
                       autocomplete="off"
                       placeholder="_"
-                      v-for="n in 6"
-                      :key="n">
+                      v-for="(n, index) in 6"
+                      :key="index"
+                    />
                   </div>
-                  <input type="hidden" name="code">
+                  <input
+                    type="text"
+                    name="code"
+                    id="code"
+                    autocomplete="one-time-code"
+                    inputmode="numeric"
+                    style="position: absolute; left: -9999px;"
+                  />
                 </div>
 
                 <#if messagesPerField.existsError('code')>
@@ -87,6 +96,14 @@
                     name="save" id="kc-login" type="submit" value="${msg('doSubmit')}"/>
                 </div>
               </div>
+
+              <#-- cancel button -->
+              <div id="kc-form-options" style="text-align: center;">
+                <input type="hidden" id="cancel" name="cancel" v-model="cancel">
+                <button class="form-link" tabindex="0" @click="() => { cancel = true; $event.target.closest('form').submit(); }">
+                  <span class="text">${msg("doCancel")}</span>
+                </button>
+              </div>
             </form>
           </div>
         </div>
@@ -104,6 +121,7 @@
             resetSendCodeButton: false,
             KC_HTTP_RELATIVE_PATH: <#if KC_HTTP_RELATIVE_PATH?has_content>'${KC_HTTP_RELATIVE_PATH}'<#else>''</#if>,
             isCodeSent: false,
+            cancel: false,
           },
           computed: {
             maskedPhoneNumber() {

diff --git a/...roviders/keycloak-phone-provider.resources/src/main/resources/theme/phone/login/login.ftl b/...roviders/keycloak-phone-provider.resources/src/main/resources/theme/phone/login/login.ftl
@@ -67,7 +67,7 @@
                   </div>
 
                   <#-- LINK: use phone -->
-                  <div class="form-link" v-on:click="phoneActivated = true" tabindex="0">
+                  <div class="form-link" v-on:click="phoneActivated = true" tabindex="0" style="margin-bottom: 2rem">
                     <span class="icon">📲</span>
                     <span class="text">${msg("signInWithPhone")}</span>
                   </div>
@@ -123,16 +123,25 @@
                         <!-- INPUT: verification code -->
                         <div v-otp-input>
                           <div id="otp-input">
-                            <input type="text"
+                            <input
+                              type="text"
                               maxlength="1"
                               pattern="[0-9]*"
                               inputmode="numeric"
                               autocomplete="off"
                               placeholder="_"
-                              v-for="n in 6"
-                              :key="n">
+                              v-for="(n, index) in 6"
+                              :key="index"
+                            />
                           </div>
-                          <input type="hidden" name="code">
+                          <input
+                            type="text"
+                            name="code"
+                            id="code"
+                            autocomplete="one-time-code"
+                            inputmode="numeric"
+                            style="position: absolute; left: -9999px;"
+                          />
                         </div>
 
                         <#if messagesPerField.existsError('code')>
@@ -146,7 +155,7 @@
                 </#if>
 
                 <div v-bind:style="{ display: !phoneActivated || (phoneActivated && isCodeSent) ? 'block' : 'none'}">
-                  <#if realm.rememberMe && !usernameHidden??>
+                  <#--  <#if realm.rememberMe && !usernameHidden??>
                     <div class="centered-div">
                       <div class="centered-checkbox">
                         <input
@@ -161,7 +170,7 @@
                         </label>
                       </div>
                     </div>
-                  </#if>
+                  </#if>  -->
 
                   <div id="kc-form-buttons">
                     <input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if> />

diff --git a/...e-provider.resources/src/main/resources/theme/phone/login/messages/messages_en.properties b/...e-provider.resources/src/main/resources/theme/phone/login/messages/messages_en.properties
@@ -1,3 +1,4 @@
+# encoding: UTF-8
 updatePhoneNumber=Update Your Mobile Number
 configSms2Fa=Configure SMS 2FA
 authCodePhoneNumber=Authentication code
@@ -15,7 +16,7 @@ abusedMessageService=Too many code requests for your mobile number.
 sendVerificationCodeFail=Verification code send fail!
 invalidPhoneNumber=Phone number is invalid
 invalidPhoneNumberCountryCode=The country code supplied did not belong to a supported country or non-geographical entity.
-invalidPhoneNumberTooLong=Phone number is invalid, too long\uFF01
+invalidPhoneNumberTooLong=Phone number is invalid, too long!
 invalidPhoneNumberMustNumber=Phone number is invalid, must a number!
 invalidPhoneNumberTooShort=Phone number is invalid, too short!
 
@@ -392,29 +393,11 @@ confirmAccountLinking=Confirm linking the account {0} of identity provider {1} w
 confirmEmailAddressVerification=Confirm validity of e-mail address {0}.
 confirmExecutionOfActions=Perform the following action(s)
 
-locale_ar=\u0639\u0631\u0628\u064A
-locale_ca=Catal\u00E0
-locale_cs=\u010Ce\u0161tina
-locale_da=Dansk
-locale_de=Deutsch
 locale_en=English
-locale_es=Espa\u00F1ol
-locale_fr=Fran\u00E7ais
-locale_hu=Magyar
-locale_it=Italiano
-locale_ja=\u65E5\u672C\u8A9E
-locale_lt=Lietuvi\u0173
-locale_nl=Nederlands
-locale_no=Norsk
-locale_pl=Polski
-locale_pt_BR=Portugu\u00EAs (Brasil)
-locale_pt-BR=Portugu\u00EAs (Brasil)
-locale_ru=\u0420\u0443\u0441\u0441\u043A\u0438\u0439
-locale_sk=Sloven\u010Dina
-locale_sv=Svenska
-locale_tr=T\u00FCrk\u00E7e
-locale_zh-CN=\u4E2D\u6587\u7B80\u4F53
-locale_fi=Suomi
+locale_es=Español
+locale_fr=Français
+locale_pt=Português
+locale_sw=Kiswahili
 
 backToApplication=Back to Yoma
 missingParameterMessage=Missing parameters\: {0}
@@ -560,15 +543,15 @@ phoneUserNotFound=User does not exist.
 codeSent=SMS sent to {0}
 duplicatePhoneAllowedCantLogin = duplicate Phone is Allowed, so can''t use login by phone. change --spi-phone-support-default-<$realm>-duplicate-phone-allowed to false
 
-signInWithPhone=Sign in with Phone
+signInWithPhone=Sign in with SMS code
 signInWithPassword=Sign in with Password
 resetWithPhone=Use Phone to reset your account
 resetWithEmail=Use Email to reset your account
 
 usernameOrPhoneNumber=Username or phone
 usernameOrEmailOrPhoneNumber=Username or email or phone
 emailOrPhoneNumber=Email or phone number
-smsCodeMessage=\u005B{0}\u005D - {1} code: {2}, expires: {3} minute
+smsCodeMessage={2} is your {1} code for {0}. Expires in {3} minutes
 emailAsUsername=Use email to sign up
 phoneNumberAsUsername=Use phone number to sign up
 enterPhoneNumber=Enter phone number

diff --git a/...e-provider.resources/src/main/resources/theme/phone/login/messages/messages_es.properties b/...e-provider.resources/src/main/resources/theme/phone/login/messages/messages_es.properties
@@ -1,3 +1,4 @@
+# encoding: UTF-8
 updatePhoneNumber=Actualizar tu número móvil
 configSms2Fa=Configurar SMS 2FA
 authCodePhoneNumber=Código de autenticación
@@ -9,7 +10,7 @@ requiredPhoneNumber=El número de teléfono es requerido.
 verificationCode=Código de verificación
 authenticationCode=Código de autenticación
 noOngoingVerificationProcess=No hay proceso de verificación en curso.
-verificationCodeDoesNotMatch=El código de verificación proporcionado no coincide con el nuestro.
+verificationCodeDoesNotMatch=El código de verificación proporcionado no coincide con el nuest
 phoneTokenCodeDoesNotMatch=El código de autenticación proporcionado no coincide con el nuestro.
 abusedMessageService=Demasiadas solicitudes de código para tu número móvil.
 sendVerificationCodeFail=¡Falló el envío del código de verificación!
@@ -41,7 +42,7 @@ registerWithTitleHtml={0}
 loginAccountTitle=Iniciar sesión en Yoma
 loginTitle=Inicia sesión en {0}
 loginTitleHtml={0}
-impersonateTitle={0} Personificar Usuario
+impersonateTitle={0} Personificar Usuario
 impersonateTitleHtml=<strong>{0}</strong> Personificar Usuario
 realmChoice=Dominio
 unknownUser=Usuario desconocido
@@ -62,7 +63,7 @@ termsTitle=Términos y Condiciones
 termsText1=Acepto la
 termsText2=política de privacidad y los términos de servicio de Yoma
 termsTitleHtml=Términos y Condiciones
-termsText=<p>Términes y condiciones a definir</p>
+termsText=<p>Términos y condiciones a definir</p>
 
 recaptchaFailed=Reconocimiento de texto inválido
 recaptchaNotConfigured=El reconocimiento de texto es obligatorio pero no está configurado
@@ -263,6 +264,12 @@ identityProviderMissingStateMessage=Falta el parámetro de estado en respuesta d
 confirmEmailAddressVerification=Confirme la validez de la dirección de correo electrónico {0}.
 confirmExecutionOfActions=Realice las siguientes acciones
 
+locale_en=Inglés
+locale_es=Español
+locale_fr=Francés
+locale_pt=Portugués
+locale_sw=Suajili
+
 backToApplication=Volver a la Yoma
 missingParameterMessage=Parámetros que faltan: {0}
 clientNotFoundMessage=Cliente no encontrado
@@ -294,10 +301,10 @@ access-denied=Acceso denegado
 logoutConfirmTitle=Cerrando sesión
 logoutConfirmHeader=¿Quieres cerrar sesión?
 doLogout=Cerrar sesión
-resendEmailVerificationBtn=Reenviar verificaci\u00F3n
-updateEmailVerificationBtn=Reenviar enlace de verificaci\u00F3n
+resendEmailVerificationBtn=Reenviar verificación
+updateEmailVerificationBtn=Reenviar enlace de verificación
 updateEmailText=No se preocupe, podemos enviar el enlace de nuevo.
-backToLoginBtn=\u00BFYa eres miembro? Inicia sesi\u00F3n
+backToLoginBtn=¿Ya eres miembro? Inicia sesión
 goBack=Volver a
 
 invalidPhoneNumberNotSupported=¡Número de teléfono no válido, no soportado!
@@ -307,17 +314,17 @@ requiredVerificationCode=Se requiere el código de verificación.
 phoneInstruction=Utilice el código de verificación telefónica para restablecer la contraseña.
 phoneUserNotFound=El usuario no existe.
 codeSent=SMS enviado a {0}
-duplicatePhoneAllowedCantLogin = Se permite el teléfono duplicado, por lo que no se puede usar el inicio de sesión por teléfono. Cambie --spi-phone-support-default-<$realm>-duplicate-phone-allowed a false
+duplicatePhoneAllowedCantLogin=Se permite el teléfono duplicado, por lo que no se puede usar el inicio de sesión por teléfono. Cambie --spi-phone-support-default-<$realm>-duplicate-phone-allowed a false
 
-signInWithPhone=Iniciar sesión por Teléfono
+signInWithPhone=Iniciar sesión con código SMS
 signInWithPassword=Iniciar sesión por Contraseña
 resetWithPhone=Restablecer con Teléfono
 resetWithEmail=Restablecer con Email
 
 usernameOrPhoneNumber=Nombre de usuario o teléfono
 usernameOrEmailOrPhoneNumber=Nombre de usuario, correo electrónico o teléfono
 emailOrPhoneNumber=Correo electrónico o teléfono
-smsCodeMessage=\u005B{0}\u005D - {1} código: {2}, expira: {3} minutos
+smsCodeMessage={2} es su código {1} para {0}. Expira en {3} minutos
 emailAsUsername=Usar email para registrarse
 phoneNumberAsUsername=Usar número de teléfono para registrarse
 enterPhoneNumber=Ingrese su número de teléfono
@@ -340,6 +347,6 @@ invalidForm=Por favor, corrija los errores del formulario
 passwordInstructions=La contraseña debe tener al menos {0} caracteres y contener al menos {1}, {2} y {3}.
 password_requirement_length=10 caracteres de longitud
 password_requirement_lowercase=1 minúscula
-password_requirement_uppercase=1 MAYÚSCULA
+password_requirement_uppercase=1 MAY�sSCULA
 password_requirement_number=1 número
 password_requirement_email=Diferente del email
-Original file line number
+Diff line change
@@ Expand Up / @@ -1564,6 +1564,8 @@ supportedLocales: @@
       - en
       - fr
       - es
+      - pt
+      - sw
     defaultLocale: en
     authenticationFlows:
       - id: 8000e246-e3ce-4540-ba9f-30a79acc2985
@@ Expand Down @@