rendering login page

net/server/internal/routers.go

@@ -43,7 +43,7 @@ func NewRouter() *mux.Router {
 			Handler(handler)
 	}
 
-  fs := http.FileServer(http.Dir("/data/web/"))
+  fs := http.FileServer(http.Dir("/data/databag/net/web/build/"))
   router.PathPrefix("/").Handler(http.StripPrefix("/", fs))
 
 	return router

net/web/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "antd": "^4.19.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",

net/web/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

net/web/src/App.js

@@ -1,23 +1,38 @@
-import logo from './logo.svg';
+import React, { useState } from 'react'
-import './App.css';
+import login from './login.png';
+import { Input, Button } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+
+import 'antd/dist/antd.css'; 
 
 function App() {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+
+  const onLogin = () => {
+    console.log(username)
+    console.log(password)
+  }
+
+  const onCreate = () => {
+    console.log("create account")
+  }
+
   return (
-    <div className="App">
+    <div style={{ width: '100%', height: '100vh', backgroundColor: '#8fbea7' }}>
-      <header className="App-header">
+      <img src={login} style={{ position: 'absolute', width: '33%', bottom: 0, right: 0 }}/>
-        <img src={logo} className="App-logo" alt="logo" />
+      <div style={{ position: 'absolute', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', top: 0, left: 0, width: '100%', height: '67%' }}>
-        <p>
+        <div style={{ backgroundColor: '#ffffff', display: 'flex', flexDirection: 'column', padding: '16px', borderRadius: '8px' }}>
-          Edit <code>src/App.js</code> and save to reload.
+          <div style={{ textAlign: 'center', fontSize: '24px', fontWeight: 'bold', color: '#555555' }}>indicom</div>
-        </p>
+          <div style={{ fontSize: '12px', borderBottom: '1px solid black', color: '#444444', paddingLeft: '16px', paddingRight: '16px' }}>
-        <a
+            <span>Communication for the Decentralized Web</span>
-          className="App-link"
+          </div>
-          href="https://reactjs.org"
+          <Input size="large" onChange={(e) => setUsername(e.target.value)} placeholder="username" prefix={<UserOutlined />} style={{ marginTop: '16px' }} />
-          target="_blank"
+          <Input.Password size="large" onChange={(e) => setPassword(e.target.value)} placeholder="password" prefix={<LockOutlined />} style={{ marginTop: '16px' }} />
-          rel="noopener noreferrer"
+          <Button type="primary" onClick={onLogin} style={{ marginTop: '16px' }}>Sign In</Button> 
-        >
+        </div>
-          Learn React
+        <Button type="link" onClick={onCreate} style={{ marginTop: '4px', color: '#000044' }}>Create Account</Button> 
-        </a>
+      </div>
-      </header>
     </div>
   );
 }