Battlesnake/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update login functionality and UI; updated Navbar for routing, modified LoginPage and improve styles.

Browse source
This commit is contained in:
Anton Kupriianov 2025-04-20 17:15:31 -07:00
parent 1b2f4b10ba
commit 9cd6ae4ccb
8 changed files with 82 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/grid-background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 56 KiB

42
src/components/Navbar.jsx
View file

@ -1,19 +1,41 @@
import React from 'react' import React from "react";
import '../scss/styles.scss' import "../scss/styles.scss";
import '../scss/components/_navbar.scss' import "../scss/components/_navbar.scss";
import { Link } from "react-router-dom";
const Navbar = () => { const Navbar = () => {
return ( return (
<nav className="navbar"> <nav className="navbar">
<div className="navbar__logo">MyApp</div> <div className="navbar__logo">MyApp</div>
<ul className="navbar__links"> <ul className="navbar__links">
<li><a href="/" className="navbar__link">Home</a></li> <li>
<li><a href="/notebook" className="navbar__link">NoteBook</a></li> <Link to="/" className="navbar__link">
<li><a href="/assignment" className="navbar__link">Assignment</a></li> Home
<li><a href="/editor" className="navbar__link">Editor</a></li> </Link>
</li>
<li>
<Link to="/notebook" className="navbar__link">
NoteBook
</Link>
</li>
<li>
<Link to="/assignment" className="navbar__link">
Assignment
</Link>
</li>
<li>
<Link to="/editor" className="navbar__link">
Editor
</Link>
</li>
<li>
<Link to="/login" className="navbar__link">
Login
</Link>
</li>
</ul> </ul>
</nav> </nav>
) );
} };
export default Navbar export default Navbar;

3
src/main.jsx
View file

@ -5,11 +5,10 @@ import "./scss/styles.scss";
import Navbar from "./components/Navbar"; import Navbar from "./components/Navbar";
import Hero from "./components/Hero"; import Hero from "./components/Hero";
import Services from "./components/Services"; import Services from "./components/Services";
import Header from "./components/Header";
createRoot(document.getElementById("root")).render( createRoot(document.getElementById("root")).render(
<StrictMode> <StrictMode>
<AppRouter /> <AppRouter />
</StrictMode> </StrictMode>
); );

16
src/pages/LoginPage.jsx
View file

@ -8,7 +8,7 @@ const LoginPage = () => {
const [type, setType] = useState("signIn"); const [type, setType] = useState("signIn");
useEffect(() => { useEffect(() => {
document.title = "Login / Sign Up"; document.title = "Login / Instructor";
}, []); }, []);
const handleOnClick = (text) => { const handleOnClick = (text) => {
@ -23,7 +23,7 @@ const LoginPage = () => {
return ( return (
<main className="login-page"> <main className="login-page">
<section> <section>
<h2>Sign In/Sign Up</h2> <h2>Student/Instructor</h2>
<div className={containerClass} id="container"> <div className={containerClass} id="container">
<SignUpForm /> <SignUpForm />
<SignInForm /> <SignInForm />
@ -31,26 +31,24 @@ const LoginPage = () => {
<div className="overlay"> <div className="overlay">
<div className="overlay-panel overlay-left"> <div className="overlay-panel overlay-left">
<h1>Welcome Back!</h1> <h1>Welcome Back!</h1>
<p> <p>Please login with your personal info</p>
To keep connected with us please login with your personal info
</p>
<button <button
className="ghost" className="ghost"
id="signIn" id="signIn"
onClick={() => handleOnClick("signIn")} onClick={() => handleOnClick("signIn")}
> >
Sign In Student
</button> </button>
</div> </div>
<div className="overlay-panel overlay-right"> <div className="overlay-panel overlay-right">
<h1>Hello, Friend!</h1> <h1>Hello, Instructor!</h1>
<p>Enter your personal details and start journey with us</p> <p>Please enter your personal details here</p>
<button <button
className="ghost" className="ghost"
id="signUp" id="signUp"
onClick={() => handleOnClick("signUp")} onClick={() => handleOnClick("signUp")}
> >
Sign Up Instructor
</button> </button>
</div> </div>
</div> </div>

18
src/pages/SignIn.jsx
View file

@ -31,22 +31,16 @@ function SignInForm() {
return ( return (
<div className="form-container sign-in-container"> <div className="form-container sign-in-container">
<form onSubmit={handleOnSubmit}> <form onSubmit={handleOnSubmit}>
<h1>Sign in</h1> <h1>Student</h1>
<div className="social-container"> {/* <div className="social-container">
<a href="#" className="social">
<i className="fab fa-facebook-f" />
</a>
<a href="#" className="social"> <a href="#" className="social">
<i className="fab fa-google-plus-g" /> <i className="fab fa-google-plus-g" />
</a> </a>
<a href="#" className="social"> </div> */}
<i className="fab fa-linkedin-in" />
</a>
</div>
<span>or use your account</span>
<input <input
type="email" type="email"
placeholder="Email" placeholder="Student Name"
name="email" name="email"
value={state.email} value={state.email}
onChange={handleChange} onChange={handleChange}
@ -58,7 +52,7 @@ function SignInForm() {
value={state.password} value={state.password}
onChange={handleChange} onChange={handleChange}
/> />
<a href="#">Forgot your password?</a>
<button>Sign In</button> <button>Sign In</button>
</form> </form>
</div> </div>

12
src/pages/SignUp.jsx
View file

@ -18,7 +18,7 @@ function SignUpForm() {
const { name, email, password } = state; const { name, email, password } = state;
alert( alert(
`You are sign up with name: ${name} email: ${email} and password: ${password}` `You are signed in with name: ${name} email: ${email} and password: ${password}`
); );
for (const key in state) { for (const key in state) {
@ -32,17 +32,11 @@ function SignUpForm() {
return ( return (
<div className="form-container sign-up-container"> <div className="form-container sign-up-container">
<form onSubmit={handleOnSubmit}> <form onSubmit={handleOnSubmit}>
<h1>Create Account</h1> <h1>Instructor</h1>
<div className="social-container"> <div className="social-container">
<a href="#" className="social">
<i className="fab fa-facebook-f" />
</a>
<a href="#" className="social"> <a href="#" className="social">
<i className="fab fa-google-plus-g" /> <i className="fab fa-google-plus-g" />
</a> </a>
<a href="#" className="social">
<i className="fab fa-linkedin-in" />
</a>
</div> </div>
<span>or use your email for registration</span> <span>or use your email for registration</span>
<input <input
@ -66,7 +60,7 @@ function SignUpForm() {
onChange={handleChange} onChange={handleChange}
placeholder="Password" placeholder="Password"
/> />
<button>Sign Up</button> <button>Sign in</button>
</form> </form>
</div> </div>
); );

6
src/routers/AppRouter.jsx
View file

@ -19,10 +19,8 @@ const AppRouter = () => {
return ( return (
<BrowserRouter> <BrowserRouter>
<div className="wrapper"> <div className="wrapper">
{/* <Header /> */}
<Navbar /> <Navbar />
<Routes> <Routes>
<Route <Route
path="/" path="/"
element={ element={
@ -32,9 +30,9 @@ const AppRouter = () => {
</> </>
} }
/> />
<Route path="login" element={<LoginPage />} /> <Route path="/login" element={<LoginPage />} />
<Route <Route
path="editor" path="/editor"
element={ element={
<ProtectedRoute> <ProtectedRoute>
<PageCodeEditor /> <PageCodeEditor />

31
src/scss/page/_login.scss
View file

@ -1,3 +1,21 @@
// .login-page {
// min-height: 100vh;
// display: flex;
// justify-content: center;
// align-items: center;
// background-image: url("../../../public/images/grid-background.png");
// background-size: cover;
// background-position: center;
// background-repeat: no-repeat;
// background-attachment: fixed;
// section {
// width: 100%;
// max-width: 800px;
// padding: 20px;
// }
// }
.App { .App {
font-family: sans-serif; font-family: sans-serif;
text-align: center; text-align: center;
@ -10,7 +28,12 @@
} }
body { body {
background: #f6f5f7; background: transparent;
background-image: url("../../../public/images/grid-background.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -27,6 +50,8 @@ h1 {
h2 { h2 {
text-align: center; text-align: center;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
} }
p { p {
@ -227,8 +252,8 @@ input {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0 5px; margin: 0 5px;
height: 40px; height: 60px;
width: 40px; width: 60px;
} }
footer { footer {