v0.2.0 - Added CRUD for user

Backend/controller/createUser.php

@@ -1,18 +1,16 @@
 <?php
 //require our bootstrap file for database connection
+session_start();
 require "../../bootstrap.php";
 
 use Backend\Model\User;
 
-//if(isset($_SESSION['permission'])){
+if(isset($_SESSION['permission'])){
     $user  = new User();
     $user->name = $_POST['name'];
     $hashPass = password_hash($_POST['password'], PASSWORD_DEFAULT);
     $user->password = $hashPass;
 
-    if(!$user->save()){
+    if($user->save())
-        echo "Error";
+        echo $user->id;
-    }else{
+}
-        echo "saved";
-    }
-//}

Backend/controller/getUser.php

@@ -1,4 +1,5 @@
 <?php
+session_start();
 require "../../bootstrap.php";
 
 use Backend\Model\User;
@@ -9,7 +10,7 @@ if(isset($_POST['id']))
     $data = User::find($_POST['id']);
 else
     $data = User::all('id', 'name');
-echo $data;
+echo json_encode(array($data, $_SESSION['id']));
 
 
 

Backend/controller/login.php

@@ -18,6 +18,7 @@ if (isset($_POST['loginsubmit'])) {
             if ($password->save()) {
                 $_SESSION['token'] = $token;
                 $_SESSION['name'] = $username;
+                $_SESSION['id'] = $user->id;
                 if($user->permission === 1){
                     $_SESSION['permission'] = $token;
                 }

Backend/controller/updateUser.php

@@ -1,10 +1,10 @@
 <?php
-
+session_start();
 require "../../bootstrap.php";
 
 use Backend\Model\User;
 
-if(isset($_POST['id'])){
+if(isset($_SESSION['permission'])){
     $user = User::query()->find($_POST['id']);
 
 

Backend/migrations/seedUser.php

@@ -1,5 +1,5 @@
 <?php
 require "../../bootstrap.php";
 use Backend\Model\User;
-$createUser = User::Create(['name' => "admin", 'password' => password_hash('aA123456&', PASSWORD_DEFAULT), 'permission' => 0]);
+$createUser = User::Create(['name' => "admin", 'password' => password_hash('aA123456&', PASSWORD_DEFAULT), 'permission' => 1]);
 echo "User was created";

Frontend/Assets/Ajax/createPost.js

@@ -16,7 +16,7 @@ function createPost(title, desc) {
                 title,
                 '<a class="w-1em" onclick="editPost('+ data[0] + ')"><img src="Assets/Images/Icons/pencil-dark.svg" alt="Edit"></a>',
                 '<a class="w-1em" onClick="deletePostSwal(' + data[0] + ')"><img src="Assets/Images/Icons/trashcan-dark.svg" alt="Delete"></a>'
-            ]).draw().node().id = '1234';
+            ]).draw().node().id = data[0];
         },
         error: function (data) {
             console.log("error");

Frontend/Assets/Ajax/createUser.js

@@ -0,0 +1,26 @@
+function createUser(name, pass) {
+    var data = {
+        name: name,
+        password: pass,
+    };
+
+    $.ajax({
+        url: '../Backend/controller/createUser.php',
+        type: 'POST',
+        dataType: 'json',
+        data: data,
+        success: function (data) {
+            $('#table_id_users').DataTable().row.add([
+                name,
+                '<a class="w-1em" onclick="editUser('+ data + ')"><img src="Assets/Images/Icons/pencil-dark.svg" alt="Edit"></a>',
+                '<a class="w-1em" onClick="deleteUserSwal(' + data + ')"><img src="Assets/Images/Icons/trashcan-dark.svg" alt="Delete"></a>'
+            ]).draw().node().id = data;
+        },
+        error: function (data) {
+            console.log("error");
+            console.log(data);
+            console.log("error");
+        }
+    });
+
+}

Frontend/Assets/Ajax/deleteUser.js

@@ -0,0 +1,23 @@
+function deleteUser(id) {
+    return $.ajax({
+        type: 'POST',
+        url: '../Backend/controller/deleteUser.php',
+        data: {'delete_id':id},
+        success:function (data) {
+            Swal.fire(
+                'Brugeren er slettet!',
+                '',
+                'success'
+            ).then(function() {
+                $('#table_id_users').DataTable().row($('#'+id)[0]).remove().draw();
+            });
+        },
+        error:function (data) {
+            Swal.fire(
+                'Brugeren kunne ikke blive slettet',
+                '',
+                'error'
+            )
+        }
+    });
+}

Frontend/Assets/Ajax/editUser.js

@@ -0,0 +1,59 @@
+function editUser(id) {
+    $.ajax({
+        type: 'POST',
+        url: '../Backend/controller/getUser.php',
+        data: { id: id },
+        success:function (data) {
+            Swal.fire({
+                title: 'Rediger Bruger',
+                html: '<label class="col-md-12 col-form-label text-md-right">Lad password forbliv blank, hvis det ikke skal ændres</label><div class="form-group row mb-4 justify-content-center"><label for="name" class="col-md-3 col-form-label text-md-right">Navn</label><div class="col-md-9"><input type="text" class="form-control" id="name" name="name" value="' + data[0].name + '" maxlength="255" required autofocus></div></div><div class="form-group row mb-4 justify-content-center"><label for="title" class="col-md-3 col-form-label text-md-right">Password</label><div class="col-md-9"><input type="password" class="form-control" id="password" name="password" maxlength="255" required autofocus></div></div><div class="form-group row mb-4 justify-content-center"><label for="title" class="col-md-3 col-form-label text-md-right">Confirm Password</label><div class="col-md-9"><input type="password" class="form-control" id="confirmPassword" name="confirmPassword" maxlength="255" required autofocus></div></div>',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Rediger',
+                focusConfirm: false,
+                preConfirm: () => {
+                    const name = Swal.getPopup().querySelector('#name').value
+                    const pass = Swal.getPopup().querySelector('#password').value
+                    const conpass = Swal.getPopup().querySelector('#confirmPassword').value
+                    if (!name) {
+                        Swal.showValidationMessage(`Brugeren skal have et navn!`)
+                    } else if (pass != conpass) {
+                        Swal.showValidationMessage(`Password er ikke ens!`)
+                    } else {
+                        data.name = name;
+                        data.password = pass;
+                    }
+                    return {name: name, pass: pass, conpass: conpass}
+                }
+            }).then((result) => {
+                if (result.isConfirmed)
+                $.ajax({
+                    type: 'POST',
+                    url: '../Backend/controller/updateUser.php',
+                    data: {'id':id, 'upName': data.name, 'upPassword': data.password},
+                    success:function () {
+                        Swal.fire(
+                            'Brugeren er redigeret!',
+                            '',
+                            'success'
+                        ).then(function() {
+                            document.getElementById(id).children[0].innerHTML = data.name;
+                        })
+                    },
+                    error:function (data) {
+                        Swal.fire(
+                            'Brugeren kunne ikke blive redigeret',
+                            '',
+                            'error'
+                        )
+                    }
+                });
+            })
+        },
+        error:function (data) {
+            console.log(data);
+        }
+    });
+    /**/
+}

Frontend/Assets/Ajax/fetchAndDisplayData.js

@@ -12,11 +12,21 @@ $(document).ready(function() {
         ],
     });
 
