2019-01-22 23:28:33 +03:00
|
|
|
/*
|
2021-09-01 12:19:25 +03:00
|
|
|
Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
|
2019-01-22 23:28:33 +03:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
2021-06-29 15:11:58 +03:00
|
|
|
import React, { createRef } from 'react';
|
|
|
|
import { _t } from "../../../languageHandler";
|
|
|
|
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
2019-01-22 23:28:33 +03:00
|
|
|
import Field from "../elements/Field";
|
2019-03-05 19:42:22 +03:00
|
|
|
import { getHostingLink } from '../../../utils/HostingLink';
|
2021-06-29 15:11:58 +03:00
|
|
|
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
|
2020-10-01 17:49:22 +03:00
|
|
|
import Modal from "../../../Modal";
|
|
|
|
import ErrorDialog from "../dialogs/ErrorDialog";
|
2021-06-29 15:11:58 +03:00
|
|
|
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
|
|
|
import { mediaFromMxc } from "../../../customisations/Media";
|
2021-08-17 20:05:10 +03:00
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
|
|
|
import AvatarSetting from './AvatarSetting';
|
2019-01-22 23:28:33 +03:00
|
|
|
|
2021-08-14 12:36:12 +03:00
|
|
|
interface IState {
|
|
|
|
userId?: string;
|
|
|
|
originalDisplayName?: string;
|
|
|
|
displayName?: string;
|
|
|
|
originalAvatarUrl?: string;
|
|
|
|
avatarUrl?: string | ArrayBuffer;
|
|
|
|
avatarFile?: File;
|
|
|
|
enableProfileSave?: boolean;
|
|
|
|
}
|
|
|
|
|
2021-03-09 06:20:07 +03:00
|
|
|
@replaceableComponent("views.settings.ProfileSettings")
|
2021-08-25 11:05:07 +03:00
|
|
|
export default class ProfileSettings extends React.Component<{}, IState> {
|
2021-08-14 12:36:12 +03:00
|
|
|
private avatarUpload: React.RefObject<HTMLInputElement> = createRef();
|
2021-08-26 10:02:36 +03:00
|
|
|
|
2021-08-25 11:05:07 +03:00
|
|
|
constructor(props: {}) {
|
2021-08-14 12:36:12 +03:00
|
|
|
super(props);
|
2019-01-22 23:28:33 +03:00
|
|
|
|
|
|
|
const client = MatrixClientPeg.get();
|
2020-10-02 17:39:34 +03:00
|
|
|
let avatarUrl = OwnProfileStore.instance.avatarMxc;
|
2021-03-04 05:06:46 +03:00
|
|
|
if (avatarUrl) avatarUrl = mediaFromMxc(avatarUrl).getSquareThumbnailHttp(96);
|
2019-01-22 23:28:33 +03:00
|
|
|
this.state = {
|
2020-10-02 17:39:34 +03:00
|
|
|
userId: client.getUserId(),
|
|
|
|
originalDisplayName: OwnProfileStore.instance.displayName,
|
|
|
|
displayName: OwnProfileStore.instance.displayName,
|
2019-01-22 23:28:33 +03:00
|
|
|
originalAvatarUrl: avatarUrl,
|
|
|
|
avatarUrl: avatarUrl,
|
|
|
|
avatarFile: null,
|
|
|
|
enableProfileSave: false,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2021-08-14 12:36:12 +03:00
|
|
|
private uploadAvatar = (): void => {
|
|
|
|
this.avatarUpload.current.click();
|
2019-01-22 23:28:33 +03:00
|
|
|
};
|
|
|
|
|
2021-08-14 12:36:12 +03:00
|
|
|
private removeAvatar = (): void => {
|
2019-12-16 17:58:12 +03:00
|
|
|
// clear file upload field so same file can be selected
|
2021-08-14 12:36:12 +03:00
|
|
|
this.avatarUpload.current.value = "";
|
2019-12-16 17:58:12 +03:00
|
|
|
this.setState({
|
2021-02-05 17:11:57 +03:00
|
|
|
avatarUrl: null,
|
|
|
|
avatarFile: null,
|
2019-12-16 17:58:12 +03:00
|
|
|
enableProfileSave: true,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2021-08-14 12:36:12 +03:00
|
|
|
private cancelProfileChanges = async (e: React.MouseEvent): Promise<void> => {
|
2020-09-22 06:00:51 +03:00
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
if (!this.state.enableProfileSave) return;
|
2021-02-05 17:11:57 +03:00
|
|
|
this.setState({
|
|
|
|
enableProfileSave: false,
|
|
|
|
displayName: this.state.originalDisplayName,
|
|
|
|
avatarUrl: this.state.originalAvatarUrl,
|
|
|
|
avatarFile: null,
|
|
|
|
});
|
2020-09-22 06:00:51 +03:00
|
|
|
};
|
|
|
|
|
2021-08-14 12:36:12 +03:00
|
|
|
private saveProfile = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
|
2019-01-22 23:28:33 +03:00
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
if (!this.state.enableProfileSave) return;
|
2021-06-29 15:11:58 +03:00
|
|
|
this.setState({ enableProfileSave: false });
|
2019-01-22 23:28:33 +03:00
|
|
|
|
|
|
|
const client = MatrixClientPeg.get();
|
2021-08-14 12:36:12 +03:00
|
|
|
const newState: IState = {};
|
2019-01-22 23:28:33 +03:00
|
|
|
|
2020-10-17 18:52:18 +03:00
|
|
|
const displayName = this.state.displayName.trim();
|
2020-10-01 17:49:22 +03:00
|
|
|
try {
|
|
|
|
if (this.state.originalDisplayName !== this.state.displayName) {
|
2020-10-17 18:52:18 +03:00
|
|
|
await client.setDisplayName(displayName);
|
|
|
|
newState.originalDisplayName = displayName;
|
|
|
|
newState.displayName = displayName;
|
2020-10-01 17:49:22 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.state.avatarFile) {
|
2020-11-04 14:33:14 +03:00
|
|
|
console.log(
|
|
|
|
`Uploading new avatar, ${this.state.avatarFile.name} of type ${this.state.avatarFile.type},` +
|
|
|
|
` (${this.state.avatarFile.size}) bytes`);
|
2020-10-01 17:49:22 +03:00
|
|
|
const uri = await client.uploadContent(this.state.avatarFile);
|
|
|
|
await client.setAvatarUrl(uri);
|
2021-03-04 05:06:46 +03:00
|
|
|
newState.avatarUrl = mediaFromMxc(uri).getSquareThumbnailHttp(96);
|
2020-10-01 17:49:22 +03:00
|
|
|
newState.originalAvatarUrl = newState.avatarUrl;
|
|
|
|
newState.avatarFile = null;
|
|
|
|
} else if (this.state.originalAvatarUrl !== this.state.avatarUrl) {
|
|
|
|
await client.setAvatarUrl(""); // use empty string as Synapse 500s on undefined
|
|
|
|
}
|
|
|
|
} catch (err) {
|
2020-11-04 14:33:14 +03:00
|
|
|
console.log("Failed to save profile", err);
|
2020-10-01 17:49:22 +03:00
|
|
|
Modal.createTrackedDialog('Failed to save profile', '', ErrorDialog, {
|
|
|
|
title: _t("Failed to save your profile"),
|
|
|
|
description: ((err && err.message) ? err.message : _t("The operation could not be completed")),
|
|
|
|
});
|
2019-01-22 23:28:33 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
this.setState(newState);
|
|
|
|
};
|
|
|
|
|
2021-08-14 12:36:12 +03:00
|
|
|
private onDisplayNameChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
2019-01-22 23:28:33 +03:00
|
|
|
this.setState({
|
|
|
|
displayName: e.target.value,
|
|
|
|
enableProfileSave: true,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2021-08-14 12:36:12 +03:00
|
|
|
private onAvatarChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
2019-01-22 23:28:33 +03:00
|
|
|
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);
|
|
|
|
};
|
|
|
|
|
2021-08-14 12:36:12 +03:00
|
|
|
public render(): JSX.Element {
|
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">
|
2021-07-20 00:43:11 +03:00
|
|
|
{ _t(
|
2019-03-05 19:12:02 +03:00
|
|
|
"<a>Upgrade</a> to your own domain", {},
|
|
|
|
{
|
2021-07-20 00:43:11 +03:00
|
|
|
a: sub => <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">{ sub }</a>,
|
2019-03-05 19:12:02 +03:00
|
|
|
},
|
2021-07-20 00:43:11 +03:00
|
|
|
) }
|
2020-02-24 01:14:29 +03:00
|
|
|
<a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
|
2019-03-05 19:12:02 +03:00
|
|
|
<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-01-22 23:28:33 +03:00
|
|
|
return (
|
2020-09-22 06:00:51 +03:00
|
|
|
<form
|
2021-08-14 12:36:12 +03:00
|
|
|
onSubmit={this.saveProfile}
|
2020-09-24 17:26:59 +03:00
|
|
|
autoComplete="off"
|
|
|
|
noValidate={true}
|
2020-09-22 06:00:51 +03:00
|
|
|
className="mx_ProfileSettings_profileForm"
|
|
|
|
>
|
2021-04-27 18:23:27 +03:00
|
|
|
<input
|
|
|
|
type="file"
|
2021-08-14 12:36:12 +03:00
|
|
|
ref={this.avatarUpload}
|
2021-07-23 12:23:45 +03:00
|
|
|
className="mx_ProfileSettings_avatarUpload"
|
2021-08-14 12:36:12 +03:00
|
|
|
onChange={this.onAvatarChanged}
|
2021-04-27 18:23:27 +03:00
|
|
|
accept="image/*"
|
|
|
|
/>
|
2019-01-22 23:28:33 +03:00
|
|
|
<div className="mx_ProfileSettings_profile">
|
|
|
|
<div className="mx_ProfileSettings_controls">
|
2021-07-20 00:43:11 +03:00
|
|
|
<span className="mx_SettingsTab_subheading">{ _t("Profile") }</span>
|
2020-09-22 06:00:51 +03:00
|
|
|
<Field
|
|
|
|
label={_t("Display Name")}
|
2021-07-23 12:23:45 +03:00
|
|
|
type="text"
|
|
|
|
value={this.state.displayName}
|
2020-09-22 06:00:51 +03:00
|
|
|
autoComplete="off"
|
2021-08-14 12:36:12 +03:00
|
|
|
onChange={this.onDisplayNameChanged}
|
2020-09-22 06:00:51 +03:00
|
|
|
/>
|
2019-03-05 19:12:02 +03:00
|
|
|
<p>
|
2021-07-20 00:43:11 +03:00
|
|
|
{ this.state.userId }
|
|
|
|
{ hostingSignup }
|
2019-03-05 19:12:02 +03:00
|
|
|
</p>
|
2019-01-22 23:28:33 +03:00
|
|
|
</div>
|
2019-12-16 17:58:12 +03:00
|
|
|
<AvatarSetting
|
2021-09-03 14:50:42 +03:00
|
|
|
avatarUrl={this.state.avatarUrl?.toString()}
|
2019-12-16 18:08:22 +03:00
|
|
|
avatarName={this.state.displayName || this.state.userId}
|
2019-12-16 17:58:12 +03:00
|
|
|
avatarAltText={_t("Profile picture")}
|
2021-08-14 12:36:12 +03:00
|
|
|
uploadAvatar={this.uploadAvatar}
|
|
|
|
removeAvatar={this.removeAvatar} />
|
2019-01-22 23:28:33 +03:00
|
|
|
</div>
|
2020-09-22 06:00:51 +03:00
|
|
|
<div className="mx_ProfileSettings_buttons">
|
|
|
|
<AccessibleButton
|
2021-08-14 12:36:12 +03:00
|
|
|
onClick={this.cancelProfileChanges}
|
2020-09-24 17:26:59 +03:00
|
|
|
kind="link"
|
2020-09-22 06:00:51 +03:00
|
|
|
disabled={!this.state.enableProfileSave}
|
|
|
|
>
|
2021-07-20 00:43:11 +03:00
|
|
|
{ _t("Cancel") }
|
2020-09-22 06:00:51 +03:00
|
|
|
</AccessibleButton>
|
|
|
|
<AccessibleButton
|
2021-08-14 12:36:12 +03:00
|
|
|
onClick={this.saveProfile}
|
2020-09-24 17:26:59 +03:00
|
|
|
kind="primary"
|
2020-09-22 06:00:51 +03:00
|
|
|
disabled={!this.state.enableProfileSave}
|
|
|
|
>
|
2021-07-20 00:43:11 +03:00
|
|
|
{ _t("Save") }
|
2020-09-22 06:00:51 +03:00
|
|
|
</AccessibleButton>
|
|
|
|
</div>
|
2019-01-22 23:28:33 +03:00
|
|
|
</form>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|