Add account deletion functionality (#4153)
* chore: delete account * Add account deletion functionality --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/4159/head
Arik Chakma
1 year ago
committed by
GitHub
parent
2d3a89bd56
commit
8a5bc21206
8 changed files with 1066 additions and 908 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,16 @@ |
|||||||
|
--- |
||||||
|
import DeleteAccountPopup from "./DeleteAccountPopup.astro"; |
||||||
|
--- |
||||||
|
<DeleteAccountPopup /> |
||||||
|
|
||||||
|
<h2 class='text-xl font-bold sm:text-2xl'>Delete Account</h2> |
||||||
|
<p class='mt-2 text-gray-400'> |
||||||
|
Permanently remove your account from the roadmap.sh. This cannot be undone and all your progress and data will be lost. |
||||||
|
</p> |
||||||
|
|
||||||
|
<button |
||||||
|
data-popup='delete-account-popup' |
||||||
|
class="mt-4 w-full rounded-lg bg-red-600 py-2 text-base font-regular text-white outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1" |
||||||
|
> |
||||||
|
Delete Account |
||||||
|
</button> |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
import {useEffect, useState} from 'preact/hooks'; |
||||||
|
import { httpDelete } from '../../lib/http'; |
||||||
|
import { logout } from '../Navigation/navigation'; |
||||||
|
|
||||||
|
export function DeleteAccountForm() { |
||||||
|
const [isLoading, setIsLoading] = useState(false); |
||||||
|
const [error, setError] = useState(''); |
||||||
|
const [confirmationText, setConfirmationText] = useState(''); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setError(''); |
||||||
|
setConfirmationText(''); |
||||||
|
}, []) |
||||||
|
|
||||||
|
const handleSubmit = async (e: Event) => { |
||||||
|
e.preventDefault(); |
||||||
|
setIsLoading(true); |
||||||
|
setError(''); |
||||||
|
|
||||||
|
if (confirmationText.toUpperCase() !== 'DELETE') { |
||||||
|
setError('Verification text does not match'); |
||||||
|
setIsLoading(false); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const { response, error } = await httpDelete( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-delete-account` |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
setIsLoading(false); |
||||||
|
setError(error?.message || 'Something went wrong'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
logout(); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleClosePopup = () => { |
||||||
|
setIsLoading(false); |
||||||
|
setError(''); |
||||||
|
setConfirmationText(''); |
||||||
|
|
||||||
|
const deleteAccountPopup = document.getElementById('delete-account-popup'); |
||||||
|
deleteAccountPopup?.classList.add('hidden'); |
||||||
|
deleteAccountPopup?.classList.remove('flex'); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<form onSubmit={handleSubmit}> |
||||||
|
<div className="my-4"> |
||||||
|
<input |
||||||
|
type="text" |
||||||
|
name="delete-account" |
||||||
|
id="delete-account" |
||||||
|
className="mt-2 block w-full rounded-md border border-gray-300 py-2 px-3 outline-none placeholder:text-gray-400 focus:border-gray-400" |
||||||
|
placeholder={'Type "delete" to confirm'} |
||||||
|
required |
||||||
|
autoFocus |
||||||
|
value={confirmationText} |
||||||
|
onInput={(e) => |
||||||
|
setConfirmationText((e.target as HTMLInputElement).value) |
||||||
|
} |
||||||
|
/> |
||||||
|
{error && ( |
||||||
|
<p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">{error}</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
disabled={isLoading} |
||||||
|
onClick={handleClosePopup} |
||||||
|
className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center" |
||||||
|
> |
||||||
|
Cancel |
||||||
|
</button> |
||||||
|
<button |
||||||
|
type="submit" |
||||||
|
disabled={isLoading || confirmationText.toUpperCase() !== 'DELETE'} |
||||||
|
className="flex-grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40" |
||||||
|
> |
||||||
|
{isLoading ? 'Please wait ..' : 'Confirm'} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
--- |
||||||
|
import Popup from '../Popup/Popup.astro'; |
||||||
|
import { DeleteAccountForm } from './DeleteAccountForm'; |
||||||
|
--- |
||||||
|
|
||||||
|
<Popup id='delete-account-popup' title='Delete Account' subtitle=''> |
||||||
|
<div class='-mt-2.5'> |
||||||
|
<p> |
||||||
|
This will permanently delete your account and all your associated data |
||||||
|
including your progress. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p class="text-black font-medium -mb-2 mt-3 text-base">Please type "delete" to confirm.</p> |
||||||
|
|
||||||
|
<DeleteAccountForm client:only /> |
||||||
|
</div> |
||||||
|
</Popup> |
||||||
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in new issue