Complete success page.

packages/webapp/lang/en.json

@@ -85,7 +85,7 @@
     "defaultMessage": "Signing up is free and just take a moment"
   },
   "registration.success.desc": {
-    "defaultMessage": "Your account has been created successfully, click to sign in and start enjoying WiseMapping."
+    "defaultMessage": "Click to 'Sign In' button below and start creating mind maps."
   },
   "registration.success.title": {
     "defaultMessage": "Your account has been created successfully"

packages/webapp/src/app.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import LoginPage from './components/LoginPage';
 import { Service, RestService } from './services/Service';
-
-import { RegistrationSuccessPage, RegistationFormPage } from './components/RegistrationPage';
 import { IntlProvider } from 'react-intl'
 
+import LoginPage from './components/LoginPage';
+import { RegistationPage } from './components/RegistrationPage';
+import { RegistrationSuccessPage } from './components/RegistrationSuccessPage';
+
 import {
   Route,
   Switch,
@@ -41,7 +42,7 @@ const App = () => {
   }, []);
 
   // Create Service object...
-  const service: Service = new RestService('http://localhost:8080', () => { console.log("401 error")});
+  const service: Service = new RestService('http://localhost:8080', () => { console.log("401 error") });
 
   return messages ? (
     <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
@@ -52,7 +53,7 @@ const App = () => {
           </Route>
           <Route path="/c/login" component={LoginPage} />
           <Route path="/c/user/registration">
-            <RegistationFormPage service={service}/>
+            <RegistationPage service={service} />
           </Route>
           <Route path="/c/user/registrationSuccess" component={RegistrationSuccessPage} />
         </Switch>

packages/webapp/src/compiled-lang/en.json

@@ -170,7 +170,7 @@
   "registration.success.desc": [
     {
       "type": 0,
-      "value": "Your account has been created successfully, click to sign in and start enjoying WiseMapping."
+      "value": "Click to 'Sign In' button below and start creating mind maps."
     }
   ],
   "registration.success.title": [

packages/webapp/src/components/Footer.tsx

@@ -7,20 +7,25 @@ const logo = require('../images/logo-text.svg')
 const Footer = () => {
   return (
     <footer className="footer" >
-      <img src={logo} alt="logo"/>
+      {/* Todo: Replace this with a SVG Image */}
+      <div style={{padding: 0, margin: 0}}>
+        <a href="http://www.wisemapping.org/">
+        <div style={{textAlign: "left"}}>Powered By</div><img src={logo} alt="logo" />
+        </a>
+      </div>
       <div >
-        <div><a href="termsofuse.html"> <FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" /> </a></div>
+        <div><a href="https://www.wisemapping.com/termsofuse.html"> <FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" /> </a></div>
-        <div><a href="faq.html"> <FormattedMessage id="footer.faq" defaultMessage="F.A.Q." /> </a></div >
+        <div><a href="https://www.wisemapping.com/faq.html"> <FormattedMessage id="footer.faq" defaultMessage="F.A.Q." /> </a></div >
-        <div><a href="aboutus.html"> <FormattedMessage id="footer.aboutus" defaultMessage="About Us" /></a></div >
+        <div><a href="https://www.wisemapping.com/aboutus.html"> <FormattedMessage id="footer.aboutus" defaultMessage="About Us" /></a></div >
       </div>
       <div >
         <div><a href="http://www.wisemapping.org/"> <FormattedMessage id="footer.opensource" defaultMessage="Open Source" /> </a></div>
         <div><a href="mailto:team@wisemapping.com"> <FormattedMessage id="footer.contactus" defaultMessage="Contact Us" /> </a></div>
-        <div>< a href="mailto:feedback@wisemapping.com" > <FormattedMessage id="footer.feedback" defaultMessage="Feedback" /> </a></div>
+        <div><a href="mailto:feedback@wisemapping.com" > <FormattedMessage id="footer.feedback" defaultMessage="Feedback" /> </a></div>
       </div>
       <div>
         <div><span className="button-style2" >< a href="https://www.paypal.com/webapps/shoppingcart?flowlogging_id=c7ac923b53025&mfid=1606520600355_c7ac923b53025#/checkout/openButton">< FormattedMessage id="footer.donations" defaultMessage="PayPal Donations" /> </a></span ></div>
-      </div >
+      </div>
     </footer>
   )
 }

packages/webapp/src/components/Header.tsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'
 const logo = require('../images/header-logo.png')
 
 interface HeaderProps {
-  type: string;
+  type: 'only-signup' | 'only-signin' | 'none';
 }
 
 class Header extends React.Component<HeaderProps, HeaderProps> {
@@ -25,6 +25,9 @@ class Header extends React.Component<HeaderProps, HeaderProps> {
     } else if (pageType === 'only-signin') {
       text = <span className="header-area-content-span"><span><FormattedMessage id="header.haveaccount" defaultMessage="Already have an account?" /></span></span>;
       signUpButton = <SignInButton className="header-area-right2" />;
+    } else if (pageType === 'none') {
+      text = '';
+      signUpButton = '';
     } else {
       signUpButton = <SignUpButton className="header-area-right2" />
       signInButton = <SignInButton className="header-area-right2" />;
@@ -44,21 +47,25 @@ class Header extends React.Component<HeaderProps, HeaderProps> {
 }
 
 interface ButtonProps {
-  className: string;
+  style?: 'style1' | 'style2'| 'style3';
+  className?: string;
 }
 
 const SignInButton = (props: ButtonProps) => {
+  const style = props.style ? props.style : 'style1';
   return (
-    <span className={`button-style1 ${props.className}`}>
+    <span className={`button-${style} ${props.className}`}>
       <Link to="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></Link>
     </span>);
 }
 
 const SignUpButton = (props: ButtonProps) => {
+  const style = props.style ? props.style : 'style1';
   return (
-    <span className={`button-style1 ${props.className}`}>
+    <span className={`button-${style} ${props.className}`}>
       <Link to="/c/user/registration"><FormattedMessage id="login.signup" defaultMessage="Sign Up" /></Link>
     </span>);
 }
 
+export { SignInButton, SignUpButton };
 export default Header;

packages/webapp/src/components/LoginPage.tsx

@@ -25,7 +25,7 @@ const ConfigStatusMessage = (props: any) => {
   return result;
 }
 
-const LoginError = (props: any) => {
+const LoginError = () => {
   // @Todo: This must be reviewed to be based on navigation state.
   // Login error example: http://localhost:8080/c/login?login.error=2
   const errorCode = new URLSearchParams(window.location.search).get('login_error');
@@ -66,7 +66,7 @@ const LoginForm = () => {
             <input name="_spring_security_login.remberme" id="staySignIn" type="checkbox" />
             <label htmlFor="staySignIn"><FormattedMessage id="login.remberme" defaultMessage="Remember me" /></label>
           </div>
-          <SubmitButton value={intl.formatMessage({ id: "login.signin", defaultMessage: "Sign In" })}/>
+          <SubmitButton value={intl.formatMessage({ id: "login.signin", defaultMessage: "Sign In" })} />
         </form>
         <Link to="/c/user/resetPassword"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></Link>
       </div>
@@ -74,7 +74,7 @@ const LoginForm = () => {
   );
 }
 
-const LoginPage = (props: any) => {
+const LoginPage = () => {
 
   useEffect(() => {
     document.title = 'Login | WiseMapping';

packages/webapp/src/components/RegistrationPage.tsx

@@ -74,7 +74,7 @@ const RegistrationForm = (props: ServiceProps) => {
         <h1><FormattedMessage id="registration.become" defaultMessage="Become a member of our comunity" /></h1>
         <p><FormattedMessage id="registration.signup" defaultMessage="Signing up is free and just take a moment " /></p>
 
-        <form action="/" method="POST" onSubmit={e => handleSubmit(e)}>
+        <form method="POST" onSubmit={e => handleSubmit(e)}>
           <input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
           <input type="text" name="firstname" onChange={e => setFirstname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.firstname", defaultMessage: "First Name" })} required={true} autoComplete="given-name" />
           <input type="text" name="lastname" onChange={e => setLastname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.lastname", defaultMessage: "Last Name" })} required={true} autoComplete="family-name" />
@@ -103,7 +103,7 @@ const RegistrationForm = (props: ServiceProps) => {
 type ServiceProps = {
   service: Service
 }
-const RegistationFormPage = (props: ServiceProps) => {
+const RegistationPage = (props: ServiceProps) => {
 
   useEffect(() => {
     document.title = 'Registration | WiseMapping';
@@ -118,22 +118,6 @@ const RegistationFormPage = (props: ServiceProps) => {
   );
 }
 
-const RegistrationSuccessPage = (props: any) => {
+export { RegistationPage }
-  
-  return (
-    <div>
-      <Header type='only-signup' />
-      <div className="wrapper">
-        <div className="content">
-          <h1><FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" /></h1>
-          <p><FormattedMessage id="registration.success.desc" defaultMessage="Your account has been created successfully, click to sign in and start enjoying  WiseMapping." /></p>
-        </div>
-      </div>
-      <Footer />
-    </div>
-  );
-}
-
-export { RegistationFormPage, RegistrationSuccessPage }
 
 

packages/webapp/src/components/RegistrationSuccessPage.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import Header, { SignInButton } from './Header'
+import Footer from './Footer'
+
+const css = require('../css/success.css');
+
+const RegistrationSuccessPage = () => {
+
+  useEffect(() => {
+    document.title = 'Registration | WiseMapping';
+  });
+
+  return (
+    <div>
+      <Header type='none' />
+      <div className="wrapper">
+        <div className="rcontent">
+          <h1>
+            <FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" />
+          </h1>
+          <p>
+            <FormattedMessage id="registration.success.desc" defaultMessage="Click to 'Sign In' button below and start creating mind maps." />
+          </p>
+
+          <SignInButton style='style1'/>
+
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export { RegistrationSuccessPage }
+
+

packages/webapp/src/css/core.css

@@ -136,7 +136,7 @@ nav a {
 /* Footer */
 
 .footer {
-    height: 130px;
+    height: 170px;
     margin-top: 50px;
     padding: 30px 40px 10px 50px;
     background-color: #f9a826;
@@ -271,7 +271,8 @@ input:placeholder {
 /* Buttons */
 
 .button-style1,
-.button-style2 {
+.button-style2,
+.button-style3 {
     font-size: 16px;
     font-weight: 500;
     font-stretch: normal;
@@ -282,7 +283,8 @@ input:placeholder {
 }
 
 .button-style1 a,
-.button-style2 a {
+.button-style2 a,
+.button-style3 a {
     padding: 10px 30px 10px 30px;
     transition: background-color 0.3s ease;
     border-radius: 9px;
@@ -291,7 +293,6 @@ input:placeholder {
 .button-style1 a {
     background-color: white;
     border: solid 1px #f9a826;
-    color: #ffa800;
 }
 
 .button-style1 a:hover {
@@ -301,9 +302,9 @@ input:placeholder {
 }
 
 .button-style2 a {
+    color: #ffa800;
     background-color: white;
     border: solid 1px rgba(255, 168, 0, 0.6);
-    color: #ffa800;
 }
 
 .button-style2 a:hover {
@@ -311,3 +312,16 @@ input:placeholder {
     border: solid 1px white;
     background-color: rgba(243, 220, 174, 0.6);
 }
+
+.button-style3 a {
+    color: white;
+    background-color: #ffa800;
+    font-weight: 600;
+}
+
+.button-style3 a:hover {
+    color: #ffa800;
+    background-color: white;
+    border: solid 1px #ffa800;
+    font-weight: 600;
+}

packages/webapp/src/css/login.css.d.ts

@@ -1,9 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'content': string;
-  'db-warn-msg': string;
-  'wrapper': string;
-}
-export const cssExports: CssExports;
-export default cssExports;

packages/webapp/src/css/registration.css.d.ts

@@ -1,9 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'content': string;
-  'db-warn-msg': string;
-  'wrapper': string;
-}
-export const cssExports: CssExports;
-export default cssExports;

packages/webapp/src/css/success.css

@@ -0,0 +1,39 @@
+@import "core.css";
+.wrapper {
+    max-width: 1024px;
+    min-height: 400px;
+}
+
+.rcontent {
+    padding-top: 100px;
+    grid-area: content;
+    text-align: center;
+}
+
+.rcontent p {
+    color: black;
+    font-size: 18px;
+    margin: 10px 0px 30px 0px;
+}
+
+.rcontent h1 {
+    color: #f9a826;
+    font-size: 30px;
+}
+
+
+/* .button-style1 {
+    font-size: 20px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    letter-spacing: normal;
+    white-space: nowrap;
+    padding-top: 10px;
+}
+
+.button-style1 a {
+    padding: 10px 30px 10px 30px;
+    transition: background-color 0.3s ease;
+    border-radius: 9px;
+} */