Move to strict checking

Change page title

packages/webapp/src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import { FormattedMessage } from 'react-intl'
 
 const logo = require('../images/logo-text.svg')

packages/webapp/src/components/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { Link } from 'react-router-dom'
 

packages/webapp/src/components/LoginPage.tsx

@@ -1,13 +1,14 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
+import { Link } from 'react-router-dom'
 
 import Header from './Header'
 import Footer from './Footer'
+import SubmitButton from './SubmitButton'
 
 const css = require('../css/login.css')
 
 
-
 const ConfigStatusMessage = (props: any) => {
   const enabled = props.enabled
   let result;
@@ -27,7 +28,7 @@ const ConfigStatusMessage = (props: any) => {
 const LoginError = (props: any) => {
   // @Todo: This must be reviewed to be based on navigation state.
   // Login error example: http://localhost:8080/c/login?login.error=2
-  const errorCode: string = new URLSearchParams(window.location.search).get('login_error');
+  const errorCode = new URLSearchParams(window.location.search).get('login_error');
 
   let result;
   if (errorCode) {
@@ -46,7 +47,6 @@ const LoginError = (props: any) => {
   return (<span>{result}</span>);
 
 }
-
 const LoginForm = () => {
   const intl = useIntl();
 
@@ -66,15 +66,20 @@ const LoginForm = () => {
             <input name="_spring_security_login.remberme" id="staySignIn" type="checkbox" />
             <label htmlFor="staySignIn"><FormattedMessage id="login.remberme" defaultMessage="Remember me" /></label>
           </div>
-          <input type="submit" value={intl.formatMessage({ id: "login.signin", defaultMessage: "Sign In" })} />
+          <SubmitButton value={intl.formatMessage({ id: "login.signin", defaultMessage: "Sign In" })}/>
         </form>
-        <a href="/c/user/resetPassword"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></a>
+        <Link to="/c/user/resetPassword"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></Link>
       </div>
     </div>
   );
 }
 
 const LoginPage = (props: any) => {
+
+  useEffect(() => {
+    document.title = 'Login - WiseMapping';
+  });
+
   return (
     <div>
       <Header type='only-signup' />

packages/webapp/src/components/RegistrationPage.tsx

@@ -1,12 +1,13 @@
-import React, { useState, } from 'react'
+import React, { useState, useEffect} from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
-import ReCAPTCHA from "react-google-recaptcha";
-import { useHistory } from "react-router-dom";
-import { Service, NewUser } from '../services/Service';
+import ReCAPTCHA from "react-google-recaptcha"
+import { useHistory } from "react-router-dom"
+import { Service, NewUser } from '../services/Service'
 
 
-import Header from './Header';
-import Footer from './Footer';
+import Header from './Header'
+import Footer from './Footer'
+import SubmitButton from './SubmitButton'
 
 const css = require('../css/registration.css');
 
@@ -31,35 +32,39 @@ type RegistrationBody = {
   firstName: string;
   lastName: string;
   password: string;
-  recaptcha: string;
+  recaptcha: string | null;
 }
 const RegistrationForm = (props: ServiceProps) => {
-  const [email, setEmail] = useState(undefined);
-  const [lastName, setLastname] = useState(undefined)
-  const [firstName, setFirstname] = useState(undefined);
-  const [password, setPassword] = useState(undefined);
-  const [recaptchaToken, setRecaptchaToken] = useState(undefined);
-  const [errorMsg, setErrorMsg] = useState(undefined);
+  const [email, setEmail] = useState("");
+  const [lastName, setLastname] = useState("")
+  const [firstName, setFirstname] = useState("");
+  const [password, setPassword] = useState("");
+  const [recaptchaToken, setRecaptchaToken] = useState<string | null>("");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const [disableButton, setDisableButton] = useState(false);
 
   const history = useHistory();
   const intl = useIntl();
 
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
+    setDisableButton(true);
+
     const user: NewUser =
     {
       email: email,
       firstname: firstName,
       lastname: lastName,
       password: password,
-      recaptcha: recaptchaToken
+      recaptcha: String(recaptchaToken)
     };
 
     // Call Service ...
     props.service.registerNewUser(
       user,
       () => history.push("/c/user/registrationSuccess"),
-      (msg) => setErrorMsg(msg)
+      (msg) => { setErrorMsg(msg); setDisableButton(false); }
     );
   }
 
@@ -80,12 +85,14 @@ const RegistrationForm = (props: ServiceProps) => {
               sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
               onChange={setRecaptchaToken} />
           </div>
+
           <ErrorMessageDialog message={errorMsg} />
 
           <p>
             <FormattedMessage id="registration.termandconditions" defaultMessage="Terms of Service: Please check the WiseMapping Account information you've entered above, and review the Terms of Service here. By clicking on 'Register' below you are agreeing to the Terms of Service above and the Privacy Policy" />
           </p>
-          <input type="submit" value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
+
+          <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
         </form>
       </div>
     </div>
@@ -97,6 +104,11 @@ type ServiceProps = {
   service: Service
 }
 const RegistationFormPage = (props: ServiceProps) => {
+
+  useEffect(() => {
+    document.title = 'Registration | WiseMapping';
+  });
+
   return (
     <div>
       <Header type='only-signin' />
@@ -107,6 +119,7 @@ const RegistationFormPage = (props: ServiceProps) => {
 }
 
 const RegistrationSuccessPage = (props: any) => {
+  
   return (
     <div>
       <Header type='only-signup' />
@@ -121,6 +134,6 @@ const RegistrationSuccessPage = (props: any) => {
   );
 }
 
-export { RegistationFormPage, RegistrationSuccessPage };
+export { RegistationFormPage, RegistrationSuccessPage }
 
 

packages/webapp/src/components/SubmitButton.tsx

@@ -0,0 +1,29 @@
+import React, { useState, useEffect} from 'react'
+import { useIntl } from 'react-intl'
+
+type SubmitButton = {
+    value: string;
+    disabled?: boolean;
+}
+const SubmitButton = (props: SubmitButton) => {
+    const [disabled, setDisabled] = useState(props.disabled ? true : false);
+    const intl = useIntl();
+
+    useEffect(() => {
+        document.title = 'WiseMapping - Login';
+    });
+
+    let valueTxt = props.value;
+    if (disabled) {
+        valueTxt = intl.formatMessage({ id: "common.wait", defaultMessage: "Please wait ..." });
+    }
+    const [value, setValue] = useState(valueTxt);
+
+    console.log(disabled);
+    console.log(value);
+    return (
+        <input type="submit" disabled={disabled} value={value} />
+    );
+}
+
+export default SubmitButton;

packages/webapp/src/tsconfig.json

@@ -7,6 +7,7 @@
       "target": "es5",
       "jsx": "react",
       "allowJs": true,
-      "esModuleInterop": true
+      "esModuleInterop": true,
+      "strictNullChecks": true
     }
   }