Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MOSIP-32086 disabled button if input fields are empty #97

Merged
merged 1 commit into from
May 14, 2024
Merged

MOSIP-32086 disabled button if input fields are empty #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading