From 3067d8472e2a6d2837446c21ebe4ce13b5e44807 Mon Sep 17 00:00:00 2001
From: Jaco Koster
Date: Mon, 19 Jun 2023 23:11:16 +0200
Subject: [PATCH] fix: Styled the input-fields according to reactstrap
---
packages/server-admin-ui/package.json | 2 +-
.../src/views/security/EnableSecurity.js | 28 +++++++++++-----
.../src/views/security/Login.js | 33 ++++++++++++++-----
.../src/views/security/Register.js | 31 +++++++++++------
4 files changed, 66 insertions(+), 28 deletions(-)
diff --git a/packages/server-admin-ui/package.json b/packages/server-admin-ui/package.json
index 065711825..89bb7c7b9 100644
--- 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
index 7a434f851..4a26a6ddc 100644
--- 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 {
)}
{!this.props.loginStatus.securityWasEnabled && (
-
+
)}
diff --git a/packages/server-admin-ui/src/views/security/Login.js b/packages/server-admin-ui/src/views/security/Login.js
index 39a32662b..9353cae52 100644
--- 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 {
Login
Sign In to your account
-
-
+
+
+
+
-
-
+
+
+
+
@@ -135,9 +148,11 @@ class Login extends Component {
-
- {this.state.loginErrorMessage}
-
+ {this.state.loginErrorMessage && (
+
+ {this.state.loginErrorMessage}
+
+ )}
{!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
index 592998615..ee9045e90 100644
--- 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 {
)}
{!this.state.registrationSent && (
-
+ {this.state.errorMessage && (
+
+ {this.state.errorMessage}
+
+ )}
+
)}
{!this.state.registrationSent && (