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) {

13
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">
<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)}>
<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} />
<SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
</form>
</div>
</div>
</PageContent>
);
}

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

@ -2,10 +2,14 @@ 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
@ -37,12 +41,19 @@ const LoginError = () => {
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 = () => {
useEffect(() => {
document.title = 'Login | WiseMapping';
});
return (
<div>
<Header type='only-signup' />
<LoginForm />
<ConfigStatusMessage enabled='false' />
</PageContent>
<Footer />
</div>
);

19
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>
</StyledReCAPTCHA>
<FormErrorDialog message={errorMsg} />
<p>
<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" />
</p>
</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;
}
`
}`;

9
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,6 +16,7 @@ const RegistrationSuccessPage = () => {
return (
<div>
<Header type='none' />
<div>
<PageContent>
<h1>
<FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" />
@ -26,7 +27,7 @@ const RegistrationSuccessPage = () => {
<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: [{