Skip to content

Commit

Permalink
Merge pull request #97 from MadhuMosip/MOSIP-32336
Browse files Browse the repository at this point in the history 
MOSIP-32086 disabled button if input fields are empty
  • Loading branch information
@ckm007
ckm007 authored May 14, 2024
2 parents b4fe0e3 + ff8b5a6 commit 64c9d24
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 26 deletions.
5 changes: 5 additions & 0 deletions 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 @@ -73,6 +73,11 @@ a {
margin-left: 17px;
}

.kcButtonClass:disabled{
background-color: #A5A5A5 !important;
color: #ffffff !important;
}

/*
.g-recaptcha > * {
float: right;
Expand Down
3 changes: 3 additions & 0 deletions ...artemis/mosip_keycloak_theme/src/keycloak-theme/login/assets/visibility_off.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.
4 changes: 3 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
@@ -1,7 +1,9 @@
import { createGetKcContext } from "keycloakify/login";

export type KcContextExtension =
| { pageId: "login.ftl"; }
| { pageId: "login.ftl";
login: {email?:string}
}
// NOTE: register.ftl is deprecated in favor of register-user-profile.ftl
// but let's say we use it anyway and have this plugin enabled: https://github.com/micedre/keycloak-mail-whitelisting
// keycloak-mail-whitelisting define the non standard ftl global authorizedMailDomains, we declare it here.
Expand Down
21 changes: 16 additions & 5 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 @@ -6,6 +6,7 @@ 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 eyeIconOff from '../assets/visibility_off.svg'
import info from '../assets/info.svg';
import ToolTip from "./shared/Tooltip";

Expand All @@ -26,12 +27,13 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
console.log(kcContext)
const { msg, msgStr } = i18n;

const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
const [passwordType, setPasswordType] = useState('password')
// const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
const [dirtyLoginData, setLoginData] = useState(login);
const [passwordType, setPasswordType] = useState('password');

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

const formElement = e.target as HTMLFormElement;
//NOTE: Even if we login with email Keycloak expect username and password in
Expand All @@ -45,6 +47,13 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
passwordType === 'password' ? setPasswordType('text') : setPasswordType('password')
}

const handleLogInData = (e:any) =>{
setLoginData(prevData => ({
...prevData,
[e.target.name]:e.target.value
}))
}

return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
Expand Down Expand Up @@ -111,6 +120,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
type="text"
autoFocus={true}
autoComplete="off"
onChange={handleLogInData}
/>
</div>
</>
Expand All @@ -134,8 +144,9 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
placeholder={msgStr('passwordPlaceholder')}
type={passwordType}
autoComplete="off"
onChange={handleLogInData}
/>
<img className="cursor-pointer" onClick={showPassword} alt="" src={eyeIcon} />
{passwordType === 'password' ? <img className="cursor-pointer" onClick={showPassword} alt="" src={eyeIcon} /> : <img className="cursor-pointer" onClick={showPassword} alt="" src={eyeIconOff} />}
</div>
</div>
<div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
Expand Down Expand Up @@ -192,7 +203,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
id="kc-login"
type="submit"
value={msgStr("doLogIn")}
disabled={isLoginButtonDisabled}
disabled={!dirtyLoginData.email || !dirtyLoginData.password}
/>
</div>
</form>
Expand Down
47 changes: 30 additions & 17 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
@@ -1,5 +1,5 @@
// ejected using 'npx eject-keycloak-page'
import { useState, useEffect } from "react";
import { useState, useEffect, useRef } from "react";
import { clsx } from "keycloakify/tools/clsx";
import type { PageProps } from "keycloakify/login/pages/PageProps";
import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
Expand All @@ -8,6 +8,7 @@ import type { I18n } from "../i18n";
import Recaptcha from 'react-recaptcha';
import arrow from '../assets/expand_more_FILL0_wght300_GRAD0_opsz24 (1).svg';
import eyeIcon from '../assets/visibility_FILL0_wght400_GRAD0_opsz48.svg';
import eyeIconOff from '../assets/visibility_off.svg'
import info from '../assets/info.svg';
import error from '../assets/error.svg'
import ToolTip from "./shared/Tooltip";
Expand Down Expand Up @@ -39,8 +40,11 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
const [confPasswordType, setConfPasswordType] = useState('password');
const [orgDropdown, showOrgDropdown] = useState(false);
const [partnerTypeValue, setPartnerType] = useState(register.formData.partnerType ?? '');
const [orgValue, setOrgValue] = useState(register.formData.orgName ?? '');
const [dummyFormData, addFormDataValue] = useState(register.formData)
// const [orgValue, setOrgValue] = useState(register.formData.orgName ?? '');
const [dummyFormData, addFormDataValue] = useState(register.formData);

const inputRef = useRef<HTMLInputElement>(null)
const menuRef = useRef<HTMLDivElement>(null)

const { getClassName } = useGetClassName({
doUseDefaultCss,
Expand Down Expand Up @@ -102,19 +106,27 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
}

const selectOrgName = (val: any) => {
setOrgValue(val)
showOrgDropdown(false)
// setOrgValue(val)
addFormDataValue(prevState =>({
...prevState,
orgName:val
}));
showOrgDropdown(false);
}

const handleFormData = (event: any) => {
console.log("Hell")
const { name, value } = event.target;
addFormDataValue(prevState =>({
...prevState,
[name]:value
}))
}
console.log(dummyFormData)

window.addEventListener("click", (e) =>{
if(orgDropdown && !menuRef.current?.contains(e.target as Node) && !inputRef.current?.contains(e.target as Node)){
showOrgDropdown(false)
}
})
const { msg, msgStr } = i18n;
return (
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={
Expand All @@ -139,7 +151,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
<div className={getClassName('kcInputWrapperClass')}>
<select
id="partnerType"
className={(getClassName("kcInputClass"), ((message && !dummyFormData.partnerType) ? 'shadow-errorShadow outline-none border border-[#C61818] border-solid h-14 rounded-lg w-full' : 'outline-none border border-bColor border-solid h-14 rounded-lg w-full'))}
className={(getClassName("kcInputClass"), ((message && !dummyFormData.partnerType) ? 'shadow-errorShadow outline-none border border-[#C61818] border-solid h-14 rounded-lg w-full' : 'outline-none border border-bColor border-solid h-14 rounded-lg w-full text-xl'))}
name="partnerType"
onChange={event => {
selectedFormValue(event)
Expand Down Expand Up @@ -225,17 +237,18 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
className={(getClassName("kcInputClass"), ((message && !dummyFormData.orgName) ? 'shadow-errorShadow outline-none border border-[#C61818] border-solid h-14 rounded-lg w-full p-2' : 'outline-none border border-bColor border-solid h-14 rounded-lg w-full p-2'))}
name="orgName"
placeholder={msgStr("orgnamePH")}
defaultValue={orgValue}
value={dummyFormData.orgName ?? ''}
autoComplete="off"
onBlur={handleFormData}
onChange={handleFormData}
onClick={displayOrgDropdown}
ref={inputRef}
/>
{orgDropdown && (
<div className="absolute w-orgDropdownW z-10 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" >
<ul className="py-1 text-2xl text-gray-700" role="none" >
<li onClick={() => selectOrgName('organisation 1')} className="block px-4 py-2 cursor-pointer" role="menuitem" id="menu-item-1">organisation 1</li>
<li onClick={() => selectOrgName('organisation 2')} className="block px-4 py-2 cursor-pointer" role="menuitem" id="menu-item-2">organisation 2</li>
<li onClick={() => selectOrgName('organisation 3')} className="block px-4 py-2 cursor-pointer" role="menuitem" id="menu-item-0">organisation 3</li>
<div ref={menuRef} className="absolute max-[350px]:w-orgDropdownWForSM max-[590px]:w-[89%] w-[92%] z-10 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border" >
<ul className="py-1 px-4 text-2xl text-gray-700" role="none" >
<li onClick={() => selectOrgName('organisation 1')} className="block py-2 cursor-pointer border-b" role="menuitem" id="menu-item-1">organisation 1</li>
<li onClick={() => selectOrgName('organisation 2')} className="block py-2 cursor-pointer border-b" role="menuitem" id="menu-item-2">organisation 2</li>
<li onClick={() => selectOrgName('organisation 3')} className="block py-2 cursor-pointer" role="menuitem" id="menu-item-0">organisation 3</li>
</ul>
</div>
)}
Expand Down Expand Up @@ -374,7 +387,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
onBlur={handleFormData}
autoComplete="new-password"
/>
<img className="cursor-pointer" onClick={showPassword} alt="" src={eyeIcon} />
{passwordType === 'password' ? <img className="cursor-pointer" onClick={showPassword} alt="" src={eyeIcon} /> : <img className="cursor-pointer" onClick={showPassword} alt="" src={eyeIconOff} />}
</div>
{(message && !dummyFormData.password) && <span className="text-[#C61818] mb-0 font-bold flex items-center"><img className="inline" alt='' src={error} />&nbsp;<span>{msg('inputErrorMsg')} {msg("password")}</span></span>}
</div>
Expand All @@ -400,7 +413,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
onBlur={handleFormData}
placeholder={msgStr("passwordPlaceholder")}
/>
<img className="cursor-pointer" onClick={showConfPassword} alt="" src={eyeIcon} />
{confPasswordType === 'password' ? <img className="cursor-pointer" onClick={showConfPassword} alt="" src={eyeIcon} /> : <img className="cursor-pointer" onClick={showConfPassword} alt="" src={eyeIconOff} />}
</div>
{(message && !dummyFormData["password-confirm"]) && <span className="text-[#C61818] mb-0 font-bold flex items-center"><img className="inline" alt='' src={error} />&nbsp;<span>{msg('inputErrorMsg')} {msg("passwordConfirm")}</span></span>}
</div>
Expand Down
3 changes: 0 additions & 3 deletions keycloak-artemis/mosip_keycloak_theme/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,6 @@ export default {
'errorBg': "#FFE0E0",
'errorColor': '#E21D1D'
},
width:{
'orgDropdownW': '89%'
},
boxShadow: {
errorShadow: '0px 3px 6px rgba(255, 0, 0, 0.15)',
},
Expand Down

0 comments on commit 64c9d24

Please sign in to comment.