Skip to content

Commit

Permalink
Use react-icons & Start with login/logout
Browse files Browse the repository at this point in the history
  • Loading branch information
anweisen committed Nov 13, 2021
1 parent 6f64653 commit b38ad76
Show file tree
Hide file tree
Showing 14 changed files with 2,221 additions and 1,812 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"react": "^17.0.2",
"react-cookie": "^4.1.1",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router": "^6.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
Expand Down
10 changes: 7 additions & 3 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom"
import { useCookies } from "react-cookie";

import "./theme.scss"
Expand All @@ -10,14 +10,18 @@ import Dashboard from "./components/Dashboard";

function App() {
const [ cookies, setCookies ] = useCookies(["host", "method", "token"]);
const cookiesSet = cookies.method != null && cookies.host != null && cookies.token != null;

console.log("hello!")

return (
<div className="App">
<Router>
{ cookies.method == null || cookies.host == null ? <Login/> : <Dashboard/> }
{/*<Dashboard></Dashboard>*/}
<Routes>
<Route path={"logout"} element={<Logout cookies={cookies} setCookies={setCookies} />} />
<Route path={"login"} element={<Login setCookies={setCookies} />} />
<Route path={"*"} element={!cookiesSet ? <Navigate to={"/login"} /> : <Dashboard/>} />
</Routes>
</Router>
</div>
);
Expand Down
91 changes: 87 additions & 4 deletions src/components/Login.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,75 @@
import { MdExpandMore } from "react-icons/md";
import { useState } from "react";
import { Navigate } from "react-router-dom";

import "./Login.scss";
import "./forms/Forms.scss";

const loginMethods = [
{
name: "Player",
fields: [
"Player Name",
"Access Token"
]
},
{
name: "Token",
fields: [
"Access Token"
]
}
]
const addressField = "Cloud Hostaddress";

function MethodFormInputs({ method, hooks }) {
const methodObject = loginMethods.find(current => current.name === method);
return methodObject.fields.map(field => <FormInput key={field} name={field} hooks={hooks} />);
}
function FormInput({ name, hooks }) {
const [ value, set ] = useState();
hooks[name] = { value: value, set: set };
return <input className={"input"} placeholder={name} onChange={event => set(event.target.value)}/>
}
function LoginSelect({ method, setMethod, hooks }) {
const [ collapsed, setCollapsed ] = useState(true);

return (
<div className={"LoginSelect"}>

<div className={"box"} onClick={event => setCollapsed(!collapsed)}>
<p className={"text"}>{method == null ? "Select Method" : method}</p>
<MdExpandMore className={"icon" + (collapsed ? "" : " rotated")}/>
</div>
<div className={"dropdown-container"}>
<span className={"dropdown" + (collapsed ? "" : " shown")}>
<div className={"dropdown-selection"}>
{loginMethods.map(method =>
<p key={method.name} onClick={event => {
setMethod(method.name);
setCollapsed(true);
}}>
{method.name}
</p>)
}
</div>
</span>
</div>
<FormInput name={addressField} hooks={hooks} />
{method != null ? <MethodFormInputs method={method} hooks={hooks} /> : null}

</div>
)
}

export default function Login({ setCookies }) {
const [ method, setMethod ] = useState();
const hooks = {};
const [ redirect, setRedirect ] = useState();

function Redirect({ to }) {
return redirect ? <Navigate to={to} /> : null;
}

return (
<div className={"Login"}>

Expand All @@ -13,12 +81,27 @@ export default function Login({ setCookies }) {
<div className={"form-container"}>
<div className={"form"}>
<h1>Login</h1>
<LoginSelect method={method} setMethod={setMethod} hooks={hooks} />
<div className={"button"} onClick={event => {
event.preventDefault();

<div>
if (method == null) return;
const host = hooks[addressField].value;

</div>
setCookies("method", method);
setCookies("host", host);

const methodObject = loginMethods.find(current => current.name === method);
let token = "";
for (const field of methodObject.fields) {
if (token.length > 0) token += ":";
token += hooks[field].value;
}
setCookies("token", token);

<a className={"button"} href={""} onClick={event => event.preventDefault()}>Login</a>
setRedirect(true);
}}>Login</div>
<Redirect to={"/"} />
</div>
</div>

Expand Down
158 changes: 123 additions & 35 deletions src/components/Login.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
justify-content: center;
align-items: center;

margin: 70px 10% 0 10%;
margin: 70px 15% 0 15%;
border-radius: 25px;
background-color: var(--navbar-background-color);

Expand All @@ -44,52 +44,140 @@

h1 {
margin-bottom: 25px;
font-size: 2em;
}
p, input {
font-size: 20px;
}

.button {
$color: #0cf;
display: inline-block;
padding: .75rem 1.45rem;
$color: #0cf;
user-select: none;
cursor: pointer;
display: inline-block;
padding: .75rem 1.65rem;
border-radius: 10rem;
color: #fff;
text-transform: uppercase;
font-size: 1rem;
letter-spacing: .15rem;
transition: all .3s;
position: relative;
overflow: hidden;
z-index: 1;
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $color;
border-radius: 10rem;
color: #fff;
text-transform: uppercase;
font-size: 1rem;
letter-spacing: .15rem;
z-index: -2;
}
&:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 100%;
background-color: darken($color, 15%);
transition: all .3s;
position: relative;
overflow: hidden;
z-index: 1;
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
border-radius: 10rem;
z-index: -1;
}
&:hover {
color: #fff;
&:before {
width: 100%;
height: 100%;
background-color: $color;
border-radius: 10rem;
z-index: -2;
}
&:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 100%;
background-color: darken($color, 15%);
transition: all .3s;
border-radius: 10rem;
z-index: -1;
}
}

.LoginSelect {
font-family: Roboto, sans-serif;
font-weight: 300;
user-select: none;
margin: 25px 0;
display: flex;
flex-direction: column;

.input {
font-size: 19px;
transition: border-bottom-color ease 0.2s;
margin-top: 10px;
padding-bottom: 7px;
border: none;
background: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);

&:focus {
border-bottom: 1px solid #fff;
}
&:first-of-type {
margin-top: 25px;
}
::placeholder {
color: var(--navbar-entry-color);
font-family: Roboto, sans-serif;
font-weight: 300;
}
&:hover {
color: #fff;
&:before {
width: 100%;
}

.box {
display: flex;
flex-direction: row;
padding-bottom: 7px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);

.text {
}
.icon {
margin-left: 5px;
align-self: center;
justify-self: right;
transform: scale(1.45);

transition: transform 0.4s;
&.rotated {
transform: scale(1.45) rotate(180deg);
}
}
}
.dropdown-container {
width: 100%;

.dropdown {
margin-top: 5px;
position: static;
display: none;
width: 100% !important;

.dropdown-selection {
background-color: var(--login-drop-down-background-color);
color: var(--navbar-entry-color-hover);
border-radius: 7px;

* {
font-size: 18px;
border-radius: 7px;
padding: 5px 10px;
&:hover {
background-color: rgba(0, 0, 0, 0.26);
}
}
}

&.shown {
display: flex;
flex-direction: column;
}
}
}

}
}
}
}
10 changes: 10 additions & 0 deletions src/components/Logout.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { Navigate } from "react-router-dom";

