2019-01-22 23:28:33 +03:00
|
|
|
/*
|
|
|
|
Copyright 2019 New Vector Ltd
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
2019-12-08 15:16:17 +03:00
|
|
|
import React, {createRef} from 'react';
|
2019-01-22 23:28:33 +03:00
|
|
|
import {_t} from "../../../languageHandler";
|
|
|
|
import MatrixClientPeg from "../../../MatrixClientPeg";
|
|
|
|
import Field from "../elements/Field";
|
2019-03-02 20:59:25 +03:00
|
|
|
import {User} from "matrix-js-sdk";
|
2019-03-05 19:42:22 +03:00
|
|
|
import { getHostingLink } from '../../../utils/HostingLink';
|
2019-12-16 17:58:12 +03:00
|
|
|
import sdk from "../../../index";
|
2019-01-22 23:28:33 +03:00
|
|
|
|
|
|
|
export default class ProfileSettings extends React.Component {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
|
|
|
|
const client = MatrixClientPeg.get();
|
2019-03-02 20:59:25 +03:00
|
|
|
let user = client.getUser(client.getUserId());
|
|
|
|
if (!user) {
|
|
|
|
// XXX: We shouldn't have to do this.
|
|
|
|
// There seems to be a condition where the User object won't exist until a room
|
|
|
|
// exists on the account. To work around this, we'll just create a temporary User
|
|
|
|
// and use that.
|
|
|
|
console.warn("User object not found - creating one for ProfileSettings");
|
|
|
|
user = new User(client.getUserId());
|
|
|
|
}
|
2019-01-22 23:28:33 +03:00
|
|
|
let avatarUrl = user.avatarUrl;
|
|
|
|
if (avatarUrl) avatarUrl = client.mxcUrlToHttp(avatarUrl, 96, 96, 'crop', false);
|
|
|
|
this.state = {
|
|
|
|
userId: user.userId,
|
|
|
|
originalDisplayName: user.displayName,
|
|
|
|
displayName: user.displayName,
|
|
|
|
originalAvatarUrl: avatarUrl,
|
|
|
|
avatarUrl: avatarUrl,
|
|
|
|
avatarFile: null,
|
|
|
|
enableProfileSave: false,
|
|
|
|
};
|
2019-12-08 15:16:17 +03:00
|
|
|
|
|
|
|
this._avatarUpload = createRef();
|
2019-01-22 23:28:33 +03:00
|
|
|
}
|
|
|
|
|
2019-12-16 17:58:12 +03:00
|
|
|
_uploadAvatar = () => {
|
2019-12-08 15:16:17 +03:00
|
|
|
this._avatarUpload.current.click();
|
2019-01-22 23:28:33 +03:00
|
|
|
};
|
|
|
|
|
2019-12-16 17:58:12 +03:00
|
|
|
_removeAvatar = () => {
|
|
|
|
// clear file upload field so same file can be selected
|
|
|
|
this._avatarUpload.current.value = "";
|
|
|
|
this.setState({
|
|
|
|
avatarUrl: undefined,
|
|
|
|
avatarFile: undefined,
|
|
|
|
enableProfileSave: true,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2019-01-22 23:28:33 +03:00
|
|
|
_saveProfile = async (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
if (!this.state.enableProfileSave) return;
|
|
|
|
this.setState({enableProfileSave: false});
|
|
|
|
|
|
|
|
const client = MatrixClientPeg.get();
|
|
|
|
const newState = {};
|
|
|
|
|
|
|
|
// TODO: What do we do about errors?
|
|
|
|
|
|
|
|
if (this.state.originalDisplayName !== this.state.displayName) {
|
|
|
|
await client.setDisplayName(this.state.displayName);
|
|
|
|
newState.originalDisplayName = this.state.displayName;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.state.avatarFile) {
|
|
|
|
const uri = await client.uploadContent(this.state.avatarFile);
|
|
|
|
await client.setAvatarUrl(uri);
|
|
|
|
newState.avatarUrl = client.mxcUrlToHttp(uri, 96, 96, 'crop', false);
|
|
|
|
newState.originalAvatarUrl = newState.avatarUrl;
|
|
|
|
newState.avatarFile = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState(newState);
|
|
|
|
};
|
|
|
|
|
|
|
|
_onDisplayNameChanged = (e) => {
|
|
|
|
this.setState({
|
|
|
|
displayName: e.target.value,
|
|
|
|
enableProfileSave: true,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
_onAvatarChanged = (e) => {
|
|
|
|
if (!e.target.files || !e.target.files.length) {
|
|
|
|
this.setState({
|
|
|
|
avatarUrl: this.state.originalAvatarUrl,
|
|
|
|
avatarFile: null,
|
|
|
|
enableProfileSave: false,
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const file = e.target.files[0];
|
|
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = (ev) => {
|
|
|
|
this.setState({
|
|
|
|
avatarUrl: ev.target.result,
|
|
|
|
avatarFile: file,
|
|
|
|
enableProfileSave: true,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
2019-03-05 19:42:22 +03:00
|
|
|
const hostingSignupLink = getHostingLink('user-settings');
|
2019-03-05 19:12:02 +03:00
|
|
|
let hostingSignup = null;
|
|
|
|
if (hostingSignupLink) {
|
|
|
|
hostingSignup = <span className="mx_ProfileSettings_hostingSignup">
|
|
|
|
{_t(
|
|
|
|
"<a>Upgrade</a> to your own domain", {},
|
|
|
|
{
|
|
|
|
a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener">{sub}</a>,
|
|
|
|
},
|
|
|
|
)}
|
|
|
|
<a href={hostingSignupLink} target="_blank" rel="noopener">
|
|
|
|
<img src={require("../../../../res/img/external-link.svg")} width="11" height="10" alt='' />
|
|
|
|
</a>
|
2019-03-05 19:20:18 +03:00
|
|
|
</span>;
|
2019-03-05 19:12:02 +03:00
|
|
|
}
|
|
|
|
|
2019-12-16 17:58:12 +03:00
|
|
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
|
|
|
const AvatarSetting = sdk.getComponent('settings.AvatarSetting');
|
2019-01-22 23:28:33 +03:00
|
|
|
return (
|
2019-10-03 23:47:19 +03:00
|
|
|
<form onSubmit={this._saveProfile} autoComplete="off" noValidate={true}>
|
2019-12-08 15:16:17 +03:00
|
|
|
<input type="file" ref={this._avatarUpload} className="mx_ProfileSettings_avatarUpload"
|
2019-01-23 19:41:07 +03:00
|
|
|
onChange={this._onAvatarChanged} accept="image/*" />
|
2019-01-22 23:28:33 +03:00
|
|
|
<div className="mx_ProfileSettings_profile">
|
|
|
|
<div className="mx_ProfileSettings_controls">
|
2019-03-05 19:12:02 +03:00
|
|
|
<p>
|
|
|
|
{this.state.userId}
|
|
|
|
{hostingSignup}
|
|
|
|
</p>
|
2019-01-22 23:28:33 +03:00
|
|
|
<Field id="profileDisplayName" label={_t("Display Name")}
|
|
|
|
type="text" value={this.state.displayName} autoComplete="off"
|
|
|
|
onChange={this._onDisplayNameChanged} />
|
|
|
|
</div>
|
2019-12-16 17:58:12 +03:00
|
|
|
<AvatarSetting
|
|
|
|
avatarUrl={this.state.avatarUrl}
|
|
|
|
avatarAltText={_t("Profile picture")}
|
|
|
|
uploadAvatar={this._uploadAvatar}
|
|
|
|
removeAvatar={this._removeAvatar} />
|
2019-01-22 23:28:33 +03:00
|
|
|
</div>
|
|
|
|
<AccessibleButton onClick={this._saveProfile} kind="primary"
|
|
|
|
disabled={!this.state.enableProfileSave}>
|
|
|
|
{_t("Save")}
|
|
|
|
</AccessibleButton>
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|