support for registering with a phone number

src/i18n/de.json

@@ -1556,5 +1556,12 @@
     "description": "Error message when uploaded video is invalid",
     "missing": false,
     "obsolete": false
+  },
+  "loading_note": {
+    "translation": "",
+    "defaultMessage": "Loading...",
+    "description": "Message shown when component is loading",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1556,5 +1556,12 @@
     "description": "Error message when uploaded video is invalid",
     "missing": false,
     "obsolete": false
+  },
+  "loading_note": {
+    "translation": "Loading...",
+    "defaultMessage": "Loading...",
+    "description": "Message shown when component is loading",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1556,5 +1556,12 @@
     "description": "Error message when uploaded video is invalid",
     "missing": false,
     "obsolete": false
+  },
+  "loading_note": {
+    "translation": "",
+    "defaultMessage": "Loading...",
+    "description": "Message shown when component is loading",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -492,6 +492,10 @@
     "defaultMessage": "Terms of Service",
     "description": "Ancor text for terms of service link"
   },
+  "loading_note": {
+    "defaultMessage": "Loading...",
+    "description": "Message shown when component is loading"
+  },
   "login_prompt": {
     "defaultMessage": "Login",
     "description": "Placeholer for username/login"

src/i18n/fr.json

@@ -1556,5 +1556,12 @@
     "description": "Error message when uploaded video is invalid",
     "missing": false,
     "obsolete": false
+  },
+  "loading_note": {
+    "translation": "",
+    "defaultMessage": "Loading...",
+    "description": "Message shown when component is loading",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ko.json

@@ -1556,5 +1556,12 @@
     "description": "Error message when uploaded video is invalid",
     "missing": false,
     "obsolete": false
+  },
+  "loading_note": {
+    "translation": "",
+    "defaultMessage": "Loading...",
+    "description": "Message shown when component is loading",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1556,5 +1556,12 @@
     "description": "Error message when uploaded video is invalid",
     "missing": false,
     "obsolete": false
+  },
+  "loading_note": {
+    "translation": "",
+    "defaultMessage": "Loading...",
+    "description": "Message shown when component is loading",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1556,5 +1556,12 @@
     "description": "Error message when uploaded video is invalid",
     "missing": false,
     "obsolete": false
+  },
+  "loading_note": {
+    "translation": "",
+    "defaultMessage": "Loading...",
+    "description": "Message shown when component is loading",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1556,5 +1556,12 @@
     "description": "Error message when uploaded video is invalid",
     "missing": false,
     "obsolete": false
+  },
+  "loading_note": {
+    "translation": "",
+    "defaultMessage": "Loading...",
+    "description": "Message shown when component is loading",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1556,5 +1556,12 @@
     "description": "Error message when uploaded video is invalid",
     "missing": false,
     "obsolete": false
+  },
+  "loading_note": {
+    "translation": "",
+    "defaultMessage": "Loading...",
+    "description": "Message shown when component is loading",
+    "missing": true,
+    "obsolete": false
   }
 }

src/views/create-account-view.jsx

@@ -22,7 +22,9 @@ export default class CreateAccountView extends React.PureComponent {
     this.state = {
       login: '',
       password: '',
+      meth: '',
       email: '',
+      tel: '',
       fn: '', // full/formatted name
       imageUrl: null,
       uploadUrl: null,
@@ -30,12 +32,14 @@ export default class CreateAccountView extends React.PureComponent {
       newAvatarMime: null,
       errorCleared: false,
       buttonDisabled: false,
+      method: '',
       saveToken: LocalStorageUtil.getObject('keep-logged-in')
     };
 
     this.handleLoginChange = this.handleLoginChange.bind(this);
     this.handlePasswordChange = this.handlePasswordChange.bind(this);
     this.handleEmailChange = this.handleEmailChange.bind(this);
+    this.handlePhoneChange = this.handlePhoneChange.bind(this);
     this.handleFnChange = this.handleFnChange.bind(this);
     this.handleImageChanged = this.handleImageChanged.bind(this);
     this.handleToggleSaveToken = this.handleToggleSaveToken.bind(this);
@@ -43,6 +47,13 @@ export default class CreateAccountView extends React.PureComponent {
     this.handleAvatarCropCancel = this.handleAvatarCropCancel.bind(this);
     this.uploadAvatar = this.uploadAvatar.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+
+    props.tinode.connect()
+      .catch(err => {;
+        this.props.onError(err.message, 'err');
+      })
+      // "reqCred":{"auth":["email"]}
+      .finally(_ => this.setState({method: (props.tinode.getServerParam('reqCred', {}).auth || [])[0] || 'email'}));
   }
 
   handleLoginChange(e) {
@@ -50,11 +61,15 @@ export default class CreateAccountView extends React.PureComponent {
   }
 
   handlePasswordChange(password) {
-    this.setState({password: password});
+    this.setState({meth: 'tel', password: password});
   }
 
   handleEmailChange(e) {
-    this.setState({email: e.target.value})
+    this.setState({meth: 'email', email: e.target.value});
+  }
+
+  handlePhoneChange(number) {
+    this.setState({tel: number});
   }
 
   handleFnChange(e) {
@@ -77,7 +92,13 @@ export default class CreateAccountView extends React.PureComponent {
       this.state.login.trim(),
       this.state.password.trim(),
       theCard(this.state.fn.trim().substring(0, MAX_TITLE_LENGTH), this.state.uploadUrl),
-      {'meth': 'email', 'val': this.state.email});
+      {
+        'meth': this.state.meth,
+        'val': this.state.meth == 'email' ?
+          this.state.email :
+            this.state.meth == 'tel' ? this.state.tel : null
+      }
+    );
   }
 
   // AvatarCropView calls this method when the user has cropped the image.
@@ -170,24 +191,29 @@ export default class CreateAccountView extends React.PureComponent {
               value={this.state.fn} onChange={this.handleFnChange} required/>
           }</FormattedMessage>
         </div>
-        <div className="panel-form-row">
+        {this.state.method == 'email' ?
-          <FormattedMessage id="email_prompt" defaultMessage="Email, e.g. jdoe@example.com"
+          <div className="panel-form-row">
-            description="Input placeholder for email entry">{
+            <FormattedMessage id="email_prompt" defaultMessage="Email, e.g. jdoe@example.com"
-            (email_prompt) => <input type="email" placeholder={email_prompt} autoComplete="email"
+              description="Input placeholder for email entry">{
-              value={this.state.email} onChange={this.handleEmailChange} required/>
+              (email_prompt) => <input type="email" placeholder={email_prompt} autoComplete="email"
-          }</FormattedMessage>
+                value={this.state.email} onChange={this.handleEmailChange} required/>
-        </div>
+            }</FormattedMessage>
-        <div className="panel-form-row">
+          </div>
-          <label className="small gray">Mobile phone number:</label>
+          : this.state.method == 'tel' ?
-        </div>
+          <><div className="panel-form-row">
-        <div className="panel-form-row">
+            <label className="small gray">Mobile phone number:</label>
-          <Suspense fallback={<div>Loading...</div>}>
+          </div>
-            <PhoneEdit
+          <div className="panel-form-row">
-              autoFocus={false}
+            <Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
-              onShowCountrySelector={(code, dial) => console.log('onShowCountrySelector', code, dial)}
+              description="Message shown when component is loading"/></div>}>
-              onSubmit={(code, dial) => console.log('onSubmit', code, dial)} />
+              <PhoneEdit
-          </Suspense>
+                autoFocus={false}
-        </div>
+                onShowCountrySelector={(code, dial) => console.log('onShowCountrySelector', code, dial)}
+                onSubmit={(code, dial) => console.log('onSubmit', code, dial)} />
+            </Suspense>
+          </div></>
+          : null
+        }
         <div className="panel-form-row">
           <CheckBox id="save-token" name="save-token" checked={this.state.saveToken}
             onChange={this.handleToggleSaveToken} />

src/widgets/phone-edit.jsx

@@ -64,7 +64,7 @@ class PhoneEdit extends React.PureComponent {
           +{this.state.dialCode}&nbsp;</span>
         <input type="tel" placeholder={this.state.placeholder}
             value={this.state.localNumber} onChange={this.handleChange}
-            maxLength={17} onKeyDown={this.handleKeyDown} onblur={this.handleFinished}
+            maxLength={17} onKeyDown={this.handleKeyDown} onBlur={this.handleFinished}
             required autoFocus={this.props.autoFocus} />
       </>
     );

src/widgets/send-message.jsx

@@ -1,6 +1,6 @@
 // Send message form.
 import React, { Suspense } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { Drafty } from 'tinode-sdk';
 
 // Lazy-loading AudioRecorder because it's quite large due to
@@ -267,7 +267,8 @@ class SendMessage extends React.PureComponent {
               {this.props.noInput ?
                 (quote || <div className="hr thin" />) :
                 (this.state.audioRec ?
-                  (<Suspense fallback={<div>Loading...</div>}>
+                  (<Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
+                  description="Message shown when component is loading"/></div>}>
                     <AudioRecorder
                       onRecordingProgress={_ => this.props.onKeyPress(true)}
                       onDeleted={_ => this.setState({audioRec: false})}

umd/251.prod.js.map

@@ -1 +1 @@
-{"version":3,"file":"251.prod.js","mappings":"skNAOA,MAAMA,UAAkBC,IAAAA,cACtBC,YAAYC,GACVC,MAAMD,GAENE,KAAKC,QAAU,CAAC,EAChBC,EAAAA,SAAuBC,IAAQH,KAAKC,QAAQE,EAAGC,MAAQD,EAAGE,IAAI,IAE9DL,KAAKM,MAAQ,CACXC,YAAaT,EAAMS,aAAe,KAClCC,SAAUR,KAAKC,QAAQH,EAAMS,aAAe,MAC5CE,YAAa,IAGfT,KAAKU,aAAeV,KAAKU,aAAaC,KAAKX,MAC3CA,KAAKY,eAAiBZ,KAAKY,eAAeD,KAAKX,MAC/CA,KAAKa,cAAgBb,KAAKa,cAAcF,KAAKX,MAC7CA,KAAKc,oBAAsBd,KAAKc,oBAAoBH,KAAKX,KAC3D,CAEAU,aAAaK,GACXf,KAAKgB,SAAS,CAACP,YAAaT,KAAKiB,aAAaF,EAAEG,OAAOC,QACzD,CAEAP,eAAeG,GAEbA,EAAEK,iBACF,MAAMC,EAAU,GAAErB,KAAKM,MAAME,WAAWR,KAAKM,MAAMG,YAAYa,SAASC,QAAQ,SAAU,IAC1FvB,KAAKF,MAAM0B,SAAU,IAAGH,IAC1B,CAGAR,cAAcE,GACE,UAAVA,EAAEU,KACJzB,KAAKY,eAAeG,EAExB,CAEAD,sBACEd,KAAKF,MAAM4B,sBAAsB1B,KAAKM,MAAMC,YAAaP,KAAKM,MAAME,SACtE,CAGAS,aAAaI,GACX,OAAKA,EAKEA,EAAOE,QAAQ,eAAgB,IAJ7BF,CAKX,CAEAM,SACE,OACE,oCACE,0BAAMC,UAAU,YAAYC,QAAS7B,KAAKc,qBACxC,0BAAMc,UAAU,iBAAgBE,EAAAA,EAAAA,IAAU9B,KAAKM,MAAMC,aAAa,KAAa,IAC7EP,KAAKM,MAAME,SAAS,KACxB,2BAAOuB,KAAK,MAAMC,YAAahC,KAAKM,MAAM0B,YACtCb,MAAOnB,KAAKM,MAAMG,YAAawB,SAAUjC,KAAKU,aAC9CwB,UAAW,GAAIC,UAAWnC,KAAKa,cAAeuB,OAAQpC,KAAKY,eAC3DyB,UAAQ,EAACC,UAAWtC,KAAKF,MAAMwC,YAGzC,EAGF,SAAeC,EAAAA,EAAAA,YAAW5C,E","sources":["webpack://tinode-webapp/./src/widgets/phone-edit.jsx"],"sourcesContent":["// Editor for a phone number.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\nimport * as dcodes from '../dcodes.json';\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneEdit extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.codeMap = {};\n    dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });\n\n    this.state = {\n      countryCode: props.countryCode || 'US',\n      dialCode: this.codeMap[props.countryCode || 'US'],\n      localNumber: ''\n    };\n\n    this.handleChange = this.handleChange.bind(this);\n    this.handleFinished = this.handleFinished.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.showCountrySelector = this.showCountrySelector.bind(this);\n  }\n\n  handleChange(e) {\n    this.setState({localNumber: this.filterNumber(e.target.value)});\n  }\n\n  handleFinished(e) {\n    // this.setCustomValidity(\"Mobile phone number required\");\n    e.preventDefault();\n    const number = `${this.state.dialCode}${this.state.localNumber.trim()}`.replace(/[^\\d]/g, '')\n    this.props.onSubmit(`+${number}`);\n  }\n\n\n  handleKeyDown(e) {\n    if (e.key === 'Enter') {\n      this.handleFinished(e);\n    }\n  }\n\n  showCountrySelector() {\n    this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);\n  }\n\n  // Filter out characters not permitted in a phone number.\n  filterNumber(number) {\n    if (!number) {\n      return number;\n    }\n    // Leave numbers, space, (, ), -, and .\n    // The + is not allowed: it's handled by the country code portion.\n    return number.replace(/[^-\\s().\\d]/g, '');\n  }\n\n  render() {\n    return (\n      <>\n        <span className=\"dial-code\" onClick={this.showCountrySelector}>\n          <span className=\"country-flag\">{flagEmoji(this.state.countryCode)}&nbsp;</span>\n          +{this.state.dialCode}&nbsp;</span>\n        <input type=\"tel\" placeholder={this.state.placeholder}\n            value={this.state.localNumber} onChange={this.handleChange}\n            maxLength={17} onKeyDown={this.handleKeyDown} onblur={this.handleFinished}\n            required autoFocus={this.props.autoFocus} />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(PhoneEdit);\n"],"names":["PhoneEdit","React","constructor","props","super","this","codeMap","dcodes","dc","code","dial","state","countryCode","dialCode","localNumber","handleChange","bind","handleFinished","handleKeyDown","showCountrySelector","e","setState","filterNumber","target","value","preventDefault","number","trim","replace","onSubmit","key","onShowCountrySelector","render","className","onClick","flagEmoji","type","placeholder","onChange","maxLength","onKeyDown","onblur","required","autoFocus","injectIntl"],"sourceRoot":""}
+{"version":3,"file":"251.prod.js","mappings":"skNAOA,MAAMA,UAAkBC,IAAAA,cACtBC,YAAYC,GACVC,MAAMD,GAENE,KAAKC,QAAU,CAAC,EAChBC,EAAAA,SAAuBC,IAAQH,KAAKC,QAAQE,EAAGC,MAAQD,EAAGE,IAAI,IAE9DL,KAAKM,MAAQ,CACXC,YAAaT,EAAMS,aAAe,KAClCC,SAAUR,KAAKC,QAAQH,EAAMS,aAAe,MAC5CE,YAAa,IAGfT,KAAKU,aAAeV,KAAKU,aAAaC,KAAKX,MAC3CA,KAAKY,eAAiBZ,KAAKY,eAAeD,KAAKX,MAC/CA,KAAKa,cAAgBb,KAAKa,cAAcF,KAAKX,MAC7CA,KAAKc,oBAAsBd,KAAKc,oBAAoBH,KAAKX,KAC3D,CAEAU,aAAaK,GACXf,KAAKgB,SAAS,CAACP,YAAaT,KAAKiB,aAAaF,EAAEG,OAAOC,QACzD,CAEAP,eAAeG,GAEbA,EAAEK,iBACF,MAAMC,EAAU,GAAErB,KAAKM,MAAME,WAAWR,KAAKM,MAAMG,YAAYa,SAASC,QAAQ,SAAU,IAC1FvB,KAAKF,MAAM0B,SAAU,IAAGH,IAC1B,CAGAR,cAAcE,GACE,UAAVA,EAAEU,KACJzB,KAAKY,eAAeG,EAExB,CAEAD,sBACEd,KAAKF,MAAM4B,sBAAsB1B,KAAKM,MAAMC,YAAaP,KAAKM,MAAME,SACtE,CAGAS,aAAaI,GACX,OAAKA,EAKEA,EAAOE,QAAQ,eAAgB,IAJ7BF,CAKX,CAEAM,SACE,OACE,oCACE,0BAAMC,UAAU,YAAYC,QAAS7B,KAAKc,qBACxC,0BAAMc,UAAU,iBAAgBE,EAAAA,EAAAA,IAAU9B,KAAKM,MAAMC,aAAa,KAAa,IAC7EP,KAAKM,MAAME,SAAS,KACxB,2BAAOuB,KAAK,MAAMC,YAAahC,KAAKM,MAAM0B,YACtCb,MAAOnB,KAAKM,MAAMG,YAAawB,SAAUjC,KAAKU,aAC9CwB,UAAW,GAAIC,UAAWnC,KAAKa,cAAeuB,OAAQpC,KAAKY,eAC3DyB,UAAQ,EAACC,UAAWtC,KAAKF,MAAMwC,YAGzC,EAGF,SAAeC,EAAAA,EAAAA,YAAW5C,E","sources":["webpack://tinode-webapp/./src/widgets/phone-edit.jsx"],"sourcesContent":["// Editor for a phone number.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\nimport * as dcodes from '../dcodes.json';\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneEdit extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.codeMap = {};\n    dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });\n\n    this.state = {\n      countryCode: props.countryCode || 'US',\n      dialCode: this.codeMap[props.countryCode || 'US'],\n      localNumber: ''\n    };\n\n    this.handleChange = this.handleChange.bind(this);\n    this.handleFinished = this.handleFinished.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.showCountrySelector = this.showCountrySelector.bind(this);\n  }\n\n  handleChange(e) {\n    this.setState({localNumber: this.filterNumber(e.target.value)});\n  }\n\n  handleFinished(e) {\n    // this.setCustomValidity(\"Mobile phone number required\");\n    e.preventDefault();\n    const number = `${this.state.dialCode}${this.state.localNumber.trim()}`.replace(/[^\\d]/g, '')\n    this.props.onSubmit(`+${number}`);\n  }\n\n\n  handleKeyDown(e) {\n    if (e.key === 'Enter') {\n      this.handleFinished(e);\n    }\n  }\n\n  showCountrySelector() {\n    this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);\n  }\n\n  // Filter out characters not permitted in a phone number.\n  filterNumber(number) {\n    if (!number) {\n      return number;\n    }\n    // Leave numbers, space, (, ), -, and .\n    // The + is not allowed: it's handled by the country code portion.\n    return number.replace(/[^-\\s().\\d]/g, '');\n  }\n\n  render() {\n    return (\n      <>\n        <span className=\"dial-code\" onClick={this.showCountrySelector}>\n          <span className=\"country-flag\">{flagEmoji(this.state.countryCode)}&nbsp;</span>\n          +{this.state.dialCode}&nbsp;</span>\n        <input type=\"tel\" placeholder={this.state.placeholder}\n            value={this.state.localNumber} onChange={this.handleChange}\n            maxLength={17} onKeyDown={this.handleKeyDown} onBlur={this.handleFinished}\n            required autoFocus={this.props.autoFocus} />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(PhoneEdit);\n"],"names":["PhoneEdit","React","constructor","props","super","this","codeMap","dcodes","dc","code","dial","state","countryCode","dialCode","localNumber","handleChange","bind","handleFinished","handleKeyDown","showCountrySelector","e","setState","filterNumber","target","value","preventDefault","number","trim","replace","onSubmit","key","onShowCountrySelector","render","className","onClick","flagEmoji","type","placeholder","onChange","maxLength","onKeyDown","onBlur","required","autoFocus","injectIntl"],"sourceRoot":""}

umd/index.dev.js

@@ -4320,7 +4320,9 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
     this.state = {
       login: '',
       password: '',
+      meth: '',
       email: '',
+      tel: '',
       fn: '',
       imageUrl: null,
       uploadUrl: null,
@@ -4328,11 +4330,13 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
       newAvatarMime: null,
       errorCleared: false,
       buttonDisabled: false,
+      method: '',
       saveToken: _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_6__["default"].getObject('keep-logged-in')
     };
     this.handleLoginChange = this.handleLoginChange.bind(this);
     this.handlePasswordChange = this.handlePasswordChange.bind(this);
     this.handleEmailChange = this.handleEmailChange.bind(this);
+    this.handlePhoneChange = this.handlePhoneChange.bind(this);
     this.handleFnChange = this.handleFnChange.bind(this);
     this.handleImageChanged = this.handleImageChanged.bind(this);
     this.handleToggleSaveToken = this.handleToggleSaveToken.bind(this);
@@ -4340,6 +4344,12 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
     this.handleAvatarCropCancel = this.handleAvatarCropCancel.bind(this);
     this.uploadAvatar = this.uploadAvatar.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    props.tinode.connect().catch(err => {
+      ;
+      this.props.onError(err.message, 'err');
+    }).finally(_ => this.setState({
+      method: (props.tinode.getServerParam('reqCred', {}).auth || [])[0] || 'email'
+    }));
   }
   handleLoginChange(e) {
     this.setState({
@@ -4348,14 +4358,21 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
   }
   handlePasswordChange(password) {
     this.setState({
+      meth: 'tel',
       password: password
     });
   }
   handleEmailChange(e) {
     this.setState({
+      meth: 'email',
       email: e.target.value
     });
   }
+  handlePhoneChange(number) {
+    this.setState({
+      tel: number
+    });
+  }
   handleFnChange(e) {
     this.setState({
       fn: e.target.value
@@ -4379,8 +4396,8 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
       errorCleared: false
     });
     this.props.onCreateAccount(this.state.login.trim(), this.state.password.trim(), (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_8__.theCard)(this.state.fn.trim().substring(0, _config_js__WEBPACK_IMPORTED_MODULE_9__.MAX_TITLE_LENGTH), this.state.uploadUrl), {
-      'meth': 'email',
+      'meth': this.state.meth,
-      'val': this.state.email
+      'val': this.state.meth == 'email' ? this.state.email : this.state.meth == 'tel' ? this.state.tel : null
     });
   }
   handleAvatarCropped(mime, blob, width, height) {
@@ -4506,7 +4523,7 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
       value: this.state.fn,
       onChange: this.handleFnChange,
       required: true
-    }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    }))), this.state.method == 'email' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "panel-form-row"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
       id: "email_prompt",
@@ -4521,19 +4538,25 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
       value: this.state.email,
       onChange: this.handleEmailChange,
       required: true
-    }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    }))) : this.state.method == 'tel' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "panel-form-row"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
       className: "small gray"
     }, "Mobile phone number:")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "panel-form-row"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
