From e0bfd0cdd04834dec4f54a41fdb26ea38204d7ab Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sat, 25 Feb 2023 22:30:38 +0800 Subject: [PATCH 01/15] Added design and login to header --- src/Components/AppIcon/AppIcon.tsx | 30 ++++++++++++++++++++++ src/Components/Header/Header.tsx | 31 ++++++++++++++++++++++- src/Components/Login/Login.tsx | 40 ++++++++++++++++++++++++++++++ src/Components/Note/Note.tsx | 2 +- src/Components/Notes/Notes.tsx | 4 +-- src/Routes/NewNote/NewNote.tsx | 4 +-- src/styles.tsx | 10 ++++++-- 7 files changed, 113 insertions(+), 8 deletions(-) create mode 100644 src/Components/AppIcon/AppIcon.tsx create mode 100644 src/Components/Login/Login.tsx diff --git a/src/Components/AppIcon/AppIcon.tsx b/src/Components/AppIcon/AppIcon.tsx new file mode 100644 index 0000000..aef58b9 --- /dev/null +++ b/src/Components/AppIcon/AppIcon.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; + +export interface props { + size: string; + color: string; +} + +export default function AppIcon(props: props) { + return ( + <> + + + + + + + + + ); +} diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx index 3e86d14..a895f1e 100644 --- a/src/Components/Header/Header.tsx +++ b/src/Components/Header/Header.tsx @@ -1,11 +1,40 @@ import * as React from "react"; import styles from "../../styles"; +import AppIcon from "../AppIcon/AppIcon"; +import Login from "../Login/Login"; export default function Header() { return (
-

React - A Notes Demo

+
+
+ +
+
+

Clip Notes

+
+
+
+ +
+
+
); } diff --git a/src/Components/Login/Login.tsx b/src/Components/Login/Login.tsx new file mode 100644 index 0000000..ca07cc3 --- /dev/null +++ b/src/Components/Login/Login.tsx @@ -0,0 +1,40 @@ +import * as React from "react"; +import { useState } from "react"; +import { Button } from "@mui/material"; +import styles from "../../styles"; + +export default function Login() { + const [logged_in, setLoggedIn] = useState(false); + if (!logged_in) { + return ( +
+

Not Logged in

+
+ +
+ ); + } + return ( +
+

Logged in as

+
+ +
+ ); +} diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx index 346a5d5..153e424 100644 --- a/src/Components/Note/Note.tsx +++ b/src/Components/Note/Note.tsx @@ -27,7 +27,7 @@ export default function Note(props: props) {

Timestamp: {props.date_created}

+ ); +} diff --git a/src/Components/Login/Login.tsx b/src/Components/LoginButton/LoginButton.tsx similarity index 81% rename from src/Components/Login/Login.tsx rename to src/Components/LoginButton/LoginButton.tsx index ca07cc3..70448c8 100644 --- a/src/Components/Login/Login.tsx +++ b/src/Components/LoginButton/LoginButton.tsx @@ -1,10 +1,12 @@ import * as React from "react"; import { useState } from "react"; import { Button } from "@mui/material"; +import { useNavigate } from "react-router-dom"; import styles from "../../styles"; -export default function Login() { +export default function LoginButton() { const [logged_in, setLoggedIn] = useState(false); + const navigate = useNavigate(); if (!logged_in) { return (
@@ -14,7 +16,7 @@ export default function Login() { style={styles.button_green} variant="contained" onClick={() => { - setLoggedIn(true); + navigate("/Login"); }} > Login diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx new file mode 100644 index 0000000..e12b6c6 --- /dev/null +++ b/src/Routes/Login/Login.tsx @@ -0,0 +1,65 @@ +import * as React from "react"; +import styles from "../../styles"; + +import { useLocation, useNavigate } from "react-router-dom"; +import Header from "../../Components/Header/Header"; +import { useState } from "react"; +import { Button } from "@mui/material"; + +export default function Login() { + const navigate = useNavigate(); + const [user, setUser] = useState({ + username: "", + password: "", + }); + console.log("We are in the" + useLocation()); + return ( +
+
+
+

Login to Clip Notes

+
+

Username

+
+ { + setUser({ ...user, username: e.target.value }); + }} + maxLength={20} + /> +
+
+

Password

+
+ { + setUser({ ...user, password: e.target.value }); + }} + maxLength={20} + /> +
+ + +
+
+ ); +} diff --git a/src/index.tsx b/src/index.tsx index 320d3b5..969107b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,6 +6,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Home from "./Routes/Home/Home"; import NewNote from "./Routes/NewNote/NewNote"; +import Login from "./Routes/Login/Login"; import { QueryClient, QueryClientProvider } from "react-query"; @@ -20,6 +21,10 @@ const router = createBrowserRouter([ path: "/NewNote", element: , }, + { + path: "/Login", + element: , + }, ]); const root = ReactDOM.createRoot( diff --git a/src/styles.tsx b/src/styles.tsx index e4fc715..970e2b6 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -22,6 +22,17 @@ const styles: { [key: string]: React.CSSProperties } = { alignItems: "center", justifyContent: "center", }, + window: { + alignSelf: "center", + width: "60%", + minHeight: "128px", + display: "flex", + flexDirection: "column", + backgroundColor: "#0087e4", + margin: 16, + padding: 16, + borderRadius: 16, + }, note: { display: "flex", flexDirection: "column", @@ -78,6 +89,17 @@ const styles: { [key: string]: React.CSSProperties } = { display: "flex", flexDirection: "row", width: "256x", + marginTop: 4, + marginBottom: 4, + }, + button_yellow: { + backgroundColor: "#e2b465", + alignSelf: "center", + display: "flex", + flexDirection: "row", + width: "256x", + marginTop: 4, + marginBottom: 4, }, button_red: { backgroundColor: "#bc231e", @@ -85,6 +107,8 @@ const styles: { [key: string]: React.CSSProperties } = { display: "flex", flexDirection: "row", width: "256px", + marginTop: 4, + marginBottom: 4, }, text_small: { color: "white", @@ -92,6 +116,13 @@ const styles: { [key: string]: React.CSSProperties } = { fontWeight: "bold", textAlign: "center", }, + text_small_red: { + color: "#bc231e", + fontSize: "2vh", + fontWeight: "bold", + textAlign: "center", + }, + text_medium: { color: "white", fontSize: "4vh", From 5a34617d7730e8435bf8c30f2fa7471f81926c08 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sat, 25 Feb 2023 23:27:12 +0800 Subject: [PATCH 03/15] Added login functionality --- src/Components/Api/Api.tsx | 18 ++++++++++++++++++ src/Routes/Login/Login.tsx | 15 +++++++++++---- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx index 007e5a1..6b403f2 100644 --- a/src/Components/Api/Api.tsx +++ b/src/Components/Api/Api.tsx @@ -22,3 +22,21 @@ export function AddNote(note: note) { export function DeleteNote(id: number) { return axios.delete("http://localhost:8000/api/v1/notes/" + id + "/"); } + +export interface user { + username: string; + password: string; +} + +export function UserLogin(user: user) { + return axios + .post("http://localhost:8000/api/v1/accounts/token/login", user) + .then((response) => { + console.log("Success! Token: " + response.data); + return true; + }) + .catch((error) => { + console.log("Login Failed: " + error); + return false; + }); +} diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx index e12b6c6..597009f 100644 --- a/src/Routes/Login/Login.tsx +++ b/src/Routes/Login/Login.tsx @@ -5,6 +5,7 @@ import { useLocation, useNavigate } from "react-router-dom"; import Header from "../../Components/Header/Header"; import { useState } from "react"; import { Button } from "@mui/material"; +import { UserLogin } from "../../Components/Api/Api"; export default function Login() { const navigate = useNavigate(); @@ -12,7 +13,8 @@ export default function Login() { username: "", password: "", }); - console.log("We are in the" + useLocation()); + const [error, setError] = useState(""); + return (
@@ -44,17 +46,22 @@ export default function Login() { +

{error}

navigate("/")} > -
- - - - - - -
+ + + + + + ); } diff --git a/src/Components/LoginButton/LoginButton.tsx b/src/Components/LoginButton/LoginButton.tsx index 70448c8..1f71443 100644 --- a/src/Components/LoginButton/LoginButton.tsx +++ b/src/Components/LoginButton/LoginButton.tsx @@ -3,9 +3,13 @@ import { useState } from "react"; import { Button } from "@mui/material"; import { useNavigate } from "react-router-dom"; import styles from "../../styles"; +import { GetUsername, UserInfo } from "../Api/Api"; export default function LoginButton() { const [logged_in, setLoggedIn] = useState(false); + const [user, setUser] = useState( + JSON.parse(localStorage.getItem("user") || "").username + ); const navigate = useNavigate(); if (!logged_in) { return ( @@ -26,7 +30,7 @@ export default function LoginButton() { } return (
-

Logged in as

+

Logged in as {user}

+

{feedback}

+
+
+ ); +} diff --git a/src/index.tsx b/src/index.tsx index a2f5a4d..2adba04 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -8,6 +8,7 @@ import Home from "./Routes/Home/Home"; import NewNote from "./Routes/NewNote/NewNote"; import Login from "./Routes/Login/Login"; import Activation from "./Routes/Activation/Activation"; +import Register from "./Routes/Register/Register"; import { QueryClient, QueryClientProvider } from "react-query"; @@ -29,6 +30,10 @@ const router = createBrowserRouter([ path: "/Login", element: , }, + { + path: "/Register", + element: , + }, { path: "/Activation/:uid/:token", element: , From 4584a8d2ce59eda266a2273d0be10c38c6e8dd78 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Mon, 27 Feb 2023 13:01:19 +0800 Subject: [PATCH 15/15] Fixed broken vh sizes for some components --- src/Components/AppIcon/AppIcon.tsx | 6 +++--- src/Components/Header/Header.tsx | 2 +- src/Components/HomeIcon/HomeIcon.tsx | 8 ++++---- src/styles.tsx | 9 +++++---- 4 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/Components/AppIcon/AppIcon.tsx b/src/Components/AppIcon/AppIcon.tsx index aef58b9..56d5c80 100644 --- a/src/Components/AppIcon/AppIcon.tsx +++ b/src/Components/AppIcon/AppIcon.tsx @@ -1,7 +1,7 @@ import * as React from "react"; export interface props { - size: string; + size: number; color: string; } @@ -10,8 +10,8 @@ export default function AppIcon(props: props) { <> - +

Clip Notes