Update requirement files with new feature templates and fix backend API error message, along with mobile project config updates and documentation improvements

03_source/mobile/src/pages/Support.tsx

@@ -10,36 +10,36 @@ import {
   IonRow,
   IonCol,
   IonButton,
+  IonList,
+  IonItem,
+  IonText,
   IonTextarea,
-  useIonToast,
-  useIonViewWillEnter,
+  IonToast,
 } from '@ionic/react';
-import './Support.scss';
+import './Login.scss';
+import { connect } from '../data/connect';
 
-const Support: React.FC = () => {
-  const [present] = useIonToast();
-  const [supportMessage, setSupportMessage] = useState('');
-  const [submitted, setSubmitted] = useState(false);
+interface OwnProps {}
 
-  useIonViewWillEnter(() => {
-    present({
-      message: 'This does not actually send a support request.',
-      duration: 3000,
-    });
-  });
+interface DispatchProps {}
 
-  const submit = async (e: React.FormEvent) => {
+interface SupportProps extends OwnProps, DispatchProps {}
+
+const Support: React.FC<SupportProps> = () => {
+  const [message, setMessage] = useState('');
+  const [formSubmitted, setFormSubmitted] = useState(false);
+  const [messageError, setMessageError] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+
+  const send = (e: React.FormEvent) => {
     e.preventDefault();
-    setSubmitted(true);
-
-    if (supportMessage) {
-      setSupportMessage('');
-      setSubmitted(false);
-
-      present({
-        message: 'Your support request has been sent.',
-        duration: 3000,
-      });
+    setFormSubmitted(true);
+    if (!message) {
+      setMessageError(true);
+    }
+    if (message) {
+      setMessage('');
+      setShowToast(true);
     }
   };
 
@@ -54,40 +54,54 @@ const Support: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent>
-        <div className="support-logo">
-          <img src="/assets/img/appicon.svg" alt="Ionic Logo" />
+        <div className="login-logo">
+          <img src="assets/img/appicon.svg" alt="Ionic logo" />
         </div>
 
-        <div className="support-form">
-          <form onSubmit={submit} noValidate>
-            <IonTextarea
-              label="Enter your support message below"
-              labelPlacement="stacked"
-              fill="solid"
-              value={supportMessage}
-              name="supportQuestion"
-              rows={6}
-              errorText={
-                submitted && !supportMessage
-                  ? 'Support message is required'
-                  : ''
-              }
-              onIonInput={(e) => setSupportMessage(e.detail.value!)}
-              required
-            />
+        <form noValidate onSubmit={send}>
+          <IonList>
+            <IonItem>
+              <IonTextarea
+                label="Enter your support message below"
+                labelPlacement="stacked"
+                color="primary"
+                name="message"
+                value={message}
+                spellCheck={false}
+                autocapitalize="off"
+                rows={6}
+                onIonInput={(e) => setMessage(e.detail.value!)}
+                required
+              >
+                {formSubmitted && messageError && (
+                  <IonText color="danger" slot="error">
+                    <p>Support message is required</p>
+                  </IonText>
+                )}
+              </IonTextarea>
+            </IonItem>
+          </IonList>
 
-            <IonRow>
-              <IonCol>
-                <IonButton expand="block" type="submit">
-                  Submit
-                </IonButton>
-              </IonCol>
-            </IonRow>
-          </form>
-        </div>
+          <IonRow>
+            <IonCol>
+              <IonButton type="submit" expand="block">
+                Submit
+              </IonButton>
+            </IonCol>
+          </IonRow>
+        </form>
       </IonContent>
+
+      <IonToast
+        isOpen={showToast}
+        duration={3000}
+        message="Your support request has been sent"
+        onDidDismiss={() => setShowToast(false)}
+      />
     </IonPage>
   );
 };
 
-export default Support;
+export default connect<OwnProps, {}, DispatchProps>({
+  component: Support,
+});