-
: null; }; - updateUsername = username => this.setState({ username }); - updatePassword = password => this.setState({ password }); - updateConfirmPassword = confirmPassword => this.setState({ confirmPassword }); + updateUsername = (username) => this.setState({ username }); + updatePassword = (password) => this.setState({ password }); + updateConfirmPassword = (confirmPassword) => this.setState({ confirmPassword }); renderInputs = () => (
+
);
- }
+ };
}
export default Login;
diff --git a/src/components/CreateUser/CreateUserForm.js b/src/components/Login/CreateUserForm.js
similarity index 83%
rename from src/components/CreateUser/CreateUserForm.js
rename to src/components/Login/CreateUserForm.js
index 485adc40..c9792a54 100644
--- a/src/components/CreateUser/CreateUserForm.js
+++ b/src/components/Login/CreateUserForm.js
@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
import * as firebase from "firebase/app";
import "firebase/auth";
import SHA256 from "crypto-js/sha256";
-import LoginInput from "../Login/LoginInput.js";
+import LoginInput from "./LoginInput.js";
import {
MINIMUM_USERNAME_LENGTH,
MINIMUM_PASSWORD_LENGTH,
@@ -100,7 +100,7 @@ export default class CreateUserForm extends React.Component {
* @return {void} submit returns early if the inputs passed by a prospective user
* are bad.
*/
- submit = e => {
+ submit = (e) => {
e.preventDefault();
this.setState({
@@ -129,7 +129,7 @@ export default class CreateUserForm extends React.Component {
.auth()
.createUserWithEmailAndPassword(email, passHash)
.then(({ user }) => {})
- .catch(err => {
+ .catch((err) => {
console.error(err);
let newMsg = err.message;
switch (err.code) {
@@ -185,9 +185,9 @@ export default class CreateUserForm extends React.Component {
return addBreak ?
+
+ this.setState({ index: Math.floor(Math.random() * 5) })}
+ >
+
+
+
+
+
+
+ + The ACM Teach LA{" "} + Online Editor +
+a web IDE that lets you write and run Python & Processing code, anywhere.
+ {this.props.create ? ( +
+ 
+ {this.getSVG()}
-
: null; }; - updateUsername = username => this.setState({ username }); - updatePassword = password => this.setState({ password }); - updateConfirmPassword = confirmPassword => this.setState({ confirmPassword }); + updateUsername = (username) => this.setState({ username }); + updatePassword = (password) => this.setState({ password }); + updateConfirmPassword = (confirmPassword) => this.setState({ confirmPassword }); renderInputs = () => (
@@ -221,37 +221,50 @@ export default class CreateUserForm extends React.Component {
if (this.state.waiting) {
return (
-
);
} else {
+ const unclickedStyle = {
+ backgroundColor: "white",
+ borderColor: this.props.themeColor,
+ borderWidth: "medium",
+ borderRadius: "4px",
+ color: "black",
+ };
+
+ const clickedStyle = {
+ backgroundColor: this.props.themeColor,
+ borderColor: this.props.themeColor,
+ borderWidth: "medium",
+ borderRadius: "4px",
+ color: this.props.textColor,
+ };
return (
-
+
+
+
+ or, login with an existing account
+
+
);
}
};
- renderLink = () => (
-
- Already have an account? Click here to login.
-
- );
-
render() {
return (
-
-
-
+
);
}
}
diff --git a/src/components/CreateUser/CreateUserForm.test.js b/src/components/Login/CreateUserForm.test.js
similarity index 94%
rename from src/components/CreateUser/CreateUserForm.test.js
rename to src/components/Login/CreateUserForm.test.js
index ec03a62d..80594fce 100644
--- a/src/components/CreateUser/CreateUserForm.test.js
+++ b/src/components/Login/CreateUserForm.test.js
@@ -31,12 +31,7 @@ describe("CreateUserForm", () => {
expect(component.state().usernameMessage).toBe(
`Username must only use upper case and lower case letters, numbers, and/or the special characters !@#$%`,
);
- expect(
- component
- .find(".login-form-input-error")
- .at(0)
- .text(),
- ).toBe(
+ expect(component.find(".login-form-input-error").at(0).text()).toBe(
`Username must only use upper case and lower case letters, numbers, and/or the special characters !@#$%`,
);
@@ -60,12 +55,7 @@ describe("CreateUserForm", () => {
expect(component.state().passwordMessage).toBe(
`Password must only use upper case and lower case letters, numbers, and/or the special characters !@#$%`,
);
- expect(
- component
- .find(".login-form-input-error")
- .at(0)
- .text(),
- ).toBe(
+ expect(component.find(".login-form-input-error").at(0).text()).toBe(
`Password must only use upper case and lower case letters, numbers, and/or the special characters !@#$%`,
);
diff --git a/src/components/Login/LoginForm.js b/src/components/Login/LoginForm.js
index 88655449..f665fee9 100644
--- a/src/components/Login/LoginForm.js
+++ b/src/components/Login/LoginForm.js
@@ -9,10 +9,6 @@ import * as firebase from "firebase/app";
import "firebase/auth";
import "styles/Login.scss";
-/**-------Props--------
- * provider: Firebase Provider that allows the app to do Facebook Logins
- */
-
export default class LoginModal extends React.Component {
constructor(props) {
super(props);
@@ -22,10 +18,11 @@ export default class LoginModal extends React.Component {
password: "",
errorMsg: "",
waiting: false,
+ hoverButton: false,
};
}
- handleEmailLogin = e => {
+ handleEmailLogin = (e) => {
this.setState({ waiting: true, errorMsg: "" });
e.preventDefault(); //prevents page from reloading after submitting form
@@ -37,7 +34,7 @@ export default class LoginModal extends React.Component {
.auth()
.signInWithEmailAndPassword(email, passwordHash)
.then(() => {})
- .catch(err => {
+ .catch((err) => {
console.error(err);
let newMsg = err.message;
switch (err.code) {
@@ -80,18 +77,8 @@ export default class LoginModal extends React.Component {
}
};
- handleSocialLogin = e => {
- this.setState({ waiting: true });
- firebase
- .auth()
- .signInWithPopup(this.props.provider)
- .catch(function(err) {
- this.setState({ errorMsg: "Failed to use Facebook login provider", waiting: false });
- });
- };
-
- updateUsername = username => this.setState({ username });
- updatePassword = password => this.setState({ password });
+ updateUsername = (username) => this.setState({ username });
+ updatePassword = (password) => this.setState({ password });
renderErrorMessage = (msg, addBreak) => {
if (msg)
@@ -126,45 +113,61 @@ export default class LoginModal extends React.Component {
);
renderAction = () => {
+ const unclickedStyle = {
+ backgroundColor: "white",
+ borderColor: this.props.themeColor,
+ borderWidth: "medium",
+ borderRadius: "4px",
+ color: "black",
+ };
+
+ const clickedStyle = {
+ backgroundColor: this.props.themeColor,
+ borderColor: this.props.themeColor,
+ borderWidth: "medium",
+ borderRadius: "4px",
+ color: this.props.textColor,
+ };
+
if (this.state.waiting) {
return (
-
);
} else {
return (
-
+
+
+
+ or, create an account
+
+
);
}
};
render() {
return (
-
+