Wi-Fi Hotspot UI

This commit is contained in:
Robin Davies
2024-09-12 19:12:07 -04:00
parent 66e46b8d39
commit f34ca1f0da
22 changed files with 1155 additions and 530 deletions
+39 -14
View File
@@ -366,7 +366,8 @@ export class PiPedalModel //implements PiPedalModel
clientId: number = -1;
serverVersion?: PiPedalVersion;
countryCodes: Object = {};
countryCodes: {[Name: string]: string} = {};
socketServerUrl: string = "";
varServerUrl: string = "";
lv2Path: string = "";
@@ -956,7 +957,7 @@ export class PiPedalModel //implements PiPedalModel
return response.json();
})
.then((countryCodes) => {
this.countryCodes = countryCodes as Object;
this.countryCodes = countryCodes as {[Name: string]: string};
return this.getWebSocket().request<number>("hello");
})
@@ -2556,27 +2557,33 @@ export class PiPedalModel //implements PiPedalModel
let oldSettings = this.wifiConfigSettings.get();
wifiConfigSettings = wifiConfigSettings.clone();
if ((!oldSettings.enable) && (!wifiConfigSettings.enable)) {
if ((!oldSettings.isEnabled()) && (!wifiConfigSettings.isEnabled())) {
// no effective change.
resolve();
return;
}
if (!wifiConfigSettings.enable) {
if (!wifiConfigSettings.isEnabled()) {
wifiConfigSettings.hasPassword = false;
wifiConfigSettings.hotspotName = oldSettings.hotspotName;
wifiConfigSettings.password = "";
} else {
if (wifiConfigSettings.countryCode === oldSettings.countryCode
&& wifiConfigSettings.channel === oldSettings.channel
&& wifiConfigSettings.hotspotName === oldSettings.hotspotName) {
if (!wifiConfigSettings.hasPassword) {
// no effective change.
resolve();
return;
if (wifiConfigSettings.hasPassword)
{
wifiConfigSettings.hasSavedPassword = true;
}
}
}
// save a version for the server (potentially carrying a password)
let serverConfigSettings = wifiConfigSettings.clone();
let serverConfigSettings: WifiConfigSettings;
if (wifiConfigSettings.isEnabled()) {
serverConfigSettings = wifiConfigSettings.clone();
} else {
// avoid leaking edits to the server
serverConfigSettings = oldSettings.clone();
serverConfigSettings.autoStartMode = wifiConfigSettings.autoStartMode;
wifiConfigSettings = oldSettings.clone();
wifiConfigSettings.autoStartMode = 0;
}
wifiConfigSettings.hasPassword = false;
wifiConfigSettings.password = "";
this.wifiConfigSettings.set(wifiConfigSettings);
@@ -2661,6 +2668,24 @@ export class PiPedalModel //implements PiPedalModel
return result;
}
getKnownWifiNetworks() : Promise<string[]> {
let result = new Promise<string[]>((resolve, reject) => {
if (!this.webSocket) {
reject("Connection closed.");
return;
}
this.webSocket.request<string[]>("getKnownWifiNetworks")
.then((data) => {
resolve(data);
})
.catch((err) => reject(err));
});
return result;
}
getWifiChannels(countryIso3661: string): Promise<WifiChannel[]> {
let result = new Promise<WifiChannel[]>((resolve, reject) => {
if (!this.webSocket) {
+14 -27
View File
@@ -681,6 +681,20 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
<div >
<Typography className={classes.sectionHead} display="block" variant="caption" color="secondary">CONNECTION</Typography>
<ButtonBase
className={classes.setting} disabled={!this.state.wifiConfigSettings.valid}
onClick={() => this.handleShowWifiConfigDialog()} >
<SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}>
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
Wi-Fi auto hotspot</Typography>
<Typography display="block" variant="caption" noWrap color="textSecondary">
{this.state.wifiConfigSettings.getSummaryText()}
</Typography>
</div>
</ButtonBase>
{
this.state.isAndroidHosted &&
(
@@ -699,33 +713,6 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
)
}
<ButtonBase
className={classes.setting} disabled={!this.state.wifiConfigSettings.valid}
onClick={() => this.handleShowWifiConfigDialog()} >
<SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}>
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
Wi-Fi auto hotspot</Typography>
<Typography display="block" variant="caption" noWrap color="textSecondary">
{this.state.wifiConfigSettings.getSummaryText()}
</Typography>
</div>
</ButtonBase>
<ButtonBase className={classes.setting} disabled={!this.state.wifiConfigSettings.valid}
style={{ display: "none" }}
onClick={() => this.handleShowWifiConfigDialog()} >
<SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}>
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
Configure Wi-Fi hotspot</Typography>
<Typography display="block" variant="caption" noWrap color="textSecondary">
{this.state.wifiConfigSettings.getSummaryText()}
</Typography>
</div>
</ButtonBase>
</div>
{(!this.props.onboarding) ? (
<div >
+555 -269
View File
@@ -18,17 +18,19 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import IconButton from '@mui/material/IconButton';
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import FormHelperText from '@mui/material/FormHelperText';
import Button from '@mui/material/Button';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import DialogEx from './DialogEx';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import Switch from '@mui/material/Switch';
import FormControlLabel from '@mui/material/FormControlLabel';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import WifiConfigSettings from './WifiConfigSettings';
import NoChangePassword from './NoChangePassword';
import Typography from '@mui/material/Typography';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
@@ -39,7 +41,8 @@ import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import WifiChannel from './WifiChannel';
import {PiPedalModel, PiPedalModelFactory} from './PiPedalModel';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
const styles = (theme: Theme) => createStyles({
pgraph: {
@@ -57,319 +60,602 @@ export interface WifiConfigProps extends WithStyles<typeof styles> {
}
export interface WifiConfigState {
autoStartMode: number;
showPassword: boolean;
fullScreen: boolean;
compactWidth: boolean;
compactHeight: boolean;
showWifiWarningDialog: boolean;
showHelpDialog: boolean;
wifiWarningGiven: boolean;
enabled: boolean;
name: string;
newPassword: string;
hasPassword: boolean;
nameError: boolean;
nameErrorMessage: string;
passwordError: boolean;
passwordErrorMessage: string;
homeNetworkSsid: string;
homeNetworkError: boolean;
homeNetworkErrorMessage: string;
countryCode: string;
channel: string;
knownWifiNetworks: string[];
wifiChannels: WifiChannel[];
}
let gCountryCodeOptions: { id: string, label: string }[] | undefined = undefined;
const WifiConfigDialog = withStyles(styles, { withTheme: true })(
const WifiConfigDialog = withStyles(styles, { withTheme: true })(
class extends ResizeResponsiveComponent<WifiConfigProps, WifiConfigState> {
refName: React.RefObject<HTMLInputElement>;
refPassword: React.RefObject<HTMLInputElement>;
model: PiPedalModel;
refName: React.RefObject<HTMLInputElement>;
refPassword: React.RefObject<HTMLInputElement>;
model: PiPedalModel;
constructor(props: WifiConfigProps) {
super(props);
this.model = PiPedalModelFactory.getInstance();
this.state = {
fullScreen: false,
enabled: this.props.wifiConfigSettings.enable,
name: this.props.wifiConfigSettings.hotspotName,
newPassword: "",
nameError: false,
nameErrorMessage: NBSP,
passwordError: false,
showWifiWarningDialog: false,
wifiWarningGiven: this.props.wifiConfigSettings.wifiWarningGiven,
passwordErrorMessage: NBSP,
countryCode: this.props.wifiConfigSettings.countryCode,
channel: this.props.wifiConfigSettings.channel,
wifiChannels: []
};
this.model.getWifiChannels(this.props.wifiConfigSettings.countryCode)
.then((wifiChannels_) => {
this.setState({wifiChannels: wifiChannels_});
}).catch((err)=> {});
this.refName = React.createRef<HTMLInputElement>();
this.refPassword = React.createRef<HTMLInputElement>();
}
mounted: boolean = false;
handleEnableChanged(e: any) {
this.setState({ enabled: e.target.checked });
}
onWindowSizeChanged(width: number, height: number): void {
this.setState({ fullScreen: height < 200 })
}
componentDidMount() {
super.componentDidMount();
this.mounted = true;
}
componentWillUnmount() {
super.componentWillUnmount();
this.mounted = false;
}
componentDidUpdate(prevProps: WifiConfigProps) {
if (this.props.open && !prevProps.open)
{
this.setState({
enabled: this.props.wifiConfigSettings.enable,
constructor(props: WifiConfigProps) {
super(props);
this.model = PiPedalModelFactory.getInstance();
this.state = {
showPassword: false,
fullScreen: false,
compactWidth: false,
compactHeight: false,
autoStartMode: this.props.wifiConfigSettings.autoStartMode,
name: this.props.wifiConfigSettings.hotspotName,
newPassword: "",
hasPassword: false,
nameError: false,
nameErrorMessage: NBSP,
passwordError: false,
homeNetworkSsid: this.props.wifiConfigSettings.homeNetwork,
homeNetworkError: false,
homeNetworkErrorMessage: NBSP,
showWifiWarningDialog: false,
showHelpDialog: false,
wifiWarningGiven: this.props.wifiConfigSettings.wifiWarningGiven,
passwordErrorMessage: NBSP,
countryCode: this.props.wifiConfigSettings.countryCode,
channel: this.props.wifiConfigSettings.channel
});
channel: this.props.wifiConfigSettings.channel,
knownWifiNetworks: [],
wifiChannels: []
};
this.requestWifiChannels(this.props.wifiConfigSettings.countryCode);
this.requestKnownWifiNetworks();
if (this.props.wifiConfigSettings.countryCode !== this.state.countryCode)
{
this.model.getWifiChannels(this.props.wifiConfigSettings.countryCode)
.then((wifiChannels) => {
this.setState({wifiChannels: wifiChannels});
})
.catch((error) => {});
this.refName = React.createRef<HTMLInputElement>();
this.refPassword = React.createRef<HTMLInputElement>();
}
mounted: boolean = false;
}
onWindowSizeChanged(width: number, height: number): void {
this.setState({ fullScreen: height < 200, compactWidth: width < 600, compactHeight: height < 450 })
}
}
handleOk(wifiWarningGiven: boolean) {
let hasError = false;
if (this.state.enabled)
{
let name = this.state.name;
if (name.length === 0) {
this.setState({nameError: true, nameErrorMessage: "* Required"});
hasError = true;
} else if (name.length > 31)
{
this.setState({nameError: true, nameErrorMessage: "> 31 characters"});
componentDidMount() {
super.componentDidMount();
this.mounted = true;
this.applyDeferredWifiChannels();
this.applyDeferredWifiNetworks();
}
componentWillUnmount() {
super.componentWillUnmount();
this.mounted = false;
}
private deferredWifiNetworks?: string[] = undefined;
applyDeferredWifiNetworks() {
if (this.mounted && this.deferredWifiNetworks) {
this.setState({ knownWifiNetworks: this.deferredWifiNetworks });
this.deferredWifiNetworks = undefined;
}
}
requestKnownWifiNetworks() {
this.model.getKnownWifiNetworks()
.then((networks: string[]) => {
if (this.mounted) {
this.setState({ knownWifiNetworks: networks });
} else {
this.deferredWifiNetworks = networks;
}
}).catch(() => {
});
}
private lastChannelRequestCountryCode = "";
private deferredWifiChannels?: WifiChannel[] = undefined;
applyDeferredWifiChannels() {
if (this.mounted && this.deferredWifiChannels) {
this.setState({ wifiChannels: this.deferredWifiChannels });
this.deferredWifiChannels = undefined;
}
}
requestWifiChannels(countryCode: string) {
if (countryCode === this.lastChannelRequestCountryCode) {
return;
}
this.lastChannelRequestCountryCode = countryCode;
this.model.getWifiChannels(countryCode)
.then((wifiChannels) => {
if (this.mounted) {
this.setState({ wifiChannels: wifiChannels });
} else {
}
})
.catch((error) => {
this.lastChannelRequestCountryCode = ""; // try again later. :-/
});
}
componentDidUpdate(prevProps: WifiConfigProps) {
if (this.props.open && !prevProps.open) {
this.setState({
name: this.props.wifiConfigSettings.hotspotName,
newPassword: "",
autoStartMode: this.props.wifiConfigSettings.autoStartMode,
homeNetworkSsid: this.props.wifiConfigSettings.homeNetwork,
wifiWarningGiven: this.props.wifiConfigSettings.wifiWarningGiven,
countryCode: this.props.wifiConfigSettings.countryCode,
channel: this.props.wifiConfigSettings.channel
});
this.requestKnownWifiNetworks();
this.requestWifiChannels(this.props.wifiConfigSettings.countryCode);
}
this.applyDeferredWifiChannels();
}
getDefaultPasswordValue(): string {
return (this.state.showPassword && this.state.newPassword === "") ?
"password" :
this.state.newPassword;
}
handleOk(wifiWarningGiven: boolean) {
let hasError = false;
if (this.state.autoStartMode !== 0) {
let name = this.state.name;
if (name.length === 0) {
this.setState({ nameError: true, nameErrorMessage: "* Required" });
hasError = true;
} else if (name.length > 31) {
this.setState({ nameError: true, nameErrorMessage: "> 31 characters" });
hasError = true;
}
let password = this.state.newPassword;
if (!this.props.wifiConfigSettings.hasSavedPassword && password.length === 0) {
this.setState({ passwordError: true, passwordErrorMessage: "* required" });
} else if (password.length > 0) {
if (password.length < 8) {
this.setState({ passwordError: true, passwordErrorMessage: "Less than 8 characters" });
hasError = true;
} else if (password.length > 63) {
this.setState({ passwordError: true, passwordErrorMessage: "> 63 characters" });
hasError = true;
}
}
if (this.state.autoStartMode === 2 && this.state.homeNetworkSsid.length === 0) {
this.setState({ homeNetworkError: true, homeNetworkErrorMessage: "* Required" });
hasError = true;
}
}
if (this.state.autoStartMode !== 0 && (!this.props.wifiConfigSettings.hasSavedPassword) && this.state.newPassword.length === 0) {
this.setState({ passwordError: true, passwordErrorMessage: "* Required" });
hasError = true;
}
let password = this.state.newPassword;
if (password.length > 0) {
if (password.length < 8) {
this.setState({passwordError: true, passwordErrorMessage: "Less than 8 characters"});
hasError = true;
if (!hasError) {
let wifiConfigSettings = new WifiConfigSettings();
wifiConfigSettings.valid = true;
} else if (password.length > 63) {
this.setState({passwordError: true, passwordErrorMessage: "> 63 characters"});
hasError = true;
wifiConfigSettings.autoStartMode = this.state.autoStartMode;
wifiConfigSettings.homeNetwork = this.state.homeNetworkSsid;
wifiConfigSettings.hotspotName = this.state.name;
wifiConfigSettings.countryCode = this.state.countryCode;
wifiConfigSettings.channel = this.state.channel;
if (this.state.newPassword.length === 0 || this.state.autoStartMode === 0) {
wifiConfigSettings.hasPassword = false;
} else {
wifiConfigSettings.hasPassword = true;
wifiConfigSettings.password = this.state.newPassword;
}
}
}
if (this.state.enabled && (!this.props.wifiConfigSettings.hasPassword) && this.state.newPassword.length === 0)
{
this.setState({passwordError: true, passwordErrorMessage: "* Required"});
hasError = true;
}
if (!hasError)
{
let wifiConfigSettings = new WifiConfigSettings();
wifiConfigSettings.valid = true;
wifiConfigSettings.enable = this.state.enabled;
wifiConfigSettings.hotspotName = this.state.name;
wifiConfigSettings.countryCode = this.state.countryCode;
wifiConfigSettings.channel = this.state.channel;
if (this.state.newPassword.length === 0 || !this.state.enabled)
{
wifiConfigSettings.hasPassword = false;
} else {
wifiConfigSettings.hasPassword = true;
wifiConfigSettings.password = this.state.newPassword;
}
if (!this.props.wifiConfigSettings.wifiWarningGiven && !wifiWarningGiven) {
this.setState({showWifiWarningDialog: true});
} else {
wifiConfigSettings.wifiWarningGiven = true;
this.preventPasswordPrompt();
// let preventPasswordPrompt changes settle (it's HARD to prevent a password prompt)
setTimeout(()=> {
if (!this.props.wifiConfigSettings.wifiWarningGiven && !wifiWarningGiven) {
this.setState({ showWifiWarningDialog: true });
} else {
wifiConfigSettings.wifiWarningGiven = true;
this.props.onOk(wifiConfigSettings);
},100);
}
}
}
}
preventPasswordPrompt()
{
let passwordInput = this.refPassword.current;
if (passwordInput)
{
passwordInput.type = "text";
passwordInput.value = "";
handleChannelChange(e: any) {
let value = e.target.value as string;
this.setState({ channel: value });
}
this.setState({newPassword: ""});
}
handleChannelChange(e: any)
{
let value = e.target.value as string;
this.setState({channel: value });
}
handleCountryChanged(e: any)
{
let value = e.target.value as string;
handleCountryChanged(e: any) {
let value = e.target.value as string;
this.setState({countryCode: value});
this.model.getWifiChannels(value)
.then(wifiChannels => {
this.setState({wifiChannels: wifiChannels});
})
.catch((error)=> { });
}
this.setState({ countryCode: value });
this.requestWifiChannels(value);
}
handleTogglePasswordVisibility() {
this.setState({ hasPassword: true, showPassword: !this.state.showPassword });
}
render() {
let props = this.props;
let classes = this.props.classes;
let { open, onClose} = props;
private homeNetworkSsidElement?: HTMLInputElement = undefined;
const handleClose = () => {
this.preventPasswordPrompt();
// let preventPasswordPrompt changes settle (it's HARD to prevent a password prompt)
setTimeout(()=> {
getCountryCodeValue(countryCode: string) {
let value = this.model.countryCodes[countryCode];
if (!value) return undefined;
return { label: value, id: countryCode };
}
getCountryCodeOptions(): { id: string, label: string }[] {
if (gCountryCodeOptions) {
return gCountryCodeOptions;
}
let result: { label: string, id: string }[] = [];
for (let key in this.model.countryCodes) {
let value = this.model.countryCodes[key];
result.push({ id: key, label: value });
}
result.sort((left, right) => {
return left.label.localeCompare(right.label);
});
if (result.length !== 0) {
gCountryCodeOptions = result;
}
return result;
}
render() {
let props = this.props;
let classes = this.props.classes;
let { open, onClose } = props;
const handleClose = () => {
onClose();
},100);
};
return (
<DialogEx tag="wifiConfig" open={open} fullWidth onClose={handleClose} style={{userSelect: "none"}}
fullScreen={this.state.fullScreen}
>
{ this.state.fullScreen && (
<DialogTitle>Wi-fi Hotspot</DialogTitle>
)}
<DialogContent>
<FormControlLabel
control={(
<Switch
checked={this.state.enabled}
onChange={(e: any) => this.handleEnableChanged(e)}
color="primary"
/>
)}
label="Enable"
/>
<TextField style={{ marginBottom: 16, marginTop: 16 }}
autoComplete="off"
id="name"
spellCheck="false"
label="SSID"
type="text"
fullWidth
error={this.state.nameError}
helperText={this.state.nameErrorMessage}
value={this.state.name}
onChange={(e) => this.setState({name: e.target.value, nameError: false, nameErrorMessage: NBSP})}
inputRef={this.refName}
disabled={!this.state.enabled}
/>
<div style={{ marginBottom: 16 }}>
<input type="password" style={{display:"none"}}/>
<NoChangePassword
inputRef={this.refPassword}
onPasswordChange={(text): void => { this.setState({ newPassword: text, passwordError: false, passwordErrorMessage: NBSP }); }}
hasPassword={this.props.wifiConfigSettings.hasPassword}
label="WEP Passphrase"
error={this.state.passwordError}
helperText={this.state.passwordErrorMessage}
defaultValue={this.state.newPassword}
disabled={!this.state.enabled}
/>
</div>
<div style={{ marginBottom: 16}}>
<FormControl>
<InputLabel htmlFor="countryCodeSelect">Country</InputLabel>
<Select variant="standard" id="countryCodeSelect" value={this.state.countryCode} style={{width: 220}}
onChange={(event)=>this.handleCountryChanged(event)} >
{Object.entries(this.model.countryCodes).map(([key,value])=> {
return (
<MenuItem value={key}>{value}</MenuItem>
);
})}
</Select>
</FormControl>
</div>
<div style={{ marginBottom: 24}}>
<FormControl>
<InputLabel htmlFor="channelSelect">Channel</InputLabel>
<Select variant="standard" id="channelSelect" value={this.state.channel} style={{width: 220}} onChange={(e)=>{
this.handleChannelChange(e);
}}>
{this.state.wifiChannels.map((channel)=> {
return (
<MenuItem value={channel.channelId}>{channel.channelName}</MenuItem>
)
})}
</Select>
</FormControl>
</div>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="dialogSecondary" style={{ width: 120 }}>
Cancel
</Button>
<Button onClick={()=> this.handleOk(false)} variant="dialogPrimary" style={{ width: 120 }} >
OK
</Button>
</DialogActions>
<DialogEx open={this.state.showWifiWarningDialog} tag="wifiConfirm"
style={{userSelect: "none"}}>
};
let enabled = this.state.autoStartMode !== 0;
return (
<DialogEx tag="wifiConfig" open={open} fullWidth onClose={handleClose} style={{ userSelect: "none" }}
fullScreen={this.state.fullScreen}
>
{(this.state.fullScreen || !this.state.compactHeight) && (
<DialogTitle>Wi-fi Hotspot</DialogTitle>
)}
<DialogContent>
<Typography className={classes.pgraph} variant="body2" color="textPrimary">
Enabling the Wi-Fi hotspot will disable regular Wi-Fi network access on the PiPedal device. Once
enabled, connect to the hotspot and launch http://172.23.0.2 or http://{this.state.name}.local to access the PiPedal web app again.
</Typography>
<Typography className={classes.pgraph} variant="body2" color="textPrimary" gutterBottom>
Are you sure you want to proceed?
</Typography>
<div style={
!this.state.compactWidth
? { display: "flex", gap: 16, flexDirection: "column", flexFlow: "nowrap", alignItems: "start" }
: { display: "block", gap: 16, flexDirection: "row", flexFlow: "nowrap" }
}
>
<div style={{
display: "flex", flexGrow: 1, flexBasis: 100,
gap: 16, flexDirection: "column", flexFlow: "nowrap", alignItems: "start"
}}
>
<FormControl variant="standard" style={{ flexGrow: 1, flexBasis: 1 }} >
<InputLabel htmlFor="behavior">Auto-start hotspot when</InputLabel>
<Select id="behavior" value={this.state.autoStartMode}
onChange={(el) => {
let value = el.target.value as number
this.setState({
autoStartMode: value
});
if (value === 2 && this.state.homeNetworkSsid.length === 0 && this.state.knownWifiNetworks.length !== 0) {
this.setState({
homeNetworkSsid: this.state.knownWifiNetworks[0]
});
if (this.homeNetworkSsidElement) {
this.homeNetworkSsidElement.value = this.state.knownWifiNetworks[0];
}
}
}}
>
<MenuItem value={0}>Never</MenuItem>
<MenuItem value={1}>No ethernet connection</MenuItem>
<MenuItem value={2}>Not at home</MenuItem>
<MenuItem value={3}>No remembered Wi-Fi connections</MenuItem>
<MenuItem value={4}>Always</MenuItem>
</Select>
<FormHelperText>{NBSP}</FormHelperText>
</FormControl>
{(this.state.compactWidth || this.state.autoStartMode !== 2) && (
<IconButton style={{ flexGrow: 0, flexShrink: 0, marginTop: 8 }}
onClick={() => { this.setState({ showHelpDialog: true }); }}
>
<HelpOutlineIcon />
</IconButton>
)}
</div>
<div style={{
display: this.state.autoStartMode === 2 ? "flex" : "none", gap: 16, flexGrow: 1, flexBasis: 100, flexDirection: "column", flexFlow: "nowrap", alignItems: "center",
}}>
<Autocomplete options={this.state.knownWifiNetworks}
freeSolo autoSelect={false} forcePopupIcon={true}
style={{
flexGrow: 1, marginLeft: this.state.compactWidth ? 32 : 0
}}
value={this.state.homeNetworkSsid}
onChange={(event, value): void => {
this.setState({ homeNetworkSsid: value?.toString() ?? "", homeNetworkError: false, homeNetworkErrorMessage: NBSP });
}
}
renderInput={
(params) =>
<TextField {...params} variant="standard" label="Home Network SSID"
autoComplete="off"
spellCheck="false"
error={this.state.homeNetworkError}
onChange={
(event) => {
this.setState({ homeNetworkSsid: event.target.value, homeNetworkError: false, homeNetworkErrorMessage: NBSP });
}
}
helperText={this.state.homeNetworkErrorMessage}
InputLabelProps={{
shrink: true
}}
/>}
/>
<IconButton style={{ visibility: this.state.compactWidth ? "hidden" : "visible", flexGrow: 0, flexShrink: 0 }}
onClick={() => { this.setState({ showHelpDialog: true }); }}
>
<HelpOutlineIcon />
</IconButton>
</div>
</div>
<div style={
!this.state.compactWidth
? { display: "flex", flexFlow: "row nowrap", gap: 24, alignItems: "start" }
: { display: "block" }
}>
<TextField variant="standard" style={{ marginBottom: 8, flexGrow: 1, flexBasis: 1 }}
autoComplete="off"
spellCheck="false"
error={this.state.nameError}
id="name"
label="SSID"
type="text"
fullWidth
helperText={this.state.nameErrorMessage}
value={this.state.name}
onChange={(e) => this.setState({ name: e.target.value, nameError: false, nameErrorMessage: NBSP })}
inputRef={this.refName}
InputLabelProps={{
shrink: true
}}
disabled={!enabled}
/>
<div style={{ marginBottom: 8, flexGrow: 1, flexBasis: 1 }}>
<form autoComplete='off' onSubmit={() => false}> {/*Prevents chrome from saving passwords */}
<TextField label="WEP passphrase" variant="standard"
autoComplete="off"
spellCheck="false"
fullWidth
error={this.state.passwordError}
onFocus={() => { this.setState({ hasPassword: true }) }}
type={this.state.showPassword ? "text" : "password"}
onChange={(event): void => {
this.setState({ hasPassword: true, newPassword: event.target.value.toString(), passwordError: false, passwordErrorMessage: NBSP });
}
}
helperText={this.state.passwordErrorMessage}
defaultValue={
this.getDefaultPasswordValue()
}
disabled={!enabled}
InputLabelProps={{
shrink: true
}}
InputProps={{
startAdornment:
this.props.wifiConfigSettings.hasSavedPassword && !this.state.hasPassword && !this.state.showPassword ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : ""
,
endAdornment: (
<IconButton size="small"
aria-label="toggle password visibility"
onClick={() => { this.handleTogglePasswordVisibility(); }}
>
{
(this.state.showPassword) ?
(
<VisibilityIcon fontSize="small" />
) :
(
<VisibilityOffIcon fontSize="small" />
)
}
</IconButton>
)
}}
/>
</form>
</div>
</div>
<div style={
!this.state.compactWidth
? { display: "flex", flexFlow: "row nowrap", gap: 24, alignItems: "start" }
: { display: "block" }
}>
<div style={{ display: "flex", marginBottom: 8, flexGrow: 1, flexBasis: 1 }}>
<Autocomplete fullWidth
defaultValue={this.getCountryCodeValue(this.state.countryCode)}
disableClearable={true}
onChange={(event, value) => { if (value) { this.setState({ countryCode: value.id }) } }}
options={this.getCountryCodeOptions()}
renderInput={(params) => (<TextField {...params} variant="standard" label="Regulatory Domain" />)}
/>
{/*
<Select variant="standard" label="Regulatory Domain" id="countryCodeSelect"
fullWidth value={this.state.countryCode} style={{}}
onChange={(event) => this.handleCountryChanged(event)} disabled={!enabled} >
{Object.entries(this.model.countryCodes).map(([key, value]) => {
return (
<MenuItem value={key}>{value}</MenuItem>
);
})}
</Select>
*/}
</div>
<div style={{ display: "flex", flexFlow: "column nowrap", marginBottom: 8, flexGrow: 1, flexBasis: 1 }}>
<FormControl style={{ flexGrow: 1 }} >
<InputLabel htmlFor="channelSelect">Channel</InputLabel>
<Select variant="standard" id="channelSelect" value={this.state.channel}
fullWidth
disabled={!enabled}
onChange={(e) => {
this.handleChannelChange(e);
}}>
{this.state.wifiChannels.map((channel) => {
return (
<MenuItem value={channel.channelId}>{channel.channelName}</MenuItem>
)
})}
</Select>
</FormControl>
</div>
</div>
</DialogContent>
<DialogActions>
<Button onClick={()=> this.setState({showWifiWarningDialog: false})} variant="dialogSecondary" style={{ width: 120 }}>
<Button onClick={handleClose} variant="dialogSecondary" style={{ width: 120 }}>
Cancel
</Button>
<Button onClick={()=> {
this.setState({showWifiWarningDialog: false});
this.handleOk(true);
}} variant="dialogPrimary" style={{ width: 120 }} >
PROCEED
<Button onClick={() => this.handleOk(false)} variant="dialogPrimary" style={{ width: 120 }} >
OK
</Button>
</DialogActions>
</DialogEx>
</DialogEx>
);
}
});
{this.state.showHelpDialog && (
<DialogEx open={this.state.showHelpDialog} tag="wifiHelp"
style={{ userSelect: "none" }}>
<DialogContent>
<Typography className={classes.pgraph} variant="h6" color="textPrimary">
PiPedal Auto-Hotspot
</Typography>
<Typography className={classes.pgraph} variant="body2" color="textPrimary">
The PiPedal <b><i>Auto-Hotspot</i></b> feature allows you to connect to your Raspberry Pi even if you don't have
access to a Wi-Fi router. For example, if you are performing at a live venue, you probably will not
have access to a Wi-Fi router; but you can configure PiPedal so that your Raspberry Pi automatically
starts a Wi-Fi hotspot when you are not at home. The feature is primarily intended for use with the
PiPedal Android client, but you may find it useful for other purposes as well.
</Typography>
<Typography className={classes.pgraph} variant="body2" color="textPrimary">
Raspberry Pi's are unable to run hotspots, and have another active Wi-Fi connection at the same time; so the auto-hotspot feature
automatically turns the hotspot on, when your Raspberry Pi cannot otherwise be connected to, and can be configured to
automatically turn the PiPedal hotspot off when you do want your Raspberry Pi to connect to another Wi-Fi access point.
Which auto-start option you should select depends on how you normally connect to your Raspberry Pi when you are at home.
</Typography>
<Typography className={classes.pgraph} variant="body2" color="textPrimary">
If you normally connect to your Raspberry Pi using an ethernet connection, the <b><i>No ethernet connection</i></b> is a
good choice. The PiPedal Wi-Fi hotspot will be available whenever the ethernet cable is unplugged. <b><i>Always on</i></b> is
also a good choice, but may confuse your phone or tablet, since your Android device will now have to decide whether to auto-connect to your home Wi-Fi
router, or to the Raspberry Pi hotspot. If you use the <b><i>No ethernet connection</i></b> option, your phone or tablet will
never see the PiPedal hotspot and your Wi-Fi router at the same time.
</Typography>
<Typography className={classes.pgraph} variant="body2" color="textPrimary">
If you normally connect to your Raspberry Pi through a Wi-Fi router, <b><i>Not at home</i></b> is a good choice. The
PiPedal hotspot will be automatically turned off whenever your home Wi-Fi router is in range, and automatically turned on
when you are out of range of your home Wi-Fi router.
</Typography>
<Typography className={classes.pgraph} variant="body2" color="textPrimary">
If there are multiple locations, and multiple Wi-Fi routers you use with PiPedal on a regular basis, you can select
the <b><i>No remembered Wi-Fi connections</i></b> option, but this is a riskier option. The PiPedal hotspot will be automatically turned on if there are no
Wi-Fi access points in range that you have previously connected to from your Raspberry Pi, and will be automatically turned on otherwise.
The risk is that you could find yourself unable to connect to your Raspberry Pi when performing
at a local bar, after you have used your Rasberry Pi to connect to the Wi-Fi access point at the coffee shop nextdoor. (Public Wi-Fi access
points usually won't work because devices that are connected to a public access point can't connect to each other).
Will you ever do that? Probably not. But there is some risk that you might find yourself unable to connect at a live venue. Whether that's an
acceptable risk is up to you.
</Typography>
<Typography className={classes.pgraph} variant="body2" color="textPrimary">
Typically, when you're away from home, there's no easy way to connect to your Raspberry Pi from a laptop in order to
correct the problem. So you should carefully test that your auto-hotspot configuration works as expected before you adventure
away from home with PiPedal.
</Typography>
</DialogContent>
<DialogActions>
<Button
onClick={
() => {
this.setState({ showHelpDialog: false });
}}
variant="dialogSecondary" >
Ok
</Button>
</DialogActions>
</DialogEx>
)}
{this.state.showWifiWarningDialog && (
<DialogEx open={this.state.showWifiWarningDialog} tag="wifiConfirm"
style={{ userSelect: "none" }}>
<DialogContent>
<Typography className={classes.pgraph} variant="body2" color="textPrimary">
Enabling the Wi-Fi hotspot will disable regular Wi-Fi network access on your Raspberry Pi when the PiPedal hotspot is active.
If you are relying on Wi-Fi access to connect to your Raspberry Pi, consider carefully whether your autostart options
will allow you to connect to your Raspberry Pi once applied. PiPedal
<a href="https://rerdavies.github.io/pipedal/Configuring.html" target="_blank" rel="noreferrer">
online documentation</a> provides a discussion of how to choose safe hotspot auto-start options.
</Typography>
<Typography className={classes.pgraph} variant="body2" color="textPrimary">
When you are connected to the PiPedal hotspot, you can connect to the PiPedal web server at http://10.48.0.1.
</Typography>
<Typography className={classes.pgraph} variant="body2" color="textPrimary" gutterBottom>
Are you sure you want to continue?
</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => this.setState({ showWifiWarningDialog: false })} variant="dialogSecondary" style={{ width: 120 }}>
Cancel
</Button>
<Button onClick={() => {
this.setState({ showWifiWarningDialog: false });
this.handleOk(true);
}} variant="dialogPrimary" style={{ width: 120 }} >
PROCEED
</Button>
</DialogActions>
</DialogEx>
)}
</DialogEx >
);
}
});
export default WifiConfigDialog;
+11 -11
View File
@@ -21,10 +21,12 @@
export default class WifiConfigSettings {
deserialize(input: any) : WifiConfigSettings{
this.autoStartMode = input.autoStartMode;
this.hasSavedPassword = input.hasSavedPassword;
this.homeNetwork = input.homeNetwork;
this.valid = input.valid;
this.wifiWarningGiven = input.wifiWarningGiven;
this.rebootRequired = input.rebootRequired;
this.enable = input.enable;
this.hotspotName = input.hotspotName;
this.hasPassword = input.hasPassword;
this.password = input.password;
@@ -35,29 +37,27 @@ export default class WifiConfigSettings {
clone() : WifiConfigSettings {
return new WifiConfigSettings().deserialize(this);
}
valid: boolean = true;
autoStartMode: number = 0;
hasSavedPassword: boolean = false;
homeNetwork: string = "";
wifiWarningGiven: boolean = false;
enable: boolean = true;
hasPassword: boolean = false;
rebootRequired = false;
valid: boolean = false;
hotspotName: string = "pipedal";
password: string = "";
countryCode: string = "US";
channel: string = "g6";
channel: string = "0";
isEnabled() { return this.autoStartMode !== 0;}
getSummaryText() {
let result: string;
if (!this.valid) {
result = "Not available.";
} else if (!this.enable) {
} else if (this.autoStartMode === 0) {
result = "Disabled.";
} else {
result = this.hotspotName;
}
if (this.rebootRequired)
{
result += " (Restart required)";
}
return result;
}