238 lines
8.8 KiB
React
238 lines
8.8 KiB
React
|
|
// Edit account parameters.
|
|
import React from 'react';
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import AvatarUpload from '../widgets/avatar-upload.jsx';
|
|
import CheckBox from '../widgets/checkbox.jsx';
|
|
import InPlaceEdit from '../widgets/in-place-edit.jsx';
|
|
import PermissionsEditor from '../widgets/permissions-editor.jsx';
|
|
import TagManager from '../widgets/tag-manager.jsx';
|
|
|
|
import { makeImageUrl } from '../lib/blob-helpers.js';
|
|
import { arrayEqual, vcard } from '../lib/utils.js';
|
|
|
|
export default class EditAccountView extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
const me = this.props.tinode.getMeTopic();
|
|
const defacs = me ? me.getDefaultAccess() : null;
|
|
const fnd = this.props.tinode.getFndTopic();
|
|
this.state = {
|
|
fullName: me.public ? me.public.fn : undefined,
|
|
avatar: makeImageUrl(me.public ? me.public.photo : null),
|
|
auth: defacs ? defacs.auth : null,
|
|
anon: defacs ? defacs.anon : null,
|
|
fndSubscribed: false,
|
|
tags: fnd.tags(),
|
|
showPermissionEditorFor: undefined,
|
|
previousOnTags: fnd.onTagsUpdated
|
|
};
|
|
|
|
this.tnNewTags = this.tnNewTags.bind(this);
|
|
this.handleFullNameUpdate = this.handleFullNameUpdate.bind(this);
|
|
this.handlePasswordUpdate = this.handlePasswordUpdate.bind(this);
|
|
this.handleImageChanged = this.handleImageChanged.bind(this);
|
|
this.handleCheckboxClick = this.handleCheckboxClick.bind(this);
|
|
this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);
|
|
this.handleHidePermissionsEditor = this.handleHidePermissionsEditor.bind(this);
|
|
this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this);
|
|
this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
const fnd = this.props.tinode.getFndTopic();
|
|
fnd.onTagsUpdated = this.tnNewTags;
|
|
if (!fnd.isSubscribed()) {
|
|
fnd.subscribe(fnd.startMetaQuery().withTags().build())
|
|
.then((ctrl) => {
|
|
this.setState({fndSubscribed: true});
|
|
})
|
|
.catch((err) => {
|
|
this.props.onError(err.message, 'err');
|
|
});
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
const fnd = this.props.tinode.getFndTopic();
|
|
fnd.onTagsUpdated = this.state.previousOnTags;
|
|
if (fnd.isSubscribed() && this.state.fndSubscribed) {
|
|
fnd.leave();
|
|
}
|
|
}
|
|
|
|
tnNewTags(tags) {
|
|
this.setState({tags: tags});
|
|
}
|
|
|
|
handleFullNameUpdate(fn) {
|
|
this.setState({fullName: fn});
|
|
this.props.onUpdateAccount(undefined, vcard(fn, null));
|
|
}
|
|
|
|
handlePasswordUpdate(pwd) {
|
|
this.setState({password: pwd});
|
|
this.props.onUpdateAccount(pwd);
|
|
}
|
|
|
|
handleImageChanged(img) {
|
|
this.setState({avatar: img});
|
|
this.props.onUpdateAccount(undefined, vcard(null, img));
|
|
}
|
|
|
|
handleCheckboxClick(what, checked) {
|
|
if (what == 'sound') {
|
|
this.props.onToggleMessageSounds(checked);
|
|
} else if (what == 'alert') {
|
|
this.props.onTogglePushNotifications(checked);
|
|
}
|
|
}
|
|
|
|
handleLaunchPermissionsEditor(which) {
|
|
this.setState({
|
|
showPermissionEditorFor: which,
|
|
editedPermissions: this.state[which]
|
|
});
|
|
}
|
|
|
|
handleHidePermissionsEditor() {
|
|
this.setState({showPermissionEditorFor: undefined});
|
|
}
|
|
|
|
handlePermissionsChanged(perm) {
|
|
let defacs = {};
|
|
defacs[this.state.showPermissionEditorFor] = perm;
|
|
this.props.onUpdateAccount(undefined, undefined, defacs);
|
|
|
|
let newState = {showPermissionEditorFor: undefined};
|
|
newState[this.state.showPermissionEditorFor] = perm;
|
|
this.setState(newState);
|
|
}
|
|
|
|
handleTagsUpdated(tags) {
|
|
// Check if tags have actually changed.
|
|
if (arrayEqual(this.state.tags.slice(0), tags.slice(0))) {
|
|
return;
|
|
}
|
|
this.props.onUpdateTags(tags);
|
|
}
|
|
|
|
render() {
|
|
var tags = [];
|
|
this.state.tags.map(function(tag) {
|
|
tags.push(<span className="badge" key={tags.length}>{tag}</span>);
|
|
});
|
|
if (tags.length == 0) {
|
|
tags = <i><FormattedMessage id="tags_not_found" /></i>;
|
|
}
|
|
return (
|
|
<React.Fragment>{this.state.showPermissionEditorFor ?
|
|
<PermissionsEditor
|
|
mode={this.state.editedPermissions}
|
|
skip="O"
|
|
onSubmit={this.handlePermissionsChanged}
|
|
onCancel={this.handleHidePermissionsEditor} />
|
|
:
|
|
<div id="edit-account" className="scrollable-panel">
|
|
<div className="panel-form-row">
|
|
<div className="panel-form-column">
|
|
<div><label className="small">
|
|
<FormattedMessage id="label_your_name" defaultMessage="Your name"
|
|
description="Label for full name editing" />
|
|
</label></div>
|
|
<div><FormattedMessage id="full_name_prompt">{
|
|
(full_name_placeholder) => <InPlaceEdit
|
|
placeholder={full_name_placeholder}
|
|
value={this.state.fullName}
|
|
onFinished={this.handleFullNameUpdate} />
|
|
}</FormattedMessage></div>
|
|
<div><label className="small">
|
|
<FormattedMessage id="label_password" defaultMessage="Password"
|
|
description="Label for password editing" />
|
|
</label></div>
|
|
<div>
|
|
<FormattedMessage id="password_unchanged_prompt" defaultMessage="Unchanged"
|
|
description="Message in editor while password is unchanged">{
|
|
(password_unchanged) => <InPlaceEdit
|
|
placeholder={password_unchanged}
|
|
type="password"
|
|
onFinished={this.handlePasswordUpdate} />
|
|
}</FormattedMessage>
|
|
</div>
|
|
</div>
|
|
<AvatarUpload
|
|
avatar={this.state.avatar}
|
|
uid={this.props.myUserId}
|
|
title={this.state.fullName}
|
|
onImageChanged={this.handleImageChanged}
|
|
onError={this.props.onError} />
|
|
</div>
|
|
<div className="hr" />
|
|
<div className="panel-form-column">
|
|
<div className="panel-form-row">
|
|
<label><FormattedMessage id="label_user_id" defaultMessage="Address:"
|
|
description="Label for user address (ID)" /></label>
|
|
<tt>{this.props.myUserId}</tt>
|
|
</div>
|
|
<div>
|
|
<label className="small">
|
|
<FormattedMessage id="label_default_access_mode" defaultMessage="Default access mode:"
|
|
description="Label for default access mode" />
|
|
</label>
|
|
</div>
|
|
<div className="quoted">
|
|
<div>Auth: <tt className="clickable"
|
|
onClick={this.handleLaunchPermissionsEditor.bind(this, 'auth')}>{this.state.auth}</tt></div>
|
|
<div>Anon: <tt className="clickable"
|
|
onClick={this.handleLaunchPermissionsEditor.bind(this, 'anon')}>{this.state.anon}</tt></div>
|
|
</div>
|
|
</div>
|
|
<div className="hr" />
|
|
<div className="panel-form-row">
|
|
<label htmlFor="message-sound">
|
|
<FormattedMessage id="label_message_sound" defaultMessage="Message sound:"
|
|
description="Label for message sounds toggle" />
|
|
</label>
|
|
<CheckBox name="sound" id="message-sound"
|
|
checked={this.props.messageSounds}
|
|
onChange={this.handleCheckboxClick} />
|
|
</div>
|
|
<div className="panel-form-row">
|
|
<label htmlFor="desktop-alerts">
|
|
{this.props.desktopAlertsEnabled ?
|
|
<FormattedMessage id="label_push_notifications" defaultMessage="Notification alerts:"
|
|
description="Label for push notifications switch" />
|
|
:
|
|
<FormattedMessage id="label_push_notifications_disabled"
|
|
defaultMessage="Notification alerts (requires HTTPS):"
|
|
description="Label for push notifications switch (disabled)" />
|
|
}
|
|
</label>
|
|
<CheckBox name="alert" id="desktop-alerts"
|
|
checked={this.props.desktopAlerts}
|
|
onChange={this.props.desktopAlertsEnabled ? this.handleCheckboxClick : null} />
|
|
</div>
|
|
<div className="hr" />
|
|
<FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
|
|
description="Section title for TagManager">{
|
|
(title_tag_manager) => <TagManager
|
|
title={title_tag_manager}
|
|
activated={false}
|
|
tags={this.state.tags}
|
|
onSubmit={this.handleTagsUpdated} />
|
|
}</FormattedMessage>
|
|
<div className="hr" />
|
|
<div className="panel-form-column">
|
|
<a href="javascript:;" className="red flat-button" onClick={this.props.onLogout}>
|
|
<i className="material-icons">exit_to_app</i> <FormattedMessage id="button_logout"
|
|
defaultMessage="Logout" description="Button [Logout]" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
}</React.Fragment>
|
|
);
|
|
}
|
|
};
|