vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-13 02:37:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Complete success page.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2020-12-07 23:14:08 -08:00
parent f575560197
commit 7c53c6b9c7
12 changed files with 132 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/webapp/lang/en.json
View File

@ -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"

11
packages/webapp/src/app.tsx
View File

@ -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>

2
packages/webapp/src/compiled-lang/en.json
View File

@ -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": [

17
packages/webapp/src/components/Footer.tsx
View File

@ -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="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/termsofuse.html"> <FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" /> </a></div>
<div><a href="https://www.wisemapping.com/faq.html"> <FormattedMessage id="footer.faq" defaultMessage="F.A.Q." /> </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>
)
}

15
packages/webapp/src/components/Header.tsx
View File

@ -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;

6
packages/webapp/src/components/LoginPage.tsx
View File

@ -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';

22
packages/webapp/src/components/RegistrationPage.tsx
View File

@ -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) => {
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 }
export { RegistationPage }

38
packages/webapp/src/components/RegistrationSuccessPage.tsx Normal file
View File

@ -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 }

24
packages/webapp/src/css/core.css
View File

@ -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,13 +302,26 @@ 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 {
color: white;
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;
}

9
packages/webapp/src/css/login.css.d.ts vendored
View File

@ -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;

9
packages/webapp/src/css/registration.css.d.ts vendored
View File

@ -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;

39
packages/webapp/src/css/success.css Normal file
View File

@ -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;
} */