|
| 1 | +/** |
| 2 | + * Copyright (c) 2021 Gitpod GmbH. All rights reserved. |
| 3 | + * Licensed under the GNU Affero General Public License (AGPL). |
| 4 | + * See License-AGPL.txt in the project root for license information. |
| 5 | + */ |
| 6 | + |
| 7 | +import { User } from "@gitpod/gitpod-protocol"; |
| 8 | +import { hoursBefore, isDateSmaller } from "@gitpod/gitpod-protocol/lib/util/timeutil"; |
| 9 | +import React, { useContext, useState } from "react"; |
| 10 | +import CodeText from "../components/CodeText"; |
| 11 | +import Modal from "../components/Modal"; |
| 12 | +import { getGitpodService } from "../service/service"; |
| 13 | +import { UserContext } from "../user-context"; |
| 14 | + |
| 15 | +export namespace ProfileState { |
| 16 | + export interface ProfileState { |
| 17 | + name: string; |
| 18 | + email: string; |
| 19 | + company?: string; |
| 20 | + avatarURL?: string; |
| 21 | + } |
| 22 | + |
| 23 | + export function getProfileState(user: User): ProfileState { |
| 24 | + return { |
| 25 | + name: User.getName(user!) || "", |
| 26 | + email: User.getPrimaryEmail(user!) || "", |
| 27 | + company: user?.additionalData?.companyName, |
| 28 | + avatarURL: user?.avatarUrl, |
| 29 | + }; |
| 30 | + } |
| 31 | + |
| 32 | + export function setProfileState(user: User, profileState: ProfileState): User { |
| 33 | + user.fullName = profileState.name; |
| 34 | + user.avatarUrl = profileState.avatarURL; |
| 35 | + |
| 36 | + if (!user.additionalData) { |
| 37 | + user.additionalData = {}; |
| 38 | + } |
| 39 | + user.additionalData.emailAddress = profileState.email; |
| 40 | + user.additionalData.companyName = profileState.company; |
| 41 | + user.additionalData.lastUpdatedDetailsNudge = new Date().toISOString(); |
| 42 | + |
| 43 | + return user; |
| 44 | + } |
| 45 | + |
| 46 | + export function hasChanges(before: ProfileState, after: ProfileState) { |
| 47 | + return ( |
| 48 | + before.name !== after.name || |
| 49 | + before.email !== after.email || |
| 50 | + before.company !== after.company || |
| 51 | + before.avatarURL !== after.avatarURL |
| 52 | + ); |
| 53 | + } |
| 54 | + |
| 55 | + function shouldNudgeForUpdate(user: User): boolean { |
| 56 | + if (!user.additionalData) { |
| 57 | + // never updated profile information and account is older tha 24 hours (i.e. ask on second day). |
| 58 | + return !isDateSmaller(hoursBefore(new Date().toISOString(), 24), user.creationDate); |
| 59 | + } |
| 60 | + // if the profile wasn't updated for 12 months ask again. |
| 61 | + return !( |
| 62 | + !!user.additionalData.lastUpdatedDetailsNudge && |
| 63 | + isDateSmaller(hoursBefore(new Date().toISOString(), 24 * 365), user.additionalData.lastUpdatedDetailsNudge) |
| 64 | + ); |
| 65 | + } |
| 66 | + |
| 67 | + /** |
| 68 | + * @param state |
| 69 | + * @returns error message or empty string when valid |
| 70 | + */ |
| 71 | + export function validate(state: ProfileState): string { |
| 72 | + if (state.name.trim() === "") { |
| 73 | + return "Name must not be empty."; |
| 74 | + } |
| 75 | + if (state.email.trim() === "") { |
| 76 | + return "Email must not be empty."; |
| 77 | + } |
| 78 | + if ( |
| 79 | + !/^(([^<>()[\]\\.,;:\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( |
| 80 | + state.email.trim(), |
| 81 | + ) |
| 82 | + ) { |
| 83 | + return "Please enter a valid email."; |
| 84 | + } |
| 85 | + return ""; |
| 86 | + } |
| 87 | + |
| 88 | + export function NudgeForProfileUpdateModal() { |
| 89 | + const { user, setUser } = useContext(UserContext); |
| 90 | + const original = ProfileState.getProfileState(user!); |
| 91 | + const [profileState, setProfileState] = useState(original); |
| 92 | + const [errorMessage, setErrorMessage] = useState(""); |
| 93 | + const [visible, setVisible] = useState(shouldNudgeForUpdate(user!)); |
| 94 | + |
| 95 | + const saveProfileState = () => { |
| 96 | + const error = ProfileState.validate(profileState); |
| 97 | + setErrorMessage(error); |
| 98 | + if (error) { |
| 99 | + return; |
| 100 | + } |
| 101 | + const updatedUser = ProfileState.setProfileState(user!, profileState); |
| 102 | + setUser(updatedUser); |
| 103 | + getGitpodService().server.updateLoggedInUser(updatedUser); |
| 104 | + setVisible(shouldNudgeForUpdate(updatedUser!)); |
| 105 | + }; |
| 106 | + |
| 107 | + const cancelProfileUpdate = () => { |
| 108 | + setProfileState(original); |
| 109 | + saveProfileState(); |
| 110 | + }; |
| 111 | + |
| 112 | + return ( |
| 113 | + <Modal |
| 114 | + title="Update Profile Information" |
| 115 | + visible={visible} |
| 116 | + onClose={cancelProfileUpdate} |
| 117 | + closeable={true} |
| 118 | + className="_max-w-xl" |
| 119 | + buttons={ |
| 120 | + <div> |
| 121 | + <button className="secondary" onClick={cancelProfileUpdate}> |
| 122 | + Dismiss |
| 123 | + </button> |
| 124 | + <button onClick={saveProfileState}>Update Profile</button> |
| 125 | + </div> |
| 126 | + } |
| 127 | + > |
| 128 | + <ProfileInformation |
| 129 | + profileState={profileState} |
| 130 | + errorMessage={errorMessage} |
| 131 | + updated={false} |
| 132 | + setProfileState={setProfileState} |
| 133 | + /> |
| 134 | + </Modal> |
| 135 | + ); |
| 136 | + } |
| 137 | +} |
| 138 | + |
| 139 | +export default function ProfileInformation(props: { |
| 140 | + profileState: ProfileState.ProfileState; |
| 141 | + setProfileState: (newState: ProfileState.ProfileState) => void; |
| 142 | + errorMessage: string; |
| 143 | + updated: boolean; |
| 144 | + children?: React.ReactChild[] | React.ReactChild; |
| 145 | +}) { |
| 146 | + return ( |
| 147 | + <div> |
| 148 | + <p className="text-base text-gray-500 pb-4 max-w-2xl"> |
| 149 | + The following information will be used to set up Git configuration. You can override Git author name and |
| 150 | + email per project by using the default environment variables <CodeText>GIT_AUTHOR_NAME</CodeText>,{" "} |
| 151 | + <CodeText>GIT_COMMITTER_NAME</CodeText>, <CodeText>GIT_AUTHOR_EMAIL</CodeText> and{" "} |
| 152 | + <CodeText>GIT_COMMITTER_EMAIL</CodeText>. |
| 153 | + </p> |
| 154 | + {props.errorMessage.length > 0 ? ( |
| 155 | + <div className="dark:bg-gray-800 bg-gitpod-kumquat-light rounded-md p-3 text-gitpod-red text-sm mb-2"> |
| 156 | + {props.errorMessage} |
| 157 | + </div> |
| 158 | + ) : null} |
| 159 | + {props.updated ? ( |
| 160 | + <div className="dark:bg-gray-800 bg-gray-300 rounded-md p-3 text-gray-700 dark:text-gray-200 text-sm mb-2"> |
| 161 | + Profile information has been updated. |
| 162 | + </div> |
| 163 | + ) : null} |
| 164 | + <div className="flex flex-col lg:flex-row"> |
| 165 | + <div> |
| 166 | + <div className="mt-4"> |
| 167 | + <h4>Name</h4> |
| 168 | + <input |
| 169 | + type="text" |
| 170 | + value={props.profileState.name} |
| 171 | + onChange={(e) => props.setProfileState({ ...props.profileState, name: e.target.value })} |
| 172 | + /> |
| 173 | + </div> |
| 174 | + <div className="mt-4"> |
| 175 | + <h4>Email</h4> |
| 176 | + <input |
| 177 | + type="text" |
| 178 | + value={props.profileState.email} |
| 179 | + onChange={(e) => props.setProfileState({ ...props.profileState, email: e.target.value })} |
| 180 | + /> |
| 181 | + </div> |
| 182 | + <div className="mt-4"> |
| 183 | + <h4>Company</h4> |
| 184 | + <input |
| 185 | + type="text" |
| 186 | + value={props.profileState.company} |
| 187 | + onChange={(e) => props.setProfileState({ ...props.profileState, company: e.target.value })} |
| 188 | + /> |
| 189 | + </div> |
| 190 | + </div> |
| 191 | + <div className="lg:pl-14"> |
| 192 | + <div className="mt-4"> |
| 193 | + <h4>Avatar</h4> |
| 194 | + <img |
| 195 | + className="rounded-full w-24 h-24" |
| 196 | + src={props.profileState.avatarURL} |
| 197 | + alt={props.profileState.name} |
| 198 | + /> |
| 199 | + </div> |
| 200 | + </div> |
| 201 | + </div> |
| 202 | + {props.children || null} |
| 203 | + </div> |
| 204 | + ); |
| 205 | +} |
0 commit comments