Componentize tooltips, added username field to login form.

src/App.js

@@ -4,6 +4,7 @@ import React, {useState,useEffect,useReducer} from 'react';
 import useGlobalKeyDown from 'react-global-key-down-hook'
 import Toggle from 'react-toggle' //Tooltip props: http://aaronshaf.github.io/react-toggle/
 import Helmet from 'react-helmet'
+import { ExpandTooltip } from './components/ExpandTooltip';
 
 import {XSquareFill, PlusCircle, LifePreserver, Server, CloudUploadFill} from 'react-bootstrap-icons'
 
@@ -573,7 +574,7 @@ function LoginForm(p) {
 	const [username,setUsername] = useState("")
 	const [password,setPassword] = useState("")
 	const [rememberMe,setRememberMe] = useState(false)
-	return <>Login Form here.</>
+	return <><ExpandTooltip id="tooltip-username" tooltip="Enter a username (4-20 characters, alphanumeric characters only)"><label className="formField" for="username">Username:</label><input id="username" value={username} onChange={(p)=>{setUsername(p.currentTarget.value)}} placeholder="Username"/></ExpandTooltip></>
 }
 
 

src/TestPanel.js

@@ -1,7 +1,7 @@
 import React, { useEffect,useState,useRef } from 'react';
-import ReactTooltip from 'react-tooltip' //https://wwayne.github.io/react-tooltip/
 import Modal from 'react-modal'
 import { DisplayIcon } from './DEFAULTS';
+import { ExpandTooltip } from './components/ExpandTooltip';
 
 /**
  * Hook that alerts clicks outside of the passed ref
@@ -79,19 +79,6 @@ function PageControl(p) {
 		</ul>
 }
 
-function ExpandTooltip(p) {
-	return <><span data-tip data-for={p.id}>{p.children}</span><ReactTooltip id={p.id} className="xTooltip" overridePosition={ (
-    { left, top },
-    currentEvent, currentTarget, node) => {
-  const d = document.documentElement;
-  left = Math.min(d.clientWidth - node.clientWidth, left);
-  top = Math.min(d.clientHeight - node.clientHeight, top);
-  left = Math.max(0, left);
-  top = Math.max(0, top);
-  return { top, left }
-} }>{p.tooltip}</ReactTooltip></>
-}
-
 function Class(p) {
   const CLASSES = p.GetData("class")
 	const class_obj = CLASSES[p.name]

src/components/ExpandTooltip.js

@@ -0,0 +1,16 @@
+import ReactTooltip from 'react-tooltip' //https://wwayne.github.io/react-tooltip/
+
+function ExpandTooltip(p) {
+	return <><span data-tip data-for={p.id}>{p.children}</span><ReactTooltip id={p.id} className="xTooltip" overridePosition={ (
+    { left, top },
+    currentEvent, currentTarget, node) => {
+  const d = document.documentElement;
+  left = Math.min(d.clientWidth - node.clientWidth, left);
+  top = Math.min(d.clientHeight - node.clientHeight, top);
+  left = Math.max(0, left);
+  top = Math.max(0, top);
+  return { top, left }
+} }>{p.tooltip}</ReactTooltip></>
+}
+
+export {ExpandTooltip}

src/style.css

@@ -1236,4 +1236,7 @@ p.adminNav hr {
 	width: 124px;
 	box-sizing: content-box;
 	border-style: solid;
+}
+.formField{
+	font-weight:bold;
 }