ClaytonWWilson/CS307-Team24
1
0
Fork 0
mirror of https://github.com/ClaytonWWilson/CS307-Team24.git synced 2025-12-16 10:18:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Modified the code structure for the auth UI

Browse Source
This commit is contained in:
Aaron Sun 2019-09-24 08:38:02 -04:00
parent 6341100061
commit 6f94623d0c
6 changed files with 9978 additions and 4492 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14131
twistter-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
twistter-frontend/package.json
View File

@ -3,10 +3,11 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.4.3",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-scripts": "0.9.5"
"react-scripts": "^3.1.2"
},
"devDependencies": {},
"scripts": {
@ -14,5 +15,17 @@
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

166
twistter-frontend/src/App.js
View File

@ -1,172 +1,28 @@
import React, { Component } from 'react';
import logo from './twistter-logo.png';
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';
import './App.css';
var validEmail = true;
var validUsername = false;
var validPassword = false;
var passwordsMatch = false;
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';
const emailBlur = () => {
//var email = document.getElementById("email");
/*if() {
validEmail = true;
}
else {
validEmail = false;
alert("Email is invalid.");
}*/
if(validEmail && validUsername && validPassword && passwordsMatch) {
document.getElementById("submit").disabled = false;
}
else {
document.getElementById("submit").disabled = true;
}
}
const usernameBlur = () => {
var username = document.getElementById("username");
if(username.value.length >= 3 && username.value.length <= 50) {
validUsername = true;
}
else {
validUsername = false;
alert("Username must be between 3 and 50 characters long.");
}
if(validEmail && validUsername && validPassword && passwordsMatch) {
document.getElementById("submit").disabled = false;
}
else {
document.getElementById("submit").disabled = true;
}
}
const passwordBlur = () => {
var password = document.getElementById("password");
if(password.value.length >= 8 && password.value.length <= 20) {
validPassword = true;
}
else {
validPassword = false;
alert("Password must be between 8 and 20 characters long.");
}
if(validEmail && validUsername && validPassword && passwordsMatch) {
document.getElementById("submit").disabled = false;
}
else {
document.getElementById("submit").disabled = true;
}
}
const confirmPasswordBlur = () => {
var password = document.getElementById("password");
var confirmPassword = document.getElementById("confirmPassword");
if(password.value === confirmPassword.value) {
passwordsMatch = true;
}
else {
passwordsMatch = false;
alert("Passwords must match.");
}
if(validEmail && validUsername && validPassword && passwordsMatch) {
document.getElementById("submit").disabled = false;
}
else {
document.getElementById("submit").disabled = true;
}
}
import home from './Home.js';
import register from './Register.js';
import login from './Login.js';
class App extends Component {
render() {
return (
<Router>
<div className="app">
<Route path="/" exact render={
() => {
return (
<div>
<div>
<img src={logo} className="app-logo" alt="logo" />
<br/><br/>
<b>Welcome to Twistter!</b>
<br/><br/>
<b>See the most interesting topics people are following right now.</b>
<Route exact path="/" component={home}/>
<Route exact path="/register" component={register}/>
<Route exact path="/login" component={login}/>
</div>
<br/><br/><br/><br/>
<div>
<b>Join today or sign in if you already have an account.</b>
<br/><br/>
<button class="authButtons register"><a href="/register">Sign up</a></button>
<br/><br/>
<button class="authButtons login"><a href="/login">Sign in</a></button>
</div>
</div>
)
}
}/>
<Route path="/register" exact render={
() => {
return (
<div>
<img src={logo} className="app-logo" alt="logo" />
<br/><br/>
<b>Create your account</b>
<br/><br/>
<input class="authInput" id="email" placeholder="Email" onBlur={() => emailBlur()}></input>
<br/><br/>
<input class="authInput" id="username" placeholder="Username" onBlur={() => usernameBlur()}></input>
<br/><br/>
<input class="authInput" id="password" placeholder="Password" onBlur={() => passwordBlur()}></input>
<br/><br/>
<input class="authInput" id="confirmPassword" placeholder="Confirm Password" onBlur={() => confirmPasswordBlur()}></input>
<br/><br/>
<button class="authButtons register" id="submit" onclick="" disabled>Sign up</button>
</div>
)
}
}/>
<Route path="/login" exact render={
() => {
return (
<div>
<img src={logo} className="app-logo" alt="logo" />
<br/><br/>
<b>Log in to Twistter</b>
<br/><br/>
<input class="authInput" placeholder="Username or email"></input>
<br/><br/>
<input class="authInput" placeholder="Password"></input>
<br/><br/>
<button class="authButtons register" onclick="">Sign in</button>
</div>
)
}
}/>
</div>
</Router>
);
}

36
twistter-frontend/src/Home.js Normal file
View File

@ -0,0 +1,36 @@
import React, { Component } from 'react';
import './App.css';
import logo from './twistter-logo.png';
class Home extends Component {
render() {
return (
<div>
<div>
<img src={logo} className="app-logo" alt="logo" />
<br/><br/>
<b>Welcome to Twistter!</b>
<br/><br/>
<b>See the most interesting topics people are following right now.</b>
</div>
<br/><br/><br/><br/>
<div>
<b>Join today or sign in if you already have an account.</b>
<br/><br/>
<form action="./register">
<button className="authButtons register">Sign up</button>
</form>
<br/><br/>
<form action="./login">
<button className="authButtons login">Sign in</button>
</form>
</div>
</div>
);
}
}
export default Home;

24
twistter-frontend/src/Login.js Normal file
View File

@ -0,0 +1,24 @@
import React, { Component } from 'react';
import './App.css';
import logo from './twistter-logo.png';
class Login extends Component {
render() {
return (
<div>
<img src={logo} className="app-logo" alt="logo" />
<br/><br/>
<b>Log in to Twistter</b>
<br/><br/>
<input class="authInput" placeholder="Username or email"></input>
<br/><br/>
<input class="authInput" placeholder="Password"></input>
<br/><br/>
<button class="authButtons register">Sign in</button>
</div>
);
}
}
export default Login;

28
twistter-frontend/src/Register.js Normal file
View File

@ -0,0 +1,28 @@
import React, { Component } from 'react';
import './App.css';
import logo from './twistter-logo.png';
class Register extends Component {
render() {
return (
<div>
<img src={logo} className="app-logo" alt="logo" />
<br/><br/>
<b>Create your account</b>
<br/><br/>
<input class="authInput" id="email" placeholder="Email"></input>
<br/><br/>
<input class="authInput" id="username" placeholder="Username"></input>
<br/><br/>
<input class="authInput" id="password" placeholder="Password"></input>
<br/><br/>
<input class="authInput" id="confirmPassword" placeholder="Confirm Password"></input>
<br/><br/>
<button class="authButtons register" id="submit">Sign up</button>
</div>
);
}
}
export default Register;