Merge pull request #94 from MadhuMosip/MOSIP-32336

MOSIP-32086 added error message in login page and increased login field width
mosip · May 8, 2024 · 74fab29 · 74fab29
2 parents cbf901d + c8fd372
commit 74fab29
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 35 deletions.
diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.css b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.css
@@ -61,6 +61,7 @@ a {
 
 .login-pf-page .card-pf {
 	padding: 20px 25px 20px 25px;
+	width: 550px;
 }
 
 .login-pf-page .card-pf p{

diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/Template.tsx b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/Template.tsx
@@ -47,8 +47,6 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         "documentTitle": i18n.msgStr("loginTitle", kcContext.realm.displayName)
     });
 
-    console.log(kcContext)
-
     useEffect(() => {
         console.log(`Value of MY_ENV_VARIABLE on the Keycloak server: "${kcContext.properties.MY_ENV_VARIABLE}"`);
     }, []);
@@ -147,23 +145,16 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                     <div id="kc-content">
                         <div id="kc-content-wrapper">
                             {/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
-                            {displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
-                                <div className={clsx("alert", `alert-${message.type}`)}>
+                            {displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (pageId === 'login.ftl') && (
+                                <div className='bg-errorBg min-h-11 p-2 text-center text-danger font-semibold'>
                                     {message.type === "success" && <span className={getClassName("kcFeedbackSuccessIcon")}></span>}
                                     {message.type === "warning" && <span className={getClassName("kcFeedbackWarningIcon")}></span>}
-                                    {message.type === "error" && <span className={getClassName("kcFeedbackErrorIcon")}></span>}
                                     {message.type === "info" && <span className={getClassName("kcFeedbackInfoIcon")}></span>}
-                                    {pageId === 'login.ftl' ? ( <span
-                                        className="kc-feedback-text"
+                                    <span className="kc-feedback-text"
                                         dangerouslySetInnerHTML={{
                                             "__html": msgStr("logInErrorMsg")
                                         }}
-                                    />) : (<span
-                                        className="kc-feedback-text"
-                                        dangerouslySetInnerHTML={{
-                                            "__html": msgStr("registerErrorMsg")
-                                        }}
-                                    />)}
+                                    />
                                 </div>
                             )}
                             {children}

diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/i18n.ts b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/i18n.ts
@@ -33,10 +33,9 @@ export const { useI18n } = createUseI18n({
         phoneNumberPH: "Enter Phone Number",
         userNamePH: "Enter Username",
         alreadyMember: "Already a member?",
-        requiredFields: "are mandatory.",
-        requiredFieldsTwo: "All fields marked with",
+        requiredFields: "All fields are required, except ones marked as optional",
         missingPartnerTypeMessage: "Please specify partner type",
-        logInErrorMsg: "Please Enter Email and Password",
+        logInErrorMsg: "Entered Email Address or Password invalid!",
         registerErrorMsg: "Please fill all the required fields"
     },
     fr: {
@@ -66,11 +65,10 @@ export const { useI18n } = createUseI18n({
         phoneNumberPH: "Entrez le numéro de téléphone",
         userNamePH: "Saisissez votre nom d'utilisateur",
         alreadyMember: "Déjà membre?",
-        requiredFields: "sont obligatoires.",
-        requiredFieldsTwo: "Tous les champs marqués d'un",
 
+        requiredFields: "All fields are required, except ones marked as optional",
         missingPartnerTypeMessage:"Please specify partner type",
-        logInErrorMsg: "Please Enter Email and Password",
+        logInErrorMsg: "Entered Email Address or Password invalid!",
         registerErrorMsg: "Please fill all the required fields"
         /* spell-checker: enable */
     }

diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/Register.tsx b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/Register.tsx
@@ -30,7 +30,7 @@ declare global {
 
 export default function Register(props: PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-    const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
+    const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey} = kcContext;
 
     const [passwordType, setPasswordType] = useState('password');
     const [confPasswordType, setConfPasswordType] = useState('password');
@@ -115,16 +115,14 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                     </div>
                 </div>
                 <h1 id="kc-page-title" className="text-3xl font-bold text-hTextColor font-sans">{msg("registerTitle")}</h1>
-                <p className="text-pTextColor text-xl font-semibold">{msg("regDesc")}</p>
-                <span className="text-pTextColor mt-4 text-xl font-semibold">
-                    {msg("requiredFieldsTwo")} <span className="required">*</span> {msg("requiredFields")}
-                </span>
+                <p className="text-pTextColor text-xl mt-3">{msg("regDesc")}</p>
+                <span className="text-pTextColor mt-4 text-xl"> {msg("requiredFields")}</span>
             </>
         }>
             <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
                 <div className={clsx(getClassName("kcFormGroupClass"), messagesPerField.printIfExists("partnerType", getClassName("kcFormGroupErrorClass")))}>
                     <div className={getClassName("kcLabelWrapperClass")}>
-                        <label htmlFor="partnerType" className={getClassName("kcLabelClass")}>{msg("partnerType")}<span className="text-red-500">*</span></label>
+                        <label htmlFor="partnerType" className={getClassName("kcLabelClass")}>{msg("partnerType")}</label>
                     </div>
                     <div className={getClassName('kcInputWrapperClass')}>
                         <select
@@ -153,7 +151,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                 >
                     <div className={getClassName("kcLabelWrapperClass")}>
                         <label htmlFor="firstName" className={getClassName("kcLabelClass")}>
-                            {msg("firstName")}<span className="text-red-500">*</span>
+                            {msg("firstName")}
                         </label>
                     </div>
                     <div className={getClassName("kcInputWrapperClass")}>
@@ -176,7 +174,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                 >
                     <div className={getClassName("kcLabelWrapperClass")}>
                         <label htmlFor="lastName" className={getClassName("kcLabelClass")}>
-                            {msg("lastName")}<span className="text-red-500">*</span>
+                            {msg("lastName")}
                         </label>
                     </div>
                     <div className={getClassName("kcInputWrapperClass")}>
@@ -199,7 +197,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                 >
                     <div className={getClassName("kcLabelWrapperClass")}>
                         <label htmlFor="orgName" className={getClassName("kcLabelClass")}>
-                            {msg("orgName")}<span className="text-red-500">*</span>
+                            {msg("orgName")}
                         </label>
                     </div>
                     <div className={getClassName("kcInputWrapperClass")}>
@@ -233,7 +231,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                 >
                     <div className={getClassName("kcLabelWrapperClass")}>
                         <label htmlFor="address" className={getClassName("kcLabelClass")}>
-                            {msg("address")}<span className="text-red-500">*</span>
+                            {msg("address")}
                         </label>
                     </div>
                     <div className={getClassName("kcInputWrapperClass")}>
@@ -256,7 +254,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                 >
                     <div className={getClassName("kcLabelWrapperClass")}>
                         <label htmlFor="email" className={getClassName("kcLabelClass")}>
-                            {msg("email")}<span className="text-red-500">*</span>
+                            {msg("email")}
                         </label>
                     </div>
                     <div className={getClassName("kcInputWrapperClass")}>
@@ -280,7 +278,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                 >
                     <div className={getClassName("kcLabelWrapperClass")}>
                         <label htmlFor="phoneNumber" className={getClassName("kcLabelClass")}>
-                            {msg("phoneNumber")}<span className="text-red-500">*</span>
+                            {msg("phoneNumber")}
                         </label>
                     </div>
                     <div className={getClassName("kcInputWrapperClass")}>
@@ -303,7 +301,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                     >
                         <div className={getClassName("kcLabelWrapperClass")}>
                             <label htmlFor="username" className={getClassName("kcLabelClass")}>
-                                {msg("username")}<span className="text-red-500">*</span>
+                                {msg("username")}
                             </label>
                         </div>
                         <div className={getClassName("kcInputWrapperClass")}>
@@ -329,7 +327,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                         >
                             <div className={getClassName("kcLabelWrapperClass")}>
                                 <label htmlFor="password" className={getClassName("kcLabelClass")}>
-                                    {msg("password")}<span className="text-red-500">*</span>
+                                    {msg("password")}
                                 </label>
                             </div>
                             <div className={getClassName("kcInputWrapperClass")}>
@@ -355,7 +353,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                         >
                             <div className={getClassName("kcLabelWrapperClass")}>
                                 <label htmlFor="password-confirm" className={getClassName("kcLabelClass")}>
-                                    {msg("passwordConfirm")}<span className="text-red-500">*</span>
+                                    {msg("passwordConfirm")}
                                 </label>
                             </div>
                             <div className={getClassName("kcInputWrapperClass")}>

diff --git a/keycloak-artemis/mosip_keycloak_theme/tailwind.config.js b/keycloak-artemis/mosip_keycloak_theme/tailwind.config.js
@@ -8,7 +8,8 @@ export default {
         'pTextColor': '#3D4468',
         'hTextColor': '#031640',
         'hLinkColor': '#0D3077',
-        'bColor': '#707070'
+        'bColor': '#707070',
+        'errorBg': "#FFE0E0"
       },
       width:{
         'orgDropdownW': '89%'