Skip to content

Commit

Permalink
landing page and new features
Browse files Browse the repository at this point in the history
  • Loading branch information
@KeyurGK
KeyurGK committed Jul 10, 2023
1 parent f74dfd3 commit 3128125
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 76 deletions.
4 changes: 3 additions & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,16 @@ import Signup from "./components/Signup";
import Home from "./components/Home";
import { AuthContextProvider } from "./context/AuthContext";
import Account from "./components/Account";
import Landing from "./components/Landing";

function App() {
return (
<div className="App">
<AuthContextProvider>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/" element={<Landing />} />
<Route path="/home" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/account" element={<Account />} />
Expand Down
20 changes: 19 additions & 1 deletion src/components/Account.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,25 @@
import React from "react";
import { UserAuth } from "../context/AuthContext";

const Account = () => {
return <div className="text-white">Account</div>;
const { user } = UserAuth();
const regex = /\d{2}:\d{2}:\d{2}.*/;
const creationTime = user.metadata.creationTime.split(regex);
console.log(user);
return (
<div className="flex justify-center items-center h-screen">
<table className="bg-gray-500 border-4 border-purple-900 ">
<tr className="px-2">
<td className="border-r-2 border-purple-900 px-2 py-4">User Email</td>
<td className="px-2 py-4">{user.email}</td>
</tr>
<tr className="border-t-2 border-purple-900">
<td className="border-r-2 border-purple-900 px-2 py-4">Created on</td>
<td className="px-2 py-4">{creationTime}</td>
</tr>
</table>
</div>
);
};

export default Account;
23 changes: 23 additions & 0 deletions src/components/Landing.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from "react";
import bitVishwa from "../images/bitVishwaLogo.png";

const Landing = () => {
return (
<div className="flex justify-center items-center mt-[10%]">
<div className="text-emerald-500 text-center">
<h1 className="text-5xl font-rowdies">Welcome to Bit-Vishwa</h1>
<p>View the top cryptocurrencies with the latest data</p>
<div className="flex justify-center items-center">
<img
className="h-[150px] rounded-full"
src={bitVishwa}
alt="Bit-Vishwa Logo"
/>
</div>
<p>Sign In to continue</p>
</div>
</div>
);
};

export default Landing;
99 changes: 60 additions & 39 deletions src/components/Login.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,73 @@
import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { UserAuth } from '../context/AuthContext'
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { UserAuth } from "../context/AuthContext";

const Login = () => {
const [email,setEmail]=useState('')
const[password,setPassword]=useState('')
const[error,setError]=useState('')
const {user,logIn} = UserAuth()
const navigate = useNavigate()
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const { user, logIn } = UserAuth();
const navigate = useNavigate();

const handleSubmit = async (e) => {
e.preventDefault()
setError('')
try{
await logIn(email,password)
navigate('/')
e.preventDefault();
setError("");
try {
await logIn(email, password);
navigate("/home");
} catch (error) {
console.log(error);
setError(error.message);
}
catch(error)
{
console.log(error)
setError(error.message)
}
}
};
return (
<div className=' mx-[25%] mt-[5%] bg-gray-500 border-4 border-purple-900'>

<div className='flex flex-col justify-center pt-8'>

<form className='flex flex-col items-center justify-center mx-4' onSubmit={handleSubmit}>
<input className='w-[60%] mx-[25%] px-2 py-3 border-4 rounded border-purple-900' type='email' placeholder='Email' onChange={(e)=>setEmail(e.target.value)}/>
<input className='w-[60%] mx-[25%] mt-2 px-2 py-3 border-4 rounded border-purple-900' type='password' placeholder='Password' onChange={(e)=>setPassword(e.target.value)}/>
<div className=" mx-[25%] mt-[5%] bg-gray-500 border-4 border-purple-900">
<div className="flex flex-col justify-center pt-8">
<form
className="flex flex-col items-center justify-center mx-4"
onSubmit={handleSubmit}
>
<input
className="w-[60%] mx-[25%] px-2 py-3 border-4 rounded border-purple-900"
type="email"
placeholder="Email"
onChange={(e) => setEmail(e.target.value)}
/>
<input
className="w-[60%] mx-[25%] mt-2 px-2 py-3 border-4 rounded border-purple-900"
type="password"
placeholder="Password"
onChange={(e) => setPassword(e.target.value)}
/>
</form>
{error? <p className='p-3 bg-red-400 my-2'>{error}</p> : null}
<button className=' w-32 h-16 mx-[40%] mt-[5%] text-black font-rowdies text-lowercase border-4 border-purple-900 bg-purple-300 hover:bg-purple-500 ' onClick={handleSubmit}>Sign In</button>
{error ? <p className="p-3 bg-red-400 my-2">{error}</p> : null}
<button
className=" w-32 h-16 mx-[40%] mt-[5%] text-black font-rowdies text-lowercase border-4 border-purple-900 bg-purple-300 hover:bg-purple-500 "
onClick={handleSubmit}
>
Sign In
</button>
</div>

<div className='flex justify-around mt-4'>
<div className='flex'>
<input type='checkbox'/>
<p className='text-white ml-2'>Remember Me</p>
<div className="flex justify-around mt-4">
<div className="flex">
<input type="checkbox" />
<p className="text-white ml-2">Remember Me</p>
</div>
<p className='text-white'>Need Help?</p>
</div>
<p className="text-white">Need Help?</p>
</div>

<p className='text-white flex justify-center mt-4'>New to Bit-Vishwa ?<Link to ='/signup'><span className='text-black font-rowdies hover:text-purple-900 ml-2'>{' '}Sign Up</span></Link></p>

<p className="text-white flex justify-center mt-4">
New to Bit-Vishwa ?
<Link to="/signup">
<span className="text-black font-rowdies hover:text-purple-900 ml-2">
{" "}
Sign Up
</span>
</Link>
</p>
</div>
)
}
);
};

