Skip to content

Commit

Permalink
Merge pull request #111 from MadhuMosip/MOSIP-32336
Browse files Browse the repository at this point in the history 
MOSIP-32086 Added message popup when user clicks browser back button or reload
  • Loading branch information
@ckm007
ckm007 authored Jun 3, 2024
2 parents c9ee00e + 3043d89 commit 77def9e
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 11 deletions.
20 changes: 13 additions & 7 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 @@ -29,6 +29,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
// const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
const [dirtyLoginData, setLoginData] = useState(login);
const [passwordType, setPasswordType] = useState('password');
const [isReloadBtn, setReloadBtn] = useState(false);

const label = !realm.loginWithEmailAllowed
? "username"
Expand All @@ -51,20 +52,24 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
formElement.submit();
});

window.onbeforeunload = function() {
if(!isReloadBtn){
return 'Do you want to leave this page?'
}
}

const showPassword = () => {
passwordType === 'password' ? setPasswordType('text') : setPasswordType('password')
}

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

console.log(dirtyLoginData)

return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
Expand All @@ -82,7 +87,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
}
infoNode={
<div id="kc-registration" className="text-center mt-4">
<span>
<span onClick={() => setReloadBtn(true)}>
{msg("noAccount")} &nbsp;
<a className="text-hLinkColor font-semibold" tabIndex={6} href={url.registrationUrl}>
{msg("doRegister")}
Expand Down Expand Up @@ -175,7 +180,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
</div>
<div className={(getClassName("kcFormOptionsWrapperClass"), 'text-hLinkColor font-bold text-right')}>
{realm.resetPasswordAllowed && (
<span>
<span onClick={() => setReloadBtn(true)}>
<a tabIndex={5} href={url.loginResetCredentialsUrl}>
{msg("doForgotPassword")}
</a>
Expand Down Expand Up @@ -206,7 +211,8 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
id="kc-login"
type="submit"
value={msgStr("doLogIn")}
disabled={(!dirtyLoginData[autoCompleteHelper] && !dirtyLoginData?.username)|| !dirtyLoginData.password}
onClick={() => setReloadBtn(true)}
disabled={(!dirtyLoginData[autoCompleteHelper] && !dirtyLoginData?.username) || !dirtyLoginData.password}
/>
</div>
</form>
Expand Down
11 changes: 10 additions & 1 deletion keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/LoginResetPassword.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,14 @@ export default function LoginResetPassword(props: PageProps<Extract<KcContext, {
const { url, realm, auth } = kcContext;

const { msg, msgStr } = i18n;

const [isReloadBtn, setReloadBtn] = useState(false);

window.onbeforeunload = function() {
if(!isReloadBtn){
return 'Do you want to leave this page?'
}
}
console.log(kcContext)

return (
Expand All @@ -30,7 +38,7 @@ export default function LoginResetPassword(props: PageProps<Extract<KcContext, {
<div id="kc-form-options">
<div className={getClassName("kcFormOptionsWrapperClass")}>
<span>
<button> <a href={url.loginUrl} className="flex flex-row items-center text-hLinkColor font-bold text-xl"> <img alt="arrow" src={arrow} />{msg("backToLogin")}</a></button>
<button onClick={() => setReloadBtn(true)}> <a href={url.loginUrl} className="flex flex-row items-center text-hLinkColor font-bold text-xl"> <img alt="arrow" src={arrow} />{msg("backToLogin")}</a></button>
</span>
</div>
</div>
Expand Down Expand Up @@ -82,6 +90,7 @@ export default function LoginResetPassword(props: PageProps<Extract<KcContext, {
getClassName("kcButtonLargeClass")
)}
type="submit"
onClick={() => setReloadBtn(true)}
value={msgStr("resetPassword")}
disabled={!email}
/>
Expand Down
8 changes: 8 additions & 0 deletions keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/LoginUpdatePassword.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,13 @@ export default function LoginUpdatePassword(props: PageProps<Extract<KcContext,
}
}
const { msg, msgStr } = i18n;
const [isReloadBtn, setReloadBtn] = useState(false);

window.onbeforeunload = function() {
if(!isReloadBtn){
return 'Do you want to leave this page?'
}
}

const { url, messagesPerField, isAppInitiatedAction, username, message } = kcContext;

Expand Down Expand Up @@ -168,6 +175,7 @@ export default function LoginUpdatePassword(props: PageProps<Extract<KcContext,
getClassName("kcButtonLargeClass")
)}
type="submit"
onClick={() => setReloadBtn(true)}
value={msgStr("doSubmit")}
/>
)}
Expand Down
10 changes: 9 additions & 1 deletion keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/LoginVerifyEmail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,18 @@ import SuccessMsgIcon from '../assets/success_message_icon.svg'
export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { pageId: "login-verify-email.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

// const [isReloadBtn, setReloadBtn] = useState(false);

const { msg } = i18n;

const { url } = kcContext;

window.onbeforeunload = function () {
// if(!isReloadBtn){
return "jdhbfdjbdhbchb"
// }
}

return (
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={
<div className="flex flex-col justify-center items-center">
Expand All @@ -19,7 +27,7 @@ export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { p
}>
<div className="text-center">
<span className="text-[#666666]">{msg("emailVerifyText")}</span>
<hr className="my-8 text-[#000000]"/>
<hr className="my-8 text-[#000000]" />
<span className="text-[#666666]">{msg("notReceviedText")}</span>
<h4 className="my-2 font-bold text-[#1447B2]"> <a href={url.loginAction}>{msg('resentEmail')}</a></h4>
</div>
Expand Down
12 changes: 10 additions & 2 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 @@ -48,6 +48,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
const [invalidPhoneNo, checkInvalidPhoneNo] = useState(false);
const [ConfPasswordMatch, checkConfPasswordMatch] = useState(false);
const [orgData, setOrgData] = useState(organisationData ? organisationData.slice() : undefined);
const [isReloadBtn, setReloadBtn] = useState(false);

const inputRef = useRef<HTMLInputElement>(null);
const menuRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -171,14 +172,20 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
}
})

window.onbeforeunload = function() {
if(!isReloadBtn){
return 'Do you want to leave this page?'
}
}

const { msg, msgStr } = i18n;
return (
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={
<>
<div id="kc-form-options">
<div className={getClassName("kcFormOptionsWrapperClass")}>
<span>
<button> <a href={url.loginUrl} className="flex flex-row items-center text-hLinkColor font-bold text-xl"> <img alt="arrow" src={arrow} />{msg("backToLogin")}</a></button>
<button onClick={() => setReloadBtn(true)}> <a href={url.loginUrl} className="flex flex-row items-center text-hLinkColor font-bold text-xl"> <img alt="arrow" src={arrow} />{msg("backToLogin")}</a></button>
</span>
</div>
</div>
Expand Down Expand Up @@ -540,6 +547,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 || ConfPasswordMatch}
/>
</div>
Expand All @@ -548,7 +556,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
<div className={(getClassName("kcFormOptionsWrapperClass"), 'text-center')}>
<span>
<span>{msg('alreadyMember')}</span>
<a href={url.loginUrl} className="text-hLinkColor font-bold text-xl"> {msg("doLogIn")}</a>
<a href={url.loginUrl} className="text-hLinkColor font-bold text-xl" onClick={() => setReloadBtn(true)}> {msg("doLogIn")}</a>
</span>
</div>
</div>
Expand Down

0 comments on commit 77def9e

Please sign in to comment.