From 865917f8b597494c20b34d63e9def66afbfad53c Mon Sep 17 00:00:00 2001 From: Keyemail Date: Fri, 2 Aug 2024 07:49:07 -0700 Subject: [PATCH] Added nav, finished login page, made logo --- index.html | 1 + package-lock.json | 65 ++++++++++++++++++++-- package.json | 1 + public/logo.ico | Bin 0 -> 4514 bytes src/Index.tsx | 44 +++++++++++++-- src/assets/logo.png | Bin 0 -> 10618 bytes src/components/Navbar.tsx | 14 +++++ src/data/login.json | 0 src/main.tsx | 36 ++----------- src/pages/Dashboard.tsx | 9 ++++ src/pages/DeviceList.tsx | 2 +- src/pages/ExtendWirelessNetwork.tsx | 2 +- src/pages/Login.tsx | 68 +++++++++++++++++++++++ src/pages/Register.tsx | 5 ++ src/pages/SystemSettings.tsx | 2 +- src/pages/WirelessSettings.tsx | 2 +- src/styles/Login.css | 80 ++++++++++++++++++++++++++++ src/styles/Main.css | 38 ++++++++++++- 18 files changed, 324 insertions(+), 45 deletions(-) create mode 100644 public/logo.ico create mode 100644 src/assets/logo.png create mode 100644 src/components/Navbar.tsx create mode 100644 src/data/login.json create mode 100644 src/pages/Dashboard.tsx diff --git a/index.html b/index.html index 038b9c4..5f2afa4 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Wifi Extender diff --git a/package-lock.json b/package-lock.json index 5f03f74..0395236 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "react": "^18.3.1", + "react-cookie": "^7.2.0", "react-dom": "^18.3.1", "react-router-dom": "^6.25.1" }, @@ -1193,23 +1194,35 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "dev": true }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", - "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "dev": true + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==" }, "node_modules/@types/react": { "version": "18.3.3", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", - "dev": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -1653,8 +1666,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/debug": { "version": "4.3.6", @@ -2290,6 +2302,14 @@ "node": ">=4" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/ignore": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", @@ -2780,6 +2800,19 @@ "node": ">=0.10.0" } }, + "node_modules/react-cookie": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.2.0.tgz", + "integrity": "sha512-mqhPERUyfOljq5yJ4woDFI33bjEtigsl8JDJdPPeNhr0eSVZmBc/2Vdf8mFxOUktQxhxTR1T+uF0/FRTZyBEgw==", + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.5", + "hoist-non-react-statics": "^3.3.2", + "universal-cookie": "^7.0.0" + }, + "peerDependencies": { + "react": ">= 16.3.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -2792,6 +2825,11 @@ "react": "^18.3.1" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/react-refresh": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", @@ -3095,6 +3133,23 @@ "node": ">=14.17" } }, + "node_modules/universal-cookie": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.2.0.tgz", + "integrity": "sha512-PvcyflJAYACJKr28HABxkGemML5vafHmiL4ICe3e+BEKXRMt0GaFLZhAwgv637kFFnnfiSJ8e6jknrKkMrU+PQ==", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^0.6.0" + } + }, + "node_modules/universal-cookie/node_modules/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/update-browserslist-db": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz", diff --git a/package.json b/package.json index d87115a..84e890f 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "react": "^18.3.1", + "react-cookie": "^7.2.0", "react-dom": "^18.3.1", "react-router-dom": "^6.25.1" }, diff --git a/public/logo.ico b/public/logo.ico new file mode 100644 index 0000000000000000000000000000000000000000..9bcd86285d27e9a05d0482856a83ab7c094efe0a GIT binary patch literal 4514 zcmeHLTToMH5Z(kMV8ob42nr}7LYDnoush`72RZ^M&~VuzV>AtdG*clq|E%l`yDGAq3_Nz&a@AW zy>5!&mD5l}MsDmbJTp|t9Bp&jLsD=q;#1C6wRB`^Ra4*N9);HwKgI5HV!nK(kdEj1 zx9tWXzn5TmsSZtAlIX>zb$TQI6L|_cccIUBifFwfTpjCH8OlANvxlHGyq=Qh9lB4w zu}x2gRC+NU+`VLwk~9)l)t|+m#hq!VIOvx`Y6`le*V$@&YaLM{{aSFam}CW360DhE zRe@Cnel3}~zZ@0=Fcv-*#N5+MsZk*i*1CucVLQ?>&^pfwtR%dHnZR5n1E3!)WCj?} zsiaEi<^#O$RDO10hYzX<#G((KsjG@Q{|pV?v8lU_gLIaNV16>2<{eA~-um2{8cG)a zlOq^N?D=MY=A(dwi+Ip{O?mj)=Q&%GP%~#BLi9YO`Skm80Cnb-a@7#Sy@(9y&#Qmm z88kVtR*Qr4=M<`T+luJzm$B*m*I}KuVl1+clt5Z+t=!hiZJl5K4;4(MjgV3Z*~?2a z3?t5B?gpiVOPMzIBnym&9)_F~s3bggHBUe~J@Bv?IsQmJVP|S~(Y;VRi|nr+XmZot zF)>1C8du!}UB_-FSfucbfAnJJ!$~fjH z`%3Zf!Ae>AWmcG3*oNbs{?8In?>STx!%T!-_AT|E&1O!#4vTEFt6rTmnZ_T^Qu#^y z=iGbckzTbo<*Xf?J;1MH_sUyy{}trj-jL4m-zp*)1C34WACDL-Z~ytAssGqIajEfk zP%)JPZQ=MG$d<~!R+9}z6C0m`t<+-Sm_1q-g&Gtb4K&%;7T4J_2J(WHd@Crs6;Q zUko`XJ_uiJ@i%Mw@cLNaIEOFcN_%m&NpnZXm-Q1QrPutjbc1=p!$PR_FJMOAns|Ow zIY-;}*id(F=NuVt0(=|kKR|q0P)+n(3a43bDKxW8{?FFz@5$C-flW%>{_2l*XX??7 zv?CUig5}@Eg4$S7LyV?1jd1AH+?UJ#W-h2EOG*?|of5zx!Fg#sVhq0M4{7lw6qkFv zD?HgGd9{bMdV;jO( { + if(!loginState) { + navigate("/login"); + } + if(loggedUser === '') { + setLoggedUser('Not Logged In') + } + }, [loginState, setLoggedUser]); + + return( <> -

hi

- +

{ loginState }

+ + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + ) } -export default Index +export default Index; \ No newline at end of file diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..eb504bee93119b8fe50cd17cf119e84b148dece6 GIT binary patch literal 10618 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 literal 0 HcmV?d00001 diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..baa889a --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,14 @@ +interface Props { + LoggedUser: string; +} + +function Navbar({ LoggedUser }: Props) { + return ( + + ) +} + +export default Navbar; \ No newline at end of file diff --git a/src/data/login.json b/src/data/login.json new file mode 100644 index 0000000..e69de29 diff --git a/src/main.tsx b/src/main.tsx index 85d408f..7cabaec 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,38 +1,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import { RouterProvider, createBrowserRouter } from 'react-router-dom' -import Index from './Index.tsx' -import Devices from './pages/DeviceList.tsx' -import Extend from './pages/ExtendWirelessNetwork.tsx' -import WirelessSettings from './pages/SystemSettings.tsx' -import SystemSettings from './pages/WirelessSettings.tsx' -import './styles/Main.css' - -const router = createBrowserRouter([ - { - path: "/", - element: - }, - { - path: "/devices", - element: - }, - { - path: "/extend", - element: - }, - { - path: "/wireless", - element: - }, - { - path: "/settings", - element: - } -]); +import { BrowserRouter as Router } from 'react-router-dom'; +import Index from './Index' ReactDOM.createRoot(document.getElementById('root')!).render( - + + + , ) \ No newline at end of file diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx new file mode 100644 index 0000000..3490919 --- /dev/null +++ b/src/pages/Dashboard.tsx @@ -0,0 +1,9 @@ +function Dashboard() { + return ( + <> +

hi

 + + ) +} + +export default Dashboard diff --git a/src/pages/DeviceList.tsx b/src/pages/DeviceList.tsx index bafb3ca..b1def69 100644 --- a/src/pages/DeviceList.tsx +++ b/src/pages/DeviceList.tsx @@ -2,4 +2,4 @@ function DeviceList() { return

device list

} -export default DeviceList \ No newline at end of file +export default DeviceList; \ No newline at end of file diff --git a/src/pages/ExtendWirelessNetwork.tsx b/src/pages/ExtendWirelessNetwork.tsx index e41ff5e..d068d35 100644 --- a/src/pages/ExtendWirelessNetwork.tsx +++ b/src/pages/ExtendWirelessNetwork.tsx @@ -2,4 +2,4 @@ function ExtendWirelessNetwork() { return

Extend Wireless Network

} -export default ExtendWirelessNetwork \ No newline at end of file +export default ExtendWirelessNetwork; \ No newline at end of file diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index e69de29..d549e40 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -0,0 +1,68 @@ +import { Dispatch, SetStateAction, useState } from 'react'; +import { useNavigate, Link } from 'react-router-dom'; +import '../styles/Login.css' + +let usernames = ['root']; +let passwords = ['123', 'hello']; + +interface Props { + setLogin: Dispatch>; + setUser: Dispatch>; +} + +function Login({ setLogin, setUser }: Props) { + const navigate = useNavigate(); + + let [usernameError, setUsernameError] = useState(false); + let [passwordError, setPasswordError] = useState(false); + + const handleLogin = (e: React.FormEvent) => { + e.preventDefault(); + + const userElement = document.getElementById('username') as HTMLInputElement | null; + const passwordElement = document.getElementById('password') as HTMLInputElement | null; + + if(!userElement || !passwordElement) return; + + let user = userElement?.value; + let password = passwordElement?.value; + + for (let i = 0; i < usernames.length; i++) { + if(user === usernames[i] && password === passwords[i]) { + setLogin(true); + setUser(user); + return navigate("/"); + } + } + + setUsernameError(true); + setPasswordError(true); + }; + + return ( +
+
+

Welcome back!

+

Enter your username and password.

+
+

Username

+ + + { passwordError && +

Wrong username.

} + +

Password

+ + + { usernameError && +

Wrong password.

} + +

Forgot password? Reset it

+ +
+
+
+ ) +} + +export default Login; \ No newline at end of file diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx index e69de29..3989ed2 100644 --- a/src/pages/Register.tsx +++ b/src/pages/Register.tsx @@ -0,0 +1,5 @@ +function Register() { + return

register

+} + +export default Register; \ No newline at end of file diff --git a/src/pages/SystemSettings.tsx b/src/pages/SystemSettings.tsx index 0837151..ece2db8 100644 --- a/src/pages/SystemSettings.tsx +++ b/src/pages/SystemSettings.tsx @@ -2,4 +2,4 @@ function SystemSettings() { return

} -export default SystemSettings \ No newline at end of file +export default SystemSettings; \ No newline at end of file diff --git a/src/pages/WirelessSettings.tsx b/src/pages/WirelessSettings.tsx index 28203d0..f3b083a 100644 --- a/src/pages/WirelessSettings.tsx +++ b/src/pages/WirelessSettings.tsx @@ -2,4 +2,4 @@ function WirelessName() { return

Wireless Name

} -export default WirelessName \ No newline at end of file +export default WirelessName; \ No newline at end of file diff --git a/src/styles/Login.css b/src/styles/Login.css index e69de29..4eaf2ff 100644 --- a/src/styles/Login.css +++ b/src/styles/Login.css @@ -0,0 +1,80 @@ +body { + height: 100vh; +} + +#root { + height: 100%; +} + +#login { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background-color: #071e42; + max-width: 500px; + height: 600px; + border-radius: 20px; + font-size: 1.5rem; + padding: 50px; + + h1 { + text-align: center; + font-weight: normal; + } + p { + color: #ffffffd5; + } +} + +#noinput { + color: red !important; +} + +form { + display: flex; + flex-direction: inherit; + margin-top: 20px; + max-width: 360px; + font-weight: normal; + gap: 5px; + + h2 { + font-size: 1.5rem; + font-weight: normal; + color: #ffffffd5; + } + input { + color: #ffffffb4; + border: none; + background-color: #071436; + height: 40px; + width: 360px; + border-radius: 10px; + padding: 5px; + font-size: 1rem; + } + p { + font-size: 0.8rem; + color: #ffffffd5; + max-width: fit-content; + } + a { + color: cyan; + } + button { + background-color: #071436; + border: none; + color: #fff; + margin-top: 20px; + height: 50px; + width: 100%; + border-radius: 10px; + font-size: 1.3rem; + cursor: pointer; + transition: 0.3s background-color; + } + button:hover { + background-color: #0069ff; + } +} diff --git a/src/styles/Main.css b/src/styles/Main.css index ab157d5..b66cf8b 100644 --- a/src/styles/Main.css +++ b/src/styles/Main.css @@ -1,3 +1,15 @@ +@font-face { + font-family: Poppins; + src: url(../fonts/Poppins/Poppins-Bold.ttf); + font-weight: bold; +} + +@font-face { + font-family: Poppins; + src: url(../fonts/Poppins/Poppins-Regular.ttf); + font-weight: normal; +} + * { margin: 0; padding: 0; @@ -5,6 +17,30 @@ } body { - background-color: #121212; + background-color: #071935; color: #fff; + padding: 20px; + font-family: 'Poppins', sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + + p { + float: right; + } +} + +.center { + display: flex; + align-items: center; + justify-content: center; + height: calc(100% - 40px); } \ No newline at end of file