Login dialog upgrades;

Expand / Collapse TextArea fields on EditRowDialog;
Fix for live reload data on EditRowDialog when data is updated on server

Author: NinoZX

src/components/BrowserMenu/BrowserMenu.scss

@@ -111,6 +111,20 @@
 
   &.active {
     background: $blue;
+
+    &:hover {
+      background: white;
+      color: $blue;
+    }
+  }
+
+  &.greenActive {
+    background: $green;
+
+    &:hover {
+      background: white;
+      color: $blue;
+    }
   }
 }
 

src/components/BrowserMenu/MenuItem.react.js

@@ -8,14 +8,17 @@
 import React  from 'react';
 import styles from 'components/BrowserMenu/BrowserMenu.scss';
 
-let MenuItem = ({ text, disabled, active, onClick }) => {
+let MenuItem = ({ text, disabled, active, greenActive, onClick }) => {
   let classes = [styles.item];
   if (disabled) {
     classes.push(styles.disabled);
   }
   if (active) {
     classes.push(styles.active);
   }
+  if (greenActive) {
+    classes.push(styles.greenActive);
+  }
   return <div className={classes.join(' ')} onClick={disabled ? undefined : onClick}>{text}</div>;
 };
 

src/dashboard/Data/Browser/Browser.react.js

@@ -81,6 +81,7 @@ class Browser extends DashboardView {
       uniqueField: null,
 
       useMasterKey: true,
+      currentUser: Parse.User.current()
     };
 
     this.prefetchData = this.prefetchData.bind(this);
@@ -248,8 +249,12 @@ class Browser extends DashboardView {
     if (!!Parse.User.current()) {
       Parse.User.logOut();
     }
-    const currentUser = await Parse.User.logIn(username, password);
-    this.setState({ currentUser: currentUser, useMasterKey: false }, () => this.refresh());
+    try {
+        const currentUser = await Parse.User.logIn(username, password);
+        this.setState({ currentUser: currentUser, useMasterKey: false }, () => this.refresh());
+    } catch (error) {
+      throw error;
+    }
   }
 
   async logout() {

src/dashboard/Data/Browser/BrowserToolbar.react.js

@@ -270,8 +270,9 @@ let BrowserToolbar = ({
           <MenuItem text={'Class Level Permissions'} onClick={showCLP} />
           <MenuItem text={'Protected Fields'} onClick={showProtected} />
           <Separator />
-          <MenuItem text={'Test ACL - Login'} onClick={showLogin} active={!!currentUser} />
-          {currentUser ? <MenuItem text={'Use Master Key'} onClick={toggleMasterKeyUsage} active={useMasterKey} /> : <noscript />}
+          <MenuItem text={currentUser ? 'Switch Parse.User' : 'Browse as Parse.User'} onClick={showLogin} active={!!currentUser} />
+          {currentUser ? <MenuItem text={useMasterKey ? <span>Browsing with <b>Master Key</b></span> : <span>Browse with <s>Master Key</s></span>} onClick={toggleMasterKeyUsage} active={!!currentUser} greenActive={useMasterKey} /> : <noscript />}
+          {currentUser ? <MenuItem text={<span>Logout (<b>{currentUser.get("username")}</b>)</span>} onClick={logout} active={!!currentUser} /> : <noscript />}
         </BrowserMenu>
       ) : (
         <noscript />

src/dashboard/Data/Browser/LoginDialog.react.js

@@ -2,21 +2,22 @@ import React from "react";
 import ParseApp from "lib/ParseApp";
 import PropTypes from "prop-types";
 import Modal from "components/Modal/Modal.react";
-import Button from "components/Button/Button.react";
 import LoginRow from "components/LoginRow/LoginRow.react";
+import Notification from "dashboard/Data/Browser/Notification.react";
 
 export default class LoginDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       open: false,
       username: "",
-      password: "",
+      password: ""
     };
 
     this.handleOpen = this.handleOpen.bind(this);
     this.handleClose = this.handleClose.bind(this);
     this.login = this.login.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
   }
 
   handleOpen() {
@@ -27,27 +28,45 @@ export default class LoginDialog extends React.Component {
     this.setState({ open: false });
   }
 
-  login() {
+  async login() {
     const { username, password } = this.state;
-    this.props.login(username, password);
-    this.handleClose();
+    if (!!username && !!password) {
+      try {
+        await this.props.login(username, password);
+        this.handleClose();
+      } catch (error) {
+        this.setState({ error: error.message });
+        setTimeout(() => {
+          this.setState({ error: null });
+        }, 3500);
+      }
+    }
+  }
+
+  handleKeyDown(event) {
+    // Number 13 is the "Enter" key on the keyboard
+    if (event.keyCode === 13) {
+      // Cancel the default action, if needed
+      event.preventDefault();
+      // Trigger the button element with a click
+      this.login();
+    }
   }
 
   render() {
-    const { currentUser, logout } = this.props;
-    const { open, username, password } = this.state;
+    const { currentUser } = this.props;
+    const { open } = this.state;
 
     return (
       open && (
         <Modal
           type={Modal.Types.INFO}
-          title="Test ACL"
+          title={currentUser ? "Switch Parse.User" : "Login as Parse.User"}
           subtitle={
             <div style={{ paddingTop: "5px" }}>
               {currentUser && (
                 <p>
-                  Logged in as <strong>{currentUser.get("username")}</strong>{" "}
-                  <Button value={"Logout"} color="white" onClick={logout} />
+                  Logged in as <strong>{currentUser.get("username")}</strong>
                 </p>
               )}
             </div>
@@ -59,12 +78,29 @@ export default class LoginDialog extends React.Component {
         >
           <LoginRow
             label="Username"
-            input={<input onChange={e => this.setState({username: e.nativeEvent.target.value})} />}
+            input={
+              <input
+                onChange={e =>
+                  this.setState({ username: e.nativeEvent.target.value })
+                }
+                onKeyDown={this.handleKeyDown}
+                autoFocus
+              />
+            }
           />
           <LoginRow
             label="Password"
-            input={<input onChange={e => this.setState({password: e.nativeEvent.target.value})} type="password" />}
+            input={
+              <input
+                onChange={e =>
+                  this.setState({ password: e.nativeEvent.target.value })
+                }
+                type="password"
+                onKeyDown={this.handleKeyDown}
+              />
+            }
           />
+          <Notification note={this.state.error} isErrorNote={true} />
         </Modal>
       )
     );