Skip to content

Commit

Permalink
Merge pull request #129 from MadhuMosip/MOSIP-32336
Browse files Browse the repository at this point in the history 
MOSIP-34341 Added validations for firstname, lastname and username
  • Loading branch information
@ckm007
ckm007 authored Jul 10, 2024
2 parents 79799e3 + 06824e7 commit 59aca74
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 22 deletions.
36 changes: 30 additions & 6 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 @@ -88,7 +88,11 @@ export const { useI18n } = createUseI18n({
confirmEmailAddressVerification: "Confirm validity of e-mail address {0}.",
emailVerifiedMessage: "Your email address has been verified.",
accountUpdatedMessage: "Your account has been updated.",
cookieNotFoundMessage: "Cookie not found. Please make sure cookies are enabled in your browser."
cookieNotFoundMessage: "Cookie not found. Please make sure cookies are enabled in your browser.",
emailVerifiedAlreadyMessage:"Your email address has been verified already.",
lengthErrMessage: "Length must be between",
and: "and",
invalidInput: "Entered Invalid characters. Only letters and spaces are allowed."
},
fr: {
/* spell-checker: disable */
Expand Down Expand Up @@ -172,7 +176,11 @@ export const { useI18n } = createUseI18n({
confirmEmailAddressVerification: "Confirmez la validité de l'adresse e-mail {0}.",
emailVerifiedMessage: "Votre adresse e-mail a été vérifiée.",
accountUpdatedMessage: "Votre compte a été mis à jour.",
cookieNotFoundMessage: "Cookie non trouvé. Veuillez vous assurer que les cookies sont activés dans votre navigateur."
cookieNotFoundMessage: "Cookie non trouvé. Veuillez vous assurer que les cookies sont activés dans votre navigateur.",
emailVerifiedAlreadyMessage:"Votre adresse e-mail a déjà été vérifiée.",
lengthErrMessage: "La longueur doit être comprise entre",
and: "et",
invalidInput: "Caractères saisis non valides. Seules les lettres et les espaces sont autorisés."
/* spell-checker: enable */
},
ar: {
Expand Down Expand Up @@ -256,7 +264,11 @@ export const { useI18n } = createUseI18n({
confirmEmailAddressVerification: "تأكيد صحة عنوان البريد الإلكتروني {0}.",
emailVerifiedMessage: "تم التحقق من عنوان بريدك الإلكتروني.",
accountUpdatedMessage: "تم تحديث حسابك.",
cookieNotFoundMessage: "لم يتم العثور على ملف تعريف الارتباط. يرجى التأكد من تمكين ملفات تعريف الارتباط في متصفحك."
cookieNotFoundMessage: "لم يتم العثور على ملف تعريف الارتباط. يرجى التأكد من تمكين ملفات تعريف الارتباط في متصفحك.",
emailVerifiedAlreadyMessage:"لقد تم التحقق من عنوان بريدك الإلكتروني بالفعل.",
lengthErrMessage: "يجب أن يكون الطول بين",
and: "و",
invalidInput: "تم إدخال أحرف غير صالحة. يُسمح فقط بالأحرف والمسافات."
},
hin: {
alphanumericalCharsOnly: "केवल अक्षरांकीय वर्ण",
Expand Down Expand Up @@ -339,7 +351,11 @@ export const { useI18n } = createUseI18n({
confirmEmailAddressVerification: "ईमेल पते की वैधता की पुष्टि करें {0}.",
emailVerifiedMessage: "आपका ईमेल पता सत्यापित हो गया है।",
accountUpdatedMessage: "आपका खाता अपडेट कर दिया गया है।",
cookieNotFoundMessage: "कुकी नहीं मिली। कृपया सुनिश्चित करें कि आपके ब्राउज़र में कुकीज़ सक्षम हैं।"
cookieNotFoundMessage: "कुकी नहीं मिली। कृपया सुनिश्चित करें कि आपके ब्राउज़र में कुकीज़ सक्षम हैं।",
emailVerifiedAlreadyMessage:"आपका ईमेल पता पहले ही सत्यापित किया जा चुका है.",
lengthErrMessage: "लंबाई बीच में होनी चाहिए",
and: "और",
invalidInput: "अमान्य वर्ण दर्ज किए गए. केवल अक्षर और रिक्त स्थान की अनुमति है."
},
tam: {
alphanumericalCharsOnly: "எழுத்தெண்கள் மட்டுமே",
Expand Down Expand Up @@ -422,7 +438,11 @@ export const { useI18n } = createUseI18n({
confirmEmailAddressVerification: "மின்னஞ்சல் முகவரியின் செல்லுபடித்தன்மையை உறுதிப்படுத்தவும் {0}.",
emailVerifiedMessage: "உங்கள் மின்னஞ்சல் முகவரி சரிபார்க்கப்பட்டது.",
accountUpdatedMessage: "உங்கள் கணக்கு புதுப்பிக்கப்பட்டுள்ளது.",
cookieNotFoundMessage: "குக்கீ காணப்படவில்லை. உங்களின் உலாவியில் குக்கீகள் செயல்படுத்தப்பட்டுள்ளனவா எனச் சரிபார்க்கவும்."
cookieNotFoundMessage: "குக்கீ காணப்படவில்லை. உங்களின் உலாவியில் குக்கீகள் செயல்படுத்தப்பட்டுள்ளனவா எனச் சரிபார்க்கவும்.",
emailVerifiedAlreadyMessage:"உங்கள் மின்னஞ்சல் முகவரி ஏற்கனவே சரிபார்க்கப்பட்டது.",
lengthErrMessage: "இடையே நீளம் இருக்க வேண்டும்",
and: "மற்றும்",
invalidInput: "தவறான எழுத்துகள் உள்ளிடப்பட்டுள்ளன. கடிதங்கள் மற்றும் இடைவெளிகள் மட்டுமே அனுமதிக்கப்படுகின்றன."
},
kan:{
alphanumericalCharsOnly: "ಅಕ್ಷರಾಂಕ ಲಕ್ಷಣಗಳು ಮಾತ್ರ",
Expand Down Expand Up @@ -505,7 +525,11 @@ export const { useI18n } = createUseI18n({
confirmEmailAddressVerification: "ಇಮೇಲ್ ವಿಳಾಸದ ಮಾನ್ಯತೆಯನ್ನು ದೃಢೀಕರಿಸಿ {0}.",
emailVerifiedMessage: "ನಿಮ್ಮ ಇಮೇಲ್ ವಿಳಾಸವನ್ನು ಪರಿಶೀಲಿಸಲಾಗಿದೆ.",
accountUpdatedMessage: "ನಿಮ್ಮ ಖಾತೆಯನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ.",
cookieNotFoundMessage: "ಕುಕೀ ಕಂಡುಬಂದಿಲ್ಲ. ದಯವಿಟ್ಟು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಕುಕೀಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿ."
cookieNotFoundMessage: "ಕುಕೀ ಕಂಡುಬಂದಿಲ್ಲ. ದಯವಿಟ್ಟು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಕುಕೀಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿ.",
emailVerifiedAlreadyMessage:"ನಿಮ್ಮ ಇಮೇಲ್ ವಿಳಾಸವನ್ನು ಈಗಾಗಲೇ ಪರಿಶೀಲಿಸಲಾಗಿದೆ.",
lengthErrMessage: "ಉದ್ದವು ನಡುವೆ ಇರಬೇಕು",
and: "ಮತ್ತು",
invalidInput: "ಅಮಾನ್ಯ ಅಕ್ಷರಗಳನ್ನು ನಮೂದಿಸಲಾಗಿದೆ. ಅಕ್ಷರಗಳು ಮತ್ತು ಸ್ಥಳಗಳನ್ನು ಮಾತ್ರ ಅನುಮತಿಸಲಾಗಿದೆ."
}

});
Expand Down
6 changes: 5 additions & 1 deletion 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 @@ -53,7 +53,11 @@ export type KcContextExtension =
username:{
validators:{
pattern:{
pattern:RegExp
pattern:RegExp;
}
length:{
max:string;
min:string;
}
}
};
Expand Down
54 changes: 39 additions & 15 deletions keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/Register.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
const phonePattern = new RegExp(register?.attributesByName?.phoneNumber?.validators?.pattern?.pattern);
const userNamePattern = new RegExp(register?.attributesByName?.username?.validators?.pattern?.pattern);
const organisationData = register?.attributesByName?.organisationName?.validators?.options?.options;
const max = Number(register?.attributesByName?.username?.validators.length?.max)
const min = Number(register?.attributesByName?.username?.validators.length?.min)

const [passwordType, setPasswordType] = useState('password');
const [confPasswordType, setConfPasswordType] = useState('password');
Expand All @@ -52,6 +54,9 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
const [ConfPasswordMatch, checkConfPasswordMatch] = useState(false);
const [orgData, setOrgData] = useState(organisationData ? organisationData.slice() : undefined);
const [isReloadBtn, setReloadBtn] = useState(false);
const [minMaxLength, checkminMaxLength] = useState(false)
const [invalidFirstName, checkInvalidFirstName] = useState(false)
const [invalidLastName, checkInvalidLastName] = useState(false)

const inputRef = useRef<HTMLInputElement>(null);
const menuRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -130,32 +135,43 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "

const handleFormData = (event: any) => {
const { name, value } = event.target;
if (name === 'email' && value) {
checkInvalidEmail(!pattern.test(value))
const finalValue = value.trim()

if (name === 'email' && finalValue) {
checkInvalidEmail(!pattern.test(finalValue))
}
if (name === 'phoneNumber' && value) {
checkInvalidPhoneNo(!phonePattern.test(String(value)))
if (name === 'phoneNumber' && finalValue) {
checkInvalidPhoneNo(!phonePattern.test(String(finalValue)))
}

if(name === 'username' && value){
checkInvalidUserName(!userNamePattern.test(String(value)))
if(name === 'username' && finalValue){
userNamePattern.test(finalValue) ? checkInvalidUserName(false) : checkInvalidUserName(true);
(finalValue.length < (Number(min)) || finalValue.length > (Number(max) -1 )) ? checkminMaxLength(true) : checkminMaxLength(false);
}

if(name === 'firstName' && finalValue){
/^[A-Za-z\s]+$/.test(finalValue) ? checkInvalidFirstName(false) : checkInvalidFirstName(true)
}

if(name === 'lastName' && finalValue){
/^[A-Za-z\s]+$/.test(finalValue) ? checkInvalidLastName(false) : checkInvalidLastName(true);
}

if (name === 'orgName' && organisationData) {
let newOrgData = organisationData.filter(item => {
if (item.toLowerCase().includes(value.toLowerCase()))
if (item.toLowerCase().includes(finalValue.toLowerCase()))
return item
})
setOrgData(newOrgData)
}

addFormDataValue(prevState => ({
...prevState,
[name]: value
[name]: finalValue
}))

if (name === 'password-confirm' && dummyFormData.password) {
if (value !== dummyFormData.password) {
if (finalValue !== dummyFormData.password) {
checkConfPasswordMatch(true)
} else {
checkConfPasswordMatch(false)
Expand Down Expand Up @@ -268,13 +284,16 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
<input
type="text"
id="firstName"
className={(getClassName("kcInputClass"), (dummyFormData.firstName === '' ? 'shadow-errorShadow outline-none border border-[#C61818] border-solid h-14 rounded-lg w-full px-3 font-inter' : 'outline-none border border-bColor border-solid h-14 rounded-lg w-full px-3 font-inter'))}
className={(getClassName("kcInputClass"), ((dummyFormData.firstName === '' || invalidFirstName)? 'shadow-errorShadow outline-none border border-[#C61818] border-solid h-14 rounded-lg w-full px-3 font-inter' : 'outline-none border border-bColor border-solid h-14 rounded-lg w-full px-3 font-inter'))}
name="firstName"
placeholder={msgStr("firstNamePH")}
onBlur={handleFormData}
defaultValue={register.formData.firstName ?? ""}
/>
{dummyFormData.firstName === '' && <span className="text-[#C61818] mb-0 font-semibold flex items-center font-inter"><img className="inline" alt='' src={error} />&nbsp;<span>{msg('inputErrorMsg')} {msg("firstName")}</span></span>}
{<span className="text-[#C61818] mb-0 font-semibold font-inter">
{dummyFormData.firstName === '' && <span className="flex items-center"><img className="inline" alt='' src={error} />&nbsp;<span>{msg('inputErrorMsg')} {msg("firstName")}</span></span>}
{invalidFirstName && <span className="flex items-center"><img className="inline" alt='' src={error} />&nbsp;<span>{msg("invalidInput")}</span></span>}
</span>}
</div>
</div>

Expand All @@ -293,13 +312,16 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
<input
type="text"
id="lastName"
className={(getClassName("kcInputClass"), (dummyFormData.lastName === '' ? 'shadow-errorShadow outline-none border border-[#C61818] border-solid h-14 rounded-lg w-full px-3 font-inter' : 'outline-none border border-bColor border-solid h-14 rounded-lg w-full px-3 font-inter'))}
className={(getClassName("kcInputClass"), ((dummyFormData.lastName === '' || invalidLastName)? 'shadow-errorShadow outline-none border border-[#C61818] border-solid h-14 rounded-lg w-full px-3 font-inter' : 'outline-none border border-bColor border-solid h-14 rounded-lg w-full px-3 font-inter'))}
name="lastName"
placeholder={msgStr("lastNamePH")}
onBlur={handleFormData}
defaultValue={register.formData.lastName ?? ""}
/>
{dummyFormData.lastName === '' && <span className="text-[#C61818] mb-0 font-semibold flex items-center font-inter"><img className="inline" alt='' src={error} />&nbsp;<span>{msg('inputErrorMsg')} {msg("lastName")}</span></span>}
{<span className="text-[#C61818] mb-0 font-semibold font-inter">
{dummyFormData.lastName === '' && <span className="flex items-center"><img className="inline" alt='' src={error} />&nbsp;<span>{msg('inputErrorMsg')} {msg("lastName")}</span></span>}
{invalidLastName && <span className="flex items-center"><img className="inline" alt='' src={error} />&nbsp;<span>{msg("invalidInput")}</span></span>}
</span>}
</div>
</div>

Expand Down Expand Up @@ -445,16 +467,18 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
<input
type="text"
id="username"
className={(getClassName("kcInputClass"), `outline-none border border-solid h-14 rounded-lg w-full px-3 font-inter ${(dummyFormData.username === '' || invalidUserName) ? 'shadow-errorShadow border-[#C61818]' : 'border-bColor'}`)}
className={(getClassName("kcInputClass"), `outline-none border border-solid h-14 rounded-lg w-full px-3 font-inter ${(dummyFormData.username === '' || invalidUserName || minMaxLength) ? 'shadow-errorShadow border-[#C61818]' : 'border-bColor'}`)}
name="username"
placeholder={msgStr("userNamePH")}
onBlur={handleFormData}
defaultValue={register.formData.username ?? ""}
autoComplete="username"
maxLength={Number(max)}
/>
{<span className="text-[#C61818] mb-0 font-semibold font-inter">
{dummyFormData.username === '' && <span className="flex items-center"><img className="inline" alt='' src={error} />&nbsp;<span>{msg('inputErrorMsg')} {msg("username")}</span></span>}
{(invalidUserName && dummyFormData.username !== '') && <span className="flex items-center"><img className="inline" alt='' src={error} />&nbsp;<span>{msg('invalidUserName')}</span></span>}
{minMaxLength && <span className="flex items-center"><img className="inline" alt='' src={error} />&nbsp;<span>{msg('lengthErrMessage')} {min} {msg('and')} {max}</span></span>}
</span>}
</div>
</div>
Expand Down Expand Up @@ -557,7 +581,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
type="submit"
value={msgStr("doRegister")}
onClick={() => setReloadBtn(true)}
disabled={!dummyFormData.firstName || !dummyFormData.lastName || !dummyFormData.address || !dummyFormData.email || !dummyFormData.orgName || !dummyFormData.partnerType || !dummyFormData["password-confirm"] || !dummyFormData.password || !dummyFormData.phoneNumber || (recaptchaRequired && !dummyFormData["g-recaptcha-response"]) || invalidEmail || invalidPhoneNo || invalidUserName || ConfPasswordMatch}
disabled={!dummyFormData.firstName || !dummyFormData.lastName || !dummyFormData.address || !dummyFormData.email || !dummyFormData.orgName || !dummyFormData.partnerType || !dummyFormData["password-confirm"] || !dummyFormData.password || !dummyFormData.phoneNumber || (recaptchaRequired && !dummyFormData["g-recaptcha-response"]) || invalidEmail || invalidPhoneNo || invalidUserName || ConfPasswordMatch || invalidFirstName || invalidLastName || minMaxLength}
/>
</div>
</div>
Expand Down

0 comments on commit 59aca74

Please sign in to comment.