export default Login
export default Login;
91 changes: 56 additions & 35 deletions src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,64 @@
import React from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { UserAuth } from '../context/AuthContext'
import React from "react";
import { Link, useNavigate } from "react-router-dom";
import { UserAuth } from "../context/AuthContext";

const Navbar = () => {
const {user, logOut} = UserAuth()
const navigate = useNavigate()
const { user, logOut } = UserAuth();
const navigate = useNavigate();

const handleLogout = async()=>{
try{
const handleLogout = async () => {
try {
await logOut();
navigate('/')
}catch(error){
console.log(error)
navigate("/");
} catch (error) {
console.log(error);
}
}
console.log(user)
};
console.log(user);
return (
<div className='flex justify-between mt-[2%]'>
<Link to ='/'><h3 className='text-purple-500 font-rowdies text-4xl'>Bit-Vishwa</h3></Link>
{user?.email?(
<div className='flex justify-around w-[20%]'>
<Link to='/account'>
<button className='text-white hover:border-white px-4 py-2 hover:rounded-md hover:bg-purple-500'>Account</button>
</Link>
<Link>
<button onClick={handleLogout} className='text-white hover:border-white px-4 py-2 hover:rounded-md hover:bg-purple-500'>Log Out</button>
</Link>
</div>
):(
<div className='flex justify-around w-[20%]'>
<Link to ='/login'><button className='text-white hover:border-white px-4 py-2 hover:rounded-md hover:bg-purple-500'>Sign In</button></Link>

<Link to ='/signup'><button className='text-white hover:border-white px-4 py-2 hover:rounded-md hover:bg-purple-500'>Sign Up</button></Link>
<div className="flex justify-between mt-[2%]">
{user?.email ? (
<Link to="/home">
<h3 className="text-purple-500 font-rowdies text-4xl">Bit-Vishwa</h3>
</Link>
) : (
<Link to="/">
<h3 className="text-purple-500 font-rowdies text-4xl">Bit-Vishwa</h3>
</Link>
)}
{user?.email ? (
<div className="flex justify-around w-[20%]">
<Link to="/account">
<button className="text-white hover:border-white px-4 py-2 hover:rounded-md hover:bg-purple-500">
Account
</button>
</Link>
<Link>
<button
onClick={handleLogout}
className="text-white hover:border-white px-4 py-2 hover:rounded-md hover:bg-purple-500"
>
Log Out
</button>
</Link>
</div>
) : (
<div className="flex justify-around w-[20%]">
<Link to="/login">
<button className="text-white hover:border-white px-4 py-2 hover:rounded-md hover:bg-purple-500">
Sign In
</button>
</Link>

<Link to="/signup">
<button className="text-white hover:border-white px-4 py-2 hover:rounded-md hover:bg-purple-500">
Sign Up
</button>
</Link>
</div>
)}
</div>

)}
</div>
)
}

export default Navbar
);
};

export default Navbar;

1 comment on commit 3128125

@vercel
Copy link

@vercel vercel bot commented on 3128125 Jul 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

bitvishwa – ./

bitvishwa-git-master-keyurgk.vercel.app
bitvishwa.vercel.app
bitvishwa-keyurgk.vercel.app

Please sign in to comment.