Skip to content
This repository was archived by the owner on May 20, 2020. It is now read-only.

Commit 71edd54

Browse files
thefaizthefaiz
committed
Initial commit
0 parents  commit 71edd54

15 files changed

+10237
-0
lines changed

‎.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
12+
# misc
13+
.DS_Store
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
18+
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*

‎README.md

Lines changed: 2444 additions & 0 deletions
Large diffs are not rendered by default.

‎package.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "signup-signin-ui",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"react": "^16.3.2",
7+
"react-dom": "^16.3.2",
8+
"react-router-dom": "^4.2.2",
9+
"react-scripts": "1.1.4"
10+
},
11+
"scripts": {
12+
"start": "react-scripts start",
13+
"build": "react-scripts build",
14+
"test": "react-scripts test --env=jsdom",
15+
"eject": "react-scripts eject"
16+
}
17+
}

‎public/favicon.ico

3.78 KB
Binary file not shown.

‎public/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<title>React App</title>
23+
</head>
24+
<body>
25+
<noscript>
26+
You need to enable JavaScript to run this app.
27+
</noscript>
28+
<div id="root"></div>
29+
<!--
30+
This HTML file is a template.
31+
If you open it directly in the browser, you will see an empty page.
32+
33+
You can add webfonts, meta tags, or analytics to this file.
34+
The build step will place the bundled scripts into the <body> tag.
35+
36+
To begin the development, run `npm start` or `yarn start`.
37+
To create a production bundle, use `npm run build` or `yarn build`.
38+
-->
39+
</body>
40+
</html>

‎public/manifest.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
}
10+
],
11+
"start_url": "./index.html",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎src/App.css

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
.App {
2+
height: 100vh;
3+
display: flex;
4+
color: white;
5+
}
6+
7+
.App__Aside {
8+
width: 50%;
9+
background-color: #66DAC7;
10+
}
11+
12+
.App__Form {
13+
width: 50%;
14+
background-color: #2E4158;
15+
padding: 25px 40px;
16+
overflow: auto;
17+
}
18+
19+
.PageSwitcher {
20+
display: flex;
21+
justify-content: flex-end;
22+
margin-bottom: 10%;
23+
}
24+
25+
.PageSwitcher__Item {
26+
background-color: #4C5D72;
27+
color: #9DA6B1;
28+
padding: 10px 25px;
29+
cursor: pointer;
30+
font-size: .9em;
31+
border: none;
32+
outline: none;
33+
display: inline-block;
34+
text-decoration: none;
35+
}
36+
37+
.PageSwitcher__Item--Active {
38+
background-color: #5ED0C0;
39+
color: white;
40+
}
41+
42+
.PageSwitcher__Item:first-child {
43+
border-top-left-radius: 25px;
44+
border-bottom-left-radius: 25px;
45+
}
46+
.PageSwitcher__Item:last-child {
47+
border-top-right-radius: 25px;
48+
border-bottom-right-radius: 25px;
49+
}
50+
51+
.FormCenter {
52+
margin-bottom: 100px;
53+
}
54+
55+
.FormTitle {
56+
color: #707C8B;
57+
font-weight: 300;
58+
margin-bottom: 50px;
59+
}
60+
61+
.FormTitle__Link {
62+
color: #707C8B;
63+
text-decoration: none;
64+
display: inline-block;
65+
font-size: 1.7em;
66+
margin: 0 10px;
67+
padding-bottom: 5px;
68+
}
69+
70+
.FormTitle__Link:first-child {
71+
margin-left: 0;
72+
}
73+
74+
.FormTitle__Link--Active {
75+
color: white;
76+
border-bottom: 1px solid #199087;
77+
}
78+
79+
.FormField {
80+
margin-bottom: 40px;
81+
}
82+
83+
.FormField__Label {
84+
display: block;
85+
text-transform: uppercase;
86+
font-size: .9em;
87+
color: white;
88+
}
89+
.FormField__Input {
90+
width: 85%;
91+
background-color: transparent;
92+
border: none;
93+
color: white;
94+
outline: none;
95+
border-bottom: 1px solid #445366;
96+
font-size: 1em;
97+
font-weight: 300;
98+
padding-bottom: 10px;
99+
margin-top: 10px;
100+
}
101+
102+
.FormField__Input::placeholder {
103+
color: #616E7F;
104+
}
105+
106+
.FormField__Button {
107+
background-color: #52C4B9;
108+
color: white;
109+
border: none;
110+
outline: none;
111+
border-radius: 25px;
112+
padding: 15px 70px;
113+
font-size: .8em;
114+
font-weight: 500;
115+
}
116+
117+
.FormField__Link {
118+
color: #66707D;
119+
text-decoration: none;
120+
display: inline-block;
121+
border-bottom: 1.5px solid #225E62;
122+
padding-bottom: 5px;
123+
}
124+
125+
.FormField__CheckboxLabel {
126+
color: #646F7D;
127+
font-size: .9em;
128+
}
129+
130+
.FormField__Checkbox {
131+
position: relative;
132+
top: 1.5px;
133+
}
134+
135+
.FormField__TermsLink {
136+
color: white;
137+
border-bottom: 1px solid #199087;
138+
text-decoration: none;
139+
display: inline-block;
140+
padding-bottom: 2px;
141+
margin-left: 5px;
142+
}

‎src/App.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React, { Component } from 'react';
2+
import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom';
3+
import SignUpForm from './pages/SignUpForm';
4+
import SignInForm from './pages/SignInForm';
5+
6+
import './App.css';
7+
8+
class App extends Component {
9+
render() {
10+
return (
11+
<Router>
12+
<div className="App">
13+
<div className="App__Aside"></div>
14+
<div className="App__Form">
15+
<div className="PageSwitcher">
16+
<NavLink to="/sign-in" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign In</NavLink>
17+
<NavLink exact to="/" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign Up</NavLink>
18+
</div>
19+
20+
<div className="FormTitle">
21+
<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>
22+
</div>
23+
24+
<Route exact path="/" component={SignUpForm}>
25+
</Route>
26+
<Route path="/sign-in" component={SignInForm}>
27+
</Route>
28+
</div>
29+
30+
</div>
31+
</Router>
32+
);
33+
}
34+
}
35+
36+
export default App;

‎src/App.test.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
ReactDOM.unmountComponentAtNode(div);
9+
});

‎src/index.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
2+
3+
* {
4+
box-sizing: border-box;
5+
font-family: "Roboto", sans-serif;
6+
}
7+
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
}
12+
13+
.mr-20 {
14+
margin-right: 20px !important;
15+
}

‎src/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import './index.css';
4+
import App from './App';
5+
import registerServiceWorker from './registerServiceWorker';
6+
7+
ReactDOM.render(<App />, document.getElementById('root'));
8+
registerServiceWorker();

‎src/pages/SignInForm.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { Component } from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
class SignInForm extends Component {
5+
constructor() {
6+
super();
7+
8+
this.state = {
9+
email: '',
10+
password: ''
11+
};
12+
13+
this.handleChange = this.handleChange.bind(this);
14+
this.handleSubmit = this.handleSubmit.bind(this);
15+
}
16+
17+
handleChange(e) {
18+
let target = e.target;
19+
let value = target.type === 'checkbox' ? target.checked : target.value;
20+
let name = target.name;
21+
22+
this.setState({
23+
[name]: value
24+
});
25+
}
26+
27+
handleSubmit(e) {
28+
e.preventDefault();
29+
30+
console.log('The form was submitted with the following data:');
31+
console.log(this.state);
32+
}
33+
34+
render() {
35+
return (
36+
<div className="FormCenter">
37+
<form onSubmit={this.handleSubmit} className="FormFields" onSubmit={this.handleSubmit}>
38+
<div className="FormField">
39+
<label className="FormField__Label" htmlFor="email">E-Mail Address</label>
40+
<input type="email" id="email" className="FormField__Input" placeholder="Enter your email" name="email" value={this.state.email} onChange={this.handleChange} />
41+
</div>
42+
43+
<div className="FormField">
44+
<label className="FormField__Label" htmlFor="password">Password</label>
45+
<input type="password" id="password" className="FormField__Input" placeholder="Enter your password" name="password" value={this.state.password} onChange={this.handleChange} />
46+
</div>
47+
48+
<div className="FormField">
49+
<button className="FormField__Button mr-20">Sign In</button> <Link to="/" className="FormField__Link">Create an account</Link>
50+
</div>
51+
</form>
52+
</div>
53+
);
54+
}
55+
}
56+
57+
export default SignInForm;

0 commit comments

Comments
 (0)