Added cancel button and support for empty display name (#91)

diff --git a/src/app/organisms/profile-editor/ProfileEditor.jsx b/src/app/organisms/profile-editor/ProfileEditor.jsx
index 9dd308a4bf0b4793f45b191bb0b75a4796580898..a124acaa955b3bd8882dcb2502db8b22669a54bd 100644 (file)
--- 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 882f0792649e540c2c2fa65711554130688cee88..10d62c75bdf3530c9512a782204f4b751e934a93 100644 (file)
--- 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