diff --git a/ui/src/console/login/Login.js b/ui/src/console/login/Login.js
index 88e639e4..0ebc8281 100644
--- a/ui/src/console/login/Login.js
+++ b/ui/src/console/login/Login.js
@@ -1,5 +1,6 @@
import {useState} from "react";
import * as account from '../../api/account';
+import {Button, Container, Form, Row} from "react-bootstrap";
const Login = (props) => {
const [email, setEmail] = useState('');
@@ -10,6 +11,7 @@ const Login = (props) => {
const handleSubmit = async e => {
e.preventDefault()
+ console.log(email, password);
account.login({body: {"email": email, "password": password}})
.then(resp => {
@@ -34,16 +36,45 @@ const Login = (props) => {
return (
-
-
zrok
- {message}
-
+
+
+
+
+
+ zrok
+
+
+
+
+ {message}
+
+
+
+ { setMessage(null); setEmail(t.target.value); }}
+ value={email}
+ />
+
+
+
+ { setMessage(null); setPassword(t.target.value); }}
+ value={password}
+ />
+
+
+
+
+
+
+
+
+
)
}
diff --git a/ui/src/index.css b/ui/src/index.css
index ac0419fa..36d63c1b 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -62,142 +62,37 @@ code, pre {
margin-bottom: 25px;
}
-/*
-#zrok-enable {
- text-align: center;
- margin-top: 100px;
-}
-#zrok-enable h1 {
- margin-bottom: 50px;
-}
-
-.container {
- display: grid;
- margin-left: 10%;
- margin-right: 10%;
-}
-
.fullscreen {
- background-color: #3b2693;
- text-align: center;
- padding: 25px;
- color: white;
- display: flex;
- flex-direction: column;
- align-items: center;
- height: 100vh;
- justify-content: center;
+ background-color: #3b2693;
+ padding: 25px;
+ color: white;
+ display: flex;
+ align-items: center;
+ height: 100vh;
}
+
+.fullscreen .row {
+ text-align: center;
+ justify-content: center;
+}
+
.fullscreen h1 {
- font-size: 64pt;
-}
-.fullscreen fieldset {
- width: 500px;
- border-radius: 25px;
-}
-.fullscreen label {
- text-align: right;
- width: 100px;
- float: left;
- font-family: 'Russo One', sans-serif;
- margin-right: 10px;
-}
-.fullscreen fieldset legend {
- font-family: 'Russo One', sans-serif;
-}
-.fullscreen fieldset p {
- clear: both;
- padding: 5px;
-}
-.fullscreen input {
- width: 300px;
- float: left;
-}
-.fullscreen p a {
- color: white;
- font-weight: bold;
+ font-size: 96pt;
}
-.header {
- background-color: #3b2693;
- color: white;
- padding-left: 2em;
- padding-right: 2em;
- display: flex;
- align-items: center;
- border-radius: 0 0 25px 25px;
-}
-.header-title {
- font-family: 'Russo One', sans-serif;
- font-size: 3em;
- margin-left: 0.53em;
- border: 1px solid red;
-}
-.header-status {
- width: 100%;
- display: grid;
- grid-template-rows: 1fr 1fr;
-}
-.header-status div p {
- font-size: 75%;
-}
-.header-status div {
- text-align: right;
-}
-.header-controls {
- display: flex;
- justify-content: right;
- align-items: flex-end;
-}
-.header-controls button {
- margin-left: 30px;
- display: flex;
- align-items: center;
- background-color: #30205d;
- border-radius: 5px 5px 5px 5px;
- border: 1px solid #7733ff;
- color: #7733ff;
- padding: 5px;
- width: 100px;
- justify-content: center;
- height: 2em;
- margin-bottom: 1em;
-}
-.header-controls button:hover {
- color: white;
- border-color: white;
+.fullscreen-body {
+ margin-top: 6em;
}
-.main {
- padding: 2em;
+.fullscreen form {
+ margin: 15px;
}
-.rdt_TableCol_Sortable div {
- font-family: 'Russo One', sans-serif;
- font-size: 1.25em;
-}
-
-.network {
- height: 400px;
-}
-
-.react-flow__attribution {
- display: none;
-}
-
-.nested-services {
- padding-left: 10em;
-}
-
-.popover {
- padding: 0 25px;
-}
-
-svg.flowNode {
- vertical-align: middle;
+.fullscreen form input {
+ margin: 15px 0;
+ width: 400px;
}
.errorMessage {
- color: deeppink;
+ color: deeppink;
}
-*/
\ No newline at end of file