updated to sweetalert2 (only Saves reimplemented)

package.json

@@ -44,6 +44,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "semver": "^5.5.0",
-    "sweetalert": "^1.1.3"
+    "sweetalert2": "^7.26.10",
+    "sweetalert2-react-content": "^1.0.1"
   }
 }

ui/App/components/Saves/SavesList.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Save from './Save.jsx';
-import swal from 'sweetalert';
+import {ReactSwalDanger, ReactSwalNormal} from './../../../js/customSwal';
 
 class SavesList extends React.Component {
    constructor(props) {
@@ -15,32 +15,56 @@ class SavesList extends React.Component {
     }
 
     removeSave(saveName, e) {
-        var self = this;
-        swal({   
-            title: "Are you sure?",  
-            text: "Save: " + saveName + " will be deleted",   
-            type: "warning",   
-            showCancelButton: true,   
-            confirmButtonColor: "#DD6B55",   
-            confirmButtonText: "Yes, delete it!",   
-            closeOnConfirm: false 
-        }, 
-        () => {
-            $.ajax({
-                url: "/api/saves/rm/" + saveName,
-                dataType: "json",
-                success: (resp) => {
-                    if (resp.success === true) {
-                        swal("Deleted!", resp.data, "success"); 
-                        self.updateSavesList();
-                    }
-                }
-            })
+        let self = this;
+        ReactSwalDanger.fire({
+            title: "Are you sure?",
+            html: <p style={{width: "100%", textAlign: "center"}}>Save: {saveName} will be deleted</p>,
+            type: "question",
+            showCancelButton: true,
+            confirmButtonColor: "#DD6B55",
+            confirmButtonText: "Yes, delete it!",
+            showLoaderOnConfirm: true,
+            preConfirm: () => {
+                return new Promise((resolve, reject) => {
+                    $.ajax({
+                        url: "/api/saves/rm/" + saveName,
+                        dataType: "json",
+                        success: (resp) => {
+                            if (resp.success === true) {
+                                resolve(resp.data);
+                            } else {
+                                reject("Unknown occurred!");
+                            }
+                        },
+                        error: () => {
+                            reject("Unknown occurred!");
+                        }
+                    });
+                });
+            },
+            allowOutsideClick: () => !ReactSwalDanger.isLoading()
+        }).then((result) => {
+            console.log(result);
+            if(result.value) {
+                ReactSwalNormal.fire({
+                    title: "Deleted!",
+                    text: result.value,
+                    type: "success"
+                });
+            }
+            self.updateSavesList();
+        }).catch((result) => {
+            console.log(result);
+            ReactSwalNormal.fire({
+                title: "An error occurred!",
+                text: result,
+                type: "error"
+            });
         });
     }
 
     render() {
-        var savesList;
+        let savesList;
         if (this.props.saves.length === 0) {
             savesList = <tr></tr>
         } else {
@@ -91,6 +115,6 @@ SavesList.propTypes = {
     saves: PropTypes.array.isRequired,
     dlSave: PropTypes.func.isRequired,
     getSaves: PropTypes.func.isRequired
-}
+};
 
 export default SavesList

ui/App/components/Users/UserTable.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import swal from 'sweetalert';
+// import swal from 'sweetalert';
 
 class UserTable extends React.Component {
     constructor(props) {
@@ -9,7 +9,7 @@ class UserTable extends React.Component {
     }
 
     removeUser(user) {
-        swal({   
+        /*swal({
             title: "Are you sure?",  
             text: "User: " + user + " will be deleted",   
             type: "warning",   
@@ -31,7 +31,7 @@ class UserTable extends React.Component {
                     }
                 }
             })
-        });
+        });*/
 
         this.props.listUsers();
 

ui/index.js

@@ -40,5 +40,4 @@ ReactDOM.render((
             <Route component={App} />
         </Switch>
     </BrowserRouter>
-), document.getElementById('app'))
-
+), document.getElementById('app'));

ui/index.scss

@@ -7,18 +7,21 @@
 @import "../node_modules/admin-lte/build/scss/AdminLTE-raw";
 @import "../node_modules/bootstrap-fileinput/scss/fileinput";
 @import "../node_modules/font-awesome/scss/font-awesome";
+@import "../node_modules/sweetalert2/src/sweetalert2";
 
 /**
  * Customizations
  */
-@import "scss/bt-lte-customizations/buttons";
-@import "scss/bt-lte-customizations/badges";
-@import "scss/bt-lte-customizations/adminLTE3-box";
-@import "scss/bt-lte-customizations/sidebar";
+@import "scss/customizations/buttons";
+@import "scss/customizations/badges";
+@import "scss/customizations/adminLTE3-box";
+@import "scss/customizations/sidebar";
 @import "scss/content";
-@import "scss/bt-lte-customizations/navigation";
-@import "scss/bt-lte-customizations/breadcrumbs";
-@import "scss/bt-lte-customizations/table";
+@import "scss/customizations/navigation";
+@import "scss/customizations/breadcrumbs";
+@import "scss/customizations/table";
+
+@import "scss/customizations/sweetalert";
 
 /**
  * Pages

ui/js/customSwal.js

@@ -0,0 +1,18 @@
+import Swal from 'sweetalert2/dist/sweetalert2';
+import withReactContent from 'sweetalert2-react-content';
+
+const ReactSwal = withReactContent(Swal);
+const ReactSwalTemp = ReactSwal.mixin({
+    confirmButtonClass: "swal-btn btn-primary",
+    cancelButtonClass: "swal-btn btn-secondary",
+    customClass: "swal-design",
+    buttonsStyling: false
+});
+
+export const ReactSwalNormal = ReactSwalTemp.mixin({
+
+});
+
+export const ReactSwalDanger = ReactSwalTemp.mixin({
+    confirmButtonClass: "swal-btn btn-danger"
+});

ui/scss/customizations/sweetalert.scss

@@ -0,0 +1,72 @@
+.swal-btn {
+    @extend .btn;
+
+    margin: 0 .3125em;
+    padding: .625em 2em;
+}
+
+.swal-design {
+    border-radius: 0;
+}
+
+/*.swal2-popup .swal2-actions.swal2-loading .swal2-confirm {
+    width: 2.5em;
+    height: 2.5em;
+    margin: .46875em;
+    padding: 0;
+    border: .25em solid transparent;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+    border-radius: 100%;
+    border-color: transparent;
+    border-right-color: transparent;
+    border-left-color: transparent;
+    background-color: transparent !important;
+    color: transparent;
+    cursor: default;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
+    animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}*/
+
+.swal2-popup .swal2-actions.swal2-loading {
+    .swal2-confirm {
+        width: 2.5em;
+        height: 2.5em;
+        margin: .46875em;
+        padding: 0;
+        border-radius: 100%;
+        background-color: transparent !important;
+        color: transparent;
+        cursor: default;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
+        animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+        background-color: rgb(221, 107, 85);
+        border: .25em solid transparent;
+        border-right-color: rgb(221, 107, 85);
+        border-left-color: rgb(221, 107, 85);
+        display: flex;
+    }
+
+    :not(.swal2-styled).swal2-confirm::after {
+        display: none;
+    }
+}
+
+//.swal2-popup .swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::after {
+//    display: none;
+//}