ClaytonWWilson/CS307-Team24
1
0
Fork 0
mirror of https://github.com/ClaytonWWilson/CS307-Team24.git synced 2026-03-10 21:25:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into user_subscription

Browse Source
This commit is contained in:
Leon Liang
2019-09-27 21:40:39 -04:00
committed by GitHub
parent 1306c1654a 8a5b115666
commit cc1ce1bfc9
11 changed files with 214 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,181 +1,29 @@
/* eslint-disable */
import React, { Component } from 'react';
import logo from './images/twistter-logo.png';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import './App.css';
//TODO: reorganize imports
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';
//components
import Navbar from './components/layout/NavBar';
// pages
import user from './pages/user';
var validEmail = true;
var validUsername = false;
var validPassword = false;
var passwordsMatch = false;
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>
<Navbar />
<div className='container'>
<Switch>
<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>
</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>
)
}
}/>
<div className="app">
<Route exact path="/" component={home}/>
<Route exact path="/register" component={register}/>
<Route exact path="/login" component={login}/>
<Route exact path="/user" component={user}/>
</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>
)
}
}/>
<Route path="/user" exact component={user} />
</Switch>
</div>
</Router>
);
}