Add demo login button and functionality

foreverLoveWisdom · Aug 9, 2018 · 771543f · 771543f
1 parent b24608a
commit 771543f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git a/app/assets/stylesheets/components/_session_form.scss b/app/assets/stylesheets/components/_session_form.scss
@@ -12,6 +12,11 @@ $button-green: #108851;
   border-bottom: 1px solid #ddd;
 }
 
+.errors {
+  // text-align: center;
+  color: red;
+}
+
 .session-form {
   display: flex;
   flex-direction: column;
@@ -36,11 +41,7 @@ $button-green: #108851;
   font-weight: bold;
 }
 
-.errors {
-  color: red;
-}
-
-.auth-credentials, .session-submit {
+.auth-credentials, .session-submit, .demo-button {
   margin: 10px;
   padding: 5px 20px;
   min-width: 300px;
@@ -54,15 +55,19 @@ $button-green: #108851;
   text-align: left;
 }
 
-.session-submit {
+.session-submit, .demo-button {
   background-color: #0c7c4e;
   color: white;
 }
 
-.session-submit:active {
+.session-submit:active, .demo-button:active {
   background-color: #ddd;
 }
 
+.demo-button {
+  margin-top: 0px;
+}
+
 .alt-auth-link {
   color: $button-link-blue;
 }

diff --git a/frontend/components/session/session_form.jsx b/frontend/components/session/session_form.jsx
@@ -13,6 +13,11 @@ class SessionForm extends React.Component {
     this.handleSumbit = this.handleSumbit.bind(this);
   }
 
+  componentDidMount() {
+    this.usernameInput.focus();  //Rails way to autofocus: have cursor automatically in input
+    this.props.eraseErrors();
+  }
+
   update(field) {
     return e => (
       this.setState({[field]: e.target.value})
@@ -24,6 +29,7 @@ class SessionForm extends React.Component {
     this.props.processForm(this.state);
   }
 
+
   alternateAuth() {
     if(this.props.formType === 'Sign Up') {
       return (
@@ -52,9 +58,16 @@ class SessionForm extends React.Component {
     );
   }
 
-  componentDidMount() {
-    this.usernameInput.focus();  //Rails way to autofocus: have cursor automatically in input
-    this.props.eraseErrors();
+  demoButton() {
+    if(this.props.formType === 'Log In') {
+      return (
+        <input
+          className="demo-button"
+          type="submit"
+          value="Guest Login"
+          onClick={ () => this.setState({username: 'harry_potter', password: '123456'}) } />
+      );
+    }
   }
 
   render() {
@@ -66,7 +79,7 @@ class SessionForm extends React.Component {
           <h1>{this.props.formHeader}</h1>
 
           {this.renderErrors()}
-
+          
           <form onSubmit={this.handleSumbit}>
             <p>Enter your username and password.</p>
             <input
@@ -85,6 +98,7 @@ class SessionForm extends React.Component {
               placeholder="password" />
 
             <input className="session-submit" type="submit" value={this.props.formType} />
+            {this.demoButton()}
           </form>
 
           {this.alternateAuth()}