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

Added frontend

Browse Source
This commit is contained in:
Aaron Sun 2019-09-19 14:30:02 -04:00
parent ff2a83d4a0
commit 6341100061
12 changed files with 9858 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.firebaserc
View File

@ -2,6 +2,7 @@
"projects": { "projects": {
"default": "twistter-e4649", "default": "twistter-e4649",
"Twistter": "twistter-e4649", "Twistter": "twistter-e4649",
"Twistter1": "twistter-6a42d" "Twistter1": "twistter-6a42d",
"SuperTiger69": "twistter-e4649"
} }
} }

18
twistter-frontend/.gitignore vendored Normal file
View File

@ -0,0 +1,18 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env
npm-debug.log*
yarn-debug.log*
yarn-error.log*

1618
twistter-frontend/README.md Normal file
View File

File diff suppressed because it is too large Load Diff

7956
twistter-frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

18
twistter-frontend/package.json Normal file
View File

@ -0,0 +1,18 @@
{
"name": "twistter-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"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"
}
}

BIN
twistter-frontend/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

14
twistter-frontend/public/index.html Normal file
View File

@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twistter</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

43
twistter-frontend/src/App.css Normal file
View File

@ -0,0 +1,43 @@
.app {
font-family: "Segoe UI";
font-size: large;
text-align: center;
}
.app-logo {
height: 200px;
}
.authButtons {
border-radius: 100px;
box-shadow: none;
cursor: pointer;
font-size: 14px;
font-weight: bold;
font-family: "Segoe UI";
line-height: 20px;
padding: 10px 200px;
position: relative;
text-align: center;
white-space: nowrap;
}
.register {
background-color: #1da1f2;
border: 1px solid #fff;
color: #fff;
}
.login {
background-color: #fff;
border: 1px solid #1da1f2;
color: #1da1f2;
}
.authInput {
background-color: #eee;
width:500px;
height:40px;
border: 0px;
padding: 10px;
}

175
twistter-frontend/src/App.js Normal file
View File

@ -0,0 +1,175 @@
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;
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;
}
}
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>
</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>
);
}
}
export default App;

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

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

9
twistter-frontend/src/index.js Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);

BIN
twistter-frontend/src/twistter-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB