forgot to add new files

src/views/create-account-view.jsx

@@ -5,6 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import AvatarCrop from '../widgets/avatar-crop.jsx';
 import AvatarUpload from '../widgets/avatar-upload.jsx';
 import CheckBox from '../widgets/checkbox.jsx';
+const PhoneEdit = React.lazy(_ => import('../widgets/phone-edit.jsx'));
 import VisiblePassword from '../widgets/visible-password.jsx';
 
 import LocalStorageUtil from '../lib/local-storage.js';
@@ -176,6 +177,13 @@ export default class CreateAccountView extends React.PureComponent {
               value={this.state.email} onChange={this.handleEmailChange} required/>
           }</FormattedMessage>
         </div>
+        <div className="panel-form-row">
+          (<Suspense fallback={<div>Loading...</div>}>
+            <PhoneEdit
+              onShowCountrySelector={(code, dial) => console.log('onShowCountrySelector', code, dial)}
+              onSubmit={(code, dial) => console.log('onSubmit', code, dial)} />
+          </Suspense>)
+        </div>
         <div className="panel-form-row">
           <CheckBox id="save-token" name="save-token" checked={this.state.saveToken}
             onChange={this.handleToggleSaveToken} />

src/widgets/phone-country-selector.jsx

@@ -0,0 +1,43 @@
+// Selector for country dialing code.
+
+import React from 'react';
+import { FormattedDisplayName } from 'react-intl';
+import * as dcodes from '../dcodes.json';
+import { flagEmoji } from '../lib/strformat';
+
+export default class PhoneCountrySelector extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.codeMap = {};
+    dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    this.props.onSubmit(e.target.dataset.code, e.target.dataset.dial);
+  }
+
+  render() {
+    const countries = [];
+    const selected = this.props.selected || 'US';
+    dcodes.default.forEach((dc, idx) => {
+      const style = (dc.code == selected ? 'selected ' : '');
+      countries.push(<li className={style} key={idx} data-code={dc.code} data-dial={dc.dial} onClick={this.handleClick}>
+        <span  className="country-flag">{flagEmoji(dc.code)}</span>&nbsp;
+        <FormattedDisplayName type="region" value={dc.code} />
+        &nbsp;<span className="dial-code">+{dc.dial}</span>
+      </li>);
+    });
+
+    return (
+      <div className="scrollable-panel">
+        <ul className="phone-country-selector">
+          {countries}
+        </ul>
+      </div>
+    );
+  }
+}

src/widgets/phone-edit.jsx

@@ -0,0 +1,82 @@
+// Editor for a phone number.
+
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import * as dcodes from '../dcodes.json';
+import { flagEmoji } from '../lib/strformat';
+
+class PhoneEdit extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.codeMap = {};
+    dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });
+
+    this.state = {
+      countryCode: props.countryCode || 'US',
+      dialCode: this.codeMap[props.countryCode || 'US'],
+      localNumber: ''
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleFinished = this.handleFinished.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.showCountrySelector = this.showCountrySelector.bind(this);
+  }
+
+  handleChange(e) {
+    this.setState({localNumber: this.filterNumber(e.target.value)});
+  }
+
+  handleFinished(e) {
+    e.preventDefault();
+    this.props.onSubmit(this.state.localNumber.trim());
+  }
+
+  handleClear(e) {
+    e.preventDefault();
+    const countryCode = this.props.countryCode || 'US';
+    this.setState({localNumber: '', countryCode: countryCode, dialCode: this.codeMap[countryCode || 'US']});
+  }
+
+  handleKeyDown(e) {
+    if (e.key === 'Enter') {
+      this.handleFinished(e);
+    } else if (e.key === 'Escape') {
+      this.handleClear(e);
+    }
+  }
+
+  showCountrySelector() {
+    this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);
+  }
+
+  // Filter out characters not permitted in a phone number.
+  filterNumber(number) {
+    if (!number) {
+      return number;
+    }
+    // Leave numbers, space, (, ), -, and .
+    // The + is not allowed: it's handled by the country code portion.
+    return number.replace(/[^-\s().\d]/g, '');
+  }
+
+  render() {
+    return (
+      <div className="panel-form-row">
+        <span className="dial-code" onClick={this.showCountrySelector}>
+          <span className="country-flag">{flagEmoji(this.state.countryCode)}&nbsp;</span>
+          +{this.state.dialCode}&nbsp;</span>
+        <input type="tel" placeholder={this.state.placeholder}
+            value={this.state.localNumber} onChange={this.handleChange}
+            maxLength={17} onKeyDown={this.handleKeyDown} required autoFocus={this.props.autoFocus} />
+        {this.state.localNumber ?
+          <a href="#" onClick={this.handleClear}><i className="material-icons">highlight_off</i></a>
+          : <span><i className="material-icons">&nbsp;</i></span>}
+      </div>
+    );
+  }
+}
+
+export default injectIntl(PhoneEdit);