use a few more pf-core components

chrismeyersfsu · Sep 27, 2018 · b2ebbc6 · b2ebbc6
1 parent d926378
commit b2ebbc6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 24 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <title>AWX</title>
+    <title>AWX</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/Login.jsx b/src/components/Login.jsx
@@ -1,7 +1,11 @@
 import React, { Component } from 'react';
 import { Redirect } from 'react-router-dom';
 
-import { Button } from '@patternfly/react-core';
+import {
+  Bullseye,
+  Button,
+  TextInput
+} from '@patternfly/react-core';
 
 import api from '../api';
 
@@ -12,7 +16,9 @@ class Login extends Component {
     redirect: false,
   };
 
-  handleChange = event => this.setState({ [event.target.name]: event.target.value });
+  handleUsernameChange = value => this.setState({ username: value });
+
+  handlePasswordChange = value => this.setState({ password: value });
 
   handleSubmit = event => {
     const { username, password } = this.state;
@@ -31,35 +37,31 @@ class Login extends Component {
     }
 
     return (
-      <form onSubmit={this.handleSubmit}>
-        <div className="field">
-          <label htmlFor="username">
-            Username
-            <input
-              id="username"
+      <Bullseye>
+        <form onSubmit={this.handleSubmit}>
+          <div>
+            <TextInput
+              aria-label="Username"
               name="username"
               type="text"
-              onChange={this.handleChange}
+              onChange={this.handleUsernameChange}
               value={username}
             />
-          </label>
-        </div>
-        <div>
-          <label htmlFor="password">
-            Password
-            <input
-              id="password"
+          </div>
+          <div>
+            <TextInput
+              aria-label="Password"
               name="password"
               type="password"
-              onChange={this.handleChange}
+              onChange={this.handlePasswordChange}
               value={password}
             />
-          </label>
-        </div>
-        <Button type="submit">
-          Login
-        </Button>
-      </form>
+          </div>
+          <Button type="submit">
+            Login
+          </Button>
+        </form>
+      </Bullseye>
     );
   }
 }