From 6c7806087600349621af98a6fc1df7fb814990db Mon Sep 17 00:00:00 2001
From: jamesjulich <51384945+jamesjulich@users.noreply.github.com>
Date: Thu, 9 Sep 2021 00:47:26 -0500
Subject: [PATCH 1/6] Add profile editor in settings

---
 public/res/svg/avatar-clip.svg                |  3 +
 src/app/atoms/image-upload/ImageUpload.jsx    | 62 +++++++++++++++++
 src/app/atoms/image-upload/ImageUpload.scss   | 20 ++++++
 .../profile-editor/ProfileEditor.jsx          | 66 +++++++++++++++++++
 .../profile-editor/ProfileEditor.scss         | 24 +++++++
 src/app/organisms/settings/Settings.jsx       | 21 ++++++
 6 files changed, 196 insertions(+)
 create mode 100644 public/res/svg/avatar-clip.svg
 create mode 100644 src/app/atoms/image-upload/ImageUpload.jsx
 create mode 100644 src/app/atoms/image-upload/ImageUpload.scss
 create mode 100644 src/app/molecules/profile-editor/ProfileEditor.jsx
 create mode 100644 src/app/molecules/profile-editor/ProfileEditor.scss

diff --git a/public/res/svg/avatar-clip.svg b/public/res/svg/avatar-clip.svg
new file mode 100644
index 00000000..ffaa1a2f
--- /dev/null
+++ b/public/res/svg/avatar-clip.svg
@@ -0,0 +1,3 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58173 0 0 3.58173 0 8V72C0 76.4183 3.58173 80 8 80H72C76.4183 80 80 76.4183 80 72V26H62C57.5817 26 54 22.4183 54 18V0H8Z" fill="#E24444"/>
+</svg>
diff --git a/src/app/atoms/image-upload/ImageUpload.jsx b/src/app/atoms/image-upload/ImageUpload.jsx
new file mode 100644
index 00000000..13930527
--- /dev/null
+++ b/src/app/atoms/image-upload/ImageUpload.jsx
@@ -0,0 +1,62 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+
+import GenIC from '../../../../public/res/ic/outlined/settings.svg';
+import Avatar from '../avatar/Avatar';
+
+import RawIcon from '../system-icons/RawIcon';
+import './ImageUpload.scss';
+
+function ImageUpload({
+  text, bgColor, imageSrc, onUpload,
+}) {
+  const uploadImageRef = useRef(null);
+
+  function uploadImage(e) {
+    const file = e.target.files.item(0);
+    if (file !== null) { // TODO Add upload progress spinner
+      initMatrix.matrixClient.uploadContent(file, { onlyContentUri: false }).then((res) => {
+        if (res.content_uri !== null) {
+          onUpload({ content_uri: res.content_uri });
+        }
+      }, (err) => {
+        console.log(err); // TODO Replace with alert banner.
+      });
+    }
+  }
+
+  return (
+    <button type="button" className="img-upload-container" onClick={() => { uploadImageRef.current.click(); }}>
+      <div className="img-upload-mask">
+        <Avatar
+          imageSrc={imageSrc}
+          text={text.slice(0, 1)}
+          bgColor={bgColor}
+          size="large"
+        />
+      </div>
+      <div className="img-upload-icon">
+        <RawIcon size="small" src={GenIC} />
+      </div>
+      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
+    </button>
+  );
+}
+
+ImageUpload.defaultProps = {
+  text: null,
+  bgColor: 'transparent',
+  imageSrc: null,
+  onUpload: null,
+};
+
+ImageUpload.propTypes = {
+  text: PropTypes.string,
+  bgColor: PropTypes.string,
+  imageSrc: PropTypes.string,
+  onUpload: PropTypes.func,
+};
+
+export default ImageUpload;
diff --git a/src/app/atoms/image-upload/ImageUpload.scss b/src/app/atoms/image-upload/ImageUpload.scss
new file mode 100644
index 00000000..c7118ba8
--- /dev/null
+++ b/src/app/atoms/image-upload/ImageUpload.scss
@@ -0,0 +1,20 @@
+.img-upload-container {
+	display: flex;
+	flex-direction: row-reverse;
+	width: 80px;
+	height: 80px;
+}
+
+.img-upload-container:hover {
+	cursor: pointer;
+}
+
+.img-upload-mask {
+	mask: url('../../../../public/res/svg/avatar-clip.svg');
+	//width: 80px;
+}
+
+.img-upload-icon {
+  z-index: 1;
+  position: absolute;
+}
\ No newline at end of file
diff --git a/src/app/molecules/profile-editor/ProfileEditor.jsx b/src/app/molecules/profile-editor/ProfileEditor.jsx
new file mode 100644
index 00000000..818ed935
--- /dev/null
+++ b/src/app/molecules/profile-editor/ProfileEditor.jsx
@@ -0,0 +1,66 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+import colorMXID from '../../../util/colorMXID';
+
+import Button from '../../atoms/button/Button';
+import ImageUpload from '../../atoms/image-upload/ImageUpload';
+import Input from '../../atoms/input/Input';
+import Text from '../../atoms/text/Text';
+
+import './ProfileEditor.scss';
+
+// TODO Fix bug that prevents 'Save' button from enabling up until second changed.
+function ProfileEditor({
+  userId,
+}) {
+  const mx = initMatrix.matrixClient;
+  const displayNameRef = useRef(null);
+  const bgColor = colorMXID(userId);
+  const [imageSrc, updateImgSrc] = useState(mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl));
+  const [disabled, setDisabled] = useState(true);
+
+  let username = mx.getUser(mx.getUserId()).displayName;
+
+  function handleUpload(e) {
+    mx.setAvatarUrl(e.content_uri);
+    updateImgSrc(mx.mxcUrlToHttp(e.content_uri));
+  }
+
+  function saveDisplayName() {
+    if (displayNameRef.current.value !== null && displayNameRef.current.value !== '') {
+      mx.setDisplayName(displayNameRef.current.value);
+      username = displayNameRef.current.value;
+      setDisabled(true);
+    }
+  }
+
+  function onDisplayNameInputChange() {
+    setDisabled((username === displayNameRef.current.value) || displayNameRef.current.value === '' || displayNameRef.current.value == null);
+  }
+
+  return (
+    <form className="profile-editor">
+      <ImageUpload text={username} bgColor={bgColor} imageSrc={imageSrc} onUpload={handleUpload} />
+      <div className="display-name-input-container">
+        <Text variant="b3">
+          Display name of&nbsp;
+          {mx.getUserId()}
+        </Text>
+        <Input id="display-name-input" onChange={onDisplayNameInputChange} placeholder={mx.getUser(mx.getUserId()).displayName} forwardRef={displayNameRef} />
+      </div>
+      <Button variant="primary" onClick={saveDisplayName} disabled={disabled}>Save</Button>
+    </form>
+  );
+}
+
+ProfileEditor.defaultProps = {
+  userId: null,
+};
+
+ProfileEditor.propTypes = {
+  userId: PropTypes.string,
+};
+
+export default ProfileEditor;
diff --git a/src/app/molecules/profile-editor/ProfileEditor.scss b/src/app/molecules/profile-editor/ProfileEditor.scss
new file mode 100644
index 00000000..98a453aa
--- /dev/null
+++ b/src/app/molecules/profile-editor/ProfileEditor.scss
@@ -0,0 +1,24 @@
+.profile-editor {
+  display: flex;
+  align-items: end;
+}
+
+.img-upload-container {
+  margin-right: var(--sp-normal)
+}
+
+.display-name-input-container {
+  display: flex;
+  flex-direction: column;
+  margin-right: var(--sp-normal);
+  width: 100%;
+  max-width: 400px;
+}
+
+.display-name-input-container > .text-b3 {
+  margin-bottom: var(--sp-ultra-tight)
+}
+
+.profile-editor > .btn-primary {
+  height: 46px;
+}
\ No newline at end of file
diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index 8914640d..91be164f 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -14,8 +14,10 @@ import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls'
 
 import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
 import SettingTile from '../../molecules/setting-tile/SettingTile';
+import ProfileEditor from '../../molecules/profile-editor/ProfileEditor';
 import ImportE2ERoomKeys from '../../molecules/import-e2e-room-keys/ImportE2ERoomKeys';
 
+import GenIC from '../../../../public/res/ic/outlined/settings.svg';
 import SunIC from '../../../../public/res/ic/outlined/sun.svg';
 import LockIC from '../../../../public/res/ic/outlined/lock.svg';
 import InfoIC from '../../../../public/res/ic/outlined/info.svg';
@@ -23,6 +25,19 @@ import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
 import CinnySVG from '../../../../public/res/svg/cinny.svg';
 
+function GeneralSection() {
+  return (
+    <div className="settings-content">
+      <SettingTile
+        title="Profile"
+        content={(
+          <ProfileEditor userId={initMatrix.matrixClient.getUserId()} />
+        )}
+      />
+    </div>
+  );
+}
+
 function AppearanceSection() {
   const [, updateState] = useState({});
 
@@ -104,6 +119,12 @@ function AboutSection() {
 
 function Settings({ isOpen, onRequestClose }) {
   const settingSections = [{
+    name: 'General',
+    iconSrc: GenIC,
+    render() {
+      return <GeneralSection />;
+    },
+  }, {
     name: 'Appearance',
     iconSrc: SunIC,
     render() {

From a0139f41576809cb647c2d5314be4b522c6ad55b Mon Sep 17 00:00:00 2001
From: jamesjulich <51384945+jamesjulich@users.noreply.github.com>
Date: Thu, 9 Sep 2021 00:59:17 -0500
Subject: [PATCH 2/6] Adds comments.

---
 src/app/atoms/image-upload/ImageUpload.jsx         | 1 +
 src/app/molecules/profile-editor/ProfileEditor.jsx | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/app/atoms/image-upload/ImageUpload.jsx b/src/app/atoms/image-upload/ImageUpload.jsx
index 13930527..ef8bfa65 100644
--- a/src/app/atoms/image-upload/ImageUpload.jsx
+++ b/src/app/atoms/image-upload/ImageUpload.jsx
@@ -14,6 +14,7 @@ function ImageUpload({
 }) {
   const uploadImageRef = useRef(null);
 
+  // Uploads the selected image and passes the resulting URI to the onUpload function provided in component props.
   function uploadImage(e) {
     const file = e.target.files.item(0);
     if (file !== null) { // TODO Add upload progress spinner
diff --git a/src/app/molecules/profile-editor/ProfileEditor.jsx b/src/app/molecules/profile-editor/ProfileEditor.jsx
index 818ed935..4bbf00f7 100644
--- a/src/app/molecules/profile-editor/ProfileEditor.jsx
+++ b/src/app/molecules/profile-editor/ProfileEditor.jsx
@@ -23,6 +23,7 @@ function ProfileEditor({
 
   let username = mx.getUser(mx.getUserId()).displayName;
 
+  // Sets avatar URL and updates the avatar component in profile editor to reflect new upload
   function handleUpload(e) {
     mx.setAvatarUrl(e.content_uri);
     updateImgSrc(mx.mxcUrlToHttp(e.content_uri));
@@ -36,6 +37,7 @@ function ProfileEditor({
     }
   }
 
+  // Enables/disables save button depending on whether or not the username is different than the current.
   function onDisplayNameInputChange() {
     setDisabled((username === displayNameRef.current.value) || displayNameRef.current.value === '' || displayNameRef.current.value == null);
   }

From fcb4104856d3a91490d16a1a01e4b58cf0bd78de Mon Sep 17 00:00:00 2001
From: jamesjulich <51384945+jamesjulich@users.noreply.github.com>
Date: Thu, 9 Sep 2021 01:06:25 -0500
Subject: [PATCH 3/6] Fix warnings related to line length.

---
 src/app/atoms/image-upload/ImageUpload.jsx         | 2 +-
 src/app/molecules/profile-editor/ProfileEditor.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/atoms/image-upload/ImageUpload.jsx b/src/app/atoms/image-upload/ImageUpload.jsx
index ef8bfa65..e8a26714 100644
--- a/src/app/atoms/image-upload/ImageUpload.jsx
+++ b/src/app/atoms/image-upload/ImageUpload.jsx
@@ -14,7 +14,7 @@ function ImageUpload({
 }) {
   const uploadImageRef = useRef(null);
 
-  // Uploads the selected image and passes the resulting URI to the onUpload function provided in component props.
+  // Uploads image and passes resulting URI to onUpload function provided in component props.
   function uploadImage(e) {
     const file = e.target.files.item(0);
     if (file !== null) { // TODO Add upload progress spinner
diff --git a/src/app/molecules/profile-editor/ProfileEditor.jsx b/src/app/molecules/profile-editor/ProfileEditor.jsx
index 4bbf00f7..797c4003 100644
--- a/src/app/molecules/profile-editor/ProfileEditor.jsx
+++ b/src/app/molecules/profile-editor/ProfileEditor.jsx
@@ -37,7 +37,7 @@ function ProfileEditor({
     }
   }
 
-  // Enables/disables save button depending on whether or not the username is different than the current.
+  // Enables/disables button depending on if the typed displayname is different than the current.
   function onDisplayNameInputChange() {
     setDisabled((username === displayNameRef.current.value) || displayNameRef.current.value === '' || displayNameRef.current.value == null);
   }

From f97596689fc8fea987911e4194110d5f9928adb8 Mon Sep 17 00:00:00 2001
From: jamesjulich <51384945+jamesjulich@users.noreply.github.com>
Date: Sun, 12 Sep 2021 22:25:58 -0500
Subject: [PATCH 4/6] Move files and rename classes.

---
 .../image-upload/ImageUpload.jsx                   | 14 +++++++-------
 .../image-upload/ImageUpload.scss                  | 10 +++++-----
 .../profile-editor/ProfileEditor.jsx               |  6 +++---
 .../profile-editor/ProfileEditor.scss              |  6 +++---
 src/app/organisms/settings/Settings.jsx            |  7 ++++---
 5 files changed, 22 insertions(+), 21 deletions(-)
 rename src/app/{atoms => molecules}/image-upload/ImageUpload.jsx (76%)
 rename src/app/{atoms => molecules}/image-upload/ImageUpload.scss (58%)
 rename src/app/{molecules => organisms}/profile-editor/ProfileEditor.jsx (87%)
 rename src/app/{molecules => organisms}/profile-editor/ProfileEditor.scss (75%)

diff --git a/src/app/atoms/image-upload/ImageUpload.jsx b/src/app/molecules/image-upload/ImageUpload.jsx
similarity index 76%
rename from src/app/atoms/image-upload/ImageUpload.jsx
rename to src/app/molecules/image-upload/ImageUpload.jsx
index e8a26714..992d5bca 100644
--- a/src/app/atoms/image-upload/ImageUpload.jsx
+++ b/src/app/molecules/image-upload/ImageUpload.jsx
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 
 import initMatrix from '../../../client/initMatrix';
 
-import GenIC from '../../../../public/res/ic/outlined/settings.svg';
-import Avatar from '../avatar/Avatar';
+import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
+import Avatar from '../../atoms/avatar/Avatar';
 
-import RawIcon from '../system-icons/RawIcon';
+import RawIcon from '../../atoms/system-icons/RawIcon';
 import './ImageUpload.scss';
 
 function ImageUpload({
@@ -29,8 +29,8 @@ function ImageUpload({
   }
 
   return (
-    <button type="button" className="img-upload-container" onClick={() => { uploadImageRef.current.click(); }}>
-      <div className="img-upload-mask">
+    <button type="button" className="img-upload" onClick={() => { uploadImageRef.current.click(); }}>
+      <div className="img-upload__mask">
         <Avatar
           imageSrc={imageSrc}
           text={text.slice(0, 1)}
@@ -38,8 +38,8 @@ function ImageUpload({
           size="large"
         />
       </div>
-      <div className="img-upload-icon">
-        <RawIcon size="small" src={GenIC} />
+      <div className="img-upload__icon">
+        <RawIcon size="small" src={SettingsIC} />
       </div>
       <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
     </button>
diff --git a/src/app/atoms/image-upload/ImageUpload.scss b/src/app/molecules/image-upload/ImageUpload.scss
similarity index 58%
rename from src/app/atoms/image-upload/ImageUpload.scss
rename to src/app/molecules/image-upload/ImageUpload.scss
index c7118ba8..dbf2bace 100644
--- a/src/app/atoms/image-upload/ImageUpload.scss
+++ b/src/app/molecules/image-upload/ImageUpload.scss
@@ -1,20 +1,20 @@
-.img-upload-container {
+.img-upload {
 	display: flex;
 	flex-direction: row-reverse;
 	width: 80px;
 	height: 80px;
 }
 
-.img-upload-container:hover {
+.img-upload:hover {
 	cursor: pointer;
 }
 
-.img-upload-mask {
+.img-upload__mask {
 	mask: url('../../../../public/res/svg/avatar-clip.svg');
-	//width: 80px;
+	-webkit-mask: url('../../../../public/res/svg/avatar-clip.svg');
 }
 
-.img-upload-icon {
+.img-upload__icon {
   z-index: 1;
   position: absolute;
 }
\ No newline at end of file
diff --git a/src/app/molecules/profile-editor/ProfileEditor.jsx b/src/app/organisms/profile-editor/ProfileEditor.jsx
similarity index 87%
rename from src/app/molecules/profile-editor/ProfileEditor.jsx
rename to src/app/organisms/profile-editor/ProfileEditor.jsx
index 797c4003..61cd896d 100644
--- a/src/app/molecules/profile-editor/ProfileEditor.jsx
+++ b/src/app/organisms/profile-editor/ProfileEditor.jsx
@@ -5,7 +5,7 @@ import initMatrix from '../../../client/initMatrix';
 import colorMXID from '../../../util/colorMXID';
 
 import Button from '../../atoms/button/Button';
-import ImageUpload from '../../atoms/image-upload/ImageUpload';
+import ImageUpload from '../../molecules/image-upload/ImageUpload';
 import Input from '../../atoms/input/Input';
 import Text from '../../atoms/text/Text';
 
@@ -45,12 +45,12 @@ function ProfileEditor({
   return (
     <form className="profile-editor">
       <ImageUpload text={username} bgColor={bgColor} imageSrc={imageSrc} onUpload={handleUpload} />
-      <div className="display-name-input-container">
+      <div className="profile-editor__input-container">
         <Text variant="b3">
           Display name of&nbsp;
           {mx.getUserId()}
         </Text>
-        <Input id="display-name-input" onChange={onDisplayNameInputChange} placeholder={mx.getUser(mx.getUserId()).displayName} forwardRef={displayNameRef} />
+        <Input id="profile-editor__input" onChange={onDisplayNameInputChange} placeholder={mx.getUser(mx.getUserId()).displayName} forwardRef={displayNameRef} />
       </div>
       <Button variant="primary" onClick={saveDisplayName} disabled={disabled}>Save</Button>
     </form>
diff --git a/src/app/molecules/profile-editor/ProfileEditor.scss b/src/app/organisms/profile-editor/ProfileEditor.scss
similarity index 75%
rename from src/app/molecules/profile-editor/ProfileEditor.scss
rename to src/app/organisms/profile-editor/ProfileEditor.scss
index 98a453aa..015b920f 100644
--- a/src/app/molecules/profile-editor/ProfileEditor.scss
+++ b/src/app/organisms/profile-editor/ProfileEditor.scss
@@ -3,11 +3,11 @@
   align-items: end;
 }
 
-.img-upload-container {
+.img-upload {
   margin-right: var(--sp-normal)
 }
 
-.display-name-input-container {
+.profile-editor__input-container {
   display: flex;
   flex-direction: column;
   margin-right: var(--sp-normal);
@@ -15,7 +15,7 @@
   max-width: 400px;
 }
 
-.display-name-input-container > .text-b3 {
+.profile-editor__input-container > .text-b3 {
   margin-bottom: var(--sp-ultra-tight)
 }
 
diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index 91be164f..f97c942c 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -14,10 +14,11 @@ import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls'
 
 import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
 import SettingTile from '../../molecules/setting-tile/SettingTile';
-import ProfileEditor from '../../molecules/profile-editor/ProfileEditor';
 import ImportE2ERoomKeys from '../../molecules/import-e2e-room-keys/ImportE2ERoomKeys';
 
-import GenIC from '../../../../public/res/ic/outlined/settings.svg';
+import ProfileEditor from '../profile-editor/ProfileEditor';
+
+import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 import SunIC from '../../../../public/res/ic/outlined/sun.svg';
 import LockIC from '../../../../public/res/ic/outlined/lock.svg';
 import InfoIC from '../../../../public/res/ic/outlined/info.svg';
@@ -120,7 +121,7 @@ function AboutSection() {
 function Settings({ isOpen, onRequestClose }) {
   const settingSections = [{
     name: 'General',
-    iconSrc: GenIC,
+    iconSrc: SettingsIC,
     render() {
       return <GeneralSection />;
     },

From 09f7225eb717a3547a07e506ea795f3bbb0a96c9 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Mon, 13 Sep 2021 12:27:55 +0530
Subject: [PATCH 5/6] Added progress spinner in ImageUplaod (#91)

---
 public/res/svg/avatar-clip.svg                |  3 -
 .../molecules/image-upload/ImageUpload.jsx    | 75 ++++++++++++-------
 .../molecules/image-upload/ImageUpload.scss   | 60 +++++++++++----
 .../profile-editor/ProfileEditor.jsx          | 23 ++++--
 .../profile-editor/ProfileEditor.scss         |  6 +-
 src/app/organisms/settings/Settings.jsx       |  2 +-
 6 files changed, 115 insertions(+), 54 deletions(-)
 delete mode 100644 public/res/svg/avatar-clip.svg

diff --git a/public/res/svg/avatar-clip.svg b/public/res/svg/avatar-clip.svg
deleted file mode 100644
index ffaa1a2f..00000000
--- a/public/res/svg/avatar-clip.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58173 0 0 3.58173 0 8V72C0 76.4183 3.58173 80 8 80H72C76.4183 80 80 76.4183 80 72V26H62C57.5817 26 54 22.4183 54 18V0H8Z" fill="#E24444"/>
-</svg>
diff --git a/src/app/molecules/image-upload/ImageUpload.jsx b/src/app/molecules/image-upload/ImageUpload.jsx
index 992d5bca..da794892 100644
--- a/src/app/molecules/image-upload/ImageUpload.jsx
+++ b/src/app/molecules/image-upload/ImageUpload.jsx
@@ -1,48 +1,73 @@
-import React, { useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
+import './ImageUpload.scss';
 
 import initMatrix from '../../../client/initMatrix';
 
-import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
+import Text from '../../atoms/text/Text';
 import Avatar from '../../atoms/avatar/Avatar';
-
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import './ImageUpload.scss';
+import Spinner from '../../atoms/spinner/Spinner';
 
 function ImageUpload({
-  text, bgColor, imageSrc, onUpload,
+  text, bgColor, imageSrc, onUpload, onRequestRemove,
 }) {
+  const [uploadPromise, setUploadPromise] = useState(null);
   const uploadImageRef = useRef(null);
 
-  // Uploads image and passes resulting URI to onUpload function provided in component props.
-  function uploadImage(e) {
+  async function uploadImage(e) {
     const file = e.target.files.item(0);
-    if (file !== null) { // TODO Add upload progress spinner
-      initMatrix.matrixClient.uploadContent(file, { onlyContentUri: false }).then((res) => {
-        if (res.content_uri !== null) {
-          onUpload({ content_uri: res.content_uri });
-        }
-      }, (err) => {
-        console.log(err); // TODO Replace with alert banner.
-      });
+    if (file === null) return;
+    try {
+      const uPromise = initMatrix.matrixClient.uploadContent(file, { onlyContentUri: false });
+      setUploadPromise(uPromise);
+
+      const res = await uPromise;
+      if (typeof res?.content_uri === 'string') onUpload(res.content_uri);
+      setUploadPromise(null);
+    } catch {
+      setUploadPromise(null);
     }
+    uploadImageRef.current.value = null;
+  }
+
+  function cancelUpload() {
+    initMatrix.matrixClient.cancelUpload(uploadPromise);
+    setUploadPromise(null);
+    uploadImageRef.current.value = null;
   }
 
   return (
-    <button type="button" className="img-upload" onClick={() => { uploadImageRef.current.click(); }}>
-      <div className="img-upload__mask">
+    <div className="img-upload__wrapper">
+      <button
+        type="button"
+        className="img-upload"
+        onClick={() => {
+          if (uploadPromise !== null) return;
+          uploadImageRef.current.click();
+        }}
+      >
         <Avatar
           imageSrc={imageSrc}
           text={text.slice(0, 1)}
           bgColor={bgColor}
           size="large"
         />
-      </div>
-      <div className="img-upload__icon">
-        <RawIcon size="small" src={SettingsIC} />
-      </div>
+        <div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
+          {uploadPromise === null && <Text variant="b3">Upload</Text>}
+          {uploadPromise !== null && <Spinner size="small" />}
+        </div>
+      </button>
+      { (typeof imageSrc === 'string' || uploadPromise !== null) && (
+        <button
+          className="img-upload__btn-cancel"
+          type="button"
+          onClick={uploadPromise === null ? onRequestRemove : cancelUpload}
+        >
+          <Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text>
+        </button>
+      )}
       <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
-    </button>
+    </div>
   );
 }
 
@@ -50,14 +75,14 @@ ImageUpload.defaultProps = {
   text: null,
   bgColor: 'transparent',
   imageSrc: null,
-  onUpload: null,
 };
 
 ImageUpload.propTypes = {
   text: PropTypes.string,
   bgColor: PropTypes.string,
   imageSrc: PropTypes.string,
-  onUpload: PropTypes.func,
+  onUpload: PropTypes.func.isRequired,
+  onRequestRemove: PropTypes.func.isRequired,
 };
 
 export default ImageUpload;
diff --git a/src/app/molecules/image-upload/ImageUpload.scss b/src/app/molecules/image-upload/ImageUpload.scss
index dbf2bace..9e0f312f 100644
--- a/src/app/molecules/image-upload/ImageUpload.scss
+++ b/src/app/molecules/image-upload/ImageUpload.scss
@@ -1,20 +1,50 @@
+.img-upload__wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
 .img-upload {
 	display: flex;
-	flex-direction: row-reverse;
-	width: 80px;
-	height: 80px;
-}
-
-.img-upload:hover {
 	cursor: pointer;
-}
+	position: relative;
 
-.img-upload__mask {
-	mask: url('../../../../public/res/svg/avatar-clip.svg');
-	-webkit-mask: url('../../../../public/res/svg/avatar-clip.svg');
-}
+	&__process {
+		width: 100%;
+		height: 100%;
+		border-radius: var(--bo-radius);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba(0, 0, 0, .6);
+		
+		position: absolute;
+		left: 0;
+		right: 0;
+		z-index: 1;
+		& .text {
+			text-transform: uppercase;
+			font-weight: 600;
+			color: white;
+		}
+		&--stopped {
+			display: none;
+		}
+		& .donut-spinner {
+			border-color: rgb(255, 255, 255, .3);
+    	border-left-color: white;
+		}
+	}
+	&:hover .img-upload__process--stopped {
+		display: flex;
+	}
 
-.img-upload__icon {
-  z-index: 1;
-  position: absolute;
-}
\ No newline at end of file
+
+	&__btn-cancel {
+		margin-top: var(--sp-extra-tight);
+		cursor: pointer;
+		& .text {
+			color: var(--tc-danger-normal)
+		}
+	}
+}
diff --git a/src/app/organisms/profile-editor/ProfileEditor.jsx b/src/app/organisms/profile-editor/ProfileEditor.jsx
index 61cd896d..9dd308a4 100644
--- a/src/app/organisms/profile-editor/ProfileEditor.jsx
+++ b/src/app/organisms/profile-editor/ProfileEditor.jsx
@@ -18,15 +18,22 @@ function ProfileEditor({
   const mx = initMatrix.matrixClient;
   const displayNameRef = useRef(null);
   const bgColor = colorMXID(userId);
-  const [imageSrc, updateImgSrc] = useState(mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl));
+  const [avatarSrc, setAvatarSrc] = useState(mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl, 80, 80, 'crop') || null);
   const [disabled, setDisabled] = useState(true);
 
   let username = mx.getUser(mx.getUserId()).displayName;
 
   // Sets avatar URL and updates the avatar component in profile editor to reflect new upload
-  function handleUpload(e) {
-    mx.setAvatarUrl(e.content_uri);
-    updateImgSrc(mx.mxcUrlToHttp(e.content_uri));
+  function handleAvatarUpload(url) {
+    if (url === null) {
+      if (confirm('Are you sure you want to remove avatar?')) {
+        mx.setAvatarUrl('');
+        setAvatarSrc(null);
+      }
+      return;
+    }
+    mx.setAvatarUrl(url);
+    setAvatarSrc(mx.mxcUrlToHttp(url, 80, 80, 'crop'));
   }
 
   function saveDisplayName() {
@@ -44,7 +51,13 @@ function ProfileEditor({
 
   return (
     <form className="profile-editor">
-      <ImageUpload text={username} bgColor={bgColor} imageSrc={imageSrc} onUpload={handleUpload} />
+      <ImageUpload
+        text={username}
+        bgColor={bgColor}
+        imageSrc={avatarSrc}
+        onUpload={handleAvatarUpload}
+        onRequestRemove={() => handleAvatarUpload(null)}
+      />
       <div className="profile-editor__input-container">
         <Text variant="b3">
           Display name of&nbsp;
diff --git a/src/app/organisms/profile-editor/ProfileEditor.scss b/src/app/organisms/profile-editor/ProfileEditor.scss
index 015b920f..882f0792 100644
--- a/src/app/organisms/profile-editor/ProfileEditor.scss
+++ b/src/app/organisms/profile-editor/ProfileEditor.scss
@@ -3,14 +3,10 @@
   align-items: end;
 }
 
-.img-upload {
-  margin-right: var(--sp-normal)
-}
-
 .profile-editor__input-container {
   display: flex;
   flex-direction: column;
-  margin-right: var(--sp-normal);
+  margin: 0 var(--sp-normal);
   width: 100%;
   max-width: 400px;
 }
diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index f97c942c..b20364c6 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -30,7 +30,7 @@ function GeneralSection() {
   return (
     <div className="settings-content">
       <SettingTile
-        title="Profile"
+        title=""
         content={(
           <ProfileEditor userId={initMatrix.matrixClient.getUserId()} />
         )}

From 872e2f9753d0ef9a2fd31636b7708ed6b1a4683c Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Mon, 13 Sep 2021 13:33:24 +0530
Subject: [PATCH 6/6] Added cancel button and support for empty display name
 (#91)

---
 .../profile-editor/ProfileEditor.jsx          | 35 ++++++++++++-------
 .../profile-editor/ProfileEditor.scss         | 34 +++++++++++-------
 2 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/src/app/organisms/profile-editor/ProfileEditor.jsx b/src/app/organisms/profile-editor/ProfileEditor.jsx
index 9dd308a4..a124acaa 100644
--- a/src/app/organisms/profile-editor/ProfileEditor.jsx
+++ b/src/app/organisms/profile-editor/ProfileEditor.jsx
@@ -37,20 +37,27 @@ function ProfileEditor({
   }
 
   function saveDisplayName() {
-    if (displayNameRef.current.value !== null && displayNameRef.current.value !== '') {
-      mx.setDisplayName(displayNameRef.current.value);
-      username = displayNameRef.current.value;
+    const newDisplayName = displayNameRef.current.value;
+    if (newDisplayName !== null && newDisplayName !== username) {
+      mx.setDisplayName(newDisplayName);
+      username = newDisplayName;
       setDisabled(true);
     }
   }
 
-  // Enables/disables button depending on if the typed displayname is different than the current.
   function onDisplayNameInputChange() {
-    setDisabled((username === displayNameRef.current.value) || displayNameRef.current.value === '' || displayNameRef.current.value == null);
+    setDisabled(username === displayNameRef.current.value || displayNameRef.current.value == null);
+  }
+  function cancelDisplayNameChanges() {
+    displayNameRef.current.value = username;
+    onDisplayNameInputChange();
   }
 
   return (
-    <form className="profile-editor">
+    <form
+      className="profile-editor"
+      onSubmit={(e) => { e.preventDefault(); saveDisplayName(); }}
+    >
       <ImageUpload
         text={username}
         bgColor={bgColor}
@@ -58,14 +65,16 @@ function ProfileEditor({
         onUpload={handleAvatarUpload}
         onRequestRemove={() => handleAvatarUpload(null)}
       />
-      <div className="profile-editor__input-container">
-        <Text variant="b3">
-          Display name of&nbsp;
-          {mx.getUserId()}
-        </Text>
-        <Input id="profile-editor__input" onChange={onDisplayNameInputChange} placeholder={mx.getUser(mx.getUserId()).displayName} forwardRef={displayNameRef} />
+      <div className="profile-editor__input-wrapper">
+        <Input
+          label={`Display name of ${mx.getUserId()}`}
+          onChange={onDisplayNameInputChange}
+          value={mx.getUser(mx.getUserId()).displayName}
+          forwardRef={displayNameRef}
+        />
+        <Button variant="primary" type="submit" disabled={disabled}>Save</Button>
+        <Button onClick={cancelDisplayNameChanges}>Cancel</Button>
       </div>
-      <Button variant="primary" onClick={saveDisplayName} disabled={disabled}>Save</Button>
     </form>
   );
 }
diff --git a/src/app/organisms/profile-editor/ProfileEditor.scss b/src/app/organisms/profile-editor/ProfileEditor.scss
index 882f0792..10d62c75 100644
--- a/src/app/organisms/profile-editor/ProfileEditor.scss
+++ b/src/app/organisms/profile-editor/ProfileEditor.scss
@@ -1,20 +1,30 @@
 .profile-editor {
   display: flex;
-  align-items: end;
+  align-items: flex-start;
 }
 
-.profile-editor__input-container {
+.profile-editor__input-wrapper {
+  flex: 1;
+  min-width: 0;
+  margin-top: 10px;
+  
   display: flex;
-  flex-direction: column;
-  margin: 0 var(--sp-normal);
-  width: 100%;
-  max-width: 400px;
-}
+  align-items: flex-end;
+  flex-wrap: wrap;
 
-.profile-editor__input-container > .text-b3 {
-  margin-bottom: var(--sp-ultra-tight)
-}
+  & > .input-container  {
+    flex: 1;
+  }
+  & > button {
+    height: 46px;
+    margin-top: var(--sp-normal);
+  }
 
-.profile-editor > .btn-primary {
-  height: 46px;
+  & > * {
+    margin-left: var(--sp-normal);
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right: var(--sp-normal);
+    }
+  }
 }
\ No newline at end of file