From c1b9760502da52674bf5e85837518e65c2773edf Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Wed, 10 Oct 2018 16:58:07 +0200
Subject: [PATCH] refactor(components/Unauthenticated): use CoreUI instead of
 Tabler

---
 embark-ui/src/components/Unauthenticated.css |  3 ++
 embark-ui/src/components/Unauthenticated.js  | 53 ++++++++++++--------
 2 files changed, 34 insertions(+), 22 deletions(-)
 create mode 100644 embark-ui/src/components/Unauthenticated.css

diff --git a/embark-ui/src/components/Unauthenticated.css b/embark-ui/src/components/Unauthenticated.css
new file mode 100644
index 000000000..87c025ba1
--- /dev/null
+++ b/embark-ui/src/components/Unauthenticated.css
@@ -0,0 +1,3 @@
+.login-form {
+  margin-top: 1em;
+}
diff --git a/embark-ui/src/components/Unauthenticated.js b/embark-ui/src/components/Unauthenticated.js
index 79e653513..10ded37d7 100644
--- a/embark-ui/src/components/Unauthenticated.js
+++ b/embark-ui/src/components/Unauthenticated.js
@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React from 'react';
-import {Page, Alert, Form, Button} from "tabler-react";
+import './Unauthenticated.css';
 
 class Unauthenticated extends React.Component {
   constructor(props){
@@ -19,28 +19,37 @@ class Unauthenticated extends React.Component {
 
   render() {
     return (
-      <Page.Content>
-        {this.props.error && <Alert type="danger">
-          {this.props.error}
-        </Alert>}
-        <Form  onSubmit={(e) => this.handleSubmit(e)}>
-          <Form.Input name="host"
-                      label="Embark Host"
-                      value={this.state.host}
-                      onChange={(e) => this.handleChange(e)}
-                      placeholder="Enter Embark Host"/>
-          <Form.Input name="token"
-                      label="Token"
-                      value={this.state.token}
-                      onChange={(e) => this.handleChange(e)}
-                      placeholder="Enter Token"/>
-          <Button type="submit" color="primary">
-            Authenticate
-          </Button>
-        </Form>
-      </Page.Content>
+      <React.Fragment>
+        <h2>Login</h2>
+        <div className="login-form">
+          <form  onSubmit={(e) => this.handleSubmit(e)}>
+            <div className="form-group">
+              <label htmlFor="host">Host</label>
+              <input type="text"
+                    className="form-control form-control-lg"
+                    id="host"
+                    name="host"
+                    placeholder="Enter Embark host"
+                    onChange={(e) => this.handleChange(e)}
+                    value={this.state.host}/>
+            </div>
+            <div className="form-group">
+              <label htmlFor="token">Token</label>
+              <input type="text"
+                    className="form-control form-control-lg"
+                    id="token"
+                    name="token"
+                    placeholder="Enter token"
+                    onChange={(e) => this.handleChange(e)}
+                    value={this.state.token}/>
+              <small className="form-text text-muted">Execute <code>embark run</code> in the command line to get your token.</small>
+            </div>
+            <button type="submit" className="btn btn-pill btn-dark">Enter Cockpit</button>
+          </form>
+        </div>
+      </React.Fragment>
     );
-  } 
+  }
 }
 
 Unauthenticated.propTypes = {