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

7
twistter-frontend/public/index.html
View File

@@ -5,6 +5,13 @@
<head>
<meta charset="utf-8">
<title>Twistter</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
</style>
</head>
<body>

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>
);
}

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

@@ -0,0 +1,37 @@
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/>
<form action="./login">
<button className="authButtons login">Sign in</button>
</form>
</div>
</div>
);
}
}
export default Home;

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

@@ -0,0 +1,27 @@
import React, { Component } from 'react';
import './App.css';
import logo from './twistter-logo.png';
import TextField from '@material-ui/core/TextField';
import axios from 'axios';
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/>
<TextField className="authInput" id="email" name="email" label="Email" />
<br/><br/>
<TextField className="authInput" id="password" name="password" label="Password" />
<br/><br/>
<button className="authButtons register" type="submit">Sign in</button>
</div>
);
};
}
export default Login;

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

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

72
twistter-frontend/src/Writing_Microblogs.js Normal file
View File

@@ -0,0 +1,72 @@
import React, { Component } from "react";
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';
class Writing_Microblogs extends Component {
constructor(props) {
super(props);
this.state = {
value: '',
title: '',
characterCount: 10
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChangeforPost = this.handleChangeforPost.bind(this);
}
handleChange(event) {
this.setState( {title: event.target.value });
}
handleSubmit(event) {
alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
event.preventDefault();
}
handleChangeforPost(event) {
this.setState({value: event.target.value })
}
handleChangeforCharacterCount(event) {
const charCount = event.target.value.length
const charRemaining = 10 - charCount
this.setState({characterCount: charRemaining })
}
render() {
return (
<div>
<div style={{ width: "200px", height: "50px", marginTop: "180px", marginLeft: "30px" }}>
<form>
<input type="text" placeholder="Enter Microblog Title" value={this.state.title} onChange={this.handleChange} />
</form>
</div>
<div style={{ width: "200px", marginLeft: "50px"}}>
<form onSubmit={this.handleSubmit}>
<textarea value={this.state.value} maxLength="10" placeholder= "Write Microblog here..."
onChange = { (e) => { this.handleChangeforPost(e); this.handleChangeforCharacterCount(e) } } cols={40} rows={20} />
<div style={{ fontSize: "14px", marginRight: "-100px"}} >
<p2>Characters Left: {this.state.characterCount}</p2>
</div>
<div style={{ marginRight: "-100px" }}>
<button onClick>Share Post</button>
</div>
</form>
</div>
</div>
);
}
}
export default Writing_Microblogs;

5
twistter-frontend/src/index.css
View File

@@ -1,5 +0,0 @@
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}

1
twistter-frontend/src/index.js
View File

@@ -1,7 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,