From 33dcee35bb067c8542ff56d5c72315d0ece60e63 Mon Sep 17 00:00:00 2001
From: filiptronicek <filip@gitpod.io>
Date: Thu, 15 Jun 2023 14:55:10 +0000
Subject: [PATCH 1/2] Show User ID on Account page

---
 components/dashboard/src/user-settings/Account.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/components/dashboard/src/user-settings/Account.tsx b/components/dashboard/src/user-settings/Account.tsx
index fb6262755f8a6c..e2ef1ab46affea 100644
--- a/components/dashboard/src/user-settings/Account.tsx
+++ b/components/dashboard/src/user-settings/Account.tsx
@@ -16,6 +16,7 @@ import Alert from "../components/Alert";
 import { TextInputField } from "../components/forms/TextInputField";
 import isEmail from "validator/lib/isEmail";
 import { useToast } from "../components/toasts/Toasts";
+import { InputWithCopy } from "../components/InputWithCopy";
 
 export default function Account() {
     const { user, setUser } = useContext(UserContext);
@@ -103,6 +104,7 @@ export default function Account() {
                         }}
                         errorMessage={errorMessage}
                         emailIsReadonly={!canUpdateEmail}
+                        user={user}
                     >
                         <div className="flex flex-row mt-8">
                             <Button htmlType="submit">Update Profile</Button>
@@ -126,6 +128,7 @@ function ProfileInformation(props: {
     setProfileState: (newState: User.Profile) => void;
     errorMessage: string;
     emailIsReadonly?: boolean;
+    user?: User;
     children?: React.ReactChild[] | React.ReactChild;
 }) {
     return (
@@ -164,6 +167,12 @@ function ProfileInformation(props: {
                             src={props.profileState.avatarURL}
                             alt={props.profileState.name}
                         />
+                        {props.user && (
+                            <p className={"text-sm text-gray-500 dark:text-gray-500"}>
+                                User ID:
+                                <InputWithCopy className="max-w-md" value={props.user.id} tip="Copy Token" />
+                            </p>
+                        )}
                     </div>
                 </div>
             </div>

From 83a552709e00a94f4d1d1abb43deb6c7690b0dac Mon Sep 17 00:00:00 2001
From: filiptronicek <filip@gitpod.io>
Date: Thu, 15 Jun 2023 15:52:45 +0000
Subject: [PATCH 2/2] Move under other inputs

---
 .../dashboard/src/user-settings/Account.tsx    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/dashboard/src/user-settings/Account.tsx b/components/dashboard/src/user-settings/Account.tsx
index e2ef1ab46affea..60813ff668add6 100644
--- a/components/dashboard/src/user-settings/Account.tsx
+++ b/components/dashboard/src/user-settings/Account.tsx
@@ -144,7 +144,7 @@ function ProfileInformation(props: {
                 </Alert>
             )}
             <div className="flex flex-col lg:flex-row">
-                <div>
+                <fieldset>
                     <TextInputField
                         label="Name"
                         value={props.profileState.name}
@@ -158,7 +158,15 @@ function ProfileInformation(props: {
                             props.setProfileState({ ...props.profileState, email: val });
                         }}
                     />
-                </div>
+                    {props.user && (
+                        <div className="flex flex-col space-y-2 mt-4">
+                            <label className={"text-md font-semibold dark:text-gray-400 text-gray-600"}>User ID</label>
+                            <p className={"text-sm text-gray-500 dark:text-gray-500"}>
+                                <InputWithCopy className="max-w-md w-32" value={props.user.id} tip="Copy Token" />
+                            </p>
+                        </div>
+                    )}
+                </fieldset>
                 <div className="lg:pl-14">
                     <div className="mt-4">
                         <Subheading>Avatar</Subheading>
@@ -167,12 +175,6 @@ function ProfileInformation(props: {
                             src={props.profileState.avatarURL}
                             alt={props.profileState.name}
                         />
-                        {props.user && (
-                            <p className={"text-sm text-gray-500 dark:text-gray-500"}>
-                                User ID:
-                                <InputWithCopy className="max-w-md" value={props.user.id} tip="Copy Token" />
-                            </p>
-                        )}
                     </div>
                 </div>
             </div>