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-33995 Resolved alignment issues for multi language #124

Merged
merged 1 commit into from
Jun 25, 2024
Merged

MOSIP-33995 Resolved alignment issues for multi language #124

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
2 changes: 1 addition & 1 deletion keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/email/theme.properties
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
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.
33 changes: 24 additions & 9 deletions keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/Info.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading