Skip to content
This repository was archived by the owner on Oct 7, 2025. It is now read-only.

Commit c730731

Browse files
MFarabi619MFarabi619
committed
feat(axiom): create custom login page
1 parent 5514a7a commit c730731

File tree

3 files changed

+172
-26
lines changed

3 files changed

+172
-26
lines changed

‎apps/axiom/src/app/(payload)/_public/login/page.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import Link from 'next/link';
2+
3+
const OAuthProviders = [
4+
{
5+
name: "LinkedIn",
6+
url: "/api/users/oauth/linkedin",
7+
icon: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linkedin/linkedin-original.svg",
8+
bgColor: "skyblue",
9+
},
10+
{
11+
name: "Google",
12+
url: "/api/users/oauth/google",
13+
icon: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/google/google-original.svg",
14+
bgColor: "grey",
15+
},
16+
{
17+
name: "GitHub",
18+
url: "/api/users/oauth/github",
19+
icon: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg",
20+
bgColor: "green",
21+
},
22+
{
23+
name: "Discord",
24+
url: "/api/users/oauth/discord",
25+
icon: "https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0a69f118df70ad7828d4_icon_clyde_blurple_RGB.svg",
26+
bgColor: "#E0E3FF",
27+
},
28+
];
29+
30+
const OAuthButton = ({ href, icon, bgColor, name }) => (
31+
<Link href={href} style={{ width: '100%' }}>
32+
<button style={{ ...buttonStyles, backgroundColor: bgColor }}>
33+
<img src={icon} alt={`${name} logo`} width="24" height="24" style={iconStyle} />
34+
{/* {name} */}
35+
</button>
36+
</Link>
37+
);
38+
39+
const OAuthButtons = () => (
40+
<section style={containerStyle}>
41+
{OAuthProviders.map(({ name, url, icon, bgColor }) => (
42+
<OAuthButton key={name} href={url} icon={icon} bgColor={bgColor} name={name} />
43+
))}
44+
</section>
45+
);
46+
47+
export default function Login() {
48+
return (
49+
<div style={loginContainerStyle}>
50+
<OAuthButtons />
51+
</div>
52+
);
53+
}
54+
55+
const containerStyle = {
56+
display: 'flex',
57+
flexDirection: 'column',
58+
gap: '15px',
59+
width: '100%',
60+
};
61+
62+
const loginContainerStyle = {
63+
display: 'flex',
64+
justifyContent: 'center',
65+
alignItems: 'center',
66+
height: '100vh',
67+
width: '20%',
68+
margin: 'auto',
69+
};
70+
71+
const buttonStyles = {
72+
width: '100%',
73+
display: 'flex',
74+
alignItems: 'center',
75+
justifyContent: 'center',
76+
border: 'none',
77+
padding: '12px 0',
78+
cursor: 'pointer',
79+
color: 'white',
80+
fontSize: '16px',
81+
fontWeight: 'bold',
82+
borderRadius: '5px',
83+
gap: '10px',
84+
};
85+
86+
const iconStyle = { marginRight: '8px' };

‎apps/axiom/src/components/AfterLogin/index.tsx‎

Lines changed: 82 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,85 @@
1-
import Link from 'next/link'
2-
import '../../theme/tailwind.scss'
1+
import Link from 'next/link';
2+
import '../../theme/tailwind.scss';
33

4-
export const AfterLogin = () => {
4+
const OAuthButton = ({ href, iconSrc, bgColor, altText }) => {
5+
return (
6+
<Link href={href} style={{ flex: 1 }}>
7+
<button style={{ ...buttonStyles, backgroundColor: bgColor }}>
8+
<img
9+
src={iconSrc}
10+
alt={altText}
11+
width="24"
12+
height="24"
13+
style={iconStyle}
14+
/>
15+
</button>
16+
</Link>
17+
);
18+
};
19+
20+
export function OAuthButtons() {
521
return (
6-
<div className="mb-2 text-center">
7-
<a href="/api/users/oauth/google">
8-
<button
9-
className="btn btn--icon-style-without-border btn--size-large btn--withoutPopup btn--style-primary btn--withoutPopup"
10-
style={{ width: "100%" }}
11-
>
12-
Continue With Google
13-
</button>
14-
</a>
15-
<a href="/api/users/oauth/linkedin">
16-
<button
17-
className="btn btn--icon-style-without-border btn--size-large btn--withoutPopup btn--style-primary btn--withoutPopup"
18-
style={{ width: "100%" }}
19-
>
20-
Continue With LinkedIn
21-
</button>
22-
</a>
23-
Welcome to the admin panel of cuHacking's <span className="text-yellow-400">2025</span> <span className="text-orange-400">Platform</span>, built with <Link className="text-primary" href="https://docs.cuhacking.ca/tech-stack" target="_blank">Axiom</Link>, our very own in-house meta-framework.
24-
<p>
25-
This project is a work in progress :)
26-
</p>
27-
</div>
28-
)
22+
<section style={containerStyle}>
23+
<OAuthButton
24+
href="/api/users/oauth/linkedin"
25+
iconSrc="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linkedin/linkedin-original.svg"
26+
bgColor="#0077B5"
27+
altText="LinkedIn Login"
28+
/>
29+
<OAuthButton
30+
href="/api/users/oauth/google"
31+
iconSrc="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/google/google-original.svg"
32+
bgColor="#000"
33+
altText="Google Login"
34+
/>
35+
</section>
36+
);
2937
}
38+
39+
export const AfterLogin = () => {
40+
return (
41+
<>
42+
<OAuthButtons />
43+
<section>
44+
Welcome to the admin panel of cuHacking's{' '}
45+
<span className="text-yellow-400">2025</span>{' '}
46+
<span className="text-orange-400">Platform</span>, built with{' '}
47+
<Link
48+
className="text-primary"
49+
href="https://docs.cuhacking.ca/tech-stack"
50+
target="_blank"
51+
>
52+
Axiom
53+
</Link>
54+
, our very own in-house meta-framework.
55+
<p>This project is a work in progress :)</p>
56+
</section>
57+
</>
58+
);
59+
};
60+
61+
const containerStyle = {
62+
display: 'flex',
63+
flexDirection: 'column',
64+
gap: '15px',
65+
width: '100%',
66+
marginBottom: '30px'
67+
};
68+
69+
const buttonStyles = {
70+
width: '100%',
71+
display: 'flex',
72+
alignItems: 'center',
73+
justifyContent: 'center',
74+
border: 'none',
75+
padding: '12px 0',
76+
cursor: 'pointer',
77+
color: 'white',
78+
fontSize: '16px',
79+
fontWeight: 'bold',
80+
borderRadius: '5px',
81+
};
82+
83+
const iconStyle = {
84+
marginRight: '8px',
85+
};

‎apps/axiom/src/theme/app.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,4 +164,8 @@
164164
height: auto;
165165
}
166166
}
167+
168+
.login__form {
169+
display: none;
170+
}
167171
}

0 commit comments

Comments
 (0)