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

add state logo in sidebar #7236

Merged
merged 7 commits into from
Feb 21, 2024
Merged

add state logo in sidebar #7236

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5d0c614
add state logo on sidebar
sainak Feb 19, 2024
5dab4ea
add state logo to header
sainak Feb 19, 2024
25d8cf5
fix logos in forget-password state
sainak Feb 19, 2024
02a5d60
explain usage of logos in config
sainak Feb 19, 2024
fac93e4
cleanup session router
sainak Feb 19, 2024
c191575
revert logo changes in the sidebar
sainak Feb 21, 2024
6738f46
Merge branch 'develop' into sainak/fix/care-logo-in-header
sainak Feb 21, 2024
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
26 changes: 19 additions & 7 deletions src/Common/hooks/useConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,24 @@ export interface IConfig {
site_url: string;
analytics_server_url: string;

header_logo: ILogo;
/**
* The main logo of the app displayed on login and sidebar header.
*/
main_logo: ILogo;

/**
* Logo and description for custom deployment. (This overrides the state logo)
* If present, the image will be displayed on the login page
* and sidebar header before the main logo.
*/
state_logo?: ILogo;
/**
* if present, this replaces the state logo on the login page only.
*/
custom_logo?: ILogo;
/**
* if present, this replaces the main logo on the login page only.
*/
custom_logo_alt?: ILogo;

custom_description?: string;

/**
Expand All @@ -41,13 +51,15 @@ export interface IConfig {
* SENTRY_ENVIRONMENT
*/
sentry_environment: string;

/**
* The header banner is displayed on the top of
* the shift print form if the facility is kasp.
*/
header_logo: ILogo;
kasp_enabled: boolean;
kasp_string: string;
kasp_full_string: string;
/**
* If present, the image will be displayed in the login page.
*/
state_logo?: ILogo;
/**
* URL of the sample format for asset import.
*/
Expand Down
271 changes: 136 additions & 135 deletions src/Components/Auth/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,160 +252,161 @@ export const Login = (props: { forgot?: boolean }) => {
</div>

<div className="login-hero-form my-4 w-full md:mt-0 md:h-full md:w-1/2">
<div className="relative flex h-full items-center justify-center">
<div
className={
"w-full p-8 transition-all md:w-4/5 md:p-0 lg:w-[400px] " +
(forgotPassword
? "invisible -translate-x-5 opacity-0"
: "visible -translate-x-0 opacity-100")
}
>
<div className="flex items-center gap-1">
<div className="relative h-full items-center justify-center md:flex">
<div className="p-8 md:w-4/5 md:p-0 lg:w-[400px]">
<div className="flex items-center gap-1 md:hidden">
{(custom_logo || state_logo) && (
<>
<img
src={custom_logo?.dark ?? state_logo?.dark}
className="h-14 rounded-lg py-3 md:hidden"
className="h-14 rounded-lg py-3"
alt="state logo"
/>
<div className="mx-4 h-8 w-[1px] rounded-full bg-gray-600 md:hidden" />
<div className="mx-4 h-8 w-[1px] rounded-full bg-gray-600" />
</>
)}
<img
src={custom_logo_alt?.dark ?? main_logo.dark}
className="h-8 w-auto md:hidden"
className="h-8 w-auto"
alt="care logo"
/>
</div>{" "}
<div className="mb-8 w-[300px] text-4xl font-black text-primary-600">
{t("auth_login_title")}
</div>
<form onSubmit={handleSubmit}>
<div>
<LegendInput
name="username"
id="username"
type="TEXT"
legend={t("username")}
value={form.username}
onChange={handleChange}
error={errors.username}
outerClassName="mb-4"
size="large"
className="font-extrabold"
/>
<LegendInput
type="PASSWORD"
name="password"
id="password"
legend={t("password")}
value={form.password}
onChange={handleChange}
error={errors.password}
size="large"
className="font-extrabold"
/>
<div className="justify-start">
{isCaptchaEnabled && (
<div className="grid px-8 py-4">
<ReCaptcha
sitekey={recaptcha_site_key}
onChange={onCaptchaChange}
/>
<span className="text-red-500">{errors.captcha}</span>
</div>
)}

<div className="flex w-full items-center justify-between py-4">
<button
onClick={() => {
setForgotPassword(true);
}}
type="button"
className="text-sm text-primary-400 hover:text-primary-500"
>
{t("forget_password")}
</button>
</div>
<div className="relative flex h-full w-full items-center">
<div
className={
"w-full transition-all " +
(!forgotPassword
? "visible -translate-x-0 opacity-100"
: "invisible -translate-x-5 opacity-0")
}
>
<div className="mb-8 w-[300px] text-4xl font-black text-primary-600">
{t("auth_login_title")}
</div>
<form onSubmit={handleSubmit}>
<div>
<LegendInput
name="username"
id="username"
type="TEXT"
legend={t("username")}
value={form.username}
onChange={handleChange}
error={errors.username}
outerClassName="mb-4"
size="large"
className="font-extrabold"
/>
<LegendInput
type="PASSWORD"
name="password"
id="password"
legend={t("password")}
value={form.password}
onChange={handleChange}
error={errors.password}
size="large"
className="font-extrabold"
/>
<div className="justify-start">
{isCaptchaEnabled && (
<div className="grid px-8 py-4">
<ReCaptcha
sitekey={recaptcha_site_key}
onChange={onCaptchaChange}
/>
<span className="text-red-500">{errors.captcha}</span>
</div>
)}

{loading ? (
<div className="flex items-center justify-center">
<CircularProgress className="text-primary-500" />
<div className="flex w-full items-center justify-between py-4">
<button
onClick={() => {
setForgotPassword(true);
}}
type="button"
className="text-sm text-primary-400 hover:text-primary-500"
>
{t("forget_password")}
</button>
</div>

{loading ? (
<div className="flex items-center justify-center">
<CircularProgress className="text-primary-500" />
</div>
) : (
<button
type="submit"
className="inline-flex w-full cursor-pointer items-center justify-center rounded bg-primary-500 px-4 py-2 text-sm font-semibold text-white"
>
{t("login")}
</button>
)}
</div>
) : (
<button
type="submit"
className="inline-flex w-full cursor-pointer items-center justify-center rounded bg-primary-500 px-4 py-2 text-sm font-semibold text-white"
>
{t("login")}
</button>
)}
</div>
</div>
</form>
<LanguageSelectorLogin />
</div>
<div
className={
"absolute w-full p-8 transition-all md:w-4/5 md:p-0 lg:w-[400px] " +
(!forgotPassword
? "invisible translate-x-5 opacity-0"
: "visible translate-x-0 opacity-100")
}
>
<img
src={main_logo.dark}
className="mb-4 h-8 w-auto md:hidden"
alt="care logo"
/>{" "}
<button
onClick={() => {
setForgotPassword(false);
}}
type="button"
className="mb-4 text-sm text-primary-400 hover:text-primary-500"
>
<div className="flex justify-center">
<CareIcon className="care-l-arrow-left text-lg" />
<span>{t("back_to_login")}</span>
</div>
</form>
<LanguageSelectorLogin />
</div>
</button>
<div className="mb-8 w-[300px] text-4xl font-black text-primary-600">
{t("forget_password")}
</div>
<form onSubmit={handleForgetSubmit}>
<div>
{t("forget_password_instruction")}
<LegendInput
id="forgot_username"
name="username"
type="TEXT"
legend={t("username")}
value={form.username}
onChange={handleChange}
error={errors.username}
outerClassName="my-4"
size="large"
className="font-extrabold"
/>
<div className="justify-start">
{loading ? (
<div className="flex items-center justify-center">
<CircularProgress className="text-primary-500" />
</div>
) : (
<button
type="submit"
className="inline-flex w-full cursor-pointer items-center justify-center rounded bg-primary-500 px-4 py-2 text-sm font-semibold text-white"
>
{t("send_reset_link")}
</button>
)}

<div
className={
"absolute w-full transition-all " +
(forgotPassword
? "visible translate-x-0 opacity-100"
: "invisible translate-x-5 opacity-0")
}
>
<button
onClick={() => {
setForgotPassword(false);
}}
type="button"
className="mb-4 text-sm text-primary-400 hover:text-primary-500"
>
<div className="flex justify-center">
<CareIcon className="care-l-arrow-left text-lg" />
<span>{t("back_to_login")}</span>
</div>
</button>
<div className="mb-8 w-[300px] text-4xl font-black text-primary-600">
{t("forget_password")}
</div>
<form onSubmit={handleForgetSubmit}>
<div>
{t("forget_password_instruction")}
<LegendInput
id="forgot_username"
name="username"
type="TEXT"
legend={t("username")}
value={form.username}
onChange={handleChange}
error={errors.username}
outerClassName="my-4"
size="large"
className="font-extrabold"
/>
<div className="justify-start">
{loading ? (
<div className="flex items-center justify-center">
<CircularProgress className="text-primary-500" />
</div>
) : (
<button
type="submit"
className="inline-flex w-full cursor-pointer items-center justify-center rounded bg-primary-500 px-4 py-2 text-sm font-semibold text-white"
>
{t("send_reset_link")}
</button>
)}
</div>
</div>
</form>
<LanguageSelectorLogin />
</div>
</form>
<LanguageSelectorLogin />
</div>
</div>
</div>
</div>
Expand Down
28 changes: 21 additions & 7 deletions src/Components/Common/Sidebar/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const StatelessSidebar = ({
{ text: "Notice Board", to: "/notice_board", icon: "care-l-meeting-board" },
];

const { main_logo } = useConfig();
const { main_logo, state_logo } = useConfig();
const activeLink = useActiveLink();
const Item = shrinked ? ShrinkedSidebarItem : SidebarItem;
const { dashboard_url } = useConfig();
Expand Down Expand Up @@ -110,12 +110,26 @@ const StatelessSidebar = ({
>
<div className="h-3" /> {/* flexible spacing */}
<Link href="/">
<img
className={`${
shrinked ? "mx-auto" : "ml-5"
} mb-2 h-5 self-start transition md:mb-5 md:h-8`}
src={shrinked ? LOGO_COLLAPSE : main_logo.light}
/>
{shrinked ? (
<img
className="mx-auto mb-2 h-5 self-start transition md:mb-5 md:h-8"
src={LOGO_COLLAPSE}
/>
) : (
<div className="mb-2 ml-5 flex h-5 items-center gap-1 self-start transition md:mb-5 md:h-8">
{state_logo && (
<>
<img
src={state_logo?.light}
className="h-14 rounded-lg py-3"
alt="state logo"
/>
<div className="mx-4 h-8 w-[1px] rounded-full bg-gray-600" />
</>
)}
<img src={main_logo.light} className="h-8 w-auto" alt="care logo" />
</div>
)}
</Link>
<div className="h-3" /> {/* flexible spacing */}
<div className="relative flex h-full flex-col">
Expand Down
Loading
Loading