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

Remove all CSS

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2020-12-09 22:29:28 -08:00
parent 0e0ef13e92
commit bc3b7104dd
10 changed files with 153 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import { Service, RestService } from './services/Service';
import { IntlProvider } from 'react-intl'
import GlobalStyle from './theme/global-style';
import {GlobalStyle} from './theme/global-style';
import { RegistrationSuccessPage } from './components/registration-success-page';
import { RegistationPage } from './components/registration-page';
import LoginPage from './components/login-page';
@ -13,6 +13,7 @@ import {
Redirect,
BrowserRouter as Router,
} from 'react-router-dom';
import { ForgotPasswordPage } from './components/forgot-password-page';
function loadLocaleData(language: string) {

25
packages/webapp/src/components/forgot-password-page/index.tsx
View File

@ -3,13 +3,14 @@ import { FormattedMessage, useIntl } from 'react-intl'
import { useHistory } from "react-router-dom"
import { Service } from '../../services/Service'
import { PageContent } from '../../theme/global-style';
import Header from '../header'
import Footer from '../footer'
import SubmitButton from '../submit-button'
const css = require('../../css/registration.css');
interface ErrorMessageDialogProps {
message: string
}
@ -46,20 +47,18 @@ const RegistrationForm = (props: ServiceProps) => {
}
return (
<div className="wrapper">
<div className="content">
<h1><FormattedMessage id="forgot.title" defaultMessage="Reset your password" /></h1>
<p><FormattedMessage id="forgot.desc" defaultMessage="We will send you an email to reset your password" /></p>
<PageContent>
<h1><FormattedMessage id="forgot.title" defaultMessage="Reset your password" /></h1>
<p><FormattedMessage id="forgot.desc" defaultMessage="We will send you an email to reset your password" /></p>
<form action="/" method="POST" onSubmit={e => handleSubmit(e)}>
<input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "forgot.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
<form method="POST" onSubmit={e => handleSubmit(e)}>
<input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "forgot.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
<ErrorMessageDialog message={errorMsg} />
<ErrorMessageDialog message={errorMsg} />
<SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
</form>
</div>
</div>
<SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
</form>
</PageContent>
);
}

40
packages/webapp/src/components/login-page/index.tsx
View File

