user auth ui
This commit is contained in:
parent
1f1d823ec8
commit
2d6ae26016
|
|
@ -12,7 +12,7 @@ router.post(
|
|||
check('email','E-mail is required').isEmail(),
|
||||
check('password','Password is required').notEmpty()
|
||||
],
|
||||
async (req,res) =>{
|
||||
async (req,res) =>{
|
||||
try{
|
||||
|
||||
let { username,email,phonenumber,password } = req.body;
|
||||
|
|
@ -61,4 +61,60 @@ router.post(
|
|||
|
||||
}
|
||||
)
|
||||
router.post(
|
||||
'/login',
|
||||
[
|
||||
check('email',"Type valid e-mail").isEmail(),
|
||||
check('password','Passoword is required').notEmpty()
|
||||
],
|
||||
async (req,res) => {
|
||||
try{
|
||||
|
||||
const { email, password } = req.body;
|
||||
|
||||
let user = await UserSchema.findOne({ email });
|
||||
const errors = validationResult(req);
|
||||
|
||||
if(!errors.isEmpty()){
|
||||
return res.status(401).json({
|
||||
errors: errors.array()
|
||||
});
|
||||
}
|
||||
|
||||
if(!user) {
|
||||
return res.status(401).json({ msg: "This user doesn't exists"});
|
||||
}
|
||||
|
||||
let isPassowardMatch = await bcrypt.compare(password,user.password);
|
||||
|
||||
if(isPassowardMatch){
|
||||
const payload = {
|
||||
user: {
|
||||
id: user.id,
|
||||
|
||||
}
|
||||
}
|
||||
jwt.sign(
|
||||
payload,
|
||||
config.get('jwtSecret'),
|
||||
(err,token) =>{
|
||||
if(err) throw err;
|
||||
res.json({ token });
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
}else return res.status(401).json({
|
||||
msg:"incorrect Passoword"
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.log(error.message);
|
||||
return res.status(500).json({
|
||||
msg:"serve error ...."
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
)
|
||||
module.exports = router;
|
||||
|
|
@ -7085,6 +7085,19 @@
|
|||
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
|
||||
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
|
||||
},
|
||||
"history": {
|
||||
"version": "4.10.1",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
|
||||
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"loose-envify": "^1.2.0",
|
||||
"resolve-pathname": "^3.0.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0",
|
||||
"value-equal": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hmac-drbg": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||
|
|
@ -10049,6 +10062,15 @@
|
|||
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
|
||||
"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
|
||||
},
|
||||
"mini-create-react-context": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
|
||||
"integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"tiny-warning": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"mini-css-extract-plugin": {
|
||||
"version": "0.11.3",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
|
||||
|
|
@ -12536,6 +12558,52 @@
|
|||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
|
||||
"integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
|
||||
"integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"history": "^4.9.0",
|
||||
"hoist-non-react-statics": "^3.1.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"mini-create-react-context": "^0.4.0",
|
||||
"path-to-regexp": "^1.7.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-is": "^16.6.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"isarray": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
|
||||
},
|
||||
"path-to-regexp": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
|
||||
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
|
||||
"requires": {
|
||||
"isarray": "0.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
|
||||
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"history": "^4.9.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-router": "5.2.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.0.tgz",
|
||||
|
|
@ -13002,6 +13070,11 @@
|
|||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
|
||||
},
|
||||
"resolve-pathname": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
|
||||
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
|
||||
},
|
||||
"resolve-url": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
|
||||
|
|
@ -14801,6 +14874,16 @@
|
|||
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
|
||||
},
|
||||
"tiny-invariant": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
|
||||
"integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
|
||||
},
|
||||
"tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"tmp": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
||||
|
|
@ -15260,6 +15343,11 @@
|
|||
"spdx-expression-parse": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"value-equal": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
|
||||
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
|
||||
},
|
||||
"vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"react": "^17.0.1",
|
||||
"react-bootstrap": "^1.4.0",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.0",
|
||||
"styled-components": "^5.2.1",
|
||||
"web-vitals": "^0.2.4"
|
||||
|
|
|
|||
38
src/App.css
38
src/App.css
|
|
@ -1,38 +0,0 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,15 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Switch, Route, withRouter } from "react-router-dom";
|
||||
import HomePage from "./components/HomePage";
|
||||
import Login from "./components/SignIn";
|
||||
import LogInContainer from "./components/LogInContainer";
|
||||
class App extends Component {
|
||||
render(){
|
||||
return (
|
||||
<div className="App">
|
||||
<HomePage />
|
||||
< LogInContainer />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import 'C:\\Priyathamwork\\locaft\\locaft\\src\\style.css';
|
||||
import '../homepage.css';
|
||||
import LogInContainer from './LogInContainer';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
|
||||
class HomePage extends Component {
|
||||
state = { render: false }
|
||||
add = () => {
|
||||
this.setState({render : !this.state.render})
|
||||
}
|
||||
render(){
|
||||
return (
|
||||
<div className="HomePage">
|
||||
|
|
@ -34,7 +38,7 @@ class HomePage extends Component {
|
|||
<a class="nav-link" href="#cta">Blog</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#login">Sign up or in</a>
|
||||
<a class="nav-link" href="#login">Sign up or Sign in</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -48,9 +52,11 @@ class HomePage extends Component {
|
|||
<div className="col-lg-6">
|
||||
<h1 class="big-heading">Adapt to a new place easy peasy.</h1>
|
||||
<button type="button" class = "btn btn-info login mr-1">Log In</button>
|
||||
<button type="button" class="btn btn-info loginb">Sign Up</button>
|
||||
|
||||
<button type="button" class="btn btn-info loginb" >Sign Up</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<img class="title-image" src="/locaft.png" alt="locaft-mockup" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
import React, { Component } from 'react';
|
||||
import { HashRouter as Router, Route, Link, NavLink } from 'react-router-dom';
|
||||
import SignUpForm from './SignUp';
|
||||
import SignInForm from './SignIn';
|
||||
|
||||
import '../login_reg.css';
|
||||
|
||||
class LogInContainer extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Router basename="/users/">
|
||||
<div className="Apper">
|
||||
<div className="Apper__Aside"></div>
|
||||
<div className="Apper__Form">
|
||||
<div className="PageSwitcher">
|
||||
<NavLink to="/sign-in" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign In</NavLink>
|
||||
<NavLink exact to="/" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign Up</NavLink>
|
||||
</div>
|
||||
|
||||
<div className="FormTitle">
|
||||
<NavLink to="/sign-in" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign In</NavLink> or <NavLink exact to="/" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign Up</NavLink>
|
||||
</div>
|
||||
|
||||
<Route exact path="/" component={SignUpForm}>
|
||||
</Route>
|
||||
<Route path="/sign-in" component={SignInForm}>
|
||||
</Route>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LogInContainer;
|
||||
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
class SignInForm extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
email: '',
|
||||
password: ''
|
||||
};
|
||||
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
let target = e.target;
|
||||
let value = target.type === 'checkbox' ? target.checked : target.value;
|
||||
let name = target.name;
|
||||
|
||||
this.setState({
|
||||
[name]: value
|
||||
});
|
||||
}
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
console.log('The form was submitted with the following data:');
|
||||
console.log(this.state);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="FormCenter">
|
||||
<form onSubmit={this.handleSubmit} className="FormFields" onSubmit={this.handleSubmit}>
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="email">E-Mail Address</label>
|
||||
<input type="email" id="email" className="FormField__Input" placeholder="Enter your email" name="email" value={this.state.email} onChange={this.handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="password">Password</label>
|
||||
<input type="password" id="password" className="FormField__Input" placeholder="Enter your password" name="password" value={this.state.password} onChange={this.handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="FormField">
|
||||
<button className="FormField__Button mr-20">Sign In</button> <Link to="/" className="FormField__Link">Create an account</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SignInForm;
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
class SignUpForm extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
email: '',
|
||||
password: '',
|
||||
name: '',
|
||||
hasAgreed: false
|
||||
};
|
||||
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
let target = e.target;
|
||||
let value = target.type === 'checkbox' ? target.checked : target.value;
|
||||
let name = target.name;
|
||||
|
||||
this.setState({
|
||||
[name]: value
|
||||
});
|
||||
}
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
console.log('The form was submitted with the following data:');
|
||||
console.log(this.state);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="FormCenter">
|
||||
<form onSubmit={this.handleSubmit} className="FormFields">
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="name">Full Name</label>
|
||||
<input type="text" id="name" className="FormField__Input" placeholder="Enter your full name" name="name" value={this.state.name} onChange={this.handleChange} />
|
||||
</div>
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="password">Password</label>
|
||||
<input type="password" id="password" className="FormField__Input" placeholder="Enter your password" name="password" value={this.state.password} onChange={this.handleChange} />
|
||||
</div>
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="email">E-Mail Address</label>
|
||||
<input type="email" id="email" className="FormField__Input" placeholder="Enter your email" name="email" value={this.state.email} onChange={this.handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="FormField">
|
||||
<label className="FormField__CheckboxLabel">
|
||||
<input className="FormField__Checkbox" type="checkbox" name="hasAgreed" value={this.state.hasAgreed} onChange={this.handleChange} /> I agree all statements in <a href="" className="FormField__TermsLink">terms of service</a>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="FormField">
|
||||
<button className="FormField__Button mr-20">Sign Up</button> <Link to="/sign-in" className="FormField__Link">I'm already member</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SignUpForm;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mr-20 {
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(<App />,document.getElementById('root'));
|
||||
|
|
|
|||
|
|
@ -0,0 +1,145 @@
|
|||
.Apper {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.Apper__Aside {
|
||||
width: 50%;
|
||||
background-color: #66DAC7;
|
||||
}
|
||||
|
||||
.Apper__Form {
|
||||
width: 50%;
|
||||
background-color: #2E4158;
|
||||
padding: 25px 40px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.PageSwitcher {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
.PageSwitcher__Item {
|
||||
background-color: #4C5D72;
|
||||
color: #9DA6B1;
|
||||
padding: 10px 25px;
|
||||
cursor: pointer;
|
||||
font-size: .9em;
|
||||
border: none;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.PageSwitcher__Item--Active {
|
||||
background-color: #5ED0C0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.PageSwitcher__Item:first-child {
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
}
|
||||
.PageSwitcher__Item:last-child {
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
|
||||
.FormCenter {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.FormTitle {
|
||||
color: #707C8B;
|
||||
font-weight: 300;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.FormTitle__Link {
|
||||
color: #707C8B;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 1.7em;
|
||||
margin: 0 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.FormTitle__Link:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.FormTitle__Link--Active {
|
||||
color: white;
|
||||
border-bottom: 1px solid #199087;
|
||||
}
|
||||
|
||||
.FormField {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.FormField__Label {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-size: .9em;
|
||||
color: white;
|
||||
text-align: start;
|
||||
margin-left:45px;
|
||||
|
||||
}
|
||||
.FormField__Input {
|
||||
width: 85%;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
outline: none;
|
||||
border-bottom: 1px solid #445366;
|
||||
font-size: 1em;
|
||||
font-weight: 300;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.FormField__Input::placeholder {
|
||||
color: #616E7F;
|
||||
}
|
||||
|
||||
.FormField__Button {
|
||||
background-color: #52C4B9;
|
||||
color: white;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 25px;
|
||||
padding: 15px 70px;
|
||||
font-size: .8em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.FormField__Link {
|
||||
color: #66707D;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
border-bottom: 1.5px solid #225E62;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.FormField__CheckboxLabel {
|
||||
color: #646F7D;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.FormField__Checkbox {
|
||||
position: relative;
|
||||
top: 1.5px;
|
||||
}
|
||||
|
||||
.FormField__TermsLink {
|
||||
color: white;
|
||||
border-bottom: 1px solid #199087;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding-bottom: 2px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
Loading…
Reference in New Issue