Added an option to delete a user accout #373

tfnribeiro · 2024-05-14T07:54:15Z

Changes

Added an extra button at the settings menu to allow users to delete the account.
Refactored settings to have separating lines between the different options
Changed button styling to be in line with buttons used in the home page.
The user needs to confirm the deletion via a modal that pops up with a red button stating "Delete my account". This process is not reversible, once the user starts it will trigger the deletion of the account.
While the deletion is on-going the user is redirected to a new path: /account_deletion, where they may wait to get confirmation that the account has been deleted. If there is an error, the exception is captured and we will be informed.
Once complete, a confirmation is given and the user can close the tab, otherwise they are redirected to the homepage.

Notes on Implementation

The account deletion is performed at the path /account_deletion, but only proceeds if there is a session storage value which is assigned when the user clicks the button inside the Modal in the settings. This will write to the session storage, and allow the call to the API to be made.

Screens:

Settings Menu

Current	New

Deletion Modal

Account Deletion Route

Success Screen:

Error Screen:

+ Exposes a way for users to delete their account from the front-end

+ Fixed typo

+ Fixed resetting the session storage flag when the account is deleted. + Changed the text to let user know that the Zeeguu team is notified in case of error.

netlify · 2024-05-14T07:54:29Z

✅ Deploy Preview for voluble-nougat-015dd1 ready!

Name	Link
🔨 Latest commit	`f63b3b0`
🔍 Latest deploy log	https://app.netlify.com/sites/voluble-nougat-015dd1/deploys/667160f61f157c0008073ab9
😎 Deploy Preview	https://deploy-preview-373--voluble-nougat-015dd1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…d api.

mircealungu

good stuff.
i made a few changes and left a few minor requests.
tak!

mircealungu · 2024-06-11T21:02:42Z

src/pages/AccountDeletion.js

+import SessionStorage from "../assorted/SessionStorage";
+import { APP_DOMAIN } from "../appConstants";
+
+export default function AcountDeletion({ api }) {


mircealungu · 2024-06-11T21:02:56Z

src/pages/AccountDeletion.js

+export default function AcountDeletion({ api }) {
+  const user = useContext(UserContext);
+  const [headingMsg, setHeadingMsg] = useState("We are deleting your account");
+  const [errorOcurred, setErrorOcurred] = useState();


mircealungu · 2024-06-11T21:05:57Z

src/pages/AccountDeletion.js

+      redirect(APP_DOMAIN);
+    }
+  }, []);
+  // In case the user went to the path by mistake


i don't get this comment. does it refer to the next line?

Yes, not sure why it was down there!

mircealungu · 2024-06-11T21:14:32Z

src/pages/AccountDeletion.js

+          setHeadingMsg("✅ Your account has been successfully deleted!");
+          setTimeout(() => {
+            user.logoutMethod();
+          }, [TIME_BEFORE_REDIRECT]);


my linter complains about the setTimeout second parameter being an array. Should it not be a simple int?

It's right. It somehow was still working, which is strange - but it is expected to be an int.

mircealungu · 2024-06-11T21:16:00Z

src/pages/AccountDeletion.js

+  useEffect(() => {
+    console.log(user);
+    if (SessionStorage.hasUserConfirmationForAccountDeletion()) {
+      setErrorOccurred(false);


I'm getting an warning in the IDE: Argument type boolean is not assignable to parameter type (prevState: undefined) => undefine for both errorOccurred and isAccountDeleted. I think this is because they are not initialized. Can't we simply initialize them with false?

Yes! We can set it to false.

The reason why I stopped initializing the React states is in order to use the loading component, if you set it to false it's much harder to know when you actually have updated the API. In this case, we can just render the component and respond after one of them is toggled, but in other cases I don't see an easy way without leaving it undefinied.

To be honest, I don't understand why that warning would appear, as you can assign whatever Type to a React state, as we never have to specify types when we create a react state? Or am I wrong?

I know: It's really funny and I don't fully understand why this is.

One thing is to simply disable that warning.

The other would be to from now on, not use boolean variables, but a locally declared enum that tracks the possible states of the respective variables, e.g. the above would become something like: deletionStatus would have one of the values UNDEFINED, ERRORED, OK. Does this make sense?

When I googled this warning it seems related with TypeScript which enforces Type declarations for Javascript so I don't know if it's relevant for our codebase since we are not using typescript. I am okay with using an Enum, but essentially we are adding one more variable that won't do much more than what the conditions do now.

The state would have to have at least 4 states:

UNDEFINED

WAITING_API_RESPONSE

OK

ERRORED

I will implemented with this and we can decide which variation we prefer.

I kind of like this! What is your feeling about it?

I also like it!

I am not sure if we need the React states anymore of isAccountDeleted and ErrorOcurred, as they are not used anymore - so if we like this I would remove those to avoid confusion.

yes, let's!

We should be ready then!

mircealungu · 2024-06-11T21:20:55Z

src/pages/DeleteAccountButton.js

+      setShowConfirmationModal(false);
+      SessionStorage.setUserConfirmationForAccountDeletion(true);
+      redirect(APP_DOMAIN + "account_deletion");
+    } else {


I think we can simply redirect to /account_deletion. Or?

Update based on review

tfnribeiro · 2024-06-14T09:30:02Z

I have added the Enum Status tracking - Let me know what you think

mircealungu · 2024-06-18T07:17:38Z

src/pages/AccountDeletion.js

+
+const TIME_BEFORE_REDIRECT = 5000;
+
+const DeletionStatus = Object.freeze({


I love the fact that you're freezing this object! I didn't know this function existed :)

We use it other places!

ExerciseTypeConstants.js and userBookmarkPreferences.js - This is how I saw to do Enums in JS.

tfnribeiro added 6 commits May 8, 2024 15:49

First attempt at implementing Delete Account

3d66375

+ Exposes a way for users to delete their account from the front-end

Merge branch 'master' into add-delete-user-setting

59cc571

Update MainAppRouter.js

463cdfc

+ Fixed typo

Changed colour of link

3b91e4b

Update AccountDeletion.js

e175e2b

+ Fixed resetting the session storage flag when the account is deleted. + Changed the text to let user know that the Zeeguu team is notified in case of error.

Merge branch 'master' into add-delete-user-setting

a666533

tfnribeiro linked an issue May 14, 2024 that may be closed by this pull request

Add a way to delete user #360

Closed

tfnribeiro mentioned this pull request May 14, 2024

Add delete user endpoint zeeguu/api#147

Merged

tfnribeiro and others added 6 commits May 27, 2024 09:06

Merge branch 'master' into add-delete-user-setting

154533c

Use decorator changes

700e36c

late-night implementation of logout-if-session-is-invalid functionality

8ae1f9c

removing annoying reminder that we should add dependencies to user an…

52ce810

…d api.

added const

54a259f

fixed email

8727fad

mircealungu requested changes Jun 11, 2024

View reviewed changes

tfnribeiro added 4 commits June 12, 2024 09:59

Merge branch 'master' into add-delete-user-setting

116b45d

Update AccountDeletion.js

c7ed45e

Update based on review

Simplified Redirect

5575b24

Using Enum for Status Tracking

923891a

tfnribeiro requested a review from mircealungu June 14, 2024 12:43

mircealungu reviewed Jun 18, 2024

View reviewed changes

Remove unnecessary import and variables

f63b3b0

mircealungu merged commit 49bf7e4 into master Jun 18, 2024
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added an option to delete a user accout #373

Added an option to delete a user accout #373

tfnribeiro commented May 14, 2024

netlify bot commented May 14, 2024 •

edited

Loading

mircealungu left a comment

mircealungu Jun 11, 2024

mircealungu Jun 11, 2024

mircealungu Jun 11, 2024

tfnribeiro Jun 12, 2024

mircealungu Jun 11, 2024

tfnribeiro Jun 12, 2024

mircealungu Jun 11, 2024

tfnribeiro Jun 12, 2024

mircealungu Jun 13, 2024

tfnribeiro Jun 14, 2024

mircealungu Jun 16, 2024

tfnribeiro Jun 17, 2024

mircealungu Jun 18, 2024

tfnribeiro Jun 18, 2024

mircealungu Jun 11, 2024

tfnribeiro commented Jun 14, 2024

mircealungu Jun 18, 2024

tfnribeiro Jun 18, 2024


		const TIME_BEFORE_REDIRECT = 5000;

		const DeletionStatus = Object.freeze({

Added an option to delete a user accout #373

Added an option to delete a user accout #373

Conversation

tfnribeiro commented May 14, 2024

Changes

Notes on Implementation

Screens:

Settings Menu

Deletion Modal

Account Deletion Route

Success Screen:

Error Screen:

netlify bot commented May 14, 2024 • edited Loading

✅ Deploy Preview for voluble-nougat-015dd1 ready!

mircealungu left a 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

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

Choose a reason for hiding this comment

tfnribeiro commented Jun 14, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented May 14, 2024 •

edited

Loading