Skip to content

Commit

Permalink
MOSIP-32077 added error messages for input validation
Browse files Browse the repository at this point in the history 
Signed-off-by: MadhuMosip <[email protected]>
  • Loading branch information
@MadhuMosip
MadhuMosip committed May 10, 2024
1 parent c8fd372 commit f20a06a
Show file tree
Hide file tree
Showing 9 changed files with 132 additions and 36 deletions.
2 changes: 1 addition & 1 deletion keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ a {

.g-recaptcha {
transform: scale(1.08);
margin-left: 10px;
margin-left: 17px;
}

/*
Expand Down
2 changes: 1 addition & 1 deletion keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/Template.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
<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) && (pageId === 'login.ftl') && (
<div className='bg-errorBg min-h-11 p-2 text-center text-danger font-semibold'>
<div className='bg-errorBg min-h-11 p-2 text-center text-errorColor font-semibold mb-3'>
{message.type === "success" && <span className={getClassName("kcFeedbackSuccessIcon")}></span>}
{message.type === "warning" && <span className={getClassName("kcFeedbackWarningIcon")}></span>}
{message.type === "info" && <span className={getClassName("kcFeedbackInfoIcon")}></span>}
Expand Down
6 changes: 6 additions & 0 deletions keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/assets/error.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 6 additions & 2 deletions keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/i18n.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@ export const { useI18n } = createUseI18n({
requiredFields: "All fields are required, except ones marked as optional",
missingPartnerTypeMessage: "Please specify partner type",
logInErrorMsg: "Entered Email Address or Password invalid!",
registerErrorMsg: "Please fill all the required fields"
registerErrorMsg: "Please fill all the required fields",
passwordInfo: "Use 8 or more characters with at least one upper and lower case alphabet, atleast one special character.",
inputErrorMsg: "Please enter"
},
fr: {
/* spell-checker: disable */
Expand Down Expand Up @@ -69,7 +71,9 @@ export const { useI18n } = createUseI18n({
requiredFields: "All fields are required, except ones marked as optional",
missingPartnerTypeMessage:"Please specify partner type",
logInErrorMsg: "Entered Email Address or Password invalid!",
registerErrorMsg: "Please fill all the required fields"
registerErrorMsg: "Please fill all the required fields",
passwordInfo: "Use 8 or more characters with at least one upper and lower case alphabet, atleast one special character.",
inputErrorMsg: "Please enter"
/* spell-checker: enable */
}
});
Expand Down
2 changes: 2 additions & 0 deletions keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/kcContext.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ export type KcContextExtension =
orgName?: string;
address?: string;
phoneNumber?: string;
password?:string;
'password-confirm'?:string;
};
};
};
Expand Down
18 changes: 10 additions & 8 deletions keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18n } from "../i18n";
import eyeIcon from '../assets/visibility_FILL0_wght400_GRAD0_opsz48.svg'
import info from '../assets/info.svg'
import eyeIcon from '../assets/visibility_FILL0_wght400_GRAD0_opsz48.svg';
import info from '../assets/info.svg';
import ToolTip from "./shared/Tooltip";

const my_custom_param = new URL(window.location.href).searchParams.get("my_custom_param");

Expand All @@ -30,11 +31,9 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log

const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
e.preventDefault();

setIsLoginButtonDisabled(true);

const formElement = e.target as HTMLFormElement;

//NOTE: Even if we login with email Keycloak expect username and password in
//the POST request.
formElement.querySelector("input[name='email']")?.setAttribute("name", "username");
Expand Down Expand Up @@ -102,7 +101,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
<input
tabIndex={1}
id={autoCompleteHelper}
className={(getClassName("kcInputClass"), 'border-none outline-none')}
className={(getClassName("kcInputClass"), 'border-none w-full outline-none')}
//NOTE: This is used by Google Chrome auto fill so we use it to tell
//the browser how to pre fill the form but before submit we put it back
//to username because it is what keycloak expects.
Expand All @@ -119,9 +118,12 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
})()}
</div>
<div className={getClassName("kcFormGroupClass")}>
<label htmlFor="password" className={(getClassName("kcLabelClass"), 'text-hTextColor text-xl flex flex-row')}>
<label htmlFor="password" className={(getClassName("kcLabelClass"), 'text-hTextColor text-xl flex flex-row items-center')}>
<span>{msg("password")} </span>
<img className="ml-2 cursor-pointer" alt="info" src={info} />
<ToolTip tooltip={msgStr('passwordInfo')}>
<img className="ml-2 cursor-pointer" alt="info" src={info} />
</ToolTip>

</label>
<div className="flex flex-row justify-between items-center border border-bColor border-solid rounded-lg h-14 p-2">
<input
Expand Down Expand Up @@ -157,7 +159,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
</div>
)}
</div>
<div className={(getClassName("kcFormOptionsWrapperClass"), 'text-hLinkColor font-semibold text-right')}>
<div className={(getClassName("kcFormOptionsWrapperClass"), 'text-hLinkColor font-bold text-right')}>
{realm.resetPasswordAllowed && (
<span>
<a tabIndex={5} href={url.loginResetCredentialsUrl}>
Expand Down
Loading

0 comments on commit f20a06a

Please sign in to comment.