[dashboard] allow editing user information

components/dashboard/src/Menu.tsx

@@ -342,9 +342,9 @@ export default function Menu() {
                                         >
                                             <path
                                                 fill="currentColor"
-                                                fill-rule="evenodd"
+                                                fillRule="evenodd"
                                                 d="M7 0a1 1 0 011 1v5h5a1 1 0 110 2H8v5a1 1 0 11-2 0V8H1a1 1 0 010-2h5V1a1 1 0 011-1z"
-                                                clip-rule="evenodd"
+                                                clipRule="evenodd"
                                             />
                                         </svg>
                                     </div>
@@ -356,8 +356,8 @@ export default function Menu() {
                         <div className="flex h-full pl-0 pr-1 py-1.5 text-gray-50">
                             <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
-                                    fill-rule="evenodd"
-                                    clip-rule="evenodd"
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
                                     d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z"
                                     fill="#78716C"
                                 />
@@ -385,8 +385,8 @@ export default function Menu() {
                         <div className="flex pl-0 pr-1 py-1.5">
                             <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
-                                    fill-rule="evenodd"
-                                    clip-rule="evenodd"
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
                                     d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 1 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0Z"
                                     fill="#78716C"
                                 />

components/dashboard/src/components/Alert.tsx

@@ -79,7 +79,9 @@ export default function Alert(props: AlertProps) {
             {showIcon && <span className={`mt-1 mr-4 h-4 w-4 ${info.iconColor}`}>{props.icon ?? info.icon}</span>}
             <span className="flex-1 text-left">{props.children}</span>
             {props.closable && (
-                <XSvg onClick={() => setVisible(false)} className="mt-1 ml-4 w-3 h-3 cursor-pointer"></XSvg>
+                <span className={`mt-1 ml-4 h-4 w-4`}>
+                    <XSvg onClick={() => setVisible(false)} className="w-3 h-4 cursor-pointer"></XSvg>
+                </span>
             )}
         </div>
     );

components/dashboard/src/components/ConfirmationModal.tsx

@@ -19,27 +19,31 @@ export default function ConfirmationModal(props: {
     onClose: () => void;
     onConfirm: () => void;
 }) {
-    const child: React.ReactChild[] = [<p className="mt-3 mb-3 text-base text-gray-500">{props.areYouSureText}</p>];
+    const children: React.ReactChild[] = [
+        <p key="areYouSure" className="mt-3 mb-3 text-base text-gray-500">
+            {props.areYouSureText}
+        </p>,
+    ];
 
     if (props.warningText) {
-        child.unshift(<AlertBox>{props.warningText}</AlertBox>);
+        children.unshift(<AlertBox>{props.warningText}</AlertBox>);
     }
 
     const isEntity = (x: any): x is Entity => typeof x === "object" && "name" in x;
     if (props.children) {
         if (isEntity(props.children)) {
-            child.push(
-                <div className="w-full p-4 mb-2 bg-gray-100 dark:bg-gray-700 rounded-xl group">
+            children.push(
+                <div key="entity" className="w-full p-4 mb-2 bg-gray-100 dark:bg-gray-700 rounded-xl group">
                     <p className="text-base text-gray-800 dark:text-gray-100 font-semibold">{props.children.name}</p>
                     {props.children.description && (
                         <p className="text-gray-500 truncate">{props.children.description}</p>
                     )}
                 </div>,
             );
         } else if (Array.isArray(props.children)) {
-            child.push(...props.children);
+            children.push(...props.children);
         } else {
-            child.push(props.children);
+            children.push(props.children);
         }
     }
     const cancelButtonRef = useRef<HTMLButtonElement>(null);
@@ -76,7 +80,7 @@ export default function ConfirmationModal(props: {
                 return true;
             }}
         >
-            {child}
+            {children}
         </Modal>
     );
 }

components/dashboard/src/settings/Account.tsx

@@ -11,17 +11,31 @@ import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import getSettingsMenu from "./settings-menu";
 import ConfirmationModal from "../components/ConfirmationModal";
-import CodeText from "../components/CodeText";
 import { PaymentContext } from "../payment-context";
+import ProfileInformation, { ProfileState } from "./ProfileInformation";
 
 export default function Account() {
-    const { user } = useContext(UserContext);
+    const { user, setUser } = useContext(UserContext);
     const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
-
     const [modal, setModal] = useState(false);
+    const primaryEmail = User.getPrimaryEmail(user!) || "";
     const [typedEmail, setTypedEmail] = useState("");
+    const original = ProfileState.getProfileState(user!);
+    const [profileState, setProfileState] = useState(original);
+    const [errorMessage, setErrorMessage] = useState("");
+    const [updated, setUpdated] = useState(false);
 
-    const primaryEmail = User.getPrimaryEmail(user!) || "---";
+    const saveProfileState = () => {
+        const error = ProfileState.validate(profileState);
+        setErrorMessage(error);
+        if (error) {
+            return;
+        }
+        const updatedUser = ProfileState.setProfileState(user!, profileState);
+        setUser(updatedUser);
+        getGitpodService().server.updateLoggedInUser(updatedUser);
+        setUpdated(true);
+    };
 
     const deleteAccount = async () => {
         await getGitpodService().server.deleteAccount();
@@ -61,30 +75,28 @@ export default function Account() {
                 subtitle="Manage account and Git configuration."
             >
                 <h3>Profile</h3>
-                <p className="text-base text-gray-500 pb-4 max-w-2xl">
-                    The following information will be used to set up Git configuration. You can override Git author name
-                    and email per project by using the default environment variables{" "}
-                    <CodeText>GIT_AUTHOR_NAME</CodeText>, <CodeText>GIT_COMMITTER_NAME</CodeText>,{" "}
-                    <CodeText>GIT_AUTHOR_EMAIL</CodeText> and <CodeText>GIT_COMMITTER_EMAIL</CodeText>.
-                </p>
-                <div className="flex flex-col lg:flex-row">
-                    <div>
-                        <div className="mt-4">
-                            <h4>Name</h4>
-                            <input type="text" disabled={true} value={user?.fullName || user?.name} />
-                        </div>
-                        <div className="mt-4">
-                            <h4>Email</h4>
-                            <input type="text" disabled={true} value={primaryEmail} />
-                        </div>
-                    </div>
-                    <div className="lg:pl-14">
-                        <div className="mt-4">
-                            <h4>Avatar</h4>
-                            <img className="rounded-full w-24 h-24" src={user!.avatarUrl} alt={user!.name} />
+                <form
+                    onSubmit={(e) => {
+                        saveProfileState();
+                        e.preventDefault();
+                    }}
+                >
+                    <ProfileInformation
+                        profileState={profileState}
+                        setProfileState={(state) => {
+                            setProfileState(state);
+                            setUpdated(false);
+                        }}
+                        errorMessage={errorMessage}
+                        updated={updated}
+                    >
+                        <div className="flex flex-row mt-8">
+                            <button className="primary" onClick={saveProfileState}>
+                                Update Profile
+                            </button>
                         </div>
-                    </div>
-                </div>
+                    </ProfileInformation>
+                </form>
                 <h3 className="mt-12">Delete Account</h3>
                 <p className="text-base text-gray-500 pb-4">
                     This action will remove all the data associated with your account in Gitpod.

components/dashboard/src/settings/ProfileInformation.tsx

@@ -0,0 +1,218 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { User } from "@gitpod/gitpod-protocol";
+import { hoursBefore, isDateSmaller } from "@gitpod/gitpod-protocol/lib/util/timeutil";
+import React, { useContext, useState } from "react";
+import Alert from "../components/Alert";
+import CodeText from "../components/CodeText";
+import Modal from "../components/Modal";
+import { getGitpodService } from "../service/service";
+import { UserContext } from "../user-context";
+import { isGitpodIo } from "../utils";
+
+export namespace ProfileState {
+    export interface ProfileState {
+        name: string;
+        email: string;
+        company?: string;
+        avatarURL?: string;
+    }
+
+    export function getProfileState(user: User): ProfileState {
+        return {
+            name: User.getName(user!) || "",
+            email: User.getPrimaryEmail(user!) || "",
+            company: user?.additionalData?.profile?.companyName,
+            avatarURL: user?.avatarUrl,
+        };
+    }
+
+    export function setProfileState(user: User, profileState: ProfileState): User {
+        user.fullName = profileState.name;
+        user.avatarUrl = profileState.avatarURL;
+
+        if (!user.additionalData) {
+            user.additionalData = {};
+        }
+        if (!user.additionalData.profile) {
+            user.additionalData.profile = {};
+        }
+        user.additionalData.profile.emailAddress = profileState.email;
+        user.additionalData.profile.companyName = profileState.company;
+        user.additionalData.profile.lastUpdatedDetailsNudge = new Date().toISOString();
+
+        return user;
+    }
+
+    export function hasChanges(before: ProfileState, after: ProfileState) {
+        return (
+            before.name !== after.name ||
+            before.email !== after.email ||
+            before.company !== after.company ||
+            before.avatarURL !== after.avatarURL
+        );
+    }
+
+    function shouldNudgeForUpdate(user: User): boolean {
+        if (!isGitpodIo()) {
+            return false;
+        }
+        if (!user.additionalData?.profile) {
+            // never updated profile information and account is older than 24 hours (i.e. ask on second day).
+            return !isDateSmaller(hoursBefore(new Date().toISOString(), 24), user.creationDate);
+        }
+        // if the profile wasn't updated for 12 months ask again.
+        return !(
+            !!user.additionalData.profile.lastUpdatedDetailsNudge &&
+            isDateSmaller(
+                hoursBefore(new Date().toISOString(), 24 * 365),
+                user.additionalData.profile.lastUpdatedDetailsNudge,
+            )
+        );
+    }
+
+    /**
+     * @param state
+     * @returns error message or empty string when valid
+     */
+    export function validate(state: ProfileState): string {
+        if (state.name.trim() === "") {
+            return "Name must not be empty.";
+        }
+        if (state.email.trim() === "") {
+            return "Email must not be empty.";
+        }
+        if (
+            !/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                state.email.trim(),
+            )
+        ) {
+            return "Please enter a valid email.";
+        }
+        return "";
+    }
+
+    export function NudgeForProfileUpdateModal() {
+        const { user, setUser } = useContext(UserContext);
+        const original = ProfileState.getProfileState(user!);
+        const [profileState, setProfileState] = useState(original);
+        const [errorMessage, setErrorMessage] = useState("");
+        const [visible, setVisible] = useState(shouldNudgeForUpdate(user!));
+
+        const saveProfileState = () => {
+            const error = ProfileState.validate(profileState);
+            setErrorMessage(error);
+            if (error) {
+                return;
+            }
+            const updatedUser = ProfileState.setProfileState(user!, profileState);
+            setUser(updatedUser);
+            getGitpodService().server.updateLoggedInUser(updatedUser);
+            setVisible(shouldNudgeForUpdate(updatedUser!));
+        };
+
+        const cancelProfileUpdate = () => {
+            setProfileState(original);
+            saveProfileState();
+        };
+
+        return (
+            <Modal
+                title="Update Profile Information"
+                visible={visible}
+                onClose={cancelProfileUpdate}
+                closeable={true}
+                className="_max-w-xl"
+                buttons={
+                    <div>
+                        <button className="secondary" onClick={cancelProfileUpdate}>
+                            Dismiss
+                        </button>
+                        <button className="ml-2" onClick={saveProfileState}>
+                            Update Profile
+                        </button>
+                    </div>
+                }
+            >
+                <ProfileInformation
+                    profileState={profileState}
+                    errorMessage={errorMessage}
+                    updated={false}
+                    setProfileState={setProfileState}
+                />
+            </Modal>
+        );
+    }
+}
+
+export default function ProfileInformation(props: {
+    profileState: ProfileState.ProfileState;
+    setProfileState: (newState: ProfileState.ProfileState) => void;
+    errorMessage: string;
+    updated: boolean;
+    children?: React.ReactChild[] | React.ReactChild;
+}) {
+    return (
+        <div>
+            <p className="text-base text-gray-500 pb-4 max-w-xl">
+                The following information will be used to set up Git configuration. You can override Git author name and
+                email per project by using the default environment variables <CodeText>GIT_AUTHOR_NAME</CodeText>,{" "}
+                <CodeText>GIT_COMMITTER_NAME</CodeText>, <CodeText>GIT_AUTHOR_EMAIL</CodeText> and{" "}
+                <CodeText>GIT_COMMITTER_EMAIL</CodeText>.
+            </p>
+            {props.errorMessage.length > 0 && (
+                <Alert type="error" closable={true} className="mb-2 max-w-xl rounded-md">
+                    {props.errorMessage}
+                </Alert>
+            )}
+            {props.updated && (
+                <Alert type="message" closable={true} className="mb-2 max-w-xl rounded-md">
+                    Profile information has been updated.
+                </Alert>
+            )}
+            <div className="flex flex-col lg:flex-row">
+                <div>
+                    <div className="mt-4">
+                        <h4>Name</h4>
+                        <input
+                            type="text"
+                            value={props.profileState.name}
+                            onChange={(e) => props.setProfileState({ ...props.profileState, name: e.target.value })}
+                        />
+                    </div>
+                    <div className="mt-4">
+                        <h4>Email</h4>
+                        <input
+                            type="text"
+                            value={props.profileState.email}
+                            onChange={(e) => props.setProfileState({ ...props.profileState, email: e.target.value })}
+                        />
+                    </div>
+                    <div className="mt-4">
+                        <h4>Company</h4>
+                        <input
+                            type="text"
+                            value={props.profileState.company}
+                            onChange={(e) => props.setProfileState({ ...props.profileState, company: e.target.value })}
+                        />
+                    </div>
+                </div>
+                <div className="lg:pl-14">
+                    <div className="mt-4">
+                        <h4>Avatar</h4>
+                        <img
+                            className="rounded-full w-24 h-24"
+                            src={props.profileState.avatarURL}
+                            alt={props.profileState.name}
+                        />
+                    </div>
+                </div>
+            </div>
+            {props.children || null}
+        </div>
+    );
+}