Add cancel button

assets/styles/app.scss

@@ -28,7 +28,6 @@ form input[type=checkbox]{
 }
 
 button[type=submit]{
-  box-shadow: 0 2px 0 #3B8C7E;
   border: none;
   border-radius: 3px;
   color: #FFF;
@@ -88,35 +87,6 @@ button[type=submit]{
   justify-content: center;
 }
 
-.elements-left {
-  width: auto;
-  padding: 20px;
-  float: left;
-}
-
-.elements-right {
-  padding: 30px 30px 10px 10px;
-  float: right;
-}
-
-.capsule-video {
-  overflow:hidden;
-  position:relative;
-  padding-top: 56.25%;
-  width: 600px;
-}
-
-.responsive-iframe {
-  padding-top: 10px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-}
-
 .list-item {
   font-size: 16px;
   padding: 10px;
@@ -162,6 +132,15 @@ button[type=submit]{
   -webkit-text-fill-color: transparent;
 }
 
+.button-cancel {
+  border: none;
+  border-radius: 3px;
+}
+
+.button-cancel:hover {
+  background-color: #4f5050;
+}
+
 .row-title:hover {
   color: rgba(255,255,255,.75);
 }

src/Controller/CapsuleController.php

@@ -2,7 +2,9 @@
 
 namespace App\Controller;
 
+use App\Entity\Capsule;
 use App\Entity\User;
+use App\Form\DeleteCapsuleFormType;
 use App\Helper\StringHelper;
 use App\Repository\CapsuleRepository;
 use App\Builder\CapsuleBuilder;
@@ -128,4 +130,53 @@ class CapsuleController extends AbstractController
             [ 'url' => $url ]
         );
     }
+
+    /**
+     * @Route("/capsule/delete/{id}", name="delete_capsule")
+     */
+    public function delete(
+        int $id,
+        Request $request,
+        TranslatorInterface $translator
+    ): Response {
+        $form = $this->createForm(DeleteCapsuleFormType::class);
+        $form->handleRequest($request);
+        $current_user = $this->getUser();
+
+        if (! $current_user instanceof User) {
+            return $this->redirectToRoute('app_logout');
+        }
+
+        $entityManager = $this->getDoctrine()->getManager();
+        $capsule = $entityManager->getRepository(Capsule::class)->find($id);
+
+        if (!$capsule) {
+            throw $this->createNotFoundException(
+                'No capsule found for id ' . $id
+            );
+        }
+        $capsule_name = $capsule->getName();
+
+        if ($form->isSubmitted() && $form->isValid()) {
+            $entityManager->remove($capsule);
+            $entityManager->flush();
+
+            $this->addFlash(
+                'capsule_deleted_success',
+                $translator->trans(
+                    'capsule.delete.success',
+                    [
+                        'capsule_name' => $capsule_name
+                    ]
+                )
+            );
+
+            return $this->redirectToRoute('capsule_list');
+        }
+
+        return $this->render('capsule/delete.html.twig', [
+            'deleteCapsuleForm' => $form->createView(),
+            'capsule_name' => $capsule_name
+        ]);
+    }
 }

src/Form/DeleteCapsuleFormType.php

+<?php
+
+namespace App\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ButtonType;
+use Symfony\Component\Form\Extension\Core\Type\SubmitType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class DeleteCapsuleFormType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add(
+                'cancel',
+                ButtonType::class,
+                ['label' => 'general.cancel_button',
+                    'attr' => ['class' => 'button-cancel']
+                ]
+            )
+            ->add(
+                'delete',
+                SubmitType::class,
+                ['label' => 'capsule.delete.button']
+            );
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([]);
+    }
+}

templates/capsule/delete.html.twig

+{% extends 'layout.html.twig' %}
+
+{% block title %}
+    {{ 'capsule.delete.title'|trans }}
+{% endblock %}
+
+{% block body %}
+
+    <div>
+        <div class="row w-100 gx-0">
+            <div class="row-title-box">
+                <h3 class="row-title">
+                    {{ 'capsule.delete.title'|trans }}
+                </h3>
+            </div>
+        </div>
+
+        <div class="d-flex flex-column justify-content-center align-items-center">
+
+            <p class="text-secondary fs-5 mb-5">
+                {{ 'capsule.delete.text'|trans({'%capsule_name%': capsule_name}) }}
+            </p>
+
+            {{ form_start(deleteCapsuleForm, {'attr': {novalidate: 'novalidate', 'class': 'd-flex flex-row justify-content-center'}}) }}
+            {{ form_row(deleteCapsuleForm.delete, {'row_attr': {'class' : 'm-auto mb-2 me-3'}})  }}
+            <a href="/">
+                {{ form_row(deleteCapsuleForm.cancel, {'row_attr': {'class' : 'm-auto mb-2 bg-secondary rounded ms-3'}})  }}
+            </a>
+            {{ form_end(deleteCapsuleForm) }}
+        </div>
+
+    </div>
+
+{%  endblock %}
\ No newline at end of file

templates/capsule/index.html.twig

@@ -32,6 +32,12 @@
             {{ flashSuccess }}
         </div>
     {% endfor %}
+
+    {% for flashSuccess in app.flashes('capsule_deleted_success') %}
+        <div class="text-center alert alert-success col-5 mx-auto my-5" role="alert">
+            {{ flashSuccess }}
+        </div>
+    {% endfor %}
 </div>
 
     <div class="capsules-list d-flex flex-column m-6">
@@ -73,7 +79,7 @@
                         </a>
                     </div>
                     <div class="list-item text-nowrap">
-                        <a href="/delete_capsule" class="links text-decoration-none">
+                        <a href="/capsule/delete/{{ capsule.getId() }}" class="links text-decoration-none">
                             <i class="fas fa-trash m-2"></i>
                             {{ 'capsule.delete.link'|trans }}
                         </a>

translations/messages.en.yaml

@@ -4,6 +4,7 @@ general:
   sign_in: Sign in
   log_out: Log out
   go_back_to_home_page: Home page
+  cancel_button: Cancel
   link_expire: This link will expire in %expirationDuration%
   greeting: Cheers!
 
@@ -71,6 +72,10 @@ capsule:
     link: Duplicate capsule
   delete:
     link: Delete capsule
+    button: Delete
+    title: Delete capsule
+    text: Do you really want to delete the capsule %capsule_name%?
+    success: Capsule capsule_name was deleted successfully
 
 project:
   already_exists: Project capsule_name already exists so the capsule could not be created

translations/messages.fr.yaml

@@ -5,6 +5,8 @@ general:
   log_out: Se déconnecter
   link_expire: Le lien expirera dans
   greeting: Salutation !
+  go_back_to_home_page: Page d'accueil
+  cancel_button: Annuler
 
 login:
   account_disabled_feedback: Le compte utilisateur a été désactivé. Veuillez cliquer sur le lien pour recevoir un courriel de validation
@@ -68,6 +70,10 @@ capsule:
   delete:
     link: Supprimer la capsule
   not_found: Le projet n'existe pas
+    button: Supprimer
+    title: Supprimer la capsule
+    text: Souhaitez-vous vraiment supprimer la capsule %capsule_name% ?
+    success: La capsule capsule_name a bien été supprimée
 
 project:
   already_exists: Le projet capsule_name existe déjà. La capsule n'a pas pu être créée