Consistency fixes (#167)

Minor consistency fixes from @proddy's comments
This commit is contained in:
rjwats 2020-07-07 00:13:38 +01:00 committed by GitHub
parent 1f07dcdab2
commit f2b53a6d53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 38 additions and 37 deletions

View File

@ -279,7 +279,7 @@ const theme = createMuiTheme({
main: '#666', main: '#666',
}, },
info: { info: {
main: blueGrey[900] main: blueGrey[500]
}, },
warning: { warning: {
main: orange[500] 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 ### 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 ```ini
REACT_APP_NAME=Funky IoT Project REACT_APP_NAME=Funky IoT Project
@ -641,6 +641,7 @@ Configure the WiFi SSID and password manually:
esp8266React.getWiFiSettingsService()->update([&](WiFiSettings& wifiSettings) { esp8266React.getWiFiSettingsService()->update([&](WiFiSettings& wifiSettings) {
wifiSettings.ssid = "MyNetworkSSID"; wifiSettings.ssid = "MyNetworkSSID";
wifiSettings.password = "MySuperSecretPassword"; wifiSettings.password = "MySuperSecretPassword";
return StateUpdateResult::CHANGED;
}, "myapp"); }, "myapp");
``` ```

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -8,16 +8,16 @@ class DemoInformation extends Component {
return ( return (
<SectionContent title='Demo Information' titleGutter> <SectionContent title='Demo Information' titleGutter>
<Typography variant="body1" paragraph> <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. It demonstrates how the esp8266-react framework may be extended for your own IoT project.
</Typography> </Typography>
<Typography variant="body1" paragraph> <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 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. simplify merges should you wish to update your project with future framework changes.
</Typography> </Typography>
<Typography variant="body1" paragraph> <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> </Typography>
<List> <List>
<ListItem> <ListItem>

View File

@ -35,7 +35,7 @@ class SecuritySettingsForm extends React.Component<SecuritySettingsFormProps> {
/> />
<Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}> <Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
<Typography variant="body1"> <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> </Typography>
</Box> </Box>
<FormActions> <FormActions>

View File

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

View File

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