mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-10 17:33:24 +01:00
Complete success page.
This commit is contained in:
parent
f575560197
commit
7c53c6b9c7
@ -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"
|
||||
|
@ -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>
|
||||
|
@ -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": [
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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';
|
||||
|
@ -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
38
packages/webapp/src/components/RegistrationSuccessPage.tsx
Normal 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 }
|
||||
|
||||
|
@ -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
9
packages/webapp/src/css/login.css.d.ts
vendored
@ -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;
|
@ -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
39
packages/webapp/src/css/success.css
Normal 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;
|
||||
} */
|
Loading…
Reference in New Issue
Block a user