Full functionality, needs translation

2026-08-07 11:29:44 +08:00 · 2018-04-25 12:53:03 -03:00
parent 754b5c5fbb
commit a79d71da7d
7 changed files with 68 additions and 13 deletions
@@ -109,7 +109,6 @@
 .bottomText {
  color: #474747;
  font-size: 0.9em;
-  display: block;
 }

 .detailList {
@@ -119,5 +118,5 @@
 } 

 .detailItem {
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
@@ -43,8 +43,10 @@ class ChangeUsername extends React.Component {

  onSave = async () => {
    this.showDialog();
-    // this.clearForm();
-    // this.disableEditing();
+  };
+
+  saveChanges = async () => {
+    // savechanges
  };

  onChange = e => {
@@ -78,8 +80,6 @@ class ChangeUsername extends React.Component {
    const { username, emailAddress } = this.props;
    const { editing } = this.state;

-    console.log('loading xxxx');
-
    return (
      <section
        className={cn('talk-plugin-auth--edit-profile', styles.container, {
@@ -101,7 +101,7 @@ class ChangeUsername extends React.Component {
                <label className={cn(styles.detailLabel)}>
                  <Icon name="person" className={styles.detailLabelIcon} />
                  <input
-                    name="username"
+                    name="newUsername"
                    type="text"
                    className={styles.detailValue}
                    onChange={this.onChange}
@@ -141,6 +141,7 @@ class ChangeUsername extends React.Component {
              className={cn(styles.button, styles.saveButton)}
              icon="save"
              onClick={this.onSave}
+              disabled={!this.state.formData.newUsername}
            >
              Save
            </Button>
@@ -46,6 +46,8 @@
 .bottomNote {
  font-size: 0.9em;
  line-height: 20px;
+  padding-top: 10px;
+  display: block;
 }

 .bottomActions {
@@ -6,6 +6,28 @@ import Form from './Form';
 import { Button, Dialog } from 'plugin-api/beta/client/components/ui';

 class ChangeUsernameDialog extends React.Component {
+  state = {
+    showErrors: false,
+  };
+
+  showErrors = () => {
+    this.setState({
+      showErrors: true,
+    });
+  };
+
+  confirmChanges = async () => {
+    if (this.formHasError()) {
+      this.showErrors();
+    } else {
+      // await this.props.saveChanges
+      this.props.closeDialog();
+    }
+  };
+
+  formHasError = () =>
+    this.props.formData.confirmNewUsername !== this.props.formData.newUsername;
+
  render() {
    return (
      <Dialog
@@ -37,6 +59,11 @@ class ChangeUsernameDialog extends React.Component {
              type="text"
              onChange={this.props.onChange}
              value={this.props.formData.confirmNewUsername}
+              hasError={this.formHasError() && this.state.showErrors}
+              errorMsg={'Username does not match'}
+              showErrors={this.state.showErrors}
+              columnDisplay
+              showSuccess={false}
            >
              <span className={styles.bottomNote}>
                Note: You will not be able to change your username again for 14
@@ -46,7 +73,12 @@ class ChangeUsernameDialog extends React.Component {
          </Form>
          <div className={styles.bottomActions}>
            <Button className={styles.cancel}>Cancel</Button>
-            <Button className={styles.confirmChanges}>Confirm Changes</Button>
+            <Button
+              className={styles.confirmChanges}
+              onClick={this.confirmChanges}
+            >
+              Confirm Changes
+            </Button>
          </div>
        </div>
      </Dialog>
@@ -1,6 +1,5 @@
 .errorMsg {
  color: #FA4643;
-  padding-left: 4px;
  font-size: 0.9em;
 }

@@ -7,6 +7,14 @@
  display: flex;
 }

+.columnDisplay {
+  flex-direction: column;
+
+  .detailItemMessage {
+    padding: 4px 0 0;
+  }
+}
+
 .detailItemContent {
  min-width: 280px;
 }
@@ -28,13 +36,17 @@
  color: #979797;
  box-sizing: border-box;
  width: 100%;
+
+  &.error {
+    border-color: #FA4643;
+  }
 }

 .detailItemMessage {
  flex-grow: 1;
  display: flex;
  align-items: center;
-  padding-left: 2px;
+  padding-left: 6px;
  padding-top: 16px;

  .warningIcon, .checkIcon {
@@ -48,4 +60,4 @@

 .warningIcon {
  color: #FA4643;
-}
+}
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 import styles from './InputField.css';
 import ErrorMessage from './ErrorMessage';
 import { Icon } from 'plugin-api/beta/client/components/ui';
@@ -15,10 +16,16 @@ const InputField = ({
  hasError = false,
  errorMsg = '',
  children,
+  columnDisplay = false,
+  showSuccess = true,
 }) => {
  return (
    <li className={styles.detailItem}>
-      <div className={styles.detailItemContainer}>
+      <div
+        className={cn(styles.detailItemContainer, {
+          [styles.columnDisplay]: columnDisplay,
+        })}
+      >
        <div className={styles.detailItemContent}>
          <label className={styles.detailLabel} id={id}>
            {label}
@@ -27,7 +34,7 @@ const InputField = ({
            id={id}
            type={type}
            name={name}
-            className={styles.detailValue}
+            className={cn(styles.detailValue, styles.error)}
            onChange={onChange}
            value={value}
            autoComplete="off"
@@ -35,6 +42,7 @@ const InputField = ({
        </div>
        <div className={styles.detailItemMessage}>
          {!hasError &&
+            showSuccess &&
            value && <Icon className={styles.checkIcon} name="check_circle" />}
          {hasError && showError && <ErrorMessage>{errorMsg}</ErrorMessage>}
        </div>
@@ -55,6 +63,8 @@ InputField.propTypes = {
  hasError: PropTypes.bool,
  errorMsg: PropTypes.string,
  children: PropTypes.node,
+  columnDisplay: PropTypes.bool,
+  showSuccess: PropTypes.bool,
 };

 export default InputField;