pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

support for registering with a phone number

Browse Source
This commit is contained in:
or-else
2023-01-23 10:48:43 -08:00
parent 5f173dd395
commit eba83fdec8
24 changed files with 164 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/i18n.min/en.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/i18n/de.json
+7
View File
@@ -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
+7
View File
@@ -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
+7
View File
@@ -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
+4
View File
@@ -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
+7
View File
@@ -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
+7
View File
@@ -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
+7
View File
@@ -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
+7
View File
@@ -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
+7
View File
@@ -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
+7
View File
@@ -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
+47 -21
View File
@@ -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} />
src/widgets/phone-edit.jsx
+1 -1
View File
@@ -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
+3 -2
View File
@@ -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})}