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

combining login and create pages

Browse Source
This commit is contained in:
Roland Osborne 2022-08-03 23:28:09 -07:00
parent 05da046297
commit 9e0fec2596
3 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ import { ViewportContextProvider } from 'context/ViewportContext';
import { AppWrapper } from 'App.styled'; import { AppWrapper } from 'App.styled';
import { Root } from './root/Root'; import { Root } from './root/Root';
import { Login } from './login/Login'; import { Access } from './access/Access';
function App() { function App() {
@ -34,7 +34,8 @@ function App() {
<Router> <Router>
<Routes> <Routes>
<Route path="/" element={ <Root /> } /> <Route path="/" element={ <Root /> } />
<Route path="/login" element={ <Login /> } /> <Route path="/login" element={ <Access mode="login" /> } />
<Route path="/create" element={ <Access mode="create" /> } />
</Routes> </Routes>
</Router> </Router>
</AppWrapper> </AppWrapper>

10
net/web/src/login/Login.jsx → net/web/src/access/Access.jsx
View File

@ -2,11 +2,11 @@ import React, { useContext, useEffect } from 'react';
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { AppContext } from 'context/AppContext'; import { AppContext } from 'context/AppContext';
import { ViewportContext } from 'context/ViewportContext'; import { ViewportContext } from 'context/ViewportContext';
import { LoginWrapper } from './Login.styled'; import { AccessWrapper } from './Access.styled';
import login from 'images/login.png' import login from 'images/login.png'
export function Login() { export function Access({ mode }) {
const navigate = useNavigate(); const navigate = useNavigate();
const app = useContext(AppContext); const app = useContext(AppContext);
@ -21,13 +21,13 @@ export function Login() {
}, [app]); }, [app]);
return ( return (
<LoginWrapper> <AccessWrapper>
{ (viewport.state.display === 'large' || viewport.state.display === 'xlarge') && ( { (viewport.state.display === 'large' || viewport.state.display === 'xlarge') && (
<div class="split-layout"> <div class="split-layout">
<div class="left"> <div class="left">
<img class="splash" src={login} alt={login} /> <img class="splash" src={login} alt={login} />
</div> </div>
<div class="right">RIGHT</div> <div class="right">{ mode }</div>
</div> </div>
)} )}
{ (viewport.state.display === 'medium' || viewport.state.display === 'small') && ( { (viewport.state.display === 'medium' || viewport.state.display === 'small') && (
@ -35,7 +35,7 @@ export function Login() {
<div class="center"></div> <div class="center"></div>
</div> </div>
)} )}
</LoginWrapper> </AccessWrapper>
); );
} }

2
net/web/src/login/Login.styled.js → net/web/src/access/Access.styled.js
View File

@ -1,7 +1,7 @@
import styled from 'styled-components'; import styled from 'styled-components';
import Colors from 'constants/Colors'; import Colors from 'constants/Colors';
export const LoginWrapper = styled.div` export const AccessWrapper = styled.div`
height: 100%; height: 100%;
.full-layout { .full-layout {