From 53556b40efd3830b8ab79df52bc46e4c7aa4b980 Mon Sep 17 00:00:00 2001 From: CodeServer Date: Thu, 7 Apr 2022 23:49:27 +0100 Subject: [PATCH] finished login --- env/local.env | 3 +- src/App.tsx | 13 +-- src/CheckENVRoute.tsx | 16 ++++ src/ProtectedRoute.tsx | 10 +-- src/api/axios.tsx | 8 +- src/components/ErrorENV.tsx | 9 ++ src/components/Home.tsx | 7 +- src/components/Login.tsx | 125 ++++++++++++++++++++++++++++ src/components/RegistryURL.tsx | 5 +- src/context/AuthProvider.tsx | 10 ++- src/hooks/useAuth.tsx | 4 +- src/style/modules/_login.sass | 21 +++++ src/style/modules/_modules-dir.sass | 3 +- src/style/modules/_sectionHome.sass | 1 + src/style/modules/_sectionMain.sass | 1 - src/style/style.css | 31 +++++++ src/style/style.css.map | 5 +- src/utils.tsx | 18 ++++ 18 files changed, 261 insertions(+), 29 deletions(-) create mode 100644 src/CheckENVRoute.tsx create mode 100644 src/components/ErrorENV.tsx create mode 100644 src/components/Login.tsx create mode 100644 src/style/modules/_login.sass create mode 100644 src/style/modules/_sectionHome.sass delete mode 100644 src/style/modules/_sectionMain.sass create mode 100644 src/utils.tsx diff --git a/env/local.env b/env/local.env index 66434b1..eb557c1 100644 --- a/env/local.env +++ b/env/local.env @@ -1 +1,2 @@ -ENV=local \ No newline at end of file +ENV=local +REGISTRY_URL=https://registry.docker.cofan.cloud \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index b36f16d..414693f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,20 @@ import React from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import CheckENVRoute from "./CheckENVRoute"; import Home from "./components/Home"; +import Login from "./components/Login"; import ProtectedRoute from "./ProtectedRoute"; const App: React.FC = () => { return ( - {/* } /> - }> - } /> - */} - } /> + }> + } /> + }> + } /> + + ); diff --git a/src/CheckENVRoute.tsx b/src/CheckENVRoute.tsx new file mode 100644 index 0000000..b23a05e --- /dev/null +++ b/src/CheckENVRoute.tsx @@ -0,0 +1,16 @@ +import { Outlet } from "react-router-dom"; +import ErrorENV from "./components/ErrorENV" +import React from "react"; + +const CheckENVRoute: React.FC = () => { + + return process.env.REGISTRY_URL ? ( + <> + + + ) : ( + + ); +}; + +export default CheckENVRoute; \ No newline at end of file diff --git a/src/ProtectedRoute.tsx b/src/ProtectedRoute.tsx index 4e82ce6..79ea547 100644 --- a/src/ProtectedRoute.tsx +++ b/src/ProtectedRoute.tsx @@ -1,19 +1,13 @@ import { useLocation, Outlet, Navigate } from "react-router-dom"; import useAuth from "./hooks/useAuth"; -import { Box } from "@mui/material"; -import React from "react"; const ProtectedRoute = () => { const auth = useAuth(); const location = useLocation(); - return auth?.isLoggedIn ? ( + return ((auth.loginNeeded !== undefined && !auth.loginNeeded) || auth?.isLoggedIn) ? ( <> - - - - - + ) : ( diff --git a/src/api/axios.tsx b/src/api/axios.tsx index 95c1dc8..493fd3d 100644 --- a/src/api/axios.tsx +++ b/src/api/axios.tsx @@ -1,7 +1,11 @@ import axios from "axios"; -export default (url: string) => { +const axiosAlt = (url: string) => { return axios.create({ baseURL: url + "/v2" }) -}; \ No newline at end of file +}; + +export default axiosAlt(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : ""); + +export { axiosAlt }; \ No newline at end of file diff --git a/src/components/ErrorENV.tsx b/src/components/ErrorENV.tsx new file mode 100644 index 0000000..a4250d6 --- /dev/null +++ b/src/components/ErrorENV.tsx @@ -0,0 +1,9 @@ +import React from "react"; + +const Home: React.FC = () => { + return( +

Environment variable REGISTRY_URL not set!

+ ); +}; + +export default Home; \ No newline at end of file diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 69888ea..f84dfbc 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -1,9 +1,12 @@ import React from "react"; -import RegistryURL from "./RegistryURL"; +import axios from "../api/axios"; const Home: React.FC = () => { + + + return( - +

Home

); }; diff --git a/src/components/Login.tsx b/src/components/Login.tsx new file mode 100644 index 0000000..d4431c6 --- /dev/null +++ b/src/components/Login.tsx @@ -0,0 +1,125 @@ +import { useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; +import { InputLabel, Stack, Typography } from "@mui/material"; +import Container from "@mui/material/Container"; +import TextField from "@mui/material/TextField"; +import Button from "@mui/material/Button"; +import LoginIcon from "@mui/icons-material/Login"; +import useAuth from "../hooks/useAuth"; +import axios from "../api/axios"; + +interface LocationState { + from: { pathname: string }; +} +const Login: React.FC = () => { + const setAuth = useAuth(); + + const navigate = useNavigate(); + const location = useLocation(); + const state = location.state as LocationState; + const from = state?.from?.pathname || "/"; + + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [hasError, setHasError] = useState(false); + + const handleSkipLogin = () => { + setAuth["loginNeeded"] = false; + setAuth["isLoggedIn"] = false; + navigate(from, { replace: true }); + } + + const handleLogin = async (e: React.SyntheticEvent) => { + e.preventDefault(); + + try { + + const response = await axios.get( + "/", + { + // headers: { + // 'Content-Type': 'application/json', + // 'Authorization': 'Basic dXNlcjp1c2Vy' + // } + auth: { + username: username, + password: password + } + } + ); + + const status = response?.status; + + if (status === undefined) { + setHasError(true); + } else { + setAuth["loginNeeded"] = true + setAuth["isLoggedIn"] = true; + setAuth["username"] = username; + setAuth["password"] = password; + setHasError(false); + navigate(from, { replace: true }); + console.log("logged in!"); + } + } catch (error) { + console.log(error); + setHasError(true); + } + setUsername(username); + setPassword(""); + }; + + return ( + + + Login to Docker Registry + { + setUsername(event.target.value); + }} + /> + { + setPassword(event.target.value); + }} + /> + + + + + + + ); +}; + +export default Login; \ No newline at end of file diff --git a/src/components/RegistryURL.tsx b/src/components/RegistryURL.tsx index badd9ff..e3da7a1 100644 --- a/src/components/RegistryURL.tsx +++ b/src/components/RegistryURL.tsx @@ -16,8 +16,7 @@ const RegistryURL: React.FC = () => { e.preventDefault(); try { - let axoisInstance = axios(registryURL); - // axoisInstance.interceptors.response.use( + // axios.interceptors.response.use( // response => response, // error => { // if (error.response.status === 401) { @@ -28,7 +27,7 @@ const RegistryURL: React.FC = () => { // return error; // } // ); - let response = await axoisInstance.get( + let response = await axios.get( `/` ); console.log(registryURL); diff --git a/src/context/AuthProvider.tsx b/src/context/AuthProvider.tsx index 793946c..48a149e 100644 --- a/src/context/AuthProvider.tsx +++ b/src/context/AuthProvider.tsx @@ -1,17 +1,21 @@ import { createContext, useState } from "react"; interface loginInfo { - uuid: string; + loginNeeded: boolean; isLoggedIn: boolean; + username: string; + password: string; } const AuthContext = createContext({ - uuid: "", + loginNeeded: true, isLoggedIn: false, + username: "", + password: "" }); export const AuthProvider = ({ children }: { children: React.ReactNode }) => { - const [auth] = useState({ uuid: "", isLoggedIn: false }); + const [auth] = useState({ loginNeeded: true, isLoggedIn: false, username: "", password: "" }); return {children}; }; diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx index 17bf4f8..2602ce8 100644 --- a/src/hooks/useAuth.tsx +++ b/src/hooks/useAuth.tsx @@ -2,8 +2,10 @@ import { useContext } from "react"; import AuthContext from "../context/AuthProvider"; interface loginInfo { - uuid: string; + loginNeeded: boolean; isLoggedIn: boolean; + username: string; + password: string; } const useAuth = () => { diff --git a/src/style/modules/_login.sass b/src/style/modules/_login.sass new file mode 100644 index 0000000..c6dfd90 --- /dev/null +++ b/src/style/modules/_login.sass @@ -0,0 +1,21 @@ +.login + .grid-container + align-items: center + margin: auto + margin-top: 20% + max-width: 40% !important + > * + width: 98% + margin: 0.5% 0 + .login-label + display: inline-block + text-align: center + margin: 5% 0 + font-size: 200% + .login-btn + margin: 5% 0 + width: 40% + // background-color: #ed7f88 + .skip-login-btn + margin: 5% 0 + background-color: #ed7f88 diff --git a/src/style/modules/_modules-dir.sass b/src/style/modules/_modules-dir.sass index 0a2d5e9..a8d3bb8 100644 --- a/src/style/modules/_modules-dir.sass +++ b/src/style/modules/_modules-dir.sass @@ -1,2 +1,3 @@ -@import "sectionMain" +@import "sectionHome" +@import "login" @import "URL" \ No newline at end of file diff --git a/src/style/modules/_sectionHome.sass b/src/style/modules/_sectionHome.sass new file mode 100644 index 0000000..d1eb1d8 --- /dev/null +++ b/src/style/modules/_sectionHome.sass @@ -0,0 +1 @@ +.sectionHome \ No newline at end of file diff --git a/src/style/modules/_sectionMain.sass b/src/style/modules/_sectionMain.sass deleted file mode 100644 index 79f3e4c..0000000 --- a/src/style/modules/_sectionMain.sass +++ /dev/null @@ -1 +0,0 @@ -.sectionMain \ No newline at end of file diff --git a/src/style/style.css b/src/style/style.css index d6cd1b2..25019aa 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -6,6 +6,37 @@ a { text-decoration: none; } +.login .grid-container { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: auto; + margin-top: 20%; + max-width: 40% !important; +} + +.login .grid-container > * { + width: 98%; + margin: 0.5% 0; +} + +.login .grid-container .login-label { + display: inline-block; + text-align: center; + margin: 5% 0; + font-size: 200%; +} + +.login .grid-container .login-btn { + margin: 5% 0; + width: 40%; +} + +.login .grid-container .skip-login-btn { + margin: 5% 0; + background-color: #ed7f88; +} + .get-url { max-width: 70%; margin: auto; diff --git a/src/style/style.css.map b/src/style/style.css.map index 7ab4121..7206994 100644 --- a/src/style/style.css.map +++ b/src/style/style.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AMlD5B,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;CAEU;;AAL7B,AAII,QAJI,CAIJ,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;CAAG", + "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AMlD5B,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAeS;;AApB1C,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,YAAY,CAAC;EACT,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;CAAG;;AAb9B,AAcQ,MAdF,CACF,eAAe,CAaX,UAAU,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;CACpB;;AAjBF,AAkBQ,MAlBF,CACF,eAAe,CAiBX,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;CAAG;;ACpBxC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;CAEU;;AAL7B,AAII,QAJI,CAIJ,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;CAAG", "sources": [ "style.sass", "_variables.sass", @@ -10,7 +10,8 @@ "layouts/_header.sass", "layouts/_footer.sass", "modules/_modules-dir.sass", - "modules/_sectionMain.sass", + "modules/_sectionHome.sass", + "modules/_login.sass", "modules/_URL.sass" ], "names": [], diff --git a/src/utils.tsx b/src/utils.tsx new file mode 100644 index 0000000..22cc42a --- /dev/null +++ b/src/utils.tsx @@ -0,0 +1,18 @@ +import axios from "./api/axios" + +const checkValidURL = async (url: string) => { + try { + let response = await axios.get( + `/` + ); + console.log(url); + } catch (error: any) { + console.log(error); + if (error.response !== undefined) { + return false; + } + } + return true; +} + +export { checkValidURL }; \ No newline at end of file