Add confirmation dialog before deleting

supysonic/static/css/supysonic.css

@@ -1,8 +1,11 @@
 /*
- * supysonic.css
+ * This file is part of Supysonic.
- * Copyright (C) 2017 Óscar García Amor
+ * Supysonic is a Python implementation of the Subsonic server API.
  *
- * Distributed under terms of the GNU GPLv3 license.
+ * Copyright (C) 2017 Óscar García Amor
+ *               2017 Alban 'spl0k' Féron
+ *
+ * Distributed under terms of the GNU AGPLv3 license.
  */
 
 body {

supysonic/static/js/supysonic.js

@@ -0,0 +1,17 @@
+/*
+ * This file is part of Supysonic.
+ * Supysonic is a Python implementation of the Subsonic server API.
+ *
+ * Copyright (C) 2017 Óscar García Amor
+ *               2017 Alban 'spl0k' Féron
+ *
+ * Distributed under terms of the GNU AGPLv3 license.
+ */
+
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip()
+});
+
+$('#confirm-delete').on('show.bs.modal', function(e) {
+  $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
+});

supysonic/templates/folders.html

@@ -24,9 +24,9 @@
     {% for folder in folders %}
     <tr>
       <td>{{ folder.name }}</td><td>{{ folder.path }}</td><td>
-        <a href="{{ url_for('del_folder', id = folder.id) }}" aria-label="Delete folder">
+        <button class="btn btn-danger btn-xs" data-href="{{ url_for('del_folder', id = folder.id) }}" data-toggle="modal" data-target="#confirm-delete" aria-label="Delete folder">
-          <span class="glyphicon glyphicon-remove-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Delete folder"></span></a></td>
+          <span class="glyphicon glyphicon-remove-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Delete folder"></span></button></td>
-      <td><a href="{{ url_for('scan_folder', id = folder.id) }}" aria-label="Scan folder">
+      <td><a class="btn btn-default btn-xs" href="{{ url_for('scan_folder', id = folder.id) }}" aria-label="Scan folder">
           <span class="glyphicon glyphicon-search" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Scan folder"></span></a></td>
     </tr>
     {% endfor %}
@@ -36,4 +36,21 @@
   <a href="{{ url_for('add_folder') }}" class="btn btn-default">Add</a>
   <a href="{{ url_for('scan_folder') }}" class="btn btn-default">Scan all</a>
 </div>
+<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">Are you sure?</h4>
+      </div>
+      <div class="modal-body">
+        <p>Are you sure that you want to delete folder?</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Nope</button>
+        <a type="button" class="btn btn-danger btn-ok">Yes, delete!</a>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
 {% endblock %}

supysonic/templates/layout.html

@@ -16,9 +16,9 @@
     <title>Supysonic</title>
 
     <!-- Bootstrap -->
-    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
-    <link href="/static/css/bootstrap-theme.min.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/bootstrap-theme.min.css') }}" rel="stylesheet">
-    <link href="/static/css/supysonic.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/supysonic.css') }}" rel="stylesheet">
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -102,12 +102,8 @@
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
-    <script src="/static/js/bootstrap.min.js"></script>
+    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
     <!-- Activate tooltips -->
-    <script>
+    <script src="{{ url_for('static', filename='js/supysonic.js') }}"></script>
-    $(function () {
-      $('[data-toggle="tooltip"]').tooltip()
-    })
-    </script>
   </body>
 </html>

supysonic/templates/playlists.html

@@ -32,8 +32,8 @@
                                  aria-label="Public playlist"></span>{% else %}<span
                                  class="glyphicon glyphicon-unchecked"
                                  aria-label="Private playlist"></span>{% endif %}</td>
-      <td><a href="{{ url_for('playlist_delete', uid = p.id) }}" aria-label="Delete playlist">
+      <td><button class="btn btn-danger btn-xs" data-href="{{ url_for('playlist_delete', uid = p.id) }}" data-toggle="modal" data-target="#confirm-delete" aria-label="Delete playlist">
-        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Delete playlist"></span></a></td>
+        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Delete playlist"></span></button></td>
     </tr>
     {% endfor %}
   </tbody>
@@ -58,4 +58,21 @@
   </tbody>
 </table>
 {% endif %}
+<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">Are you sure?</h4>
+      </div>
+      <div class="modal-body">
+        <p>Are you sure that you want to delete playlist?</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Nope</button>
+        <a type="button" class="btn btn-danger btn-ok">Yes, delete!</a>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
 {% endblock %}

supysonic/templates/users.html

@@ -26,8 +26,8 @@
       <td>{% if session.username == user.name %}{{ user.name }}{% else %}
         <a href="{{ url_for('user_profile', uid = user.id) }}">{{ user.name }}</a>{% endif %}</td>
       <td>{{ user.mail }}</td><td>{{ user.admin }}</td><td>{{ user.last_play_date }}</td><td>
-        {% if session.username != user.name %}<a href="{{ url_for('del_user', uid = user.id) }}" aria-label="Delete user">
+        {% if session.username != user.name %}<button class="btn btn-danger btn-xs" data-href="{{ url_for('del_user', uid = user.id) }}" data-toggle="modal" data-target="#confirm-delete" aria-label="Delete user">
-          <span class="glyphicon glyphicon-remove-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Delete user"></span></a>{% endif %}</td></tr>
+          <span class="glyphicon glyphicon-remove-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Delete user"></span></button>{% endif %}</td></tr>
     {% endfor %}
   </tbody>
 </table>
@@ -36,4 +36,21 @@
   <a href="{{ url_for('export_users') }}" class="btn btn-default">Export</a>
   <a href="{{ url_for('import_users') }}" class="btn btn-default">Import</a>
 </div>
+<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">Are you sure?</h4>
+      </div>
+      <div class="modal-body">
+        <p>Are you sure that you want to delete user?</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Nope</button>
+        <a type="button" class="btn btn-danger btn-ok">Yes, delete!</a>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
 {% endblock %}