Modified the code structure for the auth UI

twistter-frontend/package.json

@@ -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"
+    ]
   }
 }

twistter-frontend/src/App.js

@@ -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;
+import { BrowserRouter as Router } from 'react-router-dom';
-var validUsername = false;
+import Route from 'react-router-dom/Route';
-var validPassword = false;
-var passwordsMatch = false;
 
-const emailBlur = () => {
+import home from './Home.js';
-  //var email = document.getElementById("email");
+import register from './Register.js';
-
+import login from './Login.js';
-  /*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 exact path="/" component={home}/>
-          
+          <Route exact path="/register" component={register}/>
-
+          <Route exact path="/login" component={login}/>
-        
-          
-          <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>
     );
   }

twistter-frontend/src/Home.js

@@ -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;

twistter-frontend/src/Login.js

@@ -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;

twistter-frontend/src/Register.js

@@ -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;