[dashboard] account deletion #3551

svenefftinge · 2021-03-23T08:31:05Z

svenefftinge · 2021-03-23T09:39:55Z

components/dashboard/src/settings/Account.tsx

+
+    const deleteAccount = async () => {
+        await getGitpodService().server.deleteAccount();
+        //TODO we are sad to see you go view


@gtsiolis I made it so that users get redirected to the home page.
We should think about something that helps users reconsidering their decision.
That said probably something to postpone to after this milestone.

Current flow looks good but yes, we could improve this. Some visual feedback (see alert component) on the login page that the account has been deleted could be a starting point. I'd also vote for leaving this out of the scope of this milestone. Added #3554 as a follow-up issue.

svenefftinge · 2021-03-23T09:41:08Z

@AlexTugarev After I have deleted my account I can no longer login. Any idea why that is?

AlexTugarev · 2021-03-23T09:42:54Z

components/dashboard/src/settings/Account.tsx

+    const deleteAccount = async () => {
+        await getGitpodService().server.deleteAccount();
+        //TODO we are sad to see you go view
+        document.location.href = 'https://www.gitpod.io';


independent of the TODO, I think we should use the website URL from branding.

also this #3551 (comment)

We don't support "branding" anymore, just saas and self-hosted. In both cases users could land on our website.
But I changed this now to just go to logout.

AlexTugarev · 2021-03-23T09:46:13Z

@AlexTugarev After I have deleted my account I can no longer login. Any idea why that is?

yes. the session isn't destroyed on the API call.

we need to redirect to /api/logout?returnTo=ExitURL

AlexTugarev · 2021-03-23T10:09:14Z

Rendering the result as placeholder feels odd. The input field already contains email address, so why should I enter it there 🤷🏻‍♂️

svenefftinge · 2021-03-23T10:25:17Z

Rendering the result as placeholder feels odd. The input field already contains email address, so why should I enter it there 🤷🏻‍♂️

I think that the additional step is a commonly used guard to avoid accidental deletions.

AlexTugarev · 2021-03-23T10:31:17Z

@svenefftinge, I got that. The thing is, it looks like the input field is already pre-filled, as if the browser already autofilled it maybe.

Maybe it would help to prefix the placeholder text, e.g.
[ your email is alex@gitpod.io ]

AlexTugarev

works nicely!

svenefftinge · 2021-03-23T12:03:17Z

@svenefftinge, I got that. The thing is, it looks like the input field is already pre-filled, as if the browser already autofilled it maybe.

Maybe it would help to prefix the placeholder text, e.g.
[ your email is alex@gitpod.io ]

@gtsiolis WDYT?

gtsiolis · 2021-03-23T12:21:36Z

Looking at this now! 👀

gtsiolis

Looks good @svenefftinge! Left some minor comments. 🏓

gtsiolis · 2021-03-23T12:39:54Z

components/dashboard/src/settings/Account.tsx


    const close = () => setModal(false);
    return <div>
        <Modal visible={modal} onClose={close}>
            <h3 className="pb-2">Delete Account</h3>
            <div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-2">
-              <p className="mt-1 mb-2 text-base">Are you sure you want to delete your account? This action will remove all the data associated with your account in Gitpod and cannot be reversed.</p>
+                <p className="py-4 text-gray-900 text-base">You are about to permanently delete your account.</p>
+                <ol className="text-gray-400 text-sm list-outside list-decimal">


nitpick: Minor font color shift.

Suggested change

<ol className="text-gray-400 text-sm list-outside list-decimal">

<ol className="text-gray-500 text-sm list-outside list-decimal">

gtsiolis · 2021-03-23T12:43:20Z

components/dashboard/src/settings/Account.tsx


    const close = () => setModal(false);
    return <div>
        <Modal visible={modal} onClose={close}>
            <h3 className="pb-2">Delete Account</h3>
            <div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-2">
-              <p className="mt-1 mb-2 text-base">Are you sure you want to delete your account? This action will remove all the data associated with your account in Gitpod and cannot be reversed.</p>
+                <p className="py-4 text-gray-900 text-base">You are about to permanently delete your account.</p>
+                <ol className="text-gray-400 text-sm list-outside list-decimal">


praise: Always fun to see W3C specs going live as browser standards and being available only with a class name! Go list-outside! 🔮

gtsiolis · 2021-03-23T12:44:13Z

components/dashboard/src/settings/Account.tsx


    const close = () => setModal(false);
    return <div>
        <Modal visible={modal} onClose={close}>
            <h3 className="pb-2">Delete Account</h3>
            <div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-2">
-              <p className="mt-1 mb-2 text-base">Are you sure you want to delete your account? This action will remove all the data associated with your account in Gitpod and cannot be reversed.</p>
+                <p className="py-4 text-gray-900 text-base">You are about to permanently delete your account.</p>


Suggested change

<p className="py-4 text-gray-900 text-base">You are about to permanently delete your account.</p>

<p className="pb-4 text-gray-900 text-base">You are about to permanently delete your account.</p>

gtsiolis · 2021-03-23T12:44:20Z

components/dashboard/src/settings/Account.tsx

+        await getGitpodService().server.deleteAccount();
+        //TODO we are sad to see you go view
+        document.location.href = gitpodHostUrl.asApiLogout().toString();
+    };

    const close = () => setModal(false);
    return <div>
        <Modal visible={modal} onClose={close}>
            <h3 className="pb-2">Delete Account</h3>
            <div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-2">


nitpick: Minor padding changes.

Suggested change

<div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-2">

<div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-4">

gtsiolis · 2021-03-23T12:45:16Z

components/dashboard/src/settings/Account.tsx

            </div>
            <div className="flex justify-end mt-6">
-                <button className="border-red-900 bg-red-500 hover:bg-red-700" onClick={close}>Delete Account</button>
+                <button className="text-gray-900 border-gray-100 bg-gray-100 hover:bg-gray-200 hover:border-gray-400" onClick={close}>Cancel</button>
+                <button className="ml-2 border-red-900 bg-red-500 hover:bg-red-700 disabled:opacity-50" onClick={deleteAccount} disabled={typedEmail !== primaryEmail}>Delete Account</button>


question: Can we disable the hover changes when the button is disabled?

gtsiolis · 2021-03-23T12:47:10Z

components/dashboard/src/settings/Account.tsx

            </div>
            <div className="flex justify-end mt-6">
-                <button className="border-red-900 bg-red-500 hover:bg-red-700" onClick={close}>Delete Account</button>
+                <button className="text-gray-900 border-gray-100 bg-gray-100 hover:bg-gray-200 hover:border-gray-400" onClick={close}>Cancel</button>


suggestion: Let's remove the background here for the default state and add the font-medium class which is missing also in some other buttons, too.

Suggested change

<button className="text-gray-900 border-gray-100 bg-gray-100 hover:bg-gray-200 hover:border-gray-400" onClick={close}>Cancel</button>

<button className="text-gray-500 border-white bg-white hover:bg-gray-100 hover:border-gray-100 font-medium" onClick={close}>Cancel</button>

I'm adding text-base to the default button style

Oh, wait. Buttons use 14px text. The should be using font-medium, too.

Actually, button already had text-sm applied. Is that not right?

Yes, text-sm is corrent. Font weight (font-medium) is missing. I tried this in #3521 (comment) but didn't work. Maybe I've missed something. ❓

thought: Font weight is not picked up when using @apply in index.css. Maybe this is by design?

gtsiolis · 2021-03-23T12:49:57Z

components/dashboard/src/settings/Account.tsx

+                    <li className="ml-5">Your subscription will be cancelled. If you obtained a Gitpod subscription through the GitHub marketplace, you need to cancel your plan there.</li>
+                </ol>
+                <p className="pt-4 pb-2 text-gray-600 text-base font-bold">Type your email to confirm</p>
+              <input className="border-2 border-gray-400 w-full" type="text" placeholder={primaryEmail} onChange={e => setTypedEmail(e.target.value)}></input>


suggestion: Maybe the specs were not clear enough. This shouldn't have any placeholder. 😇 /cc @AlexTugarev

Suggested change

<input className="border-2 border-gray-400 w-full" type="text" placeholder={primaryEmail} onChange={e => setTypedEmail(e.target.value)}></input>

<input className="border-2 border-gray-400 w-full" type="text" onChange={e => setTypedEmail(e.target.value)}></input>

I'd like to copy the pattern. Others do that in a single line.

@AlexTugarev I've cross-linked this conversation to the follow up issue in #3554 (comment).

gtsiolis · 2021-03-23T12:55:59Z

components/dashboard/tailwind.config.js

@@ -65,6 +65,11 @@ module.exports = {
            'grayscale': 'grayscale(1)',
        },
    },
