diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/package.json b/package.json new file mode 100644 index 0000000..6781c9e --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "name": "login", + "version": "0.1.0", + "private": true, + "dependencies": { + "react": "^16.12.0", + "react-dom": "^16.12.0", + "react-scripts": "0.9.5" + }, + "devDependencies": {}, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..5c125de Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..aab5e3b --- /dev/null +++ b/public/index.html @@ -0,0 +1,31 @@ + + + + + + + + React App + + +
+ + + diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..a25d4e5 --- /dev/null +++ b/src/App.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import './Login.css'; +import Main from './components/Main.js'; + +class Login extends Component { + render() { + return ( +
+
+
+
+
+
+ +
+ ); + } +} + +export default Login; diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..b84af98 --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); +}); diff --git a/src/Login.css b/src/Login.css new file mode 100644 index 0000000..15adfdc --- /dev/null +++ b/src/Login.css @@ -0,0 +1,24 @@ +.App { + text-align: center; +} + +.App-logo { + animation: App-logo-spin infinite 20s linear; + height: 80px; +} + +.App-header { + background-color: #222; + height: 150px; + padding: 20px; + color: white; +} + +.App-intro { + font-size: large; +} + +@keyframes App-logo-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js new file mode 100644 index 0000000..7dedeee --- /dev/null +++ b/src/components/LoginForm.js @@ -0,0 +1,47 @@ +import React from 'react'; +import 'bootstrap/dist/css/bootstrap.min.css'; + +class LoginForm extends React.Component { + constructor(props) { + super(props) + this.state = { + } + } + render(){ + return( +
+
+
+
+
+
+
Sign In
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ {/* + */} +
+
+
+
+
+
+
+ ) + } + } + + export default LoginForm diff --git a/src/components/Main.js b/src/components/Main.js new file mode 100644 index 0000000..17ad4f1 --- /dev/null +++ b/src/components/Main.js @@ -0,0 +1,59 @@ +import React, { Component } from 'react'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import LoginForm from './LoginForm.js'; + +class Main extends Component { + constructor(props){ + super(props) + this.state = { + isUserLogedin: false, + userInputs:{ + 'email': '', + 'password':'', + 'rememberPass':false, + } + } + } + + getEmail = (data) => { + let userData = data.target.value; + if (parseInt(userData[data.target.value.length-1])) { + console.log('If'); + }else{ + console.log('ELSE'); + let tmp_state = this.state; + tmp_state.userInputs.email = userData + this.setState(tmp_state) + } + } + getPassword = (data) => { + let tmp_state = this.state; + tmp_state.userInputs.password = data.target.value + this.setState(tmp_state) + } + + getRememberPass = (data) => { + let tmp_state = this.state; + tmp_state.userInputs.rememberPass = !tmp_state.userInputs.rememberPass + this.setState(tmp_state) + } + + render() { + return ( +
+ +
+ ); + } +} + +export default Main; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..b4cc725 --- /dev/null +++ b/src/index.css @@ -0,0 +1,5 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..1167e48 --- /dev/null +++ b/src/index.js @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; +import './index.css'; + +ReactDOM.render( + , + document.getElementById('root') +); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..6b60c10 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + +