adding login screen

app/mobile/App.js

@@ -1,15 +1,14 @@
-import { StatusBar } from 'expo-status-bar';
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { AppContextProvider } from 'context/AppContext';
 import { NativeRouter } from "react-router-native";
 import { Routes, Route } from 'react-router-dom';
-import { Root } from './root/Root';
+import { Root } from 'src/root/Root';
-import { Access } from './access/Access';
+import { Access } from 'src/access/Access';
-import { Session } from './session/Session';
+import { Session } from 'src/session/Session';
-import { Admin } from './admin/Admin';
+import { Admin } from 'src/admin/Admin';
+import { AppContextProvider } from 'context/AppContext';
 
 export default function App() {
+
   return (
     <AppContextProvider>
       <NativeRouter>

app/mobile/access/Access.jsx

@@ -1,4 +0,0 @@
-export function Access({ mode }) {
-  return <></>
-}
-

app/mobile/root/Root.jsx

@@ -1,3 +0,0 @@
-export function Root() {
-  return <></>
-}

app/mobile/src/access/Access.jsx

@@ -0,0 +1,44 @@
+import { SafeAreaView, View } from 'react-native';
+import { Wrapper, Container, PaddedPane, Pane, Splash } from './Access.styled';
+import { useAccess } from './useAccess.hook';
+import { Login } from './login/Login';
+import { Create } from './create/Create';
+import logo from 'images/login.png'; 
+
+export function Access({ mode }) {
+
+  const { state, actions } = useAccess();
+
+  return (
+    <Wrapper>
+      <SafeAreaView>
+        { state.split === true && (
+          <Container>
+            <PaddedPane>
+              <Splash source={logo} />
+            </PaddedPane>
+            <Pane>
+              { mode === 'login' && (
+                <Login />
+              )}
+              { mode === 'create' && (
+                <Create />
+              )}
+            </Pane>
+          </Container>
+        )}
+        { state.split === false && (
+          <Container>
+            { mode === 'login' && (
+              <Login />
+            )}
+            { mode === 'create' && (
+              <Create />
+            )}
+          </Container>
+        )}
+      </SafeAreaView>
+    </Wrapper>
+  );
+}
+

app/mobile/src/access/Access.styled.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components/native';
+import { Colors } from 'constants/Colors';
+
+export const Wrapper = styled.View`
+  background-color: ${Colors.background};
+  width: 100%;
+  height: 100%;
+`
+
+export const Container = styled.View`
+  padding: 16px;
+  display: flex;
+  flex-direction: row;
+`
+
+export const Splash = styled.Image`
+  flex: 1;
+  width: null;
+  height: null;
+  resize-mode: contain;
+`
+
+export const Pane = styled.View`
+  width: 50%;
+  height: 100%;
+`
+
+export const PaddedPane = styled.View`
+  width: 50%;
+  height: 100%;
+  padding-right: 16px;
+`

app/mobile/src/access/create/Create.jsx

@@ -0,0 +1,4 @@
+export function Create() {
+  return <></>
+}
+

app/mobile/src/access/login/Login.jsx

@@ -0,0 +1,12 @@
+import { Wrapper, Container } from './Login.styled';
+import { Text } from 'react-native';
+
+export function Login() {
+  return (
+    <Wrapper>
+      <Container>
+        <Text>LOGIN</Text>
+      </Container>
+    </Wrapper>
+  );
+}

app/mobile/src/access/login/Login.styled.jsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components/native';
+import { Colors } from 'constants/Colors';
+
+export const Wrapper = styled.View`
+  width: 100%;
+  height: 100%;
+`
+
+export const Container = styled.View`
+  background-color: ${Colors.formBackground};
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+`

app/mobile/src/access/useAccess.hook.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+export function useAccess() {
+
+  const [state, setState] = useState({
+    split: null,
+  });
+  const dimensions = useWindowDimensions();
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    if (dimensions.width > 650) {
+      updateState({ split: true });
+    }
+    else {
+      updateState({ split: false });
+    }
+  }, [dimensions]);
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+

app/mobile/src/constants/Colors.js

@@ -0,0 +1,37 @@
+export const Colors = {
+  background: '#8fbea7',
+  primary: '#448866',
+  formBackground: '#f2f2f2',
+  formFocus: '#f8f8f8',
+  formHover: '#efefef',
+  grey: '#888888',
+  white: '#ffffff',
+  divider: '#dddddd',
+  mask: '#dddddd',
+  encircle: '#cccccc',
+  alert: '#ff8888',
+  enabled: '#444444',
+  disabled: '#aaaaaa',
+  text: '#444444',
+  link: '#0077CC',
+
+  itemDivider: '#eeeeee',
+  
+  connected: '#44cc44',
+  connecting: '#dd88ff',
+  requested: '#4488ff',
+  pending: '#22aaaa',
+  confirmed: '#aaaaaa',
+  error: '#ff4444',
+
+  profileForm: '#e8e8e8',
+  profileDivider: '#aaaaaa',
+  statsForm: '#ededed',
+  statsDivider: '#afafaf',
+  channel: '#f2f2f2',
+  card: '#eeeeee',
+
+  selectHover: '#fafafa',
+};
+
+export default Colors;

app/mobile/src/constants/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "constants"
+}

