Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Daniel0 #10

Merged
merged 6 commits into from
Oct 8, 2023
Merged

Daniel0 #10

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5e7accd
ui overhall
larkindaniel Oct 8, 2023
e0f284c
frontend integration
larkindaniel Oct 8, 2023
b9243c4
front end- integration
larkindaniel Oct 8, 2023
d5286dd
merge conflict fix
larkindaniel Oct 8, 2023
071714b
routing change
larkindaniel Oct 8, 2023
9eb0fe9
finished front end
larkindaniel Oct 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
frontend integration
  • Loading branch information
@larkindaniel
larkindaniel committed Oct 8, 2023
commit e0f284ca48b0c36697c04b9d8ded76deeff396de
8 changes: 7 additions & 1 deletion client/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./index.css";
import AppLayout from "./components/AppLayout";
import Decks from "./components/Decks";
import Upload from "./components/smaller_components/Upload";

import Login from "./components/Login";

const App = () => {
Expand All @@ -12,8 +14,12 @@ const App = () => {
<Routes>
<Route path="/app/*" element={<AppLayout />}>
<Route path="decks" element={<Decks />} />
<Route path="upload" element={<Upload />} />
</Route>
<Route path="/login/*" element={<Login />}></Route>

<Route path="/login" element={<Login />} />
{/*<Route path="/signup" element={<SignUp />} /> */}
{/* <Route path="*" element={<ErrorPage />} /> */}
</Routes>
</Router>
{/* <Dashboard /> */}
Expand Down
54 changes: 35 additions & 19 deletions client/src/components/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useState } from "react";
import axios from "../requests/axios";

const Login = () => {
const [isLogin, setIsLogin] = useState(true);
Expand All @@ -19,45 +20,57 @@ const Login = () => {

const handleLogin = async () => {
try {
const apiUrl = '/login';
console.log(email, password);
const apiUrl = "/login";
const requestData = {
email: email,
password: password,
username: email,

password,
};

const response = await axios.post(apiUrl, requestData);

console.log('Login response:', response.data);
console.log("Login response:", response.data);
} catch (error) {
console.error('Error:', error);
console.error("Error:", error);
}
};

return (
<div className="flex w-full h-screen">
<div className="flex w-full h-screen bg-primary-background">
<div className="w-full flex items-center justify-center lg:w-1/2">
<div className="bg-white px-10 py-20 rounded-3xl border-gray-200">
<h1 className="text-5xl font-semibold">
<div className="bg-primary-background px-10 py-20 rounded-3xl border-gray-200">
<h1 className="text-5xl font-semibold text-primary-dark">
Welcome {isLogin ? "Back" : "New User"}
</h1>
<p className="font-medium text-lg text-gray-500 mt-4">
<p className="font-medium text-primary-dark text-lg mt-4">
{isLogin
? "Welcome back! Please sign in."
: "Join us today! Create an account."}
</p>
<div className="mt-8">
<label className="text-lg font-medium">Email</label>
<label className="text-lg font-medium text-primary-dark">
Email
</label>
<input
className="w-full bottom-2 border border-gray-500 rounded-xl p-4 mt-1 bg-transparent"
type="text"
placeholder="Enter your email"
></input>
className="w-full bottom-2 border border-gray-500 rounded-xl p-4 mt-1 bg-transparent"
value={email}
onChange={handleEmailChange}
/>
</div>
<div className="mt-8">
<label className="text-lg font-medium">Password</label>
<label className="text-lg font-medium text-primary-dark">
Password
</label>
<input
className="w-full bottom-2 rounded-xl p-4 mt-1 bg-transparent border border-gray-500"
type="password"
placeholder="Enter your password"
></input>
className="w-full bottom-2 rounded-xl p-4 mt-1 bg-transparent border border-gray-500"
value={password}
onChange={handlePasswordChange}
/>
</div>
<div className="mt-8 flex justify-between items-center">
<div>
Expand All @@ -67,13 +80,16 @@ const Login = () => {
</label>
</div>
{isLogin ? (
<button className="ml-4 font-medium text-base text-violet-500">
<button className="ml-4 font-medium text-base text-primary-main">
Forgot Password
</button>
) : null}
</div>
<div className="mt-8 flex flex-col gap-y-4">
<button className="active:scale-[.98] active:duration-75 hover:scale-[1.02] ease-in-out transition-all py-3 rounded-xl bg-violet-500 text-white text-lg font-bold">
<button
onClick={handleLogin}
className="active:scale-[.98] active:duration-75 hover:bg-primary-dark hover:scale-[1.02] ease-in-out transition-all py-3 rounded-xl bg-primary-light text-primary-background text-lg font-bold"
>
{isLogin ? "Sign in" : "Sign up"}
</button>
<button
Expand All @@ -85,8 +101,8 @@ const Login = () => {
</div>
</div>
</div>
<div className="hidden relative w-1/2 h-full lg:flex items-center justify-center bg-gray-200">
<div className="w-60 h-60 rounded-full bg-gradient-to-tr from-violet-500 to-pink-500 animate-bounce" />
<div className="hidden relative w-1/2 h-full lg:flex items-center justify-center bg-secondary-main">
<div className="w-60 h-60 rounded-full bg-gradient-to-tr from-secondary-main to-primary-dark animate-bounce" />
<div className="w-full h-1/2 absolute bottom-0 bg-white/10 backdrop-blur-lg" />
</div>
</div>
Expand Down
You are viewing a condensed version of this merge commit. You can view the full changes here.