fix: Styled the input-fields according to reactstrap (#1568)

SignalK · Jun 24, 2023 · b56c5a9 · b56c5a9
1 parent ebeb29b
commit b56c5a9
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 28 deletions.
diff --git a/packages/server-admin-ui/package.json b/packages/server-admin-ui/package.json
@@ -1,6 +1,6 @@
   {
   "name": "@signalk/server-admin-ui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Signal K server admin webapp",
   "author": "Scott Bender, Teppo Kurki",
   "contributors": [

diff --git a/packages/server-admin-ui/src/views/security/EnableSecurity.js b/packages/server-admin-ui/src/views/security/EnableSecurity.js
@@ -11,10 +11,10 @@ import {
   Input,
   InputGroup,
   InputGroupAddon,
-  HelpBlock,
+  InputGroupText,
 } from 'reactstrap'
 import { connect } from 'react-redux'
-import { login, enableSecurity, fetchLoginStatus } from '../../actions'
+import { enableSecurity, fetchLoginStatus } from '../../actions'
 import Login from './Login'
 
 class EnableSecurity extends Component {
@@ -25,6 +25,7 @@ class EnableSecurity extends Component {
       errorMessage: null,
     }
     this.handleInputChange = this.handleInputChange.bind(this)
+    this.handleInputKeyUp = this.handleInputKeyUp.bind(this)
     this.handleClick = this.handleClick.bind(this)
   }
 
@@ -48,6 +49,11 @@ class EnableSecurity extends Component {
   handleInputChange(event) {
     this.setState({ [event.target.name]: event.target.value })
   }
+  handleInputKeyUp(event) {
+    if (event.key === 'Enter') {
+      this.handleClick()
+    }
+  }
 
   render() {
     return (
@@ -70,29 +76,35 @@ class EnableSecurity extends Component {
                           </p>
                         )}
                       {!this.props.loginStatus.securityWasEnabled && (
-                        <div>
+                        <Form>
                           <h1>Enable Security</h1>
                           <p className="text-muted">Create an admin account</p>
                           <InputGroup className="mb-3">
-                            <InputGroupAddon>
-                              <i className="icon-user" />
+                            <InputGroupAddon addonType="prepend">
+                              <InputGroupText>
+                                <i className="icon-user" />
+                              </InputGroupText>
                             </InputGroupAddon>
                             <Input
                               type="text"
                               name="username"
                               placeholder="Username"
                               onChange={this.handleInputChange}
+                              onKeyUp={this.handleInputKeyUp}
                             />
                           </InputGroup>
                           <InputGroup className="mb-4">
-                            <InputGroupAddon>
-                              <i className="icon-lock" />
+                            <InputGroupAddon addonType="prepend">
+                              <InputGroupText>
+                                <i className="icon-lock" />
+                              </InputGroupText>
                             </InputGroupAddon>
                             <Input
                               type="password"
                               name="password"
                               placeholder="Password"
                               onChange={this.handleInputChange}
+                              onKeyUp={this.handleInputKeyUp}
                             />
                           </InputGroup>
                           <Row>
@@ -118,7 +130,7 @@ class EnableSecurity extends Component {
                               </p>
                             </Col>
                           </Row>
-                        </div>
+                        </Form>
                       )}
                     </CardBody>
                   </Card>

diff --git a/packages/server-admin-ui/src/views/security/Login.js b/packages/server-admin-ui/src/views/security/Login.js
@@ -11,12 +11,12 @@ import {
   Input,
   InputGroup,
   InputGroupAddon,
-  HelpBlock,
+  InputGroupText,
   Label,
 } from 'reactstrap'
 import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
-import { login, fetchAllData } from '../../actions'
+import { login } from '../../actions'
 import Dashboard from '../Dashboard/Dashboard'
 import EnableSecurity from './EnableSecurity'
 
@@ -28,6 +28,7 @@ class Login extends Component {
       loginErrorMessage: null,
     }
     this.handleInputChange = this.handleInputChange.bind(this)
+    this.handleInputKeyUp = this.handleInputKeyUp.bind(this)
     this.handleClick = this.handleClick.bind(this)
   }
 
@@ -56,6 +57,12 @@ class Login extends Component {
     this.setState({ [event.target.name]: value })
   }
 
+  handleInputKeyUp(event) {
+    if (event.key === 'Enter') {
+      this.handleClick()
+    }
+  }
+
   render() {
     if (
       this.props.loginStatus.status === 'notLoggedIn' &&
@@ -75,25 +82,31 @@ class Login extends Component {
                         <h1>Login</h1>
                         <p className="text-muted">Sign In to your account</p>
                         <InputGroup className="mb-3">
-                          <InputGroupAddon>
-                            <i className="icon-user" />
+                          <InputGroupAddon addonType="prepend">
+                            <InputGroupText>
+                              <i className="icon-user" />
+                            </InputGroupText>
                           </InputGroupAddon>
                           <Input
                             type="text"
                             name="username"
                             placeholder="Username"
                             onChange={this.handleInputChange}
+                            onKeyUp={this.handleInputKeyUp}
                           />
                         </InputGroup>
                         <InputGroup className="mb-4">
-                          <InputGroupAddon>
-                            <i className="icon-lock" />
+                          <InputGroupAddon addonType="prepend">
+                            <InputGroupText>
+                              <i className="icon-lock" />
+                            </InputGroupText>
                           </InputGroupAddon>
                           <Input
                             type="password"
                             name="password"
                             placeholder="Password"
                             onChange={this.handleInputChange}
+                            onKeyUp={this.handleInputKeyUp}
                           />
                         </InputGroup>
                         <Row>
@@ -135,9 +148,11 @@ class Login extends Component {
                             </Button>
                           </Col>
                           <Col xs="6" className="text-right">
-                            <p className="text-danger">
-                              {this.state.loginErrorMessage}
-                            </p>
+                            {this.state.loginErrorMessage && (
+                              <p className="text-danger">
+                                {this.state.loginErrorMessage}
+                              </p>
+                            )}
                             {!this.state.loginErrorMessage &&
                               this.props.loginStatus
                                 .allowNewUserRegistration && (

diff --git a/packages/server-admin-ui/src/views/security/Register.js b/packages/server-admin-ui/src/views/security/Register.js
@@ -7,10 +7,11 @@ import {
   CardBody,
   CardFooter,
   Button,
+  Form,
   Input,
   InputGroup,
   InputGroupAddon,
-  FormText,
+  InputGroupText,
 } from 'reactstrap'
 
 class Register extends Component {
@@ -94,10 +95,12 @@ class Register extends Component {
                     </p>
                   )}
                   {!this.state.registrationSent && (
-                    <div>
+                    <Form>
                       <p className="text-muted">Create your account</p>
                       <InputGroup className="mb-3">
-                        <InputGroupAddon>@</InputGroupAddon>
+                        <InputGroupAddon addonType="prepend">
+                          <InputGroupText>@</InputGroupText>
+                        </InputGroupAddon>
                         <Input
                           name="email"
                           type="text"
@@ -106,8 +109,10 @@ class Register extends Component {
                         />
                       </InputGroup>
                       <InputGroup className="mb-3">
-                        <InputGroupAddon>
-                          <i className="icon-lock"></i>
+                        <InputGroupAddon addonType="prepend">
+                          <InputGroupText>
+                            <i className="icon-lock" />
+                          </InputGroupText>
                         </InputGroupAddon>
                         <Input
                           name="password"
@@ -116,9 +121,11 @@ class Register extends Component {
                           onChange={this.handleInputChange}
                         />
                       </InputGroup>
-                      <InputGroup className="mb-4">
-                        <InputGroupAddon>
-                          <i className="icon-lock"></i>
+                      <InputGroup className="mb-0">
+                        <InputGroupAddon addonType="prepend">
+                          <InputGroupText>
+                            <i className="icon-lock" />
+                          </InputGroupText>
                         </InputGroupAddon>
                         <Input
                           name="confirmPassword"
@@ -127,8 +134,12 @@ class Register extends Component {
                           onChange={this.handleInputChange}
                         />
                       </InputGroup>
-                      <p className="text-danger">{this.state.errorMessage}</p>
-                    </div>
+                      {this.state.errorMessage && (
+                        <p className="text-danger mt-3 mb-0">
+                          {this.state.errorMessage}
+                        </p>
+                      )}
+                    </Form>
                   )}
                 </CardBody>
                 {!this.state.registrationSent && (