@ -2,14 +2,18 @@ import React, { useEffect } from 'react'
import { FormattedMessage, useIntl } from 'react-intl'
import { Link } from 'react-router-dom'
import {PageContent} from '../../theme/global-style';
import FormErrorDialog from '../form-error-dialog'
import Header from '../header'
import Footer from '../footer'
import SubmitButton from '../submit-button'
import FormErrorDialog from '../form-error-dialog'
const ConfigStatusMessage = (props: any) => {
const enabled = props.enabled
let result= null;
let result = null;
if (enabled === true) {
result = (<div className="db-warn-msg">
<p>
@ -29,20 +33,27 @@ const LoginError = () => {
let msg = null;
if (errorCode) {
if (errorCode === "3") {
msg = intl.formatMessage({ id: "login.userinactive", defaultMessage: "Sorry, your account has not been activated yet. You'll receive a notification login.email when it becomes active. Stay tuned!."});
msg = intl.formatMessage({ id: "login.userinactive", defaultMessage: "Sorry, your account has not been activated yet. You'll receive a notification login.email when it becomes active. Stay tuned!." });
} else {
msg = intl.formatMessage({ id: "login.error", defaultMessage: "The login.email address or login.password you entered is not valid."});
msg = intl.formatMessage({ id: "login.error", defaultMessage: "The login.email address or login.password you entered is not valid." });
}
}
return <FormErrorDialog message={msg} />
}
const LoginForm = () => {
const LoginPage = () => {
const intl = useIntl();
useEffect(() => {
document.title = 'Login | WiseMapping';
});
return (
<div className="wrapper">
<div className="content">
<div>
<Header type='only-signup' />
<PageContent>
<h1><FormattedMessage id="login.title" defaultMessage="Welcome" /></h1>
<p><FormattedMessage id="login.desc" defaultMessage="Log Into Your Account" /></p>
@ -59,22 +70,11 @@ const LoginForm = () => {
<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>
</div>
);
}
const LoginPage = () => {
<ConfigStatusMessage enabled='false' />
useEffect(() => {
document.title = 'Login | WiseMapping';
});
</PageContent>
return (
<div>
<Header type='only-signup' />
<LoginForm />
<ConfigStatusMessage enabled='false' />
<Footer />
</div>
);

25
packages/webapp/src/components/registration-page/index.tsx
View File

@ -9,7 +9,8 @@ import Header from '../header'
import Footer from '../footer'
import SubmitButton from '../submit-button'
const css = require('../../css/registration.css');
import { StyledReCAPTCHA } from './styled';
import { PageContent } from '../../theme/global-style';
const RegistrationForm = (props: ServiceProps) => {
const [email, setEmail] = useState("");
@ -46,29 +47,31 @@ const RegistrationForm = (props: ServiceProps) => {
}
return (
<div className="content">
<PageContent>
<h1><FormattedMessage id="registration.title" defaultMessage="Become a member of our comunity" /></h1>
<p><FormattedMessage id="registration.desc" 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" />
<input type="password" name="password" onChange={e => setPassword(e.target.value)} placeholder={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })} required={true} autoComplete="new-password" />
<div>
<StyledReCAPTCHA>
<ReCAPTCHA
sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
onChange={setRecaptchaToken} />
</div>
<FormErrorDialog 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>
</StyledReCAPTCHA>
<SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
<FormErrorDialog message={errorMsg} />
<div style={{ width: "300px", textAlign: "center", fontSize:"13px",margin:"auto" }}>
<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" />
</div>
<SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
</form>
</div>
</PageContent >
);
}

10
packages/webapp/src/components/registration-page/styled.ts
View File

@ -1,4 +1,11 @@
import styled from 'styled-components';
export const StyledReCAPTCHA = styled.div`
font-size: 13px;
width: 300px;
margin: auto;
}`;
export const StyledNav = styled.div`
.db-warn-msg {
margin-top: 30px;
@ -13,5 +20,4 @@ export const StyledNav = styled.div`
color: white;
padding: 15px 30px;
border-radius: 10px;
}
`
}`;

25
packages/webapp/src/components/registration-success-page/index.tsx
View File

@ -1,14 +1,14 @@
import React, { useEffect } from 'react'
import { FormattedMessage } from 'react-intl'
import StyledDiv from './styled'
import {PageContent} from '../../theme/global-style';
import Header, { SignInButton } from '../header'
import Footer from '../footer'
import PageContent from './styled'
const RegistrationSuccessPage = () => {
useEffect(() => {
document.title = 'Registration | WiseMapping';
});
@ -16,17 +16,18 @@ const RegistrationSuccessPage = () => {
return (
<div>
<Header type='none' />
<div>
<PageContent>
<h1>
<FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" />
</h1>
<p>
<FormattedMessage id="registration.success.desc" defaultMessage="Click 'Sign In' button below and start creating mind maps." />
</p>
<SignInButton style='style1'/>
</PageContent>
<h1>
<FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" />
</h1>
<p>
<FormattedMessage id="registration.success.desc" defaultMessage="Click 'Sign In' button below and start creating mind maps." />
</p>
<SignInButton style='style1' />
</PageContent>
</div>
<Footer />
</div>
);

22
packages/webapp/src/components/registration-success-page/styled.ts
View File

@ -1,22 +0,0 @@
import styled from 'styled-components';
const PageContent = styled.div`
max-width: 1024px;
min-height: 400px;
margin: auto;
padding-top: 100px;
grid-area: content;
text-align: center;
& p {
color: black;
font-size: 18px;
margin: 10px 0px 30px 0px;
}
& h1 {
color: #f9a826;
font-size: 30px;
}`
export default PageContent;

11
packages/webapp/src/css/registration.css
View File

@ -1,11 +0,0 @@
.content {
grid-area: content;
text-align: center;
}
form>p,
form>div {
font-size: 13px;
width: 300px;
margin: auto;
}

164
packages/webapp/src/theme/global-style.ts
View File

@ -1,4 +1,5 @@
import { createGlobalStyle } from 'styled-components';
import styled, { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
@ -12,94 +13,11 @@ body {
margin: 0px;
}
.wrapper {
max-width: 1024px;
margin: auto;
}
.wrapper>* {
border-radius: 5px;
padding: 10px;
}
h1,
h2 {
font-stretch: normal;
font-style: normal;
line-height: 1.2;
letter-spacing: normal;
}
h1 {
font-size: 36px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #f9a826;
}
a {
text-decoration: none;
transition: background-color 0.3s ease;
}
p {
font-size: 20px;
font-weight: 300;
font-stretch: normal;
font-style: normal;
line-height: 1.36;
letter-spacing: normal;
text-align: center;
color: #000000;
}
/* Form Styles Section */
input[type=email],
input[type=password],
input[type=text] {
width: 258px;
height: 53px;
padding: 0px 20px;
margin: 10px 20px;
border-radius: 9px;
font-size: 16px;
border: solid 1px #f9a826;
display: block;
margin: 10px auto;
}
input[type=checkbox] {
border: solid 1px #f9a826;
background-color: #f9a826;
}
input[type=submit],
input[type=button] {
width: 258px;
height: 53px;
padding: 0px 20px;
margin: 10px 20px;
font-size: 20px;
font-weight: 600;
border-radius: 9px;
border: 0px;
background-color: rgba(255, 168, 0, 0.6);
color: white;
}
input[type=submit]:hover {
background-color: #f9a826;
}
input:placeholder {
color: grey;
}
/* Buttons */
.button-style1,
@ -158,6 +76,82 @@ input:placeholder {
border: solid 1px #ffa800;
font-weight: 600;
}
`;
const PageContent = styled.div`
max-width: 800px;
min-height: 400px;
margin: 10px auto;
text-align:center;
padding: 20px 10px 20px 10px;
/* Form Styles Section */
& input[type=email],
& input[type=password],
& input[type=text] {
width: 258px;
height: 53px;
padding: 0px 20px;
margin: 10px 20px;
border-radius: 9px;
font-size: 16px;
border: solid 1px #f9a826;
display: block;
margin: 10px auto;
}
& input[type=checkbox] {
border: solid 1px #f9a826;
background-color: #f9a826;
}
& input[type=submit],
& input[type=button] {
width: 258px;
height: 53px;
padding: 0px 20px;
margin: 10px 20px;
font-size: 20px;
font-weight: 600;
border-radius: 9px;
border: 0px;
background-color: rgba(255, 168, 0, 0.6);
color: white;
}
& input[type=submit]:hover {
background-color: #f9a826;
}
& input:placeholder {
color: grey;
}
& h1,
& h2 {
font-stretch: normal;
font-style: normal;
line-height: 1.2;
letter-spacing: normal;
}
& h1 {
font-size: 36px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #f9a826;
}
& a {
font-size: 17px;
color: #f9a826;
}
`;
export default GlobalStyle;
export { GlobalStyle, PageContent };

7
packages/webapp/webpack.config.js
View File

@ -23,12 +23,7 @@ module.exports = {
test: /\.tsx?$/,
use: 'ts-loader',
exclude: '/node_modules/'
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
}, ,
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [{