support for registering with a phone number

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">
-          <FormattedMessage id="email_prompt" defaultMessage="Email, e.g. jdoe@example.com"
-            description="Input placeholder for email entry">{
-            (email_prompt) => <input type="email" placeholder={email_prompt} autoComplete="email"
-              value={this.state.email} onChange={this.handleEmailChange} required/>
-          }</FormattedMessage>
-        </div>
-        <div className="panel-form-row">
-          <label className="small gray">Mobile phone number:</label>
-        </div>
-        <div className="panel-form-row">
-          <Suspense fallback={<div>Loading...</div>}>
-            <PhoneEdit
-              autoFocus={false}
-              onShowCountrySelector={(code, dial) => console.log('onShowCountrySelector', code, dial)}
-              onSubmit={(code, dial) => console.log('onSubmit', code, dial)} />
-          </Suspense>
-        </div>
+        {this.state.method == 'email' ?
+          <div className="panel-form-row">
+            <FormattedMessage id="email_prompt" defaultMessage="Email, e.g. jdoe@example.com"
+              description="Input placeholder for email entry">{
+              (email_prompt) => <input type="email" placeholder={email_prompt} autoComplete="email"
+                value={this.state.email} onChange={this.handleEmailChange} required/>
+            }</FormattedMessage>
+          </div>
+          : this.state.method == 'tel' ?
+          <><div className="panel-form-row">
+            <label className="small gray">Mobile phone number:</label>
+          </div>
+          <div className="panel-form-row">
+            <Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
+              description="Message shown when component is loading"/></div>}>
+              <PhoneEdit
+                autoFocus={false}
+                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} />