Consistency fixes (#167)

Minor consistency fixes from @proddy's comments

README.md

@@ -279,7 +279,7 @@ const theme = createMuiTheme({
       main: '#666',
     },
     info: {
-      main: blueGrey[900]
+      main: blueGrey[500]
     },
     warning: {
       main: orange[500]
@@ -303,7 +303,7 @@ You can replace the app icon is located at ['interface/public/app/icon.png'](int
 
 ### Changing the app name
 
-The app name displayed on the login page and on the menu bar can be modified by editing the REACT_APP_NAME property in ['interface/.env'](interface/.env)
+The app name displayed on the sign in page and on the menu bar can be modified by editing the REACT_APP_NAME property in ['interface/.env'](interface/.env)
 
 ```ini
 REACT_APP_NAME=Funky IoT Project
@@ -641,6 +641,7 @@ Configure the WiFi SSID and password manually:
 esp8266React.getWiFiSettingsService()->update([&](WiFiSettings& wifiSettings) {
   wifiSettings.ssid = "MyNetworkSSID";
   wifiSettings.password = "MySuperSecretPassword";
+  return StateUpdateResult::CHANGED; 
 }, "myapp");
 ```
 

factory_settings.ini

@@ -6,8 +6,8 @@ build_flags =
     -D FACTORY_WIFI_HOSTNAME=\"esp-react\"
 
     ; Access point settings
-    -D FACTORY_AP_SSID=\"ESP8266-React\"
-    -D FACTORY_AP_PASSWORD=\"esp-react\"
+    -D FACTORY_AP_SSID=\"ESP8266-React\" ; 1-64 characters
+    -D FACTORY_AP_PASSWORD=\"esp-react\" ; 8-64 characters
     -D FACTORY_AP_PROVISION_MODE=AP_MODE_DISCONNECTED
 
     ; User credentials for admin and guest user

interface/package-lock.json

@@ -8553,9 +8553,9 @@
       }
     },
     "notistack": {
-      "version": "0.9.16",
-      "resolved": "https://registry.npmjs.org/notistack/-/notistack-0.9.16.tgz",
-      "integrity": "sha512-+q1KKj2XkU+mKnbp9PbVkRLSLfVYnPJGi+MHT+N9Pm3nZUMVtbjDFodwdv/RoEldvkXKCROnecayUFMwLOiIQA==",
+      "version": "0.9.17",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-0.9.17.tgz",
+      "integrity": "sha512-nypTN6sEe+q98wMaxF/UwatA1yAq948+bZOo9JKYR+tU65DW0ipWyx8DseJ3UJYvb6VDD+Fqo83qwayQ46bEEA==",
       "requires": {
         "clsx": "^1.1.0",
         "hoist-non-react-statics": "^3.3.0"

interface/package.json

@@ -18,7 +18,7 @@
     "lodash": "^4.17.15",
     "mime-types": "^2.1.25",
     "moment": "^2.26.0",
-    "notistack": "^0.9.16",
+    "notistack": "^0.9.17",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.0.1",

interface/src/SignIn.tsx

@@ -11,7 +11,7 @@ import {PasswordValidator} from './components';
 import { PROJECT_NAME, SIGN_IN_ENDPOINT } from './api';
 
 const styles = (theme: Theme) => createStyles({
-  loginPage: {
+  signInPage: {
     display: "flex",
     height: "100vh",
     margin: "auto",
@@ -20,7 +20,7 @@ const styles = (theme: Theme) => createStyles({
     flexDirection: "column",
     maxWidth: theme.breakpoints.values.sm
   },
-  loginPanel: {
+  signInPanel: {
     textAlign: "center",
     padding: theme.spacing(2),
     paddingTop: "200px",
@@ -81,7 +81,7 @@ class SignIn extends Component<SignInProps, SignInState> {
         if (response.status === 200) {
           return response.json();
         } else if (response.status === 401) {
-          throw Error("Invalid login details.");
+          throw Error("Invalid credentials.");
         } else {
           throw Error("Invalid status code: " + response.status);
         }
@@ -100,8 +100,8 @@ class SignIn extends Component<SignInProps, SignInState> {
     const { username, password, processing } = this.state;
     const { classes } = this.props;
     return (
-      <div className={classes.loginPage}>
-        <Paper className={classes.loginPanel}>
+      <div className={classes.signInPage}>
+        <Paper className={classes.signInPanel}>
           <Typography variant="h4">{PROJECT_NAME}</Typography>
           <ValidatorForm onSubmit={this.onSubmit}>
             <TextValidator

interface/src/ap/APSettingsForm.tsx

@@ -43,8 +43,8 @@ class APSettingsForm extends React.Component<APSettingsFormProps> {
               margin="normal"
             />
             <PasswordValidator
-              validators={['required', 'matchRegexp:^.{1,64}$']}
-              errorMessages={['Access Point Password is required', 'Access Point Password must be 64 characters or less']}
+              validators={['required', 'matchRegexp:^.{8,64}$']}
+              errorMessages={['Access Point Password is required', 'Access Point Password must be 8-64 characters']}
               name="password"
               label="Access Point Password"
               fullWidth

interface/src/authentication/AuthenticatedRoute.tsx

@@ -27,7 +27,7 @@ export class AuthenticatedRoute extends React.Component<AuthenticatedRouteProps>
         );
       }
       Authentication.storeLoginRedirect(location);
-      enqueueSnackbar("Please log in to continue.", { variant: 'info' });
+      enqueueSnackbar("Please sign in to continue.", { variant: 'info' });
       return (
         <Redirect to='/' />
       );

interface/src/authentication/Authentication.ts

@@ -5,8 +5,8 @@ import { Features } from '../features/types';
 import { getDefaultRoute } from '../AppRouting';
 
 export const ACCESS_TOKEN = 'access_token';
-export const LOGIN_PATHNAME = 'loginPathname';
-export const LOGIN_SEARCH = 'loginSearch';
+export const SIGN_IN_PATHNAME = 'signInPathname';
+export const SIGN_IN_SEARCH = 'signInSearch';
 
 /**
  * Fallback to sessionStorage if localStorage is absent. WebView may not have local storage enabled.
@@ -17,23 +17,23 @@ export function getStorage() {
 
 export function storeLoginRedirect(location?: H.Location) {
   if (location) {
-    getStorage().setItem(LOGIN_PATHNAME, location.pathname);
-    getStorage().setItem(LOGIN_SEARCH, location.search);
+    getStorage().setItem(SIGN_IN_PATHNAME, location.pathname);
+    getStorage().setItem(SIGN_IN_SEARCH, location.search);
   }
 }
 
 export function clearLoginRedirect() {
-  getStorage().removeItem(LOGIN_PATHNAME);
-  getStorage().removeItem(LOGIN_SEARCH);
+  getStorage().removeItem(SIGN_IN_PATHNAME);
+  getStorage().removeItem(SIGN_IN_SEARCH);
 }
 
 export function fetchLoginRedirect(features: Features): H.LocationDescriptorObject {
-  const loginPathname = getStorage().getItem(LOGIN_PATHNAME);
-  const loginSearch = getStorage().getItem(LOGIN_SEARCH);
+  const signInPathname = getStorage().getItem(SIGN_IN_PATHNAME);
+  const signInSearch = getStorage().getItem(SIGN_IN_SEARCH);
   clearLoginRedirect();
   return {
-    pathname: loginPathname || getDefaultRoute(features),
-    search: (loginPathname && loginSearch) || undefined
+    pathname: signInPathname || getDefaultRoute(features),
+    search: (signInPathname && signInSearch) || undefined
   };
 }
 

interface/src/components/FullScreenLoading.tsx

@@ -23,7 +23,7 @@ const FullScreenLoading = () => {
     <div className={classes.fullScreenLoading}>
       <CircularProgress className={classes.progress} size={100} />
       <Typography variant="h4">
-        Loading &hellip;
+        Loading&hellip;
       </Typography>
     </div>
   )

interface/src/components/RestController.tsx

@@ -84,11 +84,11 @@ export function restController<D, P extends RestControllerProps<D>>(endpointUrl:
           }
           throw Error("Invalid status code: " + response.status);
         }).then(json => {
-          this.props.enqueueSnackbar("Changes successfully applied.", { variant: 'success' });
+          this.props.enqueueSnackbar("Update successful.", { variant: 'success' });
           this.setState({ data: json, loading: false });
         }).catch(error => {
           const errorMessage = error.message || "Unknown error";
-          this.props.enqueueSnackbar("Problem saving: " + errorMessage, { variant: 'error' });
+          this.props.enqueueSnackbar("Problem updating: " + errorMessage, { variant: 'error' });
           this.setState({ data: undefined, loading: false, errorMessage });
         });
       }

interface/src/project/DemoInformation.tsx

@@ -8,16 +8,16 @@ class DemoInformation extends Component {
     return (
       <SectionContent title='Demo Information' titleGutter>
         <Typography variant="body1" paragraph>
-          This simple demo project allows you to control the blink speed of the built-in LED.
+          This simple demo project allows you to control the built-in LED.
           It demonstrates how the esp8266-react framework may be extended for your own IoT project.
         </Typography>
         <Typography variant="body1" paragraph>
-          It is recommended that you keep your project interface code under the 'project' directory.
+          It is recommended that you keep your project interface code under the project directory.
           This serves to isolate your project code from the from the rest of the user interface which should
           simplify merges should you wish to update your project with future framework changes.
         </Typography>
         <Typography variant="body1" paragraph>
-          The demo project interface code is stored in the interface/project directory:
+          The demo project interface code is stored in the 'interface/src/project' directory:
         </Typography>        
         <List>
           <ListItem>

interface/src/security/SecuritySettingsForm.tsx

@@ -35,7 +35,7 @@ class SecuritySettingsForm extends React.Component<SecuritySettingsFormProps> {
         />
         <Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
           <Typography variant="body1">
-            If you modify the JWT Secret, all users will be logged out.
+            The JWT secret is used to sign authentication tokens. If you modify the JWT Secret, all users will be signed out.
           </Typography>
         </Box>
         <FormActions>

src/LightStateService.cpp

@@ -21,8 +21,8 @@ LightStateService::LightStateService(AsyncWebServer* server,
                AuthenticationPredicates::IS_AUTHENTICATED),
     _mqttClient(mqttClient),
     _lightMqttSettingsService(lightMqttSettingsService) {
-  // configure blink led to be output
-  pinMode(BLINK_LED, OUTPUT);
+  // configure led to be output
+  pinMode(LED_PIN, OUTPUT);
 
   // configure MQTT callback
   _mqttClient->onConnect(std::bind(&LightStateService::registerConfig, this));
@@ -40,7 +40,7 @@ void LightStateService::begin() {
 }
 
 void LightStateService::onConfigUpdated() {
-  digitalWrite(BLINK_LED, _state.ledOn ? LED_ON : LED_OFF);
+  digitalWrite(LED_PIN, _state.ledOn ? LED_ON : LED_OFF);
 }
 
 void LightStateService::registerConfig() {

src/LightStateService.h

@@ -7,7 +7,7 @@
 #include <MqttPubSub.h>
 #include <WebSocketTxRx.h>
 
-#define BLINK_LED 2
+#define LED_PIN 2
 #define PRINT_DELAY 5000
 
 #define DEFAULT_LED_STATE false