Skip to content

Commit

Permalink
Merge pull request #124 from MadhuMosip/MOSIP-32336
Browse files Browse the repository at this point in the history 
MOSIP-33995 Resolved alignment issues for multi language
  • Loading branch information
@ckm007
ckm007 authored Jun 25, 2024
2 parents b67c796 + 35fe106 commit ac6fc56
Show file tree
Hide file tree
Showing 7 changed files with 61 additions and 31 deletions.
2 changes: 1 addition & 1 deletion keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/email/theme.properties
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
parent=base
locales=egn,fra,hin,tam,kan,ara
locales=eng,fra,hin,tam,kan,ara
8 changes: 8 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 @@ -99,6 +99,14 @@ a#kc-current-locale-link::after{
font-size: 12px;
}

#kc-locale-dropdown a{
padding: 0;
}

.info-a-link a{
color: #ffffff !important;
}

.login-pf-page .card-pf {
padding: 20px 25px 20px 25px;
min-width: 550px;
Expand Down
22 changes: 12 additions & 10 deletions 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 @@ -69,14 +69,14 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
<div id="kc-locale-wrapper" className={getClassName("kcLocaleWrapperClass")}>
<div onMouseOver={() => { setLocaleOpen(true) }} onMouseOut={() => { setLocaleOpen(false) }} className="kc-dropdown flex flex-row content-center" id="kc-locale-dropdown">
<img alt="langIcon" src={langIcon} />
<a className="font-semibold text-xl" href="#" id="kc-current-locale-link">
<a className="font-semibold text-xl mx-2" href="#" id="kc-current-locale-link">
{labelBySupportedLanguageTag[currentLanguageTag]}
</a>
{!isLocaleOpen && <img alt="" src={polygon} />}
{isLocaleOpen && <img alt="" src={polygonRev} />}
{isLocaleOpen && (<div className={`max-h-[400px] bg-white overflow-auto rounded-xl lang-dropDown ${currentLanguageTag === 'ar' ? 'mr-[-100px]' : 'ml-[-50px]'}`}>
{isLocaleOpen && (<div className={`max-h-[400px] min-w-[200px] bg-white overflow-auto rounded-xl lang-dropDown font-inter ${currentLanguageTag === 'ar' ? 'mr-[-140px]' : 'ml-[-100px]'}`}>
<>
<span className="text-[#0D3077] font-bold pl-[14px] py-[5px] flex content-center justify-between">
<span className="text-[#0D3077] text-xl font-bold px-[14px] py-[10px] flex content-center justify-between">
<span>{labelBySupportedLanguageTag[currentLanguageTag]}</span>
<img alt="" src={rightTick} />
</span>
Expand All @@ -85,13 +85,15 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
{locale.supported.map(({ languageTag }) => (
<>
{(currentLanguageTag !== languageTag) && (
<span key={languageTag} className="text-[#0D3077] pl-[14px] py-[5px] flex content-center justify-between">

<a href="#" onClick={() => changeLocale(languageTag)}>
{labelBySupportedLanguageTag[languageTag]}
</a>
</span>)}
<hr className="mx-4 border-[1px] last:hidden border-[#D8D8D8]" />
<>
<span key={languageTag} onClick={() => changeLocale(languageTag)} className="text-[#0D3077] px-[14px] py-[10px] flex content-center justify-between cursor-pointer">
<a href="#">
<span className="text-xl">{labelBySupportedLanguageTag[languageTag]}</span>
</a>
</span>
<hr className="mx-4 last:hidden border-[#D8D8D8]" />
</>
)}
</>
))}
</div>)}
Expand Down
3 changes: 3 additions & 0 deletions ...rtemis/mosip_keycloak_theme/src/keycloak-theme/login/assets/arrow_right_rtl.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.
33 changes: 24 additions & 9 deletions keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/Info.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,33 @@ export default function Info(props: PageProps<Extract<KcContext, { pageId: "info
{message?.summary}
</p>
{!skipLink && pageRedirectUri !== undefined ? (
<p>
<a href={pageRedirectUri}>{msg("backToApplication")}</a>
</p>
<button className="bg-hLinkColor w-9/12 h-16 text-[#ffffff] mt-9 rounded-xl info-a-link">
<a id="backToApplication" className="text-[#ffffff]" href={pageRedirectUri}>
{msg("backToApplication")}
</a>
</button>
// <p>
// <a href={pageRedirectUri}>{msg("backToApplication")}</a>
// </p>
) : actionUri !== undefined ? (
<p>
<a href={actionUri}>{msg("proceedWithAction")}</a>
</p>
<button className="bg-hLinkColor w-9/12 h-16 text-[#ffffff] mt-9 rounded-xl info-a-link">
<a id="backToApplication" className="text-[#ffffff]" href={actionUri}>
{msg("proceedWithAction")}
</a>
</button>
// <p>
// <a href={actionUri}>{msg("proceedWithAction")}</a>
// </p>
) : (
client.baseUrl !== undefined && (
<p>
<a href={client.baseUrl}>{msg("backToApplication")}</a>
</p>
<button className="bg-hLinkColor w-9/12 h-16 text-[#ffffff] mt-9 rounded-xl info-a-link">
<a id="backToApplication" className="text-[#ffffff]" href={client.baseUrl}>
{msg("backToApplication")}
</a>
</button>
// <p>
// <a href={client.baseUrl}>{msg("backToApplication")}</a>
// </p>
)
)}
</div>
Expand Down
3 changes: 2 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 @@ -5,6 +5,7 @@ import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18n } from "../i18n";
import arrow from '../assets/expand_more_FILL0_wght300_GRAD0_opsz24 (1).svg';
import arrowRight from '../assets/arrow_right_rtl.svg'

export default function LoginResetPassword(props: PageProps<Extract<KcContext, { pageId: "login-reset-password.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
Expand Down Expand Up @@ -38,7 +39,7 @@ export default function LoginResetPassword(props: PageProps<Extract<KcContext, {
<div id="kc-form-options">
<div className={getClassName("kcFormOptionsWrapperClass")}>
<span>
<button onClick={() => setReloadBtn(true)}> <a href={url.loginUrl} className="flex flex-row items-center text-hLinkColor font-bold text-2xl font-inter"> { locale?.currentLanguageTag !== 'ar' && (<img alt="arrow" src={arrow} />)}{msg("backToLogin")}{ locale?.currentLanguageTag === 'ar' && (<img alt="arrow" src={arrow} />)}</a></button>
<button onClick={() => setReloadBtn(true)}> <a href={url.loginUrl} className="flex flex-row items-center text-hLinkColor font-bold text-2xl font-inter"> { locale?.currentLanguageTag === 'ar' ? <img alt="arrowright" src={arrowRight}/> : <img alt="arrow" src={arrow} />}{msg("backToLogin")}</a></button>
</span>
</div>
</div>
Expand Down
21 changes: 11 additions & 10 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 @@ -12,6 +12,7 @@ import eyeIconOff from '../assets/visibility_off.svg';
import info from '../assets/info.svg';
import error from '../assets/error.svg'
import ToolTip from "./shared/Tooltip";
import arrowRight from "../assets/arrow_right_rtl.svg"

declare global {
interface Window {
Expand Down Expand Up @@ -193,7 +194,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
<div id="kc-form-options">
<div className={getClassName("kcFormOptionsWrapperClass")}>
<span>
<button onClick={() => setReloadBtn(true)}> <a href={url.loginUrl} className="flex flex-row items-center text-hLinkColor font-bold text-2xl font-inter"> { locale?.currentLanguageTag !== 'ar' && (<img alt="arrow" src={arrow} />)}{msg("backToLogin")} { locale?.currentLanguageTag === 'ar' && (<img alt="arrow" src={arrow} />)}</a></button>
<button onClick={() => setReloadBtn(true)}> <a href={url.loginUrl} className="flex flex-row items-center text-hLinkColor font-bold text-2xl font-inter"> { locale?.currentLanguageTag === 'ar' ? <img alt="arrow" src={arrowRight} /> : <img alt="arrow" src={arrow} />}{msg("backToLogin")}</a></button>
</span>
</div>
</div>
Expand Down Expand Up @@ -242,7 +243,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
<div className="w-0 h-0 border-[5px] border-solid border-transparent border-t-black"></div>
</div>
{partnerTypesMenu && (
<div ref={partnerTypesMenuRef} 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 border-bColor mt-[2px]" >
<div ref={partnerTypesMenuRef} className="absolute max-[490px]:w-[88%] max-[840px]:w-[91.5%] w-[93.5%] z-10 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border border-bColor mt-[2px]" >
<ul className="py-1 px-5 text-xl text-[#031640] font-inter" role="none" >
<li onClick={() => selectedPartnerTypeValue('Device_Provider')} className="block py-2 cursor-pointer border-b" role="menuitem">Device Provider</li>
<li onClick={() => selectedPartnerTypeValue('FTM_Provider')} className="block py-2 cursor-pointer border-b" role="menuitem">FTM Provider</li>
Expand Down Expand Up @@ -321,7 +322,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
<input
type="text"
id="orgName"
className={(getClassName("kcInputClass"), (dummyFormData.orgName === '' ? 'shadow-errorShadowTwo 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"), `outline-none border border-solid h-14 rounded-lg w-full px-3 font-inter ${dummyFormData.orgName === '' ? 'shadow-errorShadowTwo border-[#C61818]' : 'border-bColor' }`)}
name="orgName"
placeholder={msgStr("orgnamePH")}
value={dummyFormData.orgName ?? ''}
Expand All @@ -331,7 +332,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
ref={inputRef}
/>
{(orgDropdown && organisationData )&&
(<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 border-bColor mt-[2px] font-inter" >
(<div ref={menuRef} className="absolute max-[490px]:w-[88%] max-[840px]:w-[91.5%] w-[93.5%] z-10 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border border-bColor mt-[2px] font-inter" >
{(orgData?.length) ?
<ul className="py-1 px-5 text-xl text-[#031640] font-inter" role="none" >
{orgData.map((item, index) => (
Expand Down Expand Up @@ -362,7 +363,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
<input
type="text"
id="address"
className={(getClassName("kcInputClass"), (dummyFormData.address === '' ? '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"), `outline-none border border-solid h-14 rounded-lg w-full px-3 font-inter ${dummyFormData.address === '' ? 'shadow-errorShadow border-[#C61818]' : ' border-bColor'}`)}
name="address"
placeholder={msgStr("addressPH")}
onBlur={handleFormData}
Expand All @@ -387,7 +388,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
<input
type="text"
id="email"
className={(getClassName("kcInputClass"), ((dummyFormData.email === '' || invalidEmail) ? '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"), `outline-none border border-solid h-14 rounded-lg w-full px-3 font-inter ${(dummyFormData.email === '' || invalidEmail) ? 'shadow-errorShadow border-[#C61818]' : ' border-bColor'}`)}
name="email"
placeholder={msgStr("emailPH")}
onBlur={handleFormData}
Expand Down Expand Up @@ -417,7 +418,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
<input
type="number"
id="phoneNumber"
className={(getClassName("kcInputClass"), ((dummyFormData.phoneNumber === '' || invalidPhoneNo) ? '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"), `outline-none border border-solid h-14 rounded-lg w-full px-3 font-inter ${(dummyFormData.phoneNumber === '' || invalidPhoneNo) ? 'shadow-errorShadow border-[#C61818] ' : 'border-bColor'}`)}
name="phoneNumber"
placeholder={msgStr("phoneNumberPH")}
onBlur={handleFormData}
Expand Down Expand Up @@ -448,7 +449,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
<input
type="text"
id="username"
className={(getClassName("kcInputClass"), ((dummyFormData.username === '' || invalidUserName) ? '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"), `outline-none border border-solid h-14 rounded-lg w-full px-3 font-inter ${(dummyFormData.username === '' || invalidUserName) ? 'shadow-errorShadow border-[#C61818]' : 'border-bColor'}`)}
name="username"
placeholder={msgStr("userNamePH")}
onBlur={handleFormData}
Expand Down Expand Up @@ -479,7 +480,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
</label>
</div>
<div className={getClassName("kcInputWrapperClass")}>
<div className={(dummyFormData.password === '') ? 'shadow-errorShadow border border-[#C61818] flex flex-row justify-between items-center border-solid rounded-lg h-14 px-3 font-inter' : 'flex flex-row justify-between items-center border border-bColor border-solid rounded-lg h-14 px-3 font-inter'}>
<div className={`border flex flex-row justify-between items-center border-solid rounded-lg h-14 px-3 font-inter ${dummyFormData.password === '' ? 'shadow-errorShadow border-[#C61818] ' : ' border-bColor'}`}>
<input
type={passwordType}
id="password"
Expand Down Expand Up @@ -510,7 +511,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
</label>
</div>
<div className={getClassName("kcInputWrapperClass")}>
<div className={(dummyFormData["password-confirm"] === '' || ConfPasswordMatch) ? 'shadow-errorShadow border border-[#C61818] flex flex-row justify-between items-center border-solid rounded-lg h-14 px-3 font-inter' : 'flex flex-row justify-between items-center border border-bColor border-solid rounded-lg h-14 px-3 font-inter'}>
<div className={`flex flex-row justify-between items-center border border-solid rounded-lg h-14 px-3 font-inter ${(dummyFormData["password-confirm"] === '' || ConfPasswordMatch) ? 'shadow-errorShadow border-[#C61818] ' : ' border-bColor'}`}>
<input type={confPasswordType}
id="password-confirm"
className={(getClassName("kcInputClass"), 'border-none w-11/12 outline-none')}
Expand Down

0 comments on commit ac6fc56

Please sign in to comment.