|
|
|
|
@ -1,8 +1,10 @@
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
import { QRCode } from 'react-qr-svg';
|
|
|
|
|
|
|
|
|
|
import { Avatar } from './Avatar';
|
|
|
|
|
|
|
|
|
|
import { SessionButton, SessionButtonColor } from './session/SessionButton';
|
|
|
|
|
import { SessionButton, SessionButtonColor, SessionButtonType } from './session/SessionButton';
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
SessionIconButton,
|
|
|
|
|
SessionIconSize,
|
|
|
|
|
@ -28,9 +30,9 @@ interface Props {
|
|
|
|
|
|
|
|
|
|
interface State {
|
|
|
|
|
profileName: string;
|
|
|
|
|
errorDisplayed: boolean;
|
|
|
|
|
errorMessage: string;
|
|
|
|
|
setProfileName: string;
|
|
|
|
|
avatar: string;
|
|
|
|
|
mode: 'default' | 'edit' | 'qr';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export class EditProfileDialog extends React.Component<Props, State> {
|
|
|
|
|
@ -42,15 +44,14 @@ export class EditProfileDialog extends React.Component<Props, State> {
|
|
|
|
|
this.onNameEdited = this.onNameEdited.bind(this);
|
|
|
|
|
this.closeDialog = this.closeDialog.bind(this);
|
|
|
|
|
this.onClickOK = this.onClickOK.bind(this);
|
|
|
|
|
this.showError = this.showError.bind(this);
|
|
|
|
|
this.onKeyUp = this.onKeyUp.bind(this);
|
|
|
|
|
this.onFileSelected = this.onFileSelected.bind(this);
|
|
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
|
profileName: this.props.profileName,
|
|
|
|
|
errorDisplayed: false,
|
|
|
|
|
errorMessage: 'placeholder',
|
|
|
|
|
setProfileName: this.props.profileName,
|
|
|
|
|
avatar: this.props.avatarPath,
|
|
|
|
|
mode: 'default',
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.inputEl = React.createRef();
|
|
|
|
|
@ -61,25 +62,81 @@ export class EditProfileDialog extends React.Component<Props, State> {
|
|
|
|
|
public render() {
|
|
|
|
|
const i18n = this.props.i18n;
|
|
|
|
|
|
|
|
|
|
const cancelText = i18n('cancel');
|
|
|
|
|
const okText = i18n('ok');
|
|
|
|
|
const placeholderText = i18n('profileName');
|
|
|
|
|
const viewDefault = this.state.mode === 'default';
|
|
|
|
|
const viewEdit = this.state.mode === 'edit';
|
|
|
|
|
const viewQR = this.state.mode === 'qr';
|
|
|
|
|
const sessionID = window.textsecure.storage.user.getNumber();
|
|
|
|
|
|
|
|
|
|
const errorMessageClasses = classNames(
|
|
|
|
|
'error-message',
|
|
|
|
|
this.state.errorDisplayed ? 'error-shown' : 'error-faded'
|
|
|
|
|
);
|
|
|
|
|
const backButton = (viewEdit || viewQR)
|
|
|
|
|
? [{
|
|
|
|
|
iconType: SessionIconType.Chevron,
|
|
|
|
|
iconRotation: 90,
|
|
|
|
|
onClick: () => this.setState({mode: 'default'}),
|
|
|
|
|
}]
|
|
|
|
|
: undefined;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<SessionModal
|
|
|
|
|
title={i18n('editProfileModalTitle')}
|
|
|
|
|
onOk={this.onClickOK}
|
|
|
|
|
onClose={this.closeDialog}
|
|
|
|
|
headerReverse={viewEdit || viewQR}
|
|
|
|
|
headerIconButtons={backButton}
|
|
|
|
|
>
|
|
|
|
|
<div className="spacer-md"></div>
|
|
|
|
|
|
|
|
|
|
{viewQR && this.renderQRView(sessionID)}
|
|
|
|
|
{viewDefault && this.renderDefaultView()}
|
|
|
|
|
{viewEdit && this.renderEditView()}
|
|
|
|
|
|
|
|
|
|
<div className="session-id-section">
|
|
|
|
|
<div className="panel-text-divider">
|
|
|
|
|
<span>{window.i18n('yourSessionID')}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p className="session-id-section-display">
|
|
|
|
|
{ sessionID }
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div className="spacer-lg"></div>
|
|
|
|
|
|
|
|
|
|
{ (viewDefault || viewQR) ? (
|
|
|
|
|
<SessionButton
|
|
|
|
|
text={window.i18n('copy')}
|
|
|
|
|
buttonType={SessionButtonType.BrandOutline}
|
|
|
|
|
buttonColor={SessionButtonColor.Green}
|
|
|
|
|
onClick={() => this.copySessionID(sessionID)}
|
|
|
|
|
/>
|
|
|
|
|
) : (
|
|
|
|
|
<SessionButton
|
|
|
|
|
text={window.i18n('save')}
|
|
|
|
|
buttonType={SessionButtonType.BrandOutline}
|
|
|
|
|
buttonColor={SessionButtonColor.White}
|
|
|
|
|
onClick={this.onClickOK}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
<div className="spacer-lg"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</SessionModal>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderProfileHeader() {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<div className="avatar-center">
|
|
|
|
|
<div className="avatar-center-inner">
|
|
|
|
|
{this.renderAvatar()}
|
|
|
|
|
<div className="image-upload-section">
|
|
|
|
|
<div
|
|
|
|
|
className="image-upload-section"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
const el = this.inputEl.current;
|
|
|
|
|
if (el) {
|
|
|
|
|
el.click();
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="file"
|
|
|
|
|
ref={this.inputEl}
|
|
|
|
|
@ -88,51 +145,72 @@ export class EditProfileDialog extends React.Component<Props, State> {
|
|
|
|
|
name="name"
|
|
|
|
|
onChange={this.onFileSelected}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
className="qr-view-button"
|
|
|
|
|
onClick={() => this.setState({mode: 'qr'})}
|
|
|
|
|
>
|
|
|
|
|
<SessionIconButton
|
|
|
|
|
iconType={SessionIconType.Upload}
|
|
|
|
|
iconSize={SessionIconSize.Huge}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
const el = this.inputEl.current;
|
|
|
|
|
if (el) {
|
|
|
|
|
el.click();
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
iconType={SessionIconType.QR}
|
|
|
|
|
iconSize={SessionIconSize.Small}
|
|
|
|
|
iconColor={"#000000"}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<div className="spacer md" />
|
|
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
className="profile-name"
|
|
|
|
|
value={this.state.profileName}
|
|
|
|
|
placeholder={placeholderText}
|
|
|
|
|
onChange={this.onNameEdited}
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
required={true}
|
|
|
|
|
aria-required={true}
|
|
|
|
|
/>
|
|
|
|
|
<div className="message">{i18n('editProfileDisplayNameWarning')}</div>
|
|
|
|
|
<span className={errorMessageClasses}>{this.state.errorMessage}</span>
|
|
|
|
|
|
|
|
|
|
<div className="spacer-lg" />
|
|
|
|
|
|
|
|
|
|
<div className="session-modal__button-group">
|
|
|
|
|
<SessionButton
|
|
|
|
|
text={okText}
|
|
|
|
|
buttonColor={SessionButtonColor.Secondary}
|
|
|
|
|
onClick={this.onClickOK}
|
|
|
|
|
private renderDefaultView(){
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{ this.renderProfileHeader() }
|
|
|
|
|
|
|
|
|
|
<div className="profile-name-uneditable">
|
|
|
|
|
<p>{ this.state.setProfileName }</p>
|
|
|
|
|
<SessionIconButton
|
|
|
|
|
iconType={SessionIconType.Pencil}
|
|
|
|
|
iconSize={SessionIconSize.Medium}
|
|
|
|
|
onClick={() => this.setState({mode: 'edit'})}
|
|
|
|
|
/>
|
|
|
|
|
<SessionButton
|
|
|
|
|
text={cancelText}
|
|
|
|
|
buttonColor={SessionButtonColor.Primary}
|
|
|
|
|
onClick={this.closeDialog}
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private renderEditView() {
|
|
|
|
|
const placeholderText = window.i18n('displayName');
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{ this.renderProfileHeader() }
|
|
|
|
|
<div className="profile-name">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
className="profile-name-input"
|
|
|
|
|
value={this.state.profileName}
|
|
|
|
|
placeholder={placeholderText}
|
|
|
|
|
onChange={this.onNameEdited}
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
required={true}
|
|
|
|
|
aria-required={true}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</SessionModal>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderQRView(sessionID: string){
|
|
|
|
|
const bgColor = '#FFFFFF';
|
|
|
|
|
const fgColor = '#1B1B1B';
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="qr-image">
|
|
|
|
|
<QRCode value={sessionID} bgColor={bgColor} fgColor={fgColor} level="L" />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -189,29 +267,20 @@ export class EditProfileDialog extends React.Component<Props, State> {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private showError(msg: string) {
|
|
|
|
|
if (this.state.errorDisplayed) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
private copySessionID(sessionID: string) {
|
|
|
|
|
window.clipboard.writeText(sessionID);
|
|
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
errorDisplayed: true,
|
|
|
|
|
errorMessage: msg,
|
|
|
|
|
window.pushToast({
|
|
|
|
|
title: window.i18n('copiedSessionID'),
|
|
|
|
|
type: 'success',
|
|
|
|
|
id: 'copiedSessionID',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setState({
|
|
|
|
|
errorDisplayed: false,
|
|
|
|
|
});
|
|
|
|
|
}, 3000);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private onClickOK() {
|
|
|
|
|
const newName = this.state.profileName.trim();
|
|
|
|
|
|
|
|
|
|
if (newName === '') {
|
|
|
|
|
this.showError(this.props.i18n('emptyProfileNameError'));
|
|
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -224,7 +293,11 @@ export class EditProfileDialog extends React.Component<Props, State> {
|
|
|
|
|
: null;
|
|
|
|
|
|
|
|
|
|
this.props.onOk(newName, avatar);
|
|
|
|
|
this.closeDialog();
|
|
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
mode: 'default',
|
|
|
|
|
setProfileName: this.state.profileName,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private closeDialog() {
|
|
|
|
|
|
Vincent
6 years ago