export default function Logout({ cookies, setCookies }) {
for (let key in cookies) {
if (key === "cookieconsent_status") continue;
setCookies(key, "", { expires: new Date(0) })
}

return <Navigate to={"/login"} />
}
15 changes: 10 additions & 5 deletions src/components/Nav.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
import { MdHome, MdPeople, MdOutlineLogout } from "react-icons/md";

import NavEntry from "./NavEntry";

import "./Nav.scss";

import { ReactComponent as people } from '../icons/people.svg'
import { ReactComponent as home } from '../icons/home.svg'

const links = [
{
name: "Overview",
path: "/",
icon: home,
icon: MdHome
},
{
name: "Players",
path: "player",
icon: people
icon: MdPeople
},
{
name: "Logout",
path: "logout",
icon: MdOutlineLogout
}
];

Expand All @@ -26,7 +31,7 @@ export default function Nav() {
<h1>DyCloud</h1>
</div>
<div className={"links"}>
{links.map(link => <NavEntry key={links.path} name={link.name} icon={link.icon} path={link.path} />)}
{links.map(link => <NavEntry key={link.path} name={link.name} icon={link.icon} path={link.path} />)}
</div>
</div>
);
Expand Down
3 changes: 1 addition & 2 deletions src/components/Nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,8 @@
}

.icon {
//width: 50px;
//height: auto;
width: 50px;
height: auto;
}
.name {
width: 100%;
Expand Down
Loading

0 comments on commit b38ad76

Please sign in to comment.