tombutcher.work/2025-tombutcher-auth
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhanced Template component with client information display and improved FooterCard styling for better responsiveness and visual clarity.
Some checks failed
ci / test (push) Has been cancelled
Details
ci / Check if version upgrade (push) Has been cancelled
Details
ci / create_github_release (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Tom Butcher 2025-08-14 01:52:48 +01:00
parent 9d5da85e8f
commit 79d1251357
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/login/Template.tsx
View File

@ -99,6 +99,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
const clientInfo = (
<Flex gap={"small"} align="center">
<div>
<Text>App:</Text>
</div>
{client.attributes.logoUri ? (
<img
src={client.attributes.logoUri}
@ -152,6 +155,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
<Layout style={{ minHeight: "var(--unit-100vh)", maxHeight: "var(--unit-100vh)" }}>
<ParticlesBackground darkMode={darkMode} />
{!isMobile && (
<Flex gap={"middle"} style={{ width: "100%", position: "absolute", top: "50px" }} justify="center">
{client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
</Flex>
)}
{loading == true ? (
<div className="loadingOverlay" style={{ backgroundColor: darkMode ? "#000000" : "#ffffff" }}>
<Spin />
@ -286,7 +295,6 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
</Card>
{!isMobile && (
<Flex gap={"middle"} style={{ width: "100%" }} justify="center">
{client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
{auth !== undefined && auth.showTryAnotherWayLink && (
<FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
)}
@ -320,16 +328,25 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
);
}
function FooterCard({ children, darkMode = false }: { children?: ReactNode; darkMode?: boolean }) {
function FooterCard({ children, darkMode = false, transparent = false }: { children?: ReactNode; darkMode?: boolean; transparent?: boolean }) {
const isMobile = useMediaQuery({ maxWidth: 600 });
const transparentBackground = darkMode ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.5)";
const normalBackground = darkMode ? "#00000025" : "#fffffff2";
return (
<Card
style={{
background: isMobile ? "unset" : darkMode ? "#00000025" : "#fffffff2",
background: isMobile ? "unset" : transparent ? transparentBackground : normalBackground,
borderRadius: "20px",
zIndex: 1,
color: transparent ? "#ffffff" : "inherit",
padding: isMobile ? "4px 0px" : "8px 18px",
boxShadow: isMobile ? "unset" : darkMode ? "0px 5px 20px 5px rgb(255 255 255 / 5%)" : "0px 5px 15px 5px rgb(0 0 0 / 10%)"
boxShadow: isMobile
? "unset"
: darkMode
? "0px 5px 20px 5px rgb(255 255 255 / 5%)"
: !transparent
? "0px 5px 15px 5px rgb(0 0 0 / 10%)"
: "unset"
}}
variant="borderless"
styles={{