Skip to content

Commit

Permalink
push
Browse files Browse the repository at this point in the history
  • Loading branch information
awidearray committed Nov 15, 2024
1 parent 37e51e8 commit fc7b2d0
Show file tree
Hide file tree
Showing 9 changed files with 22,796 additions and 31 deletions.
22,601 changes: 22,601 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions public/discord.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/nav-element/NavBar.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
color: white;
font-weight: 600;
padding: 8px 16px;
border-radius: 12px;
border-radius: 14px;
font-size: 14px;
transition: all 0.2s ease;
text-decoration: none;
Expand Down
15 changes: 5 additions & 10 deletions src/components/nav-element/NavBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,22 +70,17 @@ const NavBar: FC<NavBarProps> = () => {
{session ? (
<Link href="/profile" className="p-1 hover:bg-white/10 rounded-full">
<Image
src={session.user?.image || '/default-avatar.png'}
alt="Profile"
src={session.user?.image ?? '/profile_default.png'}
alt={session.user?.name ?? 'Profile'}
width={32}
height={32}
className="rounded-full object-cover"
unoptimized
/>
</Link>
) : (
<Link href="/api/auth/signin" className="p-1 hover:bg-white/10 rounded-full">
<Image
src="/default-avatar.png"
alt="Sign In"
width={32}
height={32}
className="rounded-full object-cover"
/>
<Link href="/auth/signin" className={styles.actionButton}>
Sign In
</Link>
)}
</div>
Expand Down
26 changes: 26 additions & 0 deletions src/components/profile/ProfileData.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,32 @@
height: 68px;
}

.signOutButton {
background-color: #9B8D7D;
color: white;
font-weight: 600;
padding: 8px 16px;
border-radius: 14px;
font-size: 14px;
border: none;
cursor: pointer;
transition: all 0.2s ease;
margin-left: auto;
height: 38px;
white-space: nowrap;
}

.signOutButton:hover {
background-color: #8a7f71;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.signOutButton:active {
transform: translateY(0);
box-shadow: none;
}

@media (max-width: 768px) {
.container {
padding: 14px 16px 24px;
Expand Down
13 changes: 12 additions & 1 deletion src/components/profile/ProfileData.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import { FC } from 'react';
import { useSession } from 'next-auth/react';
import { useSession, signOut } from 'next-auth/react';
import Image from 'next/image';
import styles from './ProfileData.module.css';

export const ProfileData: FC = () => {
const { data: session } = useSession();

const handleSignOut = () => {
signOut({ callbackUrl: '/' });
};

return (
<div className={styles.container}>
<div className={styles.profileContainer}>
Expand All @@ -18,6 +22,7 @@ export const ProfileData: FC = () => {
height={68}
className={styles.profileImage}
priority
unoptimized
/>
</div>
)}
Expand All @@ -27,6 +32,12 @@ export const ProfileData: FC = () => {
</h1>
<span className={styles.userRole}>Partner</span>
</div>
<button
onClick={handleSignOut}
className={styles.signOutButton}
>
Sign Out
</button>
</div>
</div>
);
Expand Down
47 changes: 28 additions & 19 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { AppProps } from 'next/app';
import Head from 'next/head';
import Script from 'next/script';
import { FC } from 'react';
import { SessionProvider } from 'next-auth/react'; // Import SessionProvider
import { SessionProvider } from 'next-auth/react';
import { ContextProvider } from '../contexts/ContextProvider';
import NavBar from '../components/nav-element/NavBar';
import { ContentContainer } from '../components/ContentContainer';
Expand All @@ -26,25 +27,33 @@ const wallets = [
];

const App: FC<AppProps> = ({ Component, pageProps }) => {
return (
<SessionProvider session={pageProps.session}> {/* Wrap everything in SessionProvider */}
<Head>
<title>ai16z Partners Lounge</title>
</Head>
return (
<SessionProvider session={pageProps.session}>
<Head>
<title>ai16z Partners Lounge</title>
</Head>

<ContextProvider>
<div className="flex flex-col min-h-screen">
<Notifications />
<NavBar />
<main className="flex-1 flex justify-center">
<ContentContainer>
<Component {...pageProps} />
</ContentContainer>
</main>
</div>
</ContextProvider>
</SessionProvider>
);
<Script
src="https://telegram.org/js/telegram-widget.js?22"
strategy="afterInteractive"
onLoad={() => {
console.log('Telegram widget script loaded');
}}
/>

<ContextProvider>
<div className="flex flex-col min-h-screen">
<Notifications />
<NavBar />
<main className="flex-1 flex justify-center">
<ContentContainer>
<Component {...pageProps} />
</ContentContainer>
</main>
</div>
</ContextProvider>
</SessionProvider>
);
};

export default App;
56 changes: 56 additions & 0 deletions src/pages/auth/signin.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
background-color: #202120;
}

.title {
font-size: 32px;
font-weight: 600;
color: white;
margin-bottom: 40px;
text-align: center;
}

.buttonContainer {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
max-width: 320px;
}

.discordButton {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px 24px;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
color: white;
border: none;
cursor: pointer;
transition: all 0.2s ease;
width: 100%;
height: 48px;
background-color: #5865F2;
}

.discordButton:hover {
background-color: #4752c4;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.telegramContainer {
height: 48px;
width: 100%;
display: flex;
justify-content: center;
}
66 changes: 66 additions & 0 deletions src/pages/auth/signin.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { signIn } from 'next-auth/react';
import Image from 'next/image';
import styles from './signin.module.css';
import { useEffect } from 'react';

export default function SignIn() {
const handleDiscordSignIn = () => {
signIn('discord', { callbackUrl: '/' });
};

useEffect(() => {
// Create and inject the Telegram login button
const telegramContainer = document.getElementById('telegram-login-container');
if (telegramContainer && !telegramContainer.hasChildNodes()) {
const script = document.createElement('script');
script.async = true;
script.src = "https://telegram.org/js/telegram-widget.js?22";
script.setAttribute('data-telegram-login', 'AI16ZBot');
script.setAttribute('data-size', 'large');
script.setAttribute('data-radius', '14');
script.setAttribute('data-onauth', 'window.onTelegramAuth(user)');
script.setAttribute('data-request-access', 'write');
telegramContainer.appendChild(script);
}

// Define the auth callback
window.onTelegramAuth = (user: any) => {
console.log('Telegram auth:', user);
signIn('credentials', {
id: user.id,
username: user.username,
hash: user.hash,
callbackUrl: '/',
});
};
}, []);

return (
<div className={styles.container}>
<h1 className={styles.title}>Connect your profile</h1>

<div className={styles.buttonContainer}>
<button
onClick={handleDiscordSignIn}
className={styles.discordButton}
>
<Image
src="/discord-mark-white.svg"
alt="Discord"
width={24}
height={24}
/>
Connect to Discord
</button>

<div id="telegram-login-container" className={styles.telegramContainer} />
</div>
</div>
);
}

declare global {
interface Window {
onTelegramAuth: (user: any) => void;
}
}

0 comments on commit fc7b2d0

Please sign in to comment.