Minor tweaks to the frontend (#97)

* Update NetworkSettings.tsx

Correct spelling: "Privite" -> "Private"

* Update ManuallyAddMember.tsx

Update check criteria for member IDs to allow upper case.

* Update ManageRoutes.tsx

Improve `ipv6cidrRegex` so proper IPV6 CIDR notations can pass the regex check.

For example, "2001:db8:1000::/48" would not pass the previous regex, but passes the updated regex.

Author: yonghan

webui/src/views/NetworkView/ManageRoutes.tsx

@@ -8,7 +8,7 @@ import { useClient } from '../../Client';
 export const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
 export const ipv6Regex = /^((?:[0-9A-Fa-f]{1,4}))((?::[0-9A-Fa-f]{1,4}))*::((?:[0-9A-Fa-f]{1,4}))((?::[0-9A-Fa-f]{1,4}))*|((?:[0-9A-Fa-f]{1,4}))((?::[0-9A-Fa-f]{1,4})){7}$/;
 export const ipv4cidrRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/([0-9]|[1-2][0-9]|3[0-2])$/;
-export const ipv6cidrRegex = /^((?:[0-9A-Fa-f]{1,4}))((?::[0-9A-Fa-f]{1,4}))*::((?:[0-9A-Fa-f]{1,4}))((?::[0-9A-Fa-f]{1,4}))*|((?:[0-9A-Fa-f]{1,4}))((?::[0-9A-Fa-f]{1,4})){7}\/([0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8])$/;
+export const ipv6cidrRegex = /^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:)|(([0-9A-Fa-f]{1,4}:){1,6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,5}(:[0-9A-Fa-f]{1,4}){1,2})|(([0-9A-Fa-f]{1,4}:){1,4}(:[0-9A-Fa-f]{1,4}){1,3})|(([0-9A-Fa-f]{1,4}:){1,3}(:[0-9A-Fa-f]{1,4}){1,4})|(([0-9A-Fa-f]{1,4}:){1,2}(:[0-9A-Fa-f]{1,4}){1,5})|([0-9A-Fa-f]{1,4}:((:[0-9A-Fa-f]{1,4}){1,6}))|:((:[0-9A-Fa-f]{1,4}){1,7}|:))(\/(12[0-8]|1[01][0-9]|[1-9]?[0-9]))$/;/^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:)|(([0-9A-Fa-f]{1,4}:){1,6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,5}(:[0-9A-Fa-f]{1,4}){1,2})|(([0-9A-Fa-f]{1,4}:){1,4}(:[0-9A-Fa-f]{1,4}){1,3})|(([0-9A-Fa-f]{1,4}:){1,3}(:[0-9A-Fa-f]{1,4}){1,4})|(([0-9A-Fa-f]{1,4}:){1,2}(:[0-9A-Fa-f]{1,4}){1,5})|([0-9A-Fa-f]{1,4}:((:[0-9A-Fa-f]{1,4}){1,6}))|:((:[0-9A-Fa-f]{1,4}){1,7}|:))(\/(12[0-8]|1[01][0-9]|[1-9]?[0-9]))$/
 
 
 export default () => {
@@ -94,4 +94,4 @@ export default () => {
 
 
   </Fieldset>;
-};
+};

webui/src/views/NetworkView/ManuallyAddMember.tsx

@@ -9,7 +9,7 @@ export default () => {
   const [nodeId, setNodeId] = createSignal('');
   const nodeIdValidate = createMemo(() => {
     const id = nodeId();
-    return id.length === 10 && [...id].every(c => '0123456789abcdef'.includes(c));
+    return id.length === 10 && [...id].every(c => '0123456789abcdefABCDEF'.includes(c));
   });
 
   return <Fieldset legend="Manually Add Member">

webui/src/views/NetworkView/NetworkSettings.tsx

@@ -64,7 +64,7 @@ export default () => {
           <FormControl label="Access Control" class="max-w-lg">
             <div>
               <div class="my-4">
-                <div>Privite</div>
+                <div>Private</div>
                 <input type="radio" name="radio-10" class="radio radio-primary" checked={isPrivate()} onChange={(e) => setPrivate(e.target.checked)} />
                 <div class="text-xs max-w-lg">Nodes must be authorized to become members</div>
               </div>