-      fallback: react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, "Loading...")
+      fallback: react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+        id: "loading_note",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Loading..."
+        }]
+      }))
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PhoneEdit, {
       autoFocus: false,
       onShowCountrySelector: (code, dial) => console.log('onShowCountrySelector', code, dial),
       onSubmit: (code, dial) => console.log('onSubmit', code, dial)
-    }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    })))) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "panel-form-row"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_checkbox_jsx__WEBPACK_IMPORTED_MODULE_4__["default"], {
       id: "save-token",
@@ -15526,7 +15549,13 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
     }, "attach_file"))) : null, this.props.noInput ? quote || react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "hr thin"
     }) : this.state.audioRec ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
-      fallback: react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, "Loading...")
+      fallback: react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+        id: "loading_note",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Loading..."
+        }]
+      }))
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(AudioRecorder, {
       onRecordingProgress: _ => this.props.onKeyPress(true),
       onDeleted: _ => this.setState({

umd/src_widgets_phone-edit_jsx.dev.js

@@ -75,7 +75,7 @@ class PhoneEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
       onChange: this.handleChange,
       maxLength: 17,
       onKeyDown: this.handleKeyDown,
-      onblur: this.handleFinished,
+      onBlur: this.handleFinished,
       required: true,
       autoFocus: this.props.autoFocus
     }));

umd/src_widgets_phone-edit_jsx.dev.js.map

@@ -1 +1 @@
-{"version":3,"file":"src_widgets_phone-edit_jsx.dev.js","mappings":"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","sources":["webpack://tinode-webapp/./src/widgets/phone-edit.jsx"],"sourcesContent":["// Editor for a phone number.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\nimport * as dcodes from '../dcodes.json';\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneEdit extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.codeMap = {};\n    dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });\n\n    this.state = {\n      countryCode: props.countryCode || 'US',\n      dialCode: this.codeMap[props.countryCode || 'US'],\n      localNumber: ''\n    };\n\n    this.handleChange = this.handleChange.bind(this);\n    this.handleFinished = this.handleFinished.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.showCountrySelector = this.showCountrySelector.bind(this);\n  }\n\n  handleChange(e) {\n    this.setState({localNumber: this.filterNumber(e.target.value)});\n  }\n\n  handleFinished(e) {\n    // this.setCustomValidity(\"Mobile phone number required\");\n    e.preventDefault();\n    const number = `${this.state.dialCode}${this.state.localNumber.trim()}`.replace(/[^\\d]/g, '')\n    this.props.onSubmit(`+${number}`);\n  }\n\n\n  handleKeyDown(e) {\n    if (e.key === 'Enter') {\n      this.handleFinished(e);\n    }\n  }\n\n  showCountrySelector() {\n    this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);\n  }\n\n  // Filter out characters not permitted in a phone number.\n  filterNumber(number) {\n    if (!number) {\n      return number;\n    }\n    // Leave numbers, space, (, ), -, and .\n    // The + is not allowed: it's handled by the country code portion.\n    return number.replace(/[^-\\s().\\d]/g, '');\n  }\n\n  render() {\n    return (\n      <>\n        <span className=\"dial-code\" onClick={this.showCountrySelector}>\n          <span className=\"country-flag\">{flagEmoji(this.state.countryCode)}&nbsp;</span>\n          +{this.state.dialCode}&nbsp;</span>\n        <input type=\"tel\" placeholder={this.state.placeholder}\n            value={this.state.localNumber} onChange={this.handleChange}\n            maxLength={17} onKeyDown={this.handleKeyDown} onblur={this.handleFinished}\n            required autoFocus={this.props.autoFocus} />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(PhoneEdit);\n"],"names":["React","injectIntl","dcodes","flagEmoji","PhoneEdit","PureComponent","constructor","props","codeMap","default","forEach","dc","code","dial","state","countryCode","dialCode","localNumber","handleChange","bind","handleFinished","handleKeyDown","showCountrySelector","e","setState","filterNumber","target","value","preventDefault","number","trim","replace","onSubmit","key","onShowCountrySelector","render","placeholder","autoFocus"],"sourceRoot":""}
+{"version":3,"file":"src_widgets_phone-edit_jsx.dev.js","mappings":"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","sources":["webpack://tinode-webapp/./src/widgets/phone-edit.jsx"],"sourcesContent":["// Editor for a phone number.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\nimport * as dcodes from '../dcodes.json';\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneEdit extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.codeMap = {};\n    dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });\n\n    this.state = {\n      countryCode: props.countryCode || 'US',\n      dialCode: this.codeMap[props.countryCode || 'US'],\n      localNumber: ''\n    };\n\n    this.handleChange = this.handleChange.bind(this);\n    this.handleFinished = this.handleFinished.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.showCountrySelector = this.showCountrySelector.bind(this);\n  }\n\n  handleChange(e) {\n    this.setState({localNumber: this.filterNumber(e.target.value)});\n  }\n\n  handleFinished(e) {\n    // this.setCustomValidity(\"Mobile phone number required\");\n    e.preventDefault();\n    const number = `${this.state.dialCode}${this.state.localNumber.trim()}`.replace(/[^\\d]/g, '')\n    this.props.onSubmit(`+${number}`);\n  }\n\n\n  handleKeyDown(e) {\n    if (e.key === 'Enter') {\n      this.handleFinished(e);\n    }\n  }\n\n  showCountrySelector() {\n    this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);\n  }\n\n  // Filter out characters not permitted in a phone number.\n  filterNumber(number) {\n    if (!number) {\n      return number;\n    }\n    // Leave numbers, space, (, ), -, and .\n    // The + is not allowed: it's handled by the country code portion.\n    return number.replace(/[^-\\s().\\d]/g, '');\n  }\n\n  render() {\n    return (\n      <>\n        <span className=\"dial-code\" onClick={this.showCountrySelector}>\n          <span className=\"country-flag\">{flagEmoji(this.state.countryCode)}&nbsp;</span>\n          +{this.state.dialCode}&nbsp;</span>\n        <input type=\"tel\" placeholder={this.state.placeholder}\n            value={this.state.localNumber} onChange={this.handleChange}\n            maxLength={17} onKeyDown={this.handleKeyDown} onBlur={this.handleFinished}\n            required autoFocus={this.props.autoFocus} />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(PhoneEdit);\n"],"names":["React","injectIntl","dcodes","flagEmoji","PhoneEdit","PureComponent","constructor","props","codeMap","default","forEach","dc","code","dial","state","countryCode","dialCode","localNumber","handleChange","bind","handleFinished","handleKeyDown","showCountrySelector","e","setState","filterNumber","target","value","preventDefault","number","trim","replace","onSubmit","key","onShowCountrySelector","render","placeholder","autoFocus"],"sourceRoot":""}