Change email dialog

apps/i18n/common/en_us.json

@@ -130,6 +130,17 @@
   "challengeLevelSkip": "Skip for now",
   "challengeLevelStart": "I'm ready!",
   "challengeLevelTitle": "Challenge Puzzle!",
+  "changeEmailModal_currentPassword_isRequired": "Current password is required.",
+  "changeEmailModal_currentPassword_label": "Current password",
+  "changeEmailModal_emailOptIn_description": "Would you like to be added to our mailing list so that we can tell you about updates to our courses, local learning opportunities, or other computer science news? This will not impact your subscription preferences for your old email address.",
+  "changeEmailModal_emailOptIn_isRequired": "This field is required.",
+  "changeEmailModal_newEmail_invalid": "The email address you provided is not valid.",
+  "changeEmailModal_newEmail_isRequired": "A new email address is required.",
+  "changeEmailmodal_newEmail_mustBeDifferent": "New email address must not match old email address.",
+  "changeEmailModal_newEmail_label": "New email address",
+  "changeEmailModal_save": "Update email address",
+  "changeEmailModal_title": "Update email address",
+  "changeEmailModal_unexpectedError": "An unexpected error has occurred.  Please wait a moment and try again.",
   "changeLoginType": "Change login type",
   "changeLoginTypeQuestion": "Change student login type?",
   "changeLoginTypeToPicture_button": "Change to picture login",

apps/src/code-studio/hashEmail.js

@@ -1,13 +1,13 @@
 import $ from 'jquery';
 import MD5 from 'crypto-js/md5';
 
-var EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 
-module.exports = function hashEmail(options) {
+export default function (options) {
   // Hash the email, if it is an email.
-  var email = $(options.email_selector).val().toLowerCase().trim();
+  const email = normalizeEmail($(options.email_selector).val());
   if (email !== '' && EMAIL_REGEX.test(email)) {
-    var hashed_email = MD5(email);
+    const hashed_email = hashEmail(email);
     $(options.hashed_email_selector).val(hashed_email);
 
     // Unless we want to deliberately skip the step of clearing the email.
@@ -18,4 +18,12 @@ module.exports = function hashEmail(options) {
       }
     }
   }
-};
+}
+
+export function hashEmail(cleartextEmail) {
+  return MD5(normalizeEmail(cleartextEmail)).toString();
+}
+
+function normalizeEmail(rawEmail) {
+  return rawEmail.toLowerCase().trim();
+}

apps/src/lib/ui/ChangeEmailForm.jsx

