Changed fields order

src/request/RequestPage.tsx

@@ -25,9 +25,9 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
 
     this.state = {
       apiError: null,
-      requestInfo: { internalRequest: true },
+      requestInfo: {},
       userData: {
-        // pid: 'Internal',
+        // pid: 'Internal', // for now these values are being added to the request in RequestService.initiateRequest method
         // type: 'in',
       },
       captcha: null,
@@ -50,7 +50,7 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
       });
   }
 
-  private onRequestDataChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  private onRequestDataChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.currentTarget as HTMLInputElement;
     this.setState({ requestInfo: { ...this.state.requestInfo, [name]: value } });
   };
@@ -78,7 +78,7 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
       info.email = userData.email;
       // delete info.internalRequest;
     }
-    console.log('submit: ', UUIDs, info);
+    // console.log('submit: ', UUIDs, info);
     RequestService
       .initiateRequest(UUIDs, info as RequestInfo, captcha)
       .then((data) => {
@@ -123,6 +123,36 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
       <>
         <h1>{ t('request.title') }</h1>
         <form onSubmit={ this.onSubmit }>
+          <div className="form-group">
+            <label htmlFor="email">
+              { t(`${internalRequest ? 'request.userData' : 'request.requestInfo'}.email`) }
+            </label>
+            <input
+              id="email"
+              className="form-control"
+              name="email"
+              type="email"
+              onChange={ this.onUserDataChange }
+              value={ getValueUser('email') }
+              required
+            />
+          </div>
+          <div className="form-group">
+            <p><strong>{ t('request.internalExplanation') }</strong></p>
+            <div className="form-check">
+              <input
+                id="internalRequest"
+                className="form-check-input"
+                name="internalRequest"
+                type="checkbox"
+                onChange={ this.onCheckboxChange }
+                checked={ !!internalRequest }
+              />
+              <label htmlFor="internalRequest" className="form-check-label">
+                { t('request.requestInfo.internal') }
+              </label>
+            </div>
+          </div>
           { internalRequest && (
             <>
               <div className="form-group">
@@ -151,19 +181,6 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
               </div>
             </>
           ) }
-          <div className="form-group">
-            <label htmlFor="email">
-              { t(`${internalRequest ? 'request.userData' : 'request.requestInfo'}.email`) }
-            </label>
-            <input
-              id="email"
-              className="form-control"
-              name="email"
-              type="email"
-              onChange={ this.onUserDataChange }
-              value={ getValueUser('email') }
-            />
-          </div>
           { internalRequest && (
             <>
               <div className="form-group">
@@ -227,6 +244,7 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
                   value="1"
                   onChange={ this.onSMTAChange }
                   checked={ requestInfo.preacceptSMTA === true } // there is no default value
+                  required
                 />
                 <label htmlFor="preacceptSMTAYes" className="form-check-label">
                   { t('request.requestInfo.preacceptSMTA.yes') }
@@ -241,6 +259,7 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
                   value="0"
                   onChange={ this.onSMTAChange }
                   checked={ requestInfo.preacceptSMTA === false }
+                  required
                 />
                 <label htmlFor="preacceptSMTANo" className="form-check-label">
                   { t('request.requestInfo.preacceptSMTA.no') }
@@ -260,6 +279,7 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
                 value="0"
                 onChange={ this.onPurposeChange }
                 checked={ requestInfo.purposeType === 0 }
+                required
               />
               <label htmlFor="purposeType0" className="form-check-label">{ t('request.requestInfo.purposeType.0') }</label>
             </div>
@@ -272,6 +292,7 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
                 value="1"
                 onChange={ this.onPurposeChange }
                 checked={ requestInfo.purposeType === 1 }
+                required
               />
               <label htmlFor="purposeType1" className="form-check-label">{ t('request.requestInfo.purposeType.1') }</label>
             </div>
@@ -279,31 +300,15 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
 
           <div className="form-group">
             <label htmlFor="notes"><strong>{ t('request.requestInfo.notes') }</strong></label>
-            <input
+            <textarea
               id="notes"
               className="form-control"
               name="notes"
-              type="text"
               onChange={ this.onRequestDataChange }
               value={ getValueRequest('notes') }
+              required
             />
           </div>
-          <div className="form-group">
-            <p><strong>{ t('request.internalExplanation') }</strong></p>
-            <div className="form-check">
-              <input
-                id="internalRequest"
-                className="form-check-input"
-                name="internalRequest"
-                type="checkbox"
-                onChange={ this.onCheckboxChange }
-                checked={ internalRequest }
-              />
-              <label htmlFor="internalRequest" className="form-check-label">
-                { t('request.requestInfo.internal') }
-              </label>
-            </div>
-          </div>
           <CaptchaInput onChange={ this.onCaptchaChange } captchaClientKey={ captchaSiteKey }/>
           { apiError && <ErrorDisplay error={ apiError }/> }
           <button className="btn btn-primary mt-3" type="submit" disabled={ !captcha }>{ t('request.submit') }</button>