app/mobile/src/context/useAppContext.hook.js

@@ -6,7 +6,12 @@ import { addAccount } from 'api/addAccount';
 import { getUsername } from 'api/getUsername';
 
 export function useAppContext() {
-  const [state, setState] = useState({});
+  const [state, setState] = useState({
+    session: null,
+    disconnected: null,
+    server: null,
+    token: null,
+  });
   const [appRevision, setAppRevision] = useState();
 
   const delay = useRef(2);
@@ -19,7 +24,6 @@ export function useAppContext() {
 
   const resetData = () => {
     revision.current = null;
-    setState({});
   }
 
   const actions = {
@@ -38,33 +42,30 @@ export function useAppContext() {
   }
 
   const appCreate = async (username, password, token) => {
-    await addAccount(username, password, token);
+    const acc = username.split('@');
-    let access = await setLogin(username, password)
+    await addAccount(acc[0], acc[1], password, token);
-    setWebsocket(access.appToken)
+    let access = await setLogin(acc[0], acc[1], password)
-    return access.created;
+    setWebsocket(acc[1], access.appToken)
+    updateState({ session: true, token: access.appToken, server: acc[1] });
+    // store 
   } 
 
   const appLogin = async (username, password) => {
-    let access = await setLogin(username, password)
+    let access = await setLogin(acc[0], acc[1], password)
-    setWebsocket(access.appToken)
+    setWebsocket(acc[1], access.appToken)
-    return access.created;
+    updateState({ session: true, token: access.appToken, server: acc[1] });
+    // store
   }
 
   const appLogout = () => {
-    clearWebsocket()
+    clearWebsocket();
+    updateState({ session: false, });
+    // store
   }
 
-  const setWebsocket = (token) => {
+  const setWebsocket = (server, token) => {
 
-    let protocol;
+    ws.current = new WebSocket(`wss://${server}/status`);
-    if (window.location.protocol === 'http:') {
-      protocol = 'ws://';
-    }
-    else {
-      protocol = 'wss://';
-    }
-
-    ws.current = new WebSocket(protocol + window.location.host + "/status");
     ws.current.onmessage = (ev) => {
       try {
         let rev = JSON.parse(ev.data);
@@ -107,6 +108,7 @@ export function useAppContext() {
   }
 
   useEffect(() => {
+    updateState({ session: false });
     // pull store set websocket
   }, []);
 

app/mobile/src/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "src"
+}

app/mobile/src/root/Root.jsx

@@ -0,0 +1,7 @@
+import { RootWrapper } from './Root.styled';
+import { useRoot } from './useRoot.hook';
+
+export function Root() {
+  const root = useRoot();
+  return <RootWrapper />
+}

app/mobile/src/root/Root.styled.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native';
+import { Colors } from 'constants/Colors';
+
+export const RootWrapper = styled.View`
+  background-color: ${Colors.background};
+  width: 100%;
+  height: 100%;
+`

app/mobile/src/root/useRoot.hook.js

@@ -0,0 +1,30 @@
+import { useContext, useState, useEffect } from 'react';
+import { AppContext } from 'context/AppContext';
+import { useNavigate } from 'react-router-dom'
+
+export function useRoot() {
+
+  const [state, setState] = useState({});
+  const app = useContext(AppContext);
+  const navigate = useNavigate();
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+
+    if (app.state.session === true) {
+      navigate('/session');
+    }
+    if (app.state.session === false) {
+      navigate('/login');
+    }
+  }, [app]);
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+