Merge pull request #106 from Focuslinkstech/Development

Update: SweetAlert Introduction

ui/ui/register-otp.tpl

@@ -9,6 +9,9 @@
 
     <link rel="stylesheet" href="ui/ui/styles/bootstrap.min.css">
     <link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css">
+    <link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
+    <script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
+    
     
 
 </head>
@@ -23,12 +26,22 @@
             <hr>
         </div>
         {if isset($notify)}
-            <div class="alert alert-{if $notify_t == 's'}success{else}danger{/if}">
-                <button type="button" class="close" data-dismiss="alert">
-                    <span aria-hidden="true">×</span>
-                </button>
-                <div>{$notify}</div>
-            </div>
+        <script>
+            // Display SweetAlert toast notification
+            Swal.fire({
+                icon: '{if $notify_t == "s"}success{else}warning{/if}',
+                title: '{$notify}',
+                toast: true,
+                position: 'top-end',
+                showConfirmButton: false,
+                timer: 5000,
+                timerProgressBar: true,
+                didOpen: (toast) => {
+                    toast.addEventListener('mouseenter', Swal.stopTimer)
+                    toast.addEventListener('mouseleave', Swal.resumeTimer)
+                }
+            });
+        </script>
         {/if}
         <div class="row">
             <div class="col-md-4">

ui/ui/register-rotp.tpl

@@ -9,6 +9,9 @@
 
     <link rel="stylesheet" href="ui/ui/styles/bootstrap.min.css">
     <link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css">
+    <link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
+    <script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
+    
     
 
 </head>
@@ -22,12 +25,22 @@
             <hr>
         </div>
         {if isset($notify)}
-            <div class="alert alert-{if $notify_t == 's'}success{else}danger{/if}">
-                <button type="button" class="close" data-dismiss="alert">
-                    <span aria-hidden="true">×</span>
-                </button>
-                <div>{$notify}</div>
-            </div>
+        <script>
+            // Display SweetAlert toast notification
+            Swal.fire({
+                icon: '{if $notify_t == "s"}success{else}warning{/if}',
+                title: '{$notify}',
+                toast: true,
+                position: 'top-end',
+                showConfirmButton: false,
+                timer: 5000,
+                timerProgressBar: true,
+                didOpen: (toast) => {
+                    toast.addEventListener('mouseenter', Swal.stopTimer)
+                    toast.addEventListener('mouseleave', Swal.resumeTimer)
+                }
+            });
+        </script>
         {/if}
         <div class="row">
             <div class="col-md-2">

ui/ui/register.tpl

@@ -9,6 +9,9 @@
 
     <link rel="stylesheet" href="ui/ui/styles/bootstrap.min.css">
     <link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css">
+    <link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
+    <script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
+    
     
 
 </head>
@@ -23,12 +26,22 @@
             <hr>
         </div>
         {if isset($notify)}
-            <div class="alert alert-{if $notify_t == 's'}success{else}danger{/if}">
-                <button type="button" class="close" data-dismiss="alert">
-                    <span aria-hidden="true">×</span>
-                </button>
-                <div>{$notify}</div>
-            </div>
+        <script>
+            // Display SweetAlert toast notification
+            Swal.fire({
+                icon: '{if $notify_t == "s"}success{else}warning{/if}',
+                title: '{$notify}',
+                toast: true,
+                position: 'top-end',
+                showConfirmButton: false,
+                timer: 5000,
+                timerProgressBar: true,
+                didOpen: (toast) => {
+                    toast.addEventListener('mouseenter', Swal.stopTimer)
+                    toast.addEventListener('mouseleave', Swal.resumeTimer)
+                }
+            });
+        </script>
         {/if}
         <div class="row">
             <div class="col-md-4">

ui/ui/sections/header.tpl

@@ -15,6 +15,8 @@
     <link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css">
     <link rel="stylesheet" href="ui/ui/styles/select2.min.css" />
     <link rel="stylesheet" href="ui/ui/styles/select2-bootstrap.min.css" />
+    <link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
+    <script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
     <style>
         ::-moz-selection {
             /* Code for Firefox */
@@ -332,10 +334,20 @@
 
             <section class="content">
                 {if isset($notify)}
-                    <div class="alert alert-{if $notify_t == 's'}success{else}danger{/if}">
-                        <button type="button" class="close" data-dismiss="alert">
-                            <span aria-hidden="true">×</span>
-                        </button>
-                        <div>{$notify}</div>
-                    </div>
-{/if}
+                <script>
+                    // Display SweetAlert toast notification
+                    Swal.fire({
+                        icon: '{if $notify_t == "s"}success{else}error{/if}',
+                        title: '{$notify}',
+                        toast: true,
+                        position: 'top-end',
+                        showConfirmButton: false,
+                        timer: 5000,
+                        timerProgressBar: true,
+                        didOpen: (toast) => {
+                            toast.addEventListener('mouseenter', Swal.stopTimer)
+                            toast.addEventListener('mouseleave', Swal.resumeTimer)
+                        }
+                    });
+                </script>
+                {/if}

ui/ui/sections/user-header.tpl

@@ -12,7 +12,9 @@
     <link rel="stylesheet" href="ui/ui/fonts/ionicons/css/ionicons.min.css">
     <link rel="stylesheet" href="ui/ui/fonts/font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="ui/ui/fonts/MaterialDesign/css/materialdesignicons.min.css">
-<link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css"> 
+    <link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css"> 
+    <link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
+    <script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
     
 
     <style>
@@ -165,11 +167,22 @@
             </section>
             <section class="content">
 
-{if isset($notify)}
-<div class="alert alert-{if $notify_t == 's'}success{else}danger{/if}">
-    <button type="button" class="close" data-dismiss="alert">
-    <span aria-hidden="true">×</span>
-    </button>
-    <div>{$notify}</div>
-</div>
-{/if}
+
+                {if isset($notify)}
+                <script>
+                    // Display SweetAlert toast notification
+                    Swal.fire({
+                        icon: '{if $notify_t == "s"}success{else}warning{/if}',
+                        title: '{$notify}',
+                        toast: true,
+                        position: 'top-end',
+                        showConfirmButton: false,
+                        timer: 5000,
+                        timerProgressBar: true,
+                        didOpen: (toast) => {
+                            toast.addEventListener('mouseenter', Swal.stopTimer)
+                            toast.addEventListener('mouseleave', Swal.resumeTimer)
+                        }
+                    });
+                </script>
+                {/if}