From 89dad7b6173f57f8b2548698aca03a76069c7c52 Mon Sep 17 00:00:00 2001
From: luuk schukkink <luuk.schukkink@gmail.com>
Date: Wed, 22 May 2024 21:46:19 +0200
Subject: [PATCH 1/2] added remove button

---
 client/src/components/anytimer.component.tsx | 25 ++++++++++++++++++
 client/src/services/api.service.ts           | 27 ++++++++++++++++----
 server/api/urls.py                           |  5 ++++
 server/api/views.py                          |  9 +++++++
 4 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/client/src/components/anytimer.component.tsx b/client/src/components/anytimer.component.tsx
index 98ea36b..8405b1c 100644
--- a/client/src/components/anytimer.component.tsx
+++ b/client/src/components/anytimer.component.tsx
@@ -98,6 +98,24 @@ export default function AnyTimerComponent({ AnyTimer, direction, type, state, re
         });
     }
 
+    function deleteAny() {
+        APIService.delete(
+            APIBase.BACKEND,
+            `/api/anytimers/confirmed/${AnyTimer.id}/delete/
+            `
+        ).then(() => {
+            if (amount == 1) {
+                remove(AnyTimer.id)
+            } else {
+                setAmount(amount - 1);
+            }
+            notifications.notify("Successfully deleted anytimer!");
+        })
+        .catch(() => {
+            notifications.notify("Something went wrong while trying to delete anytimer")
+        });
+    }
+
     async function postCompleteAny(event: FormEvent<HTMLFormElement>) {
         event.preventDefault();
         // THIS TOOK ME 3 HOURS TO FIGURE OUT AND IT DOES NOT EVEN LOOK THAT COMPLICATED
@@ -211,6 +229,13 @@ export default function AnyTimerComponent({ AnyTimer, direction, type, state, re
                         </button>
                     )
                 }
+                {
+                    type == 'confirmed' && direction == 'outgoing' && state == "unused" && (
+                        <button className="anytimer-button" onClick={deleteAny}>
+                            DELETE
+                        </button>
+                    )
+                }
                 {
                     type == 'confirmed' && direction == 'incoming' && state == "used" && (
                         <Popup title={"Complete anytimer from " + AnyTimer.owner_name} button={
diff --git a/client/src/services/api.service.ts b/client/src/services/api.service.ts
index fe4cdb2..dceac8e 100644
--- a/client/src/services/api.service.ts
+++ b/client/src/services/api.service.ts
@@ -38,7 +38,7 @@ class _APIService {
         const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
         const values = new Uint32Array(48);
         window.crypto.getRandomValues(values);
-        
+
         let code_challenge = '';
         for (let i = 0; i < 48; i++) {
             code_challenge += charset[values[i] % charset.length];
@@ -60,13 +60,13 @@ class _APIService {
             const form: FormData = new FormData();
             const code_challenge = localStorage.getItem('code_challenge');
 
-            if(code_challenge) {
+            if (code_challenge) {
                 form.append('grant_type', 'authorization_code')
                 form.append('client_id', this.client_id)
                 form.append('code', code)
                 form.append('code_verifier', code_challenge)
                 form.append('redirect_uri', this.redirect_uri)
-        
+
                 axios.postForm<Credentials>(`${this.concrexit_uri}${this.token_path}`, form)
                     .then(res => {
                         localStorage.removeItem('code_challenge')
@@ -87,7 +87,7 @@ class _APIService {
             form.append('grant_type', 'refresh_token')
             form.append('client_id', this.client_id)
             form.append('refresh_token', refresh_token)
-    
+
             axios.postForm<Credentials>(`${this.concrexit_uri}${this.token_path}`, form)
                 .then(res => {
                     resolve(res.data)
@@ -102,7 +102,7 @@ class _APIService {
         return new Promise((resolve, reject) => {
             // console.info("GET")
             const base_uri = base == APIBase.CONCREXIT ? this.concrexit_uri : this.backend_uri;
-    
+
             axios.get(`${base_uri}${path}`, {
                 headers: {
                     'Authorization': `Bearer ${User.getAccessToken}`,
@@ -131,6 +131,23 @@ class _APIService {
             })
         })
     }
+
+    delete<T>(base: APIBase, path: string): Promise<T> {
+        return new Promise((resolve, reject) => {
+            // console.info("DELETE")
+            const base_uri = base == APIBase.CONCREXIT ? this.concrexit_uri : this.backend_uri;
+
+            axios.delete(`${base_uri}${path}`, {
+                headers: {
+                    'Authorization': `Bearer ${User.getAccessToken}`,
+                },
+            }).then(res => {
+                resolve(res.data)
+            }).catch(err => {
+                reject(err);
+            })
+        })
+    }
 }
 
 const APIService = new _APIService(
diff --git a/server/api/urls.py b/server/api/urls.py
index 3026438..901fbe0 100644
--- a/server/api/urls.py
+++ b/server/api/urls.py
@@ -38,6 +38,11 @@
         views.use_anytimer,
         name="use_anytimer",
     ),
+    path(
+        "anytimers/confirmed/<anytimer_id>/delete/",
+        views.remove_anytimer,
+        name="remove_anytimer",
+    ),
     path("proofs/<anytimer_id>/", views.fetch_proof, name="fetch_proof"),
     path("proofs/<anytimer_id>/file/", views.proof_sendfile, name="proof_sendfile"),
 ]
diff --git a/server/api/views.py b/server/api/views.py
index d602b8d..64358b6 100644
--- a/server/api/views.py
+++ b/server/api/views.py
@@ -199,6 +199,15 @@ def revoke_request(request, request_id):
     anytimerrequest.delete()
     return Response(status=200)
 
+@api_view(["DELETE"])
+def remove_anytimer(request, anytimer_id):
+    anytimer = AnyTimer.objects.get(owner_id=request.user_id, id=anytimer_id)
+    if anytimer.amount > 1:
+        anytimer.amount -= 1
+        anytimer.save()
+    else:
+        anytimer.delete()
+    return Response(status=200)
 
 @api_view(["GET"])
 def fetch_requests(request, direction):

From 49a1ff9b0b63b894059df3c79561fe7a83c789df Mon Sep 17 00:00:00 2001
From: vincevd1 <vincevandiermen@gmail.com>
Date: Thu, 23 May 2024 16:23:41 +0200
Subject: [PATCH 2/2] Add confirmation popup and make delete button red

---
 client/src/components/anytimer.component.css |  8 ++++++
 client/src/components/anytimer.component.tsx | 29 ++++++++++++++++++--
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/client/src/components/anytimer.component.css b/client/src/components/anytimer.component.css
index 15ca0e4..52b92bf 100644
--- a/client/src/components/anytimer.component.css
+++ b/client/src/components/anytimer.component.css
@@ -121,6 +121,14 @@
     margin-bottom: 1em;
 }
 
+.delete-button {
+    background-color: var(--cancel-red);
+}
+
+.delete-button:hover {
+    background-color: var(--cancel-red-highlight);
+}
+
 @media (max-width: 1100px) {
     .anytimer, .anytimer-info {
         flex-direction: column;
diff --git a/client/src/components/anytimer.component.tsx b/client/src/components/anytimer.component.tsx
index 8405b1c..78a6881 100644
--- a/client/src/components/anytimer.component.tsx
+++ b/client/src/components/anytimer.component.tsx
@@ -231,9 +231,32 @@ export default function AnyTimerComponent({ AnyTimer, direction, type, state, re
                 }
                 {
                     type == 'confirmed' && direction == 'outgoing' && state == "unused" && (
-                        <button className="anytimer-button" onClick={deleteAny}>
-                            DELETE
-                        </button>
+                        <Popup 
+                        title="Are you sure you want to delete this anytimer?" 
+                        button={
+                            <button className="anytimer-button delete-button">
+                                DELETE
+                            </button>
+                        }>
+                            {
+                                close => 
+                                <>
+                                    <div className="button-wrapper">
+                                        <button className="confirm-button confirmation-button" onClick={
+                                            () => {
+                                                close();
+                                                deleteAny();
+                                            }
+                                        }>
+                                            CONFIRM
+                                        </button>
+                                        <button className='cancel-button confirmation-button' onClick={close}>
+                                            CANCEL
+                                        </button>
+                                    </div>
+                                </>
+                            }
+                        </Popup>
                     )
                 }
                 {