martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

preparing login screen

Browse Source
This commit is contained in:
Roland Osborne 2022-08-03 13:20:10 -07:00
parent 6c61854593
commit c01a6e6e8f
10 changed files with 142 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/web/public/index.html
View File

@ -26,7 +26,7 @@
-->
<title>Databag</title>
</head>
<body>
<body style="background-color:#8fbea7;">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--

23
net/web/src/App.js
View File

@ -1,4 +1,7 @@
import login from './login.png';
import 'antd/dist/antd.min.css';
import { HashRouter as Router, Routes, Route } from "react-router-dom";
import { AppContextProvider } from 'context/AppContext';
import { AccountContextProvider } from 'context/AccountContext';
import { ProfileContextProvider } from 'context/ProfileContext';
@ -9,7 +12,10 @@ import { ChannelContextProvider } from 'context/ChannelContext';
import { StoreContextProvider } from 'context/StoreContext';
import { UploadContextProvider } from 'context/UploadContext';
import { ViewportContextProvider } from 'context/ViewportContext';
import 'antd/dist/antd.min.css';
import { AppWrapper } from 'App.styled';
import { Root } from './root/Root';
import { Login } from './login/Login';
function App() {
@ -24,11 +30,14 @@ function App() {
<StoreContextProvider>
<ViewportContextProvider>
<AppContextProvider>
<div style={{ position: 'absolute', width: '100vw', height: '100vh', backgroundColor: '#8fbea7' }}>
<img src={login} alt="" style={{ position: 'absolute', width: '33%', bottom: 0, right: 0 }}/>
</div>
<div style={{ position: 'absolute', width: '100vw', height: '100vh' }}>
</div>
<AppWrapper>
<Router>
<Routes>
<Route path="/" element={ <Root /> } />
<Route path="/login" element={ <Login /> } />
</Routes>
</Router>
</AppWrapper>
</AppContextProvider>
</ViewportContextProvider>
</StoreContextProvider>

8
net/web/src/App.styled.js Normal file
View File

@ -0,0 +1,8 @@
import styled from 'styled-components';
import Colors from 'constants/Colors';
export const AppWrapper = styled.div`
position: absolute;
width: 100vw;
height: 100vh;
`;

5
net/web/src/constants/Colors.js Normal file
View File

@ -0,0 +1,5 @@
const Colors = {
background: '#8fbea7',
};
export default Colors;

108
net/web/src/context/useAppContext.hook.js
View File

@ -14,7 +14,7 @@ import { StoreContext } from './StoreContext';
import { UploadContext } from './UploadContext';
export function useAppContext() {
const [state, setState] = useState(null);
const [state, setState] = useState({});
const [appRevision, setAppRevision] = useState();
const delay = useRef(2);
@ -45,63 +45,13 @@ export function useAppContext() {
setState({});
}
const userActions = {
const actions = {
logout: () => {
appLogout(updateState, clearWebsocket);
storeContext.actions.clear();
uploadContext.actions.clear();
resetData();
},
}
const adminActions = {
logout: () => {
appLogout(updateState, clearWebsocket);
resetData();
}
}
const appCreate = async (username, password, token) => {
await addAccount(username, password, token);
let access = await setLogin(username, password)
updateState({ token: access.appToken, access: 'user' });
storeContext.actions.setValue('login:timestamp', access.created);
setWebsocket(access.appToken)
localStorage.setItem("session", JSON.stringify({
token: access.appToken,
access: 'user',
timestamp: access.created,
}));
return access.created;
}
const appLogin = async (username, password) => {
let access = await setLogin(username, password)
updateState({ token: access.appToken, access: 'user' });
storeContext.actions.setValue('login:timestamp', access.created);
setWebsocket(access.appToken)
localStorage.setItem("session", JSON.stringify({
token: access.appToken,
access: 'user',
timestamp: access.created,
}));
return access.created;
}
const appAccess = async (token) => {
let access = await setAccountAccess(token)
updateState({ token: access, access: 'user' });
setWebsocket(access)
localStorage.setItem("session", JSON.stringify({ token: access, access: 'user' }));
}
function appLogout(updateState) {
updateState({ token: null, access: null });
clearWebsocket()
localStorage.removeItem("session");
}
const accessActions = {
access: async (token) => {
await appAccess(token, updateState, setWebsocket)
},
@ -115,6 +65,44 @@ export function useAppContext() {
available: getAvailable,
}
const appCreate = async (username, password, token) => {
await addAccount(username, password, token);
let access = await setLogin(username, password)
updateState({ access: access.appToken });
storeContext.actions.setValue('login:timestamp', access.created);
setWebsocket(access.appToken)
localStorage.setItem("session", JSON.stringify({
token: access.appToken,
timestamp: access.created,
}));
return access.created;
}
const appLogin = async (username, password) => {
let access = await setLogin(username, password)
updateState({ access: access.appToken });
storeContext.actions.setValue('login:timestamp', access.created);
setWebsocket(access.appToken)
localStorage.setItem("session", JSON.stringify({
token: access.appToken,
timestamp: access.created,
}));
return access.created;
}
const appAccess = async (token) => {
let access = await setAccountAccess(token)
updateState({ access });
setWebsocket(access)
localStorage.setItem("session", JSON.stringify({ token: access }));
}
const appLogout = () => {
updateState({ access: null });
clearWebsocket()
localStorage.removeItem("session");
}
useEffect(() => {
if (appRevision) {
accountContext.actions.setRevision(appRevision.account);
@ -156,7 +144,7 @@ export function useAppContext() {
ws.current.onopen = () => {}
ws.current.onerror = () => {}
setWebsocket(token);
if (delay.current < 60) {
if (delay.current < 15) {
delay.current += 1;
}
}
@ -182,10 +170,8 @@ export function useAppContext() {
if (storage != null) {
try {
const session = JSON.parse(storage)
if (session?.access === 'admin') {
setState({ token: session.token, access: session.access })
} else if (session?.access === 'user') {
setState({ token: session.token, access: session.access })
if (session?.token) {
setState({ token: session.token })
setWebsocket(session.token);
} else {
setState({})
@ -203,13 +189,7 @@ export function useAppContext() {
if (state == null) {
return {};
}
if (state.access === 'user') {
return { state, actions: userActions }
}
if (state.access === 'admin') {
return { state, actions: adminActions }
}
return { state, actions: accessActions }
return { state, actions }
}

10
net/web/src/context/useViewportContext.hook.js
View File

@ -3,18 +3,18 @@ import { useEffect, useState } from 'react';
export function useViewportContext() {
const [state, setState] = useState({ });
const SMALL_MEDIUM = 600;
const MEDIUM_LARGE = 1600
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
};
const handleResize = () => {
console.log(window.innerWidth);
console.log(window.innerHeight);
if (window.innerWidth < 600) {
if (window.innerWidth < SMALL_MEDIUM) {
updateState({ display: 'small' });
}
else if (window.innerWidth < 1600) {
else if (window.innerWidth < MEDIUM_LARGE) {
updateState({ display: 'medium' });
}
else {
@ -28,7 +28,7 @@ export function useViewportContext() {
return () => window.removeEventListener('resize', handleResize)
}, []);
return state
return { state, actions: {} }
}

BIN
net/web/src/login.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 256 KiB

35
net/web/src/login/Login.jsx Normal file
View File

@ -0,0 +1,35 @@
import React, { useContext, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { AppContext } from 'context/AppContext';
import { ViewportContext } from 'context/ViewportContext';
import { LoginWrapper } from './Login.styled';
export function Login() {
const navigate = useNavigate();
const app = useContext(AppContext);
const viewport = useContext(ViewportContext);
useEffect(() => {
if (app.state) {
if (app.state.access) {
navigate('/user');
}
}
}, [app]);
return (
<LoginWrapper>
{ viewport.state.display === 'large' && (
<div>LARGE</div>
)}
{ viewport.state.display === 'medium' && (
<div>MEDIUM</div>
)}
{ viewport.state.display === 'small' && (
<div>SMALL</div>
)}
</LoginWrapper>
);
}

5
net/web/src/login/Login.styled.js Normal file
View File

@ -0,0 +1,5 @@
import styled from 'styled-components';
import Colors from 'constants/Colors';
export const LoginWrapper = styled.div`
`;

23
net/web/src/root/Root.jsx Normal file
View File

@ -0,0 +1,23 @@
import React, { useContext, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { AppContext } from 'context/AppContext';
export function Root() {
const navigate = useNavigate();
const app = useContext(AppContext);
useEffect(() => {
if (app.state) {
if (app.state.access) {
navigate('/user');
}
else {
navigate('/login');
}
}
}, [app]);
return <></>
}