Enable profile pictures
Maxim Shishmarev
5 years ago
parent
8b6047a3ae
commit
4dd314c18f
@ -0,0 +1,44 @@
|
||||
/* global i18n, Whisper */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.EditProfileDialogView = Whisper.View.extend({
|
||||
className: 'loki-dialog modal',
|
||||
initialize({ profileName, avatarPath, avatarColor, pubkey, onOk }) {
|
||||
this.close = this.close.bind(this);
|
||||
|
||||
this.profileName = profileName;
|
||||
this.pubkey = pubkey;
|
||||
this.avatarPath = avatarPath;
|
||||
this.avatarColor = avatarColor;
|
||||
this.onOk = onOk;
|
||||
|
||||
this.$el.focus();
|
||||
this.render();
|
||||
},
|
||||
render() {
|
||||
this.dialogView = new Whisper.ReactWrapperView({
|
||||
className: 'edit-profile-dialog',
|
||||
Component: window.Signal.Components.EditProfileDialog,
|
||||
props: {
|
||||
onOk: this.onOk,
|
||||
onClose: this.close,
|
||||
profileName: this.profileName,
|
||||
pubkey: this.pubkey,
|
||||
avatarPath: this.avatarPath,
|
||||
i18n,
|
||||
},
|
||||
});
|
||||
|
||||
this.$el.append(this.dialogView.el);
|
||||
return this;
|
||||
},
|
||||
close() {
|
||||
this.remove();
|
||||
},
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,212 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Avatar } from './Avatar';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
displayNameRegex: any;
|
||||
}
|
||||
}
|
||||
|
||||
interface Props {
|
||||
i18n: any;
|
||||
profileName: string;
|
||||
avatarPath: string;
|
||||
avatarColor: string;
|
||||
pubkey: string;
|
||||
onClose: any;
|
||||
onOk: any;
|
||||
}
|
||||
|
||||
interface State {
|
||||
profileName: string;
|
||||
errorDisplayed: boolean;
|
||||
errorMessage: string;
|
||||
avatar: string;
|
||||
}
|
||||
|
||||
export class EditProfileDialog extends React.Component<Props, State> {
|
||||
private readonly inputEl: any;
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
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',
|
||||
avatar: this.props.avatarPath,
|
||||
};
|
||||
|
||||
this.inputEl = React.createRef();
|
||||
|
||||
window.addEventListener('keyup', this.onKeyUp);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const i18n = this.props.i18n;
|
||||
|
||||
const cancelText = i18n('cancel');
|
||||
const okText = i18n('ok');
|
||||
const placeholderText = i18n('profileName');
|
||||
|
||||
const errorMessageClasses = classNames(
|
||||
'error-message',
|
||||
this.state.errorDisplayed ? 'error-shown' : 'error-faded'
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="content">
|
||||
<div className="avatar-upload">
|
||||
<div className="avatar-upload-inner">
|
||||
{this.renderAvatar()}
|
||||
<div className="upload-btn-background">
|
||||
<input
|
||||
type="file"
|
||||
ref={this.inputEl}
|
||||
className="input-file"
|
||||
placeholder="input file"
|
||||
name="name"
|
||||
onChange={this.onFileSelected}
|
||||
/>
|
||||
<div
|
||||
role="button"
|
||||
className={'module-message__buttons__upload'}
|
||||
onClick={() => {
|
||||
const el = this.inputEl.current;
|
||||
if (el) {
|
||||
el.click();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="buttons">
|
||||
<button className="cancel" tabIndex={0} onClick={this.closeDialog}>
|
||||
{cancelText}
|
||||
</button>
|
||||
<button className="ok" tabIndex={0} onClick={this.onClickOK}>
|
||||
{okText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private onFileSelected() {
|
||||
const file = this.inputEl.current.files[0];
|
||||
const url = window.URL.createObjectURL(file);
|
||||
|
||||
this.setState({
|
||||
avatar: url,
|
||||
});
|
||||
}
|
||||
|
||||
private renderAvatar() {
|
||||
const avatarPath = this.state.avatar;
|
||||
const color = this.props.avatarColor;
|
||||
|
||||
return (
|
||||
<Avatar
|
||||
avatarPath={avatarPath}
|
||||
color={color}
|
||||
conversationType="direct"
|
||||
i18n={this.props.i18n}
|
||||
name={this.state.profileName}
|
||||
phoneNumber={this.props.pubkey}
|
||||
profileName={this.state.profileName}
|
||||
size={80}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
private onNameEdited(e: any) {
|
||||
e.persist();
|
||||
|
||||
const newName = e.target.value.replace(window.displayNameRegex, '');
|
||||
|
||||
this.setState(state => {
|
||||
return {
|
||||
...state,
|
||||
profileName: newName,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
private onKeyUp(event: any) {
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
this.onClickOK();
|
||||
break;
|
||||
case 'Esc':
|
||||
case 'Escape':
|
||||
this.closeDialog();
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
private showError(msg: string) {
|
||||
if (this.state.errorDisplayed) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
errorDisplayed: true,
|
||||
errorMessage: msg,
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
errorDisplayed: false,
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
private onClickOK() {
|
||||
const newName = this.state.profileName.trim();
|
||||
|
||||
if (newName === '') {
|
||||
this.showError(this.props.i18n('emptyProfileNameError'));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const avatar =
|
||||
this.inputEl &&
|
||||
this.inputEl.current &&
|
||||
this.inputEl.current.files &&
|
||||
this.inputEl.current.files.length > 0
|
||||
? this.inputEl.current.files[0]
|
||||
: null;
|
||||
|
||||
this.props.onOk(newName, avatar);
|
||||
this.closeDialog();
|
||||
}
|
||||
|
||||
private closeDialog() {
|
||||
window.removeEventListener('keyup', this.onKeyUp);
|
||||
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue