Adding Dialog, styles and more

plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.css

@@ -47,7 +47,7 @@
   border: 1px solid #787d80;
   background-color: transparent;
   height: 30px;
-  font-size: 1em;
+  font-size: 0.9em;
   line-height: normal;
 }
 

plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.css

@@ -1,20 +1,123 @@
 .container {
   margin-bottom: 20px;
+  display: flex;
+  position: relative;
+  color: #202020;
+  padding: 10px;
+  border-radius: 2px;
+  box-sizing: border-box;
+  justify-content: space-between;
+  
+  &.editing { 
+    background-color: #EDEDED;
+  }
 }
 
+.content {
+  flex-grow: 1;
+} 
+
+.actions {
+  flex-grow: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}                                                                       
+
 .email {
   margin: 0;
 }
 
-.username {
+.username {   
   margin-bottom: 4px;
+}         
+
+.button {
+  border: 1px solid #787d80;
+  background-color: transparent;
+  height: 30px;
+  font-size: 0.9em;
+  line-height: normal;
 }
 
-.actions {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
+.saveButton {
+  background-color: #3498DB;
+  border-color: #3498DB;
+  color: white;
+
+  > i {
+    font-size: 17px;
+  }
+    
+  &:hover {
+    background-color: #399ee2;
+    color: white;
+  }
+
+  &:disabled {
+    border-color: #e0e0e0;
+
+    &:hover {
+      background-color: #e0e0e0;
+      color: #4f5c67;
+      cursor: default;
+    }
+  }
+}
+
+.cancelButton {
+  color:#787D80;
+  margin-top: 6px;
+  font-size: 0.9em;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.detailLabel {
+  border: solid 1px #787D80;
+  border-radius: 2px;
+  background-color: white;
+  height: 30px;
+  display: inline-block;
+  width: 230px;
+  display: flex;  
+
+  > .detailLabelIcon {
+    font-size: 1.2em;
+    padding: 0 5px;
+    color: #787D80;
+    line-height: 30px; 
+  }
+
+  &.disabled {
+    background-color: #E0E0E0;
+  }
+}
+
+.detailValue {
+  background: transparent;
+  border: none;
+  font-size: 1em;
+  color: #000;
+  height: 30px;
+  outline: none;
+  flex: 1;
+}
+
+.bottomText {
+  color: #474747;
+  font-size: 0.9em;
+  display: block;
+}
+
+.detailList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+} 
+
+.detailItem {
+  margin-bottom: 8px;
+}

plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js

@@ -2,41 +2,163 @@ import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './ChangeUsername.css';
-import { Button } from 'plugin-api/beta/client/components/ui';
+import { Icon, Button } from 'plugin-api/beta/client/components/ui';
+import ChangeUsernameDialog from './ChangeUsernameDialog';
 
 const initialState = {
   editing: false,
+  formData: {},
+  showDialog: false,
 };
 
 class ChangeUsername extends React.Component {
   state = initialState;
 
+  clearForm = () => {
+    this.setState(initialState);
+  };
+
+  enableEditing = () => {
+    this.setState({
+      editing: true,
+    });
+  };
+
+  disableEditing = () => {
+    this.setState({
+      editing: false,
+    });
+  };
+
+  cancel = () => {
+    this.clearForm();
+    this.disableEditing();
+  };
+
+  showDialog = () => {
+    this.setState({
+      showDialog: true,
+    });
+  };
+
+  onSave = async () => {
+    this.showDialog();
+    // this.clearForm();
+    // this.disableEditing();
+  };
+
+  onChange = e => {
+    const { name, value } = e.target;
+    this.setState(
+      state => ({
+        formData: {
+          ...state.formData,
+          [name]: value,
+        },
+      }),
+      () => {
+        console.log(this.state.formData);
+        // Validation
+        // this.fieldValidation(value, type, name);
+        // // Perform equality validation if password fields have changed
+        // if (name === 'newPassword' || name === 'confirmNewPassword') {
+        //   this.equalityValidation('newPassword', 'confirmNewPassword');
+        // }
+      }
+    );
+  };
+
+  closeDialog = () => {
+    this.setState({
+      showDialog: false,
+    });
+  };
+
   render() {
     const { username, emailAddress } = this.props;
+    const { editing } = this.state;
+
+    console.log('loading xxxx');
+
     return (
-      <section className={styles.container}>
-        <div className={styles.content}>
-          <h2 className={styles.username}>{username}</h2>
-          {emailAddress ? <p className={styles.email}>{emailAddress}</p> : null}
-        </div>
-        <div className={styles.actions}>
-          <Button
-            className={cn(styles.button, styles.saveButton)}
-            icon="save"
-            onClick={this.onSave}
-            disabled={this.isSubmitBlocked()}
-          >
-            Save
-          </Button>
-          <a className={styles.cancelButton} onClick={this.cancel}>
-            Cancel
-          </a>
-        </div>
-        <div className={styles.actions}>
-          <Button className={styles.button} onClick={this.enableEditing}>
-            Edit
-          </Button>
-        </div>
+      <section
+        className={cn('talk-plugin-auth--edit-profile', styles.container, {
+          [styles.editing]: editing,
+        })}
+      >
+        <ChangeUsernameDialog
+          showDialog={this.state.showDialog}
+          onChange={this.onChange}
+          formData={this.state.formData}
+          username={username}
+          closeDialog={this.closeDialog}
+        />
+
+        {editing ? (
+          <div className={styles.content}>
+            <ul className={styles.detailList}>
+              <li className={styles.detailItem}>
+                <label className={cn(styles.detailLabel)}>
+                  <Icon name="person" className={styles.detailLabelIcon} />
+                  <input
+                    name="username"
+                    type="text"
+                    className={styles.detailValue}
+                    onChange={this.onChange}
+                    defaultValue={username}
+                  />
+                </label>
+                <span className={styles.bottomText}>
+                  Usernames can be changed every 14 days
+                </span>
+              </li>
+              <li className={styles.detailItem}>
+                <label className={cn(styles.detailLabel, styles.disabled)}>
+                  <Icon name="email" className={styles.detailLabelIcon} />
+                  <input
+                    name="email"
+                    type="email"
+                    className={styles.detailValue}
+                    defaultValue={emailAddress}
+                    disabled={true}
+                  />
+                </label>
+              </li>
+            </ul>
+          </div>
+        ) : (
+          <div className={styles.content}>
+            <h2 className={styles.username}>{username}</h2>
+            {emailAddress ? (
+              <p className={styles.email}>{emailAddress}</p>
+            ) : null}
+          </div>
+        )}
+
+        {editing ? (
+          <div className={styles.actions}>
+            <Button
+              className={cn(styles.button, styles.saveButton)}
+              icon="save"
+              onClick={this.onSave}
+            >
+              Save
+            </Button>
+            <a className={styles.cancelButton} onClick={this.cancel}>
+              Cancel
+            </a>
+          </div>
+        ) : (
+          <div className={styles.actions}>
+            <Button
+              className={styles.button}
+              icon="settings"
+              onClick={this.enableEditing}
+            >
+              Edit Profile
+            </Button>
+          </div>
+        )}
       </section>
     );
   }

plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.css

@@ -0,0 +1,82 @@
+.dialog {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 320px;
+  top: 10px;
+  font-family: Helvetica, 'Helvetica Neue', Verdana, sans-serif;
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 12px 20px;
+}
+
+.close {
+  font-size: 20px;
+  line-height: 14px;
+  top: 10px;
+  right: 10px;
+  position: absolute;
+  display: block;
+  font-weight: bold;
+  color: #363636;
+  cursor: pointer;
+
+  &:hover {
+    color: #6b6b6b;
+  }
+}
+
+.title {
+  font-size: 1.3em;
+  margin-bottom: 8px;
+}
+
+.description {
+  font-size: 1em;
+  line-height: 20px;
+  margin: 0;
+}
+
+.item {
+  display: block;
+  color: #4C4C4D;
+  font-size: 1em;
+  margin-bottom: 2px;
+}
+
+.bottomNote {
+  font-size: 0.9em;
+  line-height: 20px;
+}
+
+.bottomActions {
+  text-align: right;
+}
+
+.usernamesChange {
+  margin: 18px 0;
+}
+
+.cancel {
+  border: 1px solid #787d80;
+  background-color: transparent;
+  height: 30px;
+  font-size: 0.9em;
+  line-height: normal;
+
+  &:hover {
+    background-color: #eaeaea;
+  }
+}
+
+.confirmChanges {
+  background-color: #3498DB;
+  border-color: #3498DB;
+  color: white;
+  height: 30px;
+  font-size: 0.9em;
+  
+  &:hover {
+    background-color: #3ba3ec;
+    color: white;
+  }
+}

plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './ChangeUsernameDialog.css';
+import InputField from './InputField';
+import Form from './Form';
+import { Button, Dialog } from 'plugin-api/beta/client/components/ui';
+
+class ChangeUsernameDialog extends React.Component {
+  render() {
+    return (
+      <Dialog
+        open={this.props.showDialog}
+        className={cn(styles.dialog, 'talk-plugin-auth--edit-profile-dialog')}
+      >
+        <span className={styles.close} onClick={this.props.closeDialog}>
+          ×
+        </span>
+        <h1 className={styles.title}>Confirm Username Change</h1>
+        <div className={styles.content}>
+          <p className={styles.description}>
+            You are attempting to change your username. Your new username will
+            appear on all of your past and future comments.
+          </p>
+          <div className={styles.usernamesChange}>
+            <span className={styles.item}>
+              Old Username: {this.props.username}
+            </span>
+            <span className={styles.item}>
+              New Username: {this.props.formData.newUsername}
+            </span>
+          </div>
+          <Form>
+            <InputField
+              id="confirmNewUsername"
+              label="Re-enter new username"
+              name="confirmNewUsername"
+              type="text"
+              onChange={this.props.onChange}
+              value={this.props.formData.confirmNewUsername}
+            >
+              <span className={styles.bottomNote}>
+                Note: You will not be able to change your username again for 14
+                days
+              </span>
+            </InputField>
+          </Form>
+          <div className={styles.bottomActions}>
+            <Button className={styles.cancel}>Cancel</Button>
+            <Button className={styles.confirmChanges}>Confirm Changes</Button>
+          </div>
+        </div>
+      </Dialog>
+    );
+  }
+}
+
+export default ChangeUsernameDialog;