@@ -0,0 +1,174 @@
+import React, {PropTypes} from 'react';
+import color from '@cdo/apps/util/color';
+import i18n from '@cdo/locale';
+
+export default class ChangeEmailForm extends React.Component {
+  static propTypes = {
+    values: PropTypes.shape({
+      newEmail: PropTypes.string,
+      currentPassword: PropTypes.string,
+      emailOptIn: PropTypes.string,
+    }).isRequired,
+    validationErrors: PropTypes.shape({
+      newEmail: PropTypes.string,
+      currentPassword: PropTypes.string,
+      emailOptIn: PropTypes.string,
+    }).isRequired,
+    disabled: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+  };
+
+  componentDidMount() {
+    this.newEmailInput.focus();
+  }
+
+  focusOnAnError() {
+    const {validationErrors} = this.props;
+    if (validationErrors.newEmail) {
+      this.newEmailInput.focus();
+    } else if (validationErrors.currentPassword) {
+      this.currentPasswordInput.focus();
+    }
+  }
+
+  onNewEmailChange = (event) => this.props.onChange({
+    ...this.props.values,
+    newEmail: event.target.value,
+  });
+
+  onCurrentPasswordChange = (event) => this.props.onChange({
+    ...this.props.values,
+    currentPassword: event.target.value,
+  });
+
+  onEmailOptInChange = (event) => this.props.onChange({
+    ...this.props.values,
+    emailOptIn: event.target.value,
+  });
+
+  onKeyDown = (event) => {
+    if (event.key === 'Enter' && !this.props.disabled) {
+      this.props.onSubmit();
+    }
+  };
+
+  render() {
+    const {values, validationErrors, disabled} = this.props;
+    return (
+      <div>
+        <Field>
+          <label
+            htmlFor="user_email"
+            style={styles.label}
+          >
+            {i18n.changeEmailModal_newEmail_label()}
+          </label>
+          <input
+            id="user_email"
+            type="email"
+            value={values.newEmail}
+            disabled={disabled}
+            onKeyDown={this.onKeyDown}
+            onChange={this.onNewEmailChange}
+            autoComplete="off"
+            maxLength="255"
+            size="255"
+            style={styles.input}
+            ref={el => this.newEmailInput = el}
+          />
+          <FieldError>
+            {validationErrors.newEmail}
+          </FieldError>
+        </Field>
+        <Field>
+          <label
+            htmlFor="user_current_password"
+            style={styles.label}
+          >
+            {i18n.changeEmailModal_currentPassword_label()}
+          </label>
+          <input
+            id="user_current_password"
+            type="password"
+            value={values.currentPassword}
+            disabled={disabled}
+            onKeyDown={this.onKeyDown}
+            onChange={this.onCurrentPasswordChange}
+            maxLength="255"
+            size="255"
+            style={styles.input}
+            ref={el => this.currentPasswordInput = el}
+          />
+          <FieldError>
+            {validationErrors.currentPassword}
+          </FieldError>
+        </Field>
+        <Field style={{display: 'none'}}>
+          <p>
+            {i18n.changeEmailModal_emailOptIn_description()}
+          </p>
+          <select
+            value={values.emailOptIn}
+            onKeyDown={this.onKeyDown}
+            onChange={this.onEmailOptInChange}
+            disabled={disabled}
+            style={{
+              ...styles.input,
+              width: 100,
+            }}
+          >
+            <option value=""/>
+            <option value="yes">
+              {i18n.yes()}
+            </option>
+            <option value="no">
+              {i18n.no()}
+            </option>
+          </select>
+          <FieldError>
+            {validationErrors.emailOptIn}
+          </FieldError>
+        </Field>
+      </div>
+    );
+  }
+}
+
+const Field = ({children, style}) => (
+  <div
+    style={{
+      marginBottom: 15,
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+);
+Field.propTypes = {
+  children: PropTypes.any,
+  style: PropTypes.object,
+};
+
+const FieldError = ({children}) => (
+  <div
+    style={{
+      color: color.red,
+      fontStyle: 'italic',
+    }}
+  >
+    {children}
+  </div>
+);
+FieldError.propTypes = {children: PropTypes.string};
+
+const styles = {
+  label: {
+    display: 'block',
+    fontWeight: 'bold',
+    color: color.charcoal,
+  },
+  input: {
+    marginBottom: 4,
+  },
+};

apps/src/lib/ui/ChangeEmailForm.story.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import ChangeEmailForm from './ChangeEmailForm';
+import {action} from '@storybook/addon-actions';
+
+const DEFAULT_PROPS = {
+  values: {
+    newEmail: '',
+    currentPassword: '',
+    emailOptIn: '',
+  },
+  validationErrors: {
+    newEmail: undefined,
+    currentPassword: undefined,
+    emailOptIn: undefined,
+  },
+  disabled: false,
+  onChange: action('onChange'),
+  onSubmit: action('onSubmit')
+};
+
+export default storybook => storybook
+  .storiesOf('ChangeEmailForm', module)
+  .addStoryTable([
+    {
+      name: 'with valid content',
+      story: () => (
+        <ChangeEmailForm
+          {...DEFAULT_PROPS}
+          values={{
+            newEmail: 'batman@bat.cave',
+            currentPassword: 'imsorich',
+          }}
+        />
+      )
+    },
+    {
+      name: 'with validation errors',
+      story: () => (
+        <ChangeEmailForm
+          {...DEFAULT_PROPS}
+          values={{
+            newEmail: 'robin@bat.cave',
+            currentPassword: 'no1fan',
+          }}
+          validationErrors={{
+            newEmail: "Robin, get out of here!",
+            currentPassword: "That's totally the wrong password."
+          }}
+        />
+      )
+    },
+    {
+      name: 'disabled',
+      story: () => (
+        <ChangeEmailForm
+          {...DEFAULT_PROPS}
+          values={{
+            newEmail: 'currently-saving@bat.cave',
+            currentPassword: 'currently-saving',
+          }}
+          disabled={true}
+        />
+      )
+    }
+  ]);
+