new ui begin
This commit is contained in:
parent
c682d7727e
commit
e61d4555de
21
components/LoginButton.tsx
Normal file
21
components/LoginButton.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface ButtonProps {
|
||||||
|
onClick: () => void;
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Button: React.FC<ButtonProps> = ({ onClick, text }) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className="m-0.5 bg-gradient-to-b from-purple-400 to-purple-950 py-3 px-8 text-black rounded-full text-lg font-extrabold flex items-center shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5"
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
<div className="mb-1">
|
||||||
|
{text}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Button;
|
||||||
|
|
@ -4,6 +4,8 @@ import { useEffect } from 'react';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { usePrivy } from '@privy-io/react-auth';
|
import { usePrivy } from '@privy-io/react-auth';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import Button from '../components/LoginButton';
|
||||||
|
import Head from 'next/head';
|
||||||
|
|
||||||
const Home: React.FC = () => {
|
const Home: React.FC = () => {
|
||||||
const { login, ready, user } = usePrivy();
|
const { login, ready, user } = usePrivy();
|
||||||
|
|
@ -65,33 +67,43 @@ const Home: React.FC = () => {
|
||||||
}, [ready, user]);
|
}, [ready, user]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='flex items-center justify-center bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 h-screen text-white'>
|
|
||||||
|
<div className='font-inter'>
|
||||||
|
<Head>
|
||||||
|
<title>Link W3B Launcher · W3B Games</title>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
</Head>
|
||||||
|
<div className="flex flex-col w-full h-screen">
|
||||||
|
<div className="flex-[2] bg-[#0F0F0F]"></div>
|
||||||
|
<div className="flex-[5] bg-black"></div>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-x-0 top-0 flex items-center justify-center pointer-events-none h-[57.2vh]">
|
||||||
|
<h2 className="text-[10vw] font-bold whitespace-nowrap bg-clip-text text-transparent bg-[linear-gradient(to_bottom,black_50%,#0F0F0F_50%)]">METAHUNT</h2>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-x-10 top-10 flex w-24 h-24">
|
||||||
|
<img src="./logos/logo.png"/>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-0 flex justify-center items-center">
|
||||||
|
<div className='flex items-center justify-center h-screen text-white'>
|
||||||
{user && ready ? (
|
{user && ready ? (
|
||||||
<div className='justify-center flex flex-col items-center bg-black bg-opacity-30 p-8 rounded-xl backdrop-blur-md shadow-lg'>
|
<div className='justify-center flex flex-col items-center bg-black bg-opacity-30 p-8 rounded-xl backdrop-blur-md shadow-lg'>
|
||||||
<h1 className='text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500'>Login Successful!</h1>
|
<h1 className='text-4xl font-bold mb-6 text-white/80'>Login Successful!</h1>
|
||||||
<p className='mb-6 text-lg text-gray-300'>Your W3B Launcher is now securely connected.</p>
|
<p className='mb-6 text-lg text-gray-300'>Your W3B Launcher is now securely connected.</p>
|
||||||
<Link href="/dashboard">
|
<Button onClick={()=>{router.push("/dashboard");}} text='Enter Dashboard'/>
|
||||||
<div className='bg-gradient-to-r from-purple-500 to-indigo-600 px-10 py-3 items-center justify-center flex rounded-full text-lg font-semibold hover:from-purple-600 hover:to-indigo-700 transition duration-300 shadow-md hover:shadow-xl'>
|
|
||||||
Enter Dashboard
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-col items-center justify-center bg-black bg-opacity-30 p-10 rounded-xl backdrop-blur-md shadow-lg">
|
<div className="flex flex-col items-center justify-center">
|
||||||
<h1 className="text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Connect your W3B Games Launcher</h1>
|
<h1 className="text-4xl font-bold mb-6 text-white/80">Link your W3B Games Launcher</h1>
|
||||||
<p className="mb-6 text-lg text-gray-300">Connect your crypto wallet to access the W3B Games ecosystem</p>
|
{/* <p className="mb-6 text-lg text-gray-300">Connect your crypto wallet to access the W3B Games ecosystem</p> */}
|
||||||
<button
|
<Button onClick={login} text="LOG IN / REGISTER" />
|
||||||
className="bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 rounded-full px-10 py-3 text-lg font-semibold transition duration-300 shadow-md hover:shadow-xl flex items-center"
|
|
||||||
onClick={login}
|
|
||||||
>
|
|
||||||
<svg className="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
||||||
</svg>
|
|
||||||
Secure Login
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,8 @@ import { GetServerSideProps } from "next";
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faCube, faRocket } from "@fortawesome/free-solid-svg-icons";
|
import { faRocket } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import Button from "../components/LoginButton";
|
||||||
|
|
||||||
export const getServerSideProps: GetServerSideProps = async ({ req }) => {
|
export const getServerSideProps: GetServerSideProps = async ({ req }) => {
|
||||||
const cookieAuthToken = req.cookies["privy-token"];
|
const cookieAuthToken = req.cookies["privy-token"];
|
||||||
|
|
@ -37,28 +38,30 @@ export default function LoginPage() {
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>Login · W3B Games</title>
|
<title>Login · W3B Games</title>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<main className="flex min-h-screen w-full bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
|
<main className="flex min-h-screen w-full relative overflow-hidden font-inter">
|
||||||
<div className="flex flex-1 p-6 justify-center items-center w-full h-screen">
|
<div className="flex flex-col w-full h-screen">
|
||||||
<div className="text-center w-full">
|
<div className="flex-[3] bg-[#0F0F0F]"></div>
|
||||||
<div className="mb-10 h-96 flex justify-center">
|
<div className="flex-[4] bg-black"></div>
|
||||||
<FontAwesomeIcon icon={faCube} className="text-6xl text-cyan-400 animate-pulse" />
|
</div>
|
||||||
|
<div className="absolute inset-x-0 top-0 flex items-center justify-center pointer-events-none h-[86vh]">
|
||||||
|
<h2 className="text-[10vw] font-bold whitespace-nowrap bg-clip-text text-transparent bg-[linear-gradient(to_bottom,black_50%,#0F0F0F_50%)]">METAHUNT</h2>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-x-10 top-10 flex w-24 h-24">
|
||||||
|
<img src="./logos/logo.png"/>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-0 flex justify-center items-center">
|
||||||
|
<div className="text-center w-full px-6 relative top-[10vh]">
|
||||||
|
|
||||||
|
<div className="mt-6 flex justify-center ">
|
||||||
|
<div className="bg-blue-500 rounded-full hover:scale-110 transition-all duration-300">
|
||||||
|
<Button onClick={login} text="LOG IN / REGISTER" />
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-4xl sm:text-5xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">
|
|
||||||
Welcome to W3B Game Dashboard
|
|
||||||
</h1>
|
|
||||||
<p className="text-lg sm:text-xl mb-8 text-gray-300">
|
|
||||||
Embark on a Web3 adventure like no other
|
|
||||||
</p>
|
|
||||||
<div className="mt-6 flex justify-center">
|
|
||||||
<button
|
|
||||||
className="bg-gradient-to-r from-purple-500 to-cyan-500 hover:from-purple-600 hover:to-cyan-600 py-3 px-8 text-white rounded-full text-lg font-semibold transition duration-300 ease-in-out transform hover:scale-105 flex items-center shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5"
|
|
||||||
onClick={login}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faRocket} className="mr-4 w-8" />
|
|
||||||
Login to Dashboard
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -3,22 +3,54 @@ import axios from "axios";
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import { SetStateAction, useEffect, useState } from "react";
|
import { SetStateAction, useEffect, useState } from "react";
|
||||||
|
import Button from "../components/LoginButton";
|
||||||
|
|
||||||
export default function LoginComplete() {
|
export default function LoginComplete() {
|
||||||
const [username, setUsername] = useState("");
|
const [username, setUsername] = useState("");
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
const {ready, user,authenticated} = usePrivy();
|
const { ready, user, authenticated } = usePrivy();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const [loading, setLoading] = useState(true); // Add loading state
|
||||||
|
|
||||||
const handleUsernameChange = (e: { target: { value: SetStateAction<string>; }; }) => {
|
const handleUsernameChange = (e: { target: { value: SetStateAction<string>; }; }) => {
|
||||||
setUsername(e.target.value);
|
setUsername(e.target.value);
|
||||||
setError("");
|
setError("");
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(()=>{
|
useEffect(() => {
|
||||||
if (ready && !authenticated) {
|
if (ready && !authenticated) {
|
||||||
router.push("/");
|
router.push("/");
|
||||||
}
|
}
|
||||||
},[ready, user])
|
}, [ready, user])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchUsername = async () => {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const requestIdFromUrl = params.get('request_id');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`https://vps.playpoolstudios.com/metahunt/api/launcher/get_display_name_public.php?id=${user?.id}`);
|
||||||
|
const databaseUsername = await response.text();
|
||||||
|
|
||||||
|
if (databaseUsername != "-1") {
|
||||||
|
router.push("/dashboard");
|
||||||
|
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
setLoading(false); // Set loading to false after fetch completes
|
||||||
|
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching username:', error);
|
||||||
|
} finally {
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (ready && authenticated) {
|
||||||
|
fetchUsername();
|
||||||
|
}
|
||||||
|
}, [ready, authenticated, user]);
|
||||||
|
|
||||||
const setResult = async (result: string, wallet: string) => {
|
const setResult = async (result: string, wallet: string) => {
|
||||||
const params = new URLSearchParams(window.location.search);
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
|
@ -62,7 +94,7 @@ export default function LoginComplete() {
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error making GET request:', error);
|
console.error('Error making GET request:', error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const handleClaim = async () => {
|
const handleClaim = async () => {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
|
@ -96,28 +128,41 @@ export default function LoginComplete() {
|
||||||
<Head>
|
<Head>
|
||||||
<title>Complete Login</title>
|
<title>Complete Login</title>
|
||||||
</Head>
|
</Head>
|
||||||
<div className="bg-gradient-to-br from-purple-800 to-blue-700 min-h-screen text-white flex items-center justify-center">
|
<div className=" min-h-screen text-white justify-center font-inter">
|
||||||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-8 shadow-lg max-w-md w-full">
|
<div className="flex flex-col w-full h-screen">
|
||||||
<h1 className="text-4xl font-bold mb-6 text-center text-yellow-300">Complete Your Login</h1>
|
<div className="flex-[2] bg-[#0F0F0F]"></div>
|
||||||
<p className="text-xl mb-4 text-center">Enter your unique username</p>
|
<div className="flex-[5] bg-black"></div>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-x-0 top-0 flex items-center justify-center pointer-events-none h-[57.2vh]">
|
||||||
|
<h2 className="text-[10vw] font-bold whitespace-nowrap bg-clip-text text-transparent bg-[linear-gradient(to_bottom,black_50%,#0F0F0F_50%)]">METAHUNT</h2>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-x-10 top-10 flex w-24 h-24">
|
||||||
|
<img src="./logos/logo.png"/>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-0 flex justify-center items-center">
|
||||||
|
|
||||||
|
{loading ? ( // Conditional rendering based on loading state
|
||||||
|
<div className="loader">Loading...</div> // Replace with your loading animation
|
||||||
|
) : (
|
||||||
|
<div className=" rounded-xl p-8 max-w-md w-full">
|
||||||
|
<p className="text-xl mb-4 text-center">Claim your username</p>
|
||||||
<form className="flex flex-col items-center">
|
<form className="flex flex-col items-center">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
name="username"
|
name="username"
|
||||||
value={username}
|
value={username}
|
||||||
onChange={handleUsernameChange}
|
onChange={handleUsernameChange}
|
||||||
placeholder="ex: John123"
|
placeholder="ex: JohnDoe"
|
||||||
className="bg-white/20 rounded-full w-full py-3 px-4 mb-4 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-yellow-300"
|
className="bg-black rounded-full w-full py-3 px-4 mb-4 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-blue-200"
|
||||||
/>
|
/>
|
||||||
{error && <p className="text-red-300 mb-4 text-center">{error}</p>}
|
{error && <p className="text-red-300 mb-4 text-center">{error}</p>}
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
<button
|
<div className="flex justify-center">
|
||||||
className="bg-yellow-400 hover:bg-yellow-500 text-purple-900 font-bold rounded-full py-3 px-8 transition-colors duration-200"
|
<Button onClick={handleClaim} text="Claim Username" />
|
||||||
onClick={handleClaim}
|
</div>
|
||||||
>
|
</div>
|
||||||
Claim Username
|
)}
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
BIN
public/logos/logo.png
Normal file
BIN
public/logos/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -7,6 +7,7 @@ module.exports = {
|
||||||
extend: {
|
extend: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Adelle Sans', ...defaultTheme.fontFamily.sans],
|
sans: ['Adelle Sans', ...defaultTheme.fontFamily.sans],
|
||||||
|
inter: ['Inter', 'sans-serif'],
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
'privy-navy': '#160B45',
|
'privy-navy': '#160B45',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user