+    var tableUser = $('#table_id_users').DataTable({
+        fixedHeader: true,
+        columnDefs: [
+            {
+                "targets": "w-1em",
+                orderable: false,
+                "searchable": false,
+            }
+        ],
+    });
+
     $.ajax({
         type: 'POST',
         url: '../Backend/controller/getPost.php',
         success:function (data) {
-            console.log(data);
             for (let i = 0; i < data.length; i++){
                 var d = new Date(data[i].created_at);
 
@@ -32,4 +42,29 @@ $(document).ready(function() {
             console.log(data);
         }
     });
+
+    $.ajax({
+        type: 'POST',
+        url: '../Backend/controller/getUser.php',
+        success:function (data) {
+            for (let i = 0; i < data[0].length; i++){
+                if (data[0][i].id != data[1]) {
+                    tableUser.row.add([
+                        data[0][i].name,
+                        '<a class="w-1em" onclick="editUser(' + data[0][i].id + ')"><img src="Assets/Images/Icons/pencil-dark.svg" alt="Edit"></a>',
+                        '<a class="w-1em" onClick="deleteUserSwal(' + data[0][i].id + ')"><img src="Assets/Images/Icons/trashcan-dark.svg" alt="Delete"></a>'
+                    ]).draw().node().id = data[0][i].id;
+                } else {
+                    tableUser.row.add([
+                        data[0][i].name,
+                        '<a class="w-1em" onclick="editUser(' + data[0][i].id + ')"><img src="Assets/Images/Icons/pencil-dark.svg" alt="Edit"></a>',
+                        ''
+                    ]).draw().node().id = data[0][i].id;
+                }
+            }
+        },
+        error:function (data) {
+            console.log(data);
+        }
+    });
 });

Frontend/admin.php

@@ -82,7 +82,7 @@ use Backend\Model\Post;
                 </div>
             </nav>
         </div>
-        <div class="row pt-4">
+        <div class="row pt-4 pb-4">
             <div class="col">
                 <button class="btn btn-success mb-5" onclick="createPostSwal()">Opret Post</button>
                 <table class="pt-2" id="table_id">
@@ -97,18 +97,46 @@ use Backend\Model\Post;
                 </table>
             </div>
         </div>
+        <?php
+            if (isset($_SESSION['permission'])) {
+        ?>
+            <div class="row pt-4">
+                <div class="col">
+                    <button class="btn btn-success mb-5" onclick="createUserSwal()">Opret Bruger</button>
+                    <table class="pt-2" id="table_id_users">
+                        <thead>
+                        <th>Navn</th>
+                        <th class="w-1em"><img src="Assets/Images/Icons/pencil-dark.svg" alt="Edit"></th>
+                        <th class="w-1em"><img src="Assets/Images/Icons/trashcan-dark.svg" alt="Delete"></th>
+                        </thead>
+                        <tbody id="dis_users">
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        <?php
+            }
+        ?>
     </div>
 
+<script>
+    $(document).ready(function() {
+       var id = <?php echo $_SESSION['id']; ?>
+    });
+</script>
 <script src="Assets/Ajax/fetchAndDisplayData.js"></script>
 <script src="Assets/Ajax/deletePost.js"></script>
 <script src="Assets/Ajax/createPost.js"></script>
 <script src="Assets/Ajax/editPost.js"></script>
+<script src="Assets/Ajax/createUser.js"></script>
+<script src="Assets/Ajax/deleteUser.js"></script>
+<script src="Assets/Ajax/editUser.js"></script>
 <script>
 
     function createPostSwal() {
         Swal.fire({
             title: 'Opret Post',
-            html: '<div class="form-group row mb-4 justify-content-center"><label for="title" class="col-md-12 col-form-label text-md-right">Titel</label><div class="col-md-9"><input type="text" class="form-control" id="title" name="title" maxlength="255" required autofocus></div></div><div class="form-group row mb-4 justify-content-center"><label for="title" class="col-md-12 col-form-label text-md-right">Beskrivelse</label><div class="col-md-9"><textarea type="text" class="form-control" id="description" name="description" maxlength="2000" required autofocus>',
+            html: '<div class="form-group row mb-4 justify-content-center"><label for="title" class="col-md-12 col-form-label text-md-right">Titel</label><div class="col-md-9"><input type="text" class="form-control" id="title" name="title" maxlength="255" required autofocus></div></div><div class="form-group row mb-4 justify-content-center"><label for="description" class="col-md-12 col-form-label text-md-right">Beskrivelse</label><div class="col-md-9"><textarea type="text" class="form-control" id="description" name="description" maxlength="2000" required autofocus></textarea></div></div>',
             showCancelButton: true,
             confirmButtonColor: '#3085d6',
             cancelButtonColor: '#d33',
@@ -127,6 +155,31 @@ use Backend\Model\Post;
         })
     }
 
+    function createUserSwal() {
+        Swal.fire({
+            title: 'Opret Post',
+            html: '<div class="form-group row mb-4 justify-content-center"><label for="name" class="col-md-3 col-form-label text-md-right">Navn</label><div class="col-md-9"><input type="text" class="form-control" id="name" name="name" maxlength="255" required autofocus></div></div><div class="form-group row mb-4 justify-content-center"><label for="title" class="col-md-3 col-form-label text-md-right">Password</label><div class="col-md-9"><input type="password" class="form-control" id="password" name="password" maxlength="255" required autofocus></div></div><div class="form-group row mb-4 justify-content-center"><label for="title" class="col-md-3 col-form-label text-md-right">Confirm Password</label><div class="col-md-9"><input type="password" class="form-control" id="confirmPassword" name="confirmPassword" maxlength="255" required autofocus></div></div>',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Opret',
+            focusConfirm: false,
+            preConfirm: () => {
+                const name = Swal.getPopup().querySelector('#name').value
+                const pass = Swal.getPopup().querySelector('#password').value
+                const conpass = Swal.getPopup().querySelector('#confirmPassword').value
+                if (!name || !pass || !conpass) {
+                    Swal.showValidationMessage(`Skriv noget i alle felter!`)
+                } else if (pass != conpass) {
+                    Swal.showValidationMessage(`Password er ikke ens!`)
+                }
+                return {name: name, pass: pass, conpass: conpass}
+            }
+        }).then((result) => {
+            createUser(result.value.name.trim(), result.value.pass.trim());
+        })
+    }
+
     function deletePostSwal(id) {
         Swal.fire({
         title: 'Er du sikker?',
@@ -137,11 +190,28 @@ use Backend\Model\Post;
         cancelButtonColor: '#d33',
         confirmButtonText: 'Slet Post',
         cancelButtonText: 'Annuller'
-    }).then((result) => {
+        }).then((result) => {
-        if (result.isConfirmed) {
+            if (result.isConfirmed) {
-            deletePost(id);
+                deletePost(id);
-        }
+            }
-    })
+        })
+    }
+
+    function deleteUserSwal(id) {
+        Swal.fire({
+            title: 'Er du sikker?',
+            text: "Dette kan ikke blive ændret tilbage!",
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Slet Bruger',
+            cancelButtonText: 'Annuller'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                deleteUser(id);
+            }
+        })
     }
 </script>