Hotspot UI

react/CMakeLists.txt

@@ -82,6 +82,20 @@ add_custom_command(
         src/NoChangePassword.tsx
         src/XxxSnippet.tsx
 
+        public/css/roboto.css
+        public/fonts/Roboto-BlackItalic.woff2
+        public/fonts/Roboto-Black.woff2
+        public/fonts/Roboto-BoldItalic.woff2
+        public/fonts/Roboto-Bold.woff2
+        public/fonts/Roboto-Italic.woff2
+        public/fonts/Roboto-LightItalic.woff2
+        public/fonts/Roboto-Light.woff2
+        public/fonts/Roboto-MediumItalic.woff2
+        public/fonts/Roboto-Medium.woff2
+        public/fonts/Roboto-Regular.woff2
+        public/fonts/Roboto-ThinItalic.woff2
+        public/fonts/Roboto-Thin.woff2
+
         public/iso_codes.json
         public/logo512.png
         public/index.html

react/public/css/roboto.css

@@ -0,0 +1,29 @@
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(/fonts/Roboto-Light.woff2) format('woff2');
+  }
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/fonts/Roboto-Regular.woff2) format('woff2');
+  }
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/fonts/Roboto-Medium.woff2) format('woff2');
+  }
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/fonts/Roboto-Bold.woff2) format('woff2');
+}
+  

react/public/index.html

@@ -9,7 +9,11 @@
       name="description"
       content="PiPedal Guitar Pedals"
     />
+    <!--
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    -->
+    <link rel="stylesheet" href="/css/roboto.css" />
+    
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

react/src/LoadPluginDialog.tsx

@@ -28,7 +28,7 @@ export type CloseEventHandler = () => void;
 export type OkEventHandler = (pluginUri: string) => void;
 
 const NARROW_DISPLAY_THRESHOLD = 600;
-const FILTER_STORAGE_KEY = "com.twoplay.piddle.load_dlg.filter";
+const FILTER_STORAGE_KEY = "com.twoplay.pipedal.load_dlg.filter";
 
 
 const pluginGridStyles = (theme: Theme) => createStyles({

react/src/LoadPluginDialogBackup.tsx

@@ -29,7 +29,7 @@ export type CloseEventHandler = () => void;
 export type OkEventHandler = (pluginUri: string) => void;
 
 const NARROW_DISPLAY_THRESHOLD = 600;
-const FILTER_STORAGE_KEY = "com.twoplay.piddle.load_dlg.filter";
+const FILTER_STORAGE_KEY = "com.twoplay.pipedal.load_dlg.filter";
 
 const Transition = React.forwardRef(function Transition(
     props: TransitionProps & { children?: React.ReactElement },

react/src/NoChangePassword.tsx

@@ -19,6 +19,7 @@ interface NoChangePasswordProps {
     disabled?: boolean;
     helperText?: string;
     error?: boolean;
+    inputRef?: React.RefObject<any>
 };
 
 interface NoChangePasswordState {
@@ -88,6 +89,7 @@ class NoChangePassword extends React.Component<NoChangePasswordProps, NoChangePa
                     color="primary"
                     spellCheck="false"
                     autoComplete="off"
+                    inputRef={this.props.inputRef}
                     readOnly
                     id="standard-adornment-password"
                     onChange={(e) => this.handleChange(e)}

react/src/PedalBoard.tsx

@@ -2,8 +2,8 @@ import { PiPedalArgumentError } from './PiPedalError';
 import MidiBinding from './MidiBinding';
 
 
-const SPLIT_PEDALBOARD_ITEM_URI = "uri://two-play/piddle/pedalboard#Split";
-const EMPTY_PEDALBOARD_ITEM_URI = "uri://two-play/piddle/pedalboard#Empty";
+const SPLIT_PEDALBOARD_ITEM_URI = "uri://two-play/pipedal/pedalboard#Split";
+const EMPTY_PEDALBOARD_ITEM_URI = "uri://two-play/pipedal/pedalboard#Empty";
 
 
 interface Deserializable<T> {

react/src/PedalBoardView.tsx

@@ -16,8 +16,8 @@ import {
     PedalBoard, PedalBoardItem, PedalBoardSplitItem, SplitType,
 } from './PedalBoard';
 
-const START_PEDALBOARD_ITEM_URI = "uri://two-play/piddle/pedalboard#Start";
-const END_PEDALBOARD_ITEM_URI = "uri://two-play/piddle/pedalboard#End";
+const START_PEDALBOARD_ITEM_URI = "uri://two-play/pipedal/pedalboard#Start";
+const END_PEDALBOARD_ITEM_URI = "uri://two-play/pipedal/pedalboard#End";
 
 const ENABLED_CONNECTOR_COLOR = "#666";
 const DISABLED_CONNECTOR_COLOR = "#CCC";

react/src/PiPedalModel.tsx

@@ -599,20 +599,18 @@ class PiPedalModelImpl implements PiPedalModel {
 
     }
 
-    maxUploadSize: number = 512*1024;
+    maxUploadSize: number = 512 * 1024;
 
     requestConfig(): Promise<boolean> {
         const myRequest = new Request(this.varRequest('config.json'));
         return fetch(myRequest)
             .then(
-                (response) => 
-                {
+                (response) => {
                     return response.json();
                 }
             )
             .then(data => {
-                if (data.max_upload_size)
-                {
+                if (data.max_upload_size) {
                     this.maxUploadSize = data.max_upload_size;
                 }
                 let { socket_server_port, socket_server_address } = data;
@@ -622,7 +620,7 @@ class PiPedalModelImpl implements PiPedalModel {
                 if (!socket_server_port) socket_server_port = 8080;
                 let socket_server = this.makeSocketServerUrl(socket_server_address, socket_server_port);
                 let var_server_url = this.makeVarServerUrl("http", socket_server_address, socket_server_port);
-                
+
 
                 this.socketServerUrl = socket_server;
                 this.varServerUrl = var_server_url;
@@ -684,8 +682,8 @@ class PiPedalModelImpl implements PiPedalModel {
                     })
                     .then(data => {
                         this.wifiConfigSettings.set(new WifiConfigSettings().deserialize(data));
-        
-        
+
+
                         return this.getWebSocket().request<any>("getJackServerSettings");
                     })
                     .then(data => {
@@ -1421,8 +1419,7 @@ class PiPedalModelImpl implements PiPedalModel {
     uploadPreset(file: File, uploadAfter: number): Promise<number> {
         let result = new Promise<number>((resolve, reject) => {
             try {
-                if (file.size > this.maxUploadSize) 
-                {
+                if (file.size > this.maxUploadSize) {
                     reject("File is too large.");
                 }
                 let url = this.varServerUrl + "uploadPreset";
@@ -1436,7 +1433,7 @@ class PiPedalModelImpl implements PiPedalModel {
                         body: file,
                         headers: {
                             'Content-Type': 'application/json',
-                        },                        
+                        },
                     }
                 )
                     .then((response: Response) => {
@@ -1460,26 +1457,24 @@ class PiPedalModelImpl implements PiPedalModel {
         });
         return result;
     }
-    setWifiConfigSettings(wifiConfigSettings: WifiConfigSettings): Promise<void>
-    {
-        let result = new Promise<void>((resolve,reject) =>{
+    setWifiConfigSettings(wifiConfigSettings: WifiConfigSettings): Promise<void> {
+        let result = new Promise<void>((resolve, reject) => {
             let oldSettings = this.wifiConfigSettings.get();
             wifiConfigSettings = wifiConfigSettings.clone();
 
-            if ((!oldSettings.enable) && (!wifiConfigSettings.enable))
-            {
+            if ((!oldSettings.enable) && (!wifiConfigSettings.enable)) {
                 // no effective change.
                 resolve();
                 return;
             }
-            let countryCodeChanged = wifiConfigSettings.countryCode !== oldSettings.countryCode;
-            if (!wifiConfigSettings.enable)
-            {
+            if (!wifiConfigSettings.enable) {
                 wifiConfigSettings.hasPassword = false;
                 wifiConfigSettings.hotspotName = oldSettings.hotspotName;
             } else {
-                if (!wifiConfigSettings.hasPassword) {
-                    if (wifiConfigSettings.hotspotName === oldSettings.hotspotName && !countryCodeChanged) {
+                if (wifiConfigSettings.countryCode === oldSettings.countryCode
+                    && wifiConfigSettings.channel === oldSettings.channel
+                    && wifiConfigSettings.hotspotName === oldSettings.hotspotName) {
+                    if (!wifiConfigSettings.hasPassword) {
                         // no effective change.
                         resolve();
                         return;
@@ -1488,13 +1483,14 @@ class PiPedalModelImpl implements PiPedalModel {
             }
             // save a  version for the server (potentially carrying a password)
             let serverConfigSettings = wifiConfigSettings.clone();
+            wifiConfigSettings.password = "";
+            this.wifiConfigSettings.set(wifiConfigSettings);
+
 
-            
 
             // notify the server.
             let ws = this.webSocket;
-            if (!ws)
-            {
+            if (!ws) {
                 reject("Not connected.");
                 return;
             }
@@ -1502,29 +1498,28 @@ class PiPedalModelImpl implements PiPedalModel {
                 "setWifiConfigSettings",
                 serverConfigSettings
             )
-            .then(()=> {
-                resolve();
-            })
-            .catch((err) =>{
-                reject(err);
-            });
+                .then(() => {
+                    resolve();
+                })
+                .catch((err) => {
+                    reject(err);
+                });
 
         });
         return result;
     }
 
-    getWifiChannels(countryIso3661: string): Promise<WifiChannel[]>
-    {
-        let result = new Promise<WifiChannel[]>((resolve,reject) => {
+    getWifiChannels(countryIso3661: string): Promise<WifiChannel[]> {
+        let result = new Promise<WifiChannel[]>((resolve, reject) => {
             if (!this.webSocket) {
                 reject("Connection closed.");
                 return;
             }
-            this.webSocket.request<WifiChannel[]>("getWifiChannels",countryIso3661)
-            .then((data) => {
-                resolve(WifiChannel.deserialize_array(data));
-            })
-            .catch((err)=> reject(err));
+            this.webSocket.request<WifiChannel[]>("getWifiChannels", countryIso3661)
+                .then((data) => {
+                    resolve(WifiChannel.deserialize_array(data));
+                })
+                .catch((err) => reject(err));
         });
         return result;
     }

react/src/SettingsDialog.tsx

@@ -483,9 +483,9 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                     <div style={{ width: "100%" }}>
                                         {
                                             this.state.restarting ? (
-                                                <Typography className={classes.primaryItem} display="block" variant="body2" color="textSecondary" noWrap>Restarting...</Typography>
+                                                <Typography className={classes.primaryItem} display="block" variant="body2" color="textSecondary" noWrap>Rebooting...</Typography>
                                             ) : (
-                                                <Typography className={classes.primaryItem} display="block" variant="body2" noWrap>Restart</Typography>
+                                                <Typography className={classes.primaryItem} display="block" variant="body2" noWrap>Reboot</Typography>
                                             )
                                         }
                                     </div>

react/src/WifiConfigDialog.tsx

@@ -52,11 +52,6 @@ export interface WifiConfigState {
 };
 
 
-let validNameRegex = /^[a-zA-Z][a-zA-Z0-9_-]*$/
-function isValidName(text: string)
-{
-    return validNameRegex.test(text);
-}
 
 const WifiConfigDialog = withStyles(styles, { withTheme: true })( 
     class extends ResizeResponsiveComponent<WifiConfigProps, WifiConfigState> {
@@ -105,7 +100,10 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
         this.stateWasPopped = true;
         let shouldClose = (!e.state || !e.state.WifiConfig);
         if (shouldClose) {
-            this.props.onClose();
+            this.preventPasswordPrompt();
+            setTimeout(()=> {
+                this.props.onClose();
+            });
         }
     }
 
@@ -193,16 +191,23 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
             if (name.length === 0) {
                 this.setState({nameError: true, nameErrorMessage: "* Required"});
                 hasError = true;
-            } else {
-                if (!isValidName(name))
-                {
-                    this.setState({nameError: true, nameErrorMessage: "Invalid name"});
+            } else if (name.length > 31) 
+            {
+                this.setState({nameError: true, nameErrorMessage: "> 31 characters"});
+                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;
-                } else if (name.length > 15) 
-                {
-                    this.setState({nameError: true, nameErrorMessage: "> 15 characters"});
+
+                } else if (password.length > 63) {
+                    this.setState({passwordError: true, passwordErrorMessage: "> 63 characters"});
                     hasError = true;
+
                 }
+
             }
         }
         if (this.state.enabled && (!this.props.wifiConfigSettings.hasPassword) && this.state.newPassword.length === 0)
@@ -229,11 +234,23 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
                 this.setState({showWifiWarningDialog: true});
             } else {
                 wifiConfigSettings.wifiWarningGiven = true;
-                this.props.onOk(wifiConfigSettings);
+                this.preventPasswordPrompt();
+                setTimeout(()=> {
+                    this.props.onOk(wifiConfigSettings);
+                });
             }
         }
     
     }
+    preventPasswordPrompt()
+    {
+        let passwordInput = this.refPassword.current;
+        if (passwordInput)
+        {
+            passwordInput.value = "";
+            passwordInput.type = "text";
+        }
+    }
     handleChannelChange(e: any)
     {
         let value = e.target.value as string;
@@ -257,7 +274,10 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
         let { open, onClose} = props;
 
         const handleClose = () => {
-            onClose();
+            this.preventPasswordPrompt();
+            setTimeout(()=> {
+                onClose();
+            });
         };
 
         return (
@@ -295,7 +315,9 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
                         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"