+    variants: {
+        extend: {
+            opacity: ['disabled'],


thought: Ideally we should not use opacity for disabled states but different colors, however, let's leave this is out of the scope of this milestone. FWIW, our design specs have not reached this level of maturity yet, it's still missing aspects like tabindex, active, focus state, etc for many elements. Food for thought! 🍔

gtsiolis · 2021-03-23T13:01:39Z

components/dashboard/src/settings/Account.tsx

            </div>
            <div className="flex justify-end mt-6">
-                <button className="border-red-900 bg-red-500 hover:bg-red-700" onClick={close}>Delete Account</button>
+                <button className="text-gray-900 border-gray-100 bg-gray-100 hover:bg-gray-200 hover:border-gray-400" onClick={close}>Cancel</button>
+                <button className="ml-2 border-red-900 bg-red-500 hover:bg-red-700 disabled:opacity-50" onClick={deleteAccount} disabled={typedEmail !== primaryEmail}>Delete Account</button>


suggestion: Also, missing the font-medium class.

Suggested change

<button className="ml-2 border-red-900 bg-red-500 hover:bg-red-700 disabled:opacity-50" onClick={deleteAccount} disabled={typedEmail !== primaryEmail}>Delete Account</button>

<button className="ml-2 border-red-900 bg-red-500 hover:bg-red-700 disabled:opacity-50 font-medium" onClick={deleteAccount} disabled={typedEmail !== primaryEmail}>Delete Account</button>

svenefftinge · 2021-03-23T15:40:16Z

/werft run

👍 started the job as gitpod-build-se-profile-page.8

svenefftinge force-pushed the se/profile-page branch 2 times, most recently from 7cd9a55 to bc6d6dc Compare March 23, 2021 09:36

svenefftinge requested a review from gtsiolis March 23, 2021 09:37

svenefftinge marked this pull request as ready for review March 23, 2021 09:37

svenefftinge requested a review from AlexTugarev March 23, 2021 09:37

svenefftinge commented Mar 23, 2021

View reviewed changes

AlexTugarev reviewed Mar 23, 2021

View reviewed changes

svenefftinge force-pushed the se/profile-page branch 2 times, most recently from 455a889 to 22527ee Compare March 23, 2021 09:55

AlexTugarev approved these changes Mar 23, 2021

View reviewed changes

gtsiolis approved these changes Mar 23, 2021

View reviewed changes

gtsiolis reviewed Mar 23, 2021

View reviewed changes

gtsiolis mentioned this pull request Mar 23, 2021

Impove account deletion process #3554

Closed

svenefftinge force-pushed the se/profile-page branch from 22527ee to 4ec057e Compare March 23, 2021 13:55

[dashboard] account deletion

868949d

svenefftinge force-pushed the se/profile-page branch from 4ec057e to 868949d Compare March 23, 2021 14:02

svenefftinge merged commit 6e48d21 into main Mar 23, 2021

svenefftinge deleted the se/profile-page branch March 23, 2021 15:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[dashboard] account deletion #3551

[dashboard] account deletion #3551

svenefftinge commented Mar 23, 2021 •

edited

Loading

svenefftinge Mar 23, 2021

gtsiolis Mar 23, 2021

svenefftinge commented Mar 23, 2021

AlexTugarev Mar 23, 2021

AlexTugarev Mar 23, 2021

svenefftinge Mar 23, 2021

AlexTugarev commented Mar 23, 2021

AlexTugarev commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading

AlexTugarev commented Mar 23, 2021

AlexTugarev left a comment

svenefftinge commented Mar 23, 2021

gtsiolis commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment

gtsiolis Mar 23, 2021

gtsiolis Mar 23, 2021 •

edited

Loading

gtsiolis Mar 23, 2021

gtsiolis Mar 23, 2021

gtsiolis Mar 23, 2021

gtsiolis Mar 23, 2021

svenefftinge Mar 23, 2021

gtsiolis Mar 23, 2021

svenefftinge Mar 23, 2021

gtsiolis Mar 23, 2021 •

edited

Loading

gtsiolis Mar 23, 2021

AlexTugarev Mar 23, 2021

gtsiolis Mar 23, 2021

gtsiolis Mar 23, 2021

gtsiolis Mar 23, 2021 •

edited

Loading

svenefftinge commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading

	<ol className="text-gray-400 text-sm list-outside list-decimal">
	<ol className="text-gray-500 text-sm list-outside list-decimal">

	<p className="py-4 text-gray-900 text-base">You are about to permanently delete your account.</p>
	<p className="pb-4 text-gray-900 text-base">You are about to permanently delete your account.</p>

	<div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-2">
	<div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-4">

	<button className="text-gray-900 border-gray-100 bg-gray-100 hover:bg-gray-200 hover:border-gray-400" onClick={close}>Cancel</button>
	<button className="text-gray-500 border-white bg-white hover:bg-gray-100 hover:border-gray-100 font-medium" onClick={close}>Cancel</button>

	<input className="border-2 border-gray-400 w-full" type="text" placeholder={primaryEmail} onChange={e => setTypedEmail(e.target.value)}></input>
	<input className="border-2 border-gray-400 w-full" type="text" onChange={e => setTypedEmail(e.target.value)}></input>

	<button className="ml-2 border-red-900 bg-red-500 hover:bg-red-700 disabled:opacity-50" onClick={deleteAccount} disabled={typedEmail !== primaryEmail}>Delete Account</button>
	<button className="ml-2 border-red-900 bg-red-500 hover:bg-red-700 disabled:opacity-50 font-medium" onClick={deleteAccount} disabled={typedEmail !== primaryEmail}>Delete Account</button>

[dashboard] account deletion #3551

[dashboard] account deletion #3551

Conversation

svenefftinge commented Mar 23, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

svenefftinge commented Mar 23, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AlexTugarev commented Mar 23, 2021

AlexTugarev commented Mar 23, 2021 • edited by werft-gitpod-dev-com bot Loading

svenefftinge commented Mar 23, 2021 • edited by werft-gitpod-dev-com bot Loading

AlexTugarev commented Mar 23, 2021

AlexTugarev left a comment

Choose a reason for hiding this comment

svenefftinge commented Mar 23, 2021

gtsiolis commented Mar 23, 2021 • edited by werft-gitpod-dev-com bot Loading

gtsiolis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gtsiolis Mar 23, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gtsiolis Mar 23, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gtsiolis Mar 23, 2021 • edited Loading

Choose a reason for hiding this comment

svenefftinge commented Mar 23, 2021 • edited by werft-gitpod-dev-com bot Loading

svenefftinge commented Mar 23, 2021 •

edited

Loading

AlexTugarev commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis Mar 23, 2021 •

edited

Loading

gtsiolis Mar 23, 2021 •

edited

Loading

gtsiolis Mar 23, 2021 •

edited

Loading

svenefftinge commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading