User edit and delete

app/resources/routes/api/admin/users.php

@@ -2,5 +2,9 @@
 use Incoviba\Controller\API\Admin\Users;
 
 $app->group('/users', function($app) {
-    $app->post('/add[/]', Users::class . ':add');
+    $app->post('/add[/]', [Users::class, 'add']);
+});
+$app->group('/user/{user_id}', function($app) {
+    $app->post('/edit[/]', [Users::class, 'edit']);
+    $app->delete('[/]', [Users::class, 'delete']);
 });

app/resources/views/admin/users.blade.php

@@ -14,15 +14,15 @@
                 </th>
             </tr>
             </thead>
-            <tbody>
+            <tbody id="users">
             @foreach($users as $user)
-                <tr>
+                <tr data-user="{{ $user->id }}">
                     <td>{{ $user->name }}</td>
                     <td class="right aligned">
-                        <button class="ui mini blue icon button">
+                        <button class="ui mini blue icon button edit" data-user="{{ $user->id }}">
                             <i class="edit icon"></i>
                         </button>
-                        <button class="ui mini red icon button">
+                        <button class="ui mini red icon button remove" data-user="{{ $user->id }}">
                             <i class="trash icon"></i>
                         </button>
                     </td>
@@ -50,6 +50,10 @@
                     <label>Contraseña</label>
                     <input type="password" name="password" placeholder="Contraseña">
                 </div>
+                <div class="field">
+                    <label>Confirmar contraseña</label>
+                    <input type="password" name="password_confirmation" placeholder="Confirmar contraseña">
+                </div>
             </form>
         </div>
         <div class="actions">
@@ -62,6 +66,45 @@
             </div>
         </div>
     </div>
+    <div class="ui modal" id="edit-user-modal">
+        <i class="close icon"></i>
+        <div class="header">
+            Editar usuario
+        </div>
+        <div class="content">
+            <form class="ui form">
+                <input type="hidden" name="id" />
+                <div class="field">
+                    <label>Contraseña Antigua</label>
+                    <input type="password" name="old_password" placeholder="Contraseña Antigua">
+                </div>
+                <div class="field">
+                    <label>Force Change?</label>
+                    <div class="ui checkbox">
+                        <input type="checkbox" name="force" >
+                        <label>Yes</label>
+                    </div>
+                </div>
+                <div class="field">
+                    <label>Contraseña</label>
+                    <input type="password" name="password" placeholder="Contraseña">
+                </div>
+                <div class="field">
+                    <label>Confirmar contraseña</label>
+                    <input type="password" name="password_confirmation" placeholder="Confirmar contraseña">
+                </div>
+            </form>
+        </div>
+        <div class="actions">
+            <div class="ui black deny button">
+                Cancelar
+            </div>
+            <div class="ui positive right labeled icon button">
+                Guardar
+                <i class="checkmark icon"></i>
+            </div>
+        </div>
+    </div>
 @endsection
 
 @include('layout.body.scripts.cryptojs')
@@ -74,12 +117,20 @@
             return [passphrase, encrypted.toString()].join('')
         }
         $(document).ready(function () {
-            $('#create-user-modal').modal({
+            const $createUserModal = $('#create-user-modal')
+            $createUserModal.modal({
                 onApprove: function() {
+                    const form = document.querySelector('#create-user-modal form')
+                    const password = form.querySelector('[name="password"]').value
+                    const password_confirmation = form.querySelector('[name="password_confirmation"]').value
+                    if (password !== password_confirmation) {
+                        alert('Las contraseñas no coinciden')
+                        return
+                    }
                     const url = '{{$urls->api}}/admin/users/add'
                     const method = 'post'
-                    const body = new FormData(document.querySelector('#create-user-modal form'))
+                    const body = new FormData(form)
-                    body.set('password', encryptPassword(body.get('password')))
+                    body.set('password', encryptPassword(password))
                     fetchAPI(url, {method, body}).then(response => {
                         if (!response) {
                             return;
@@ -92,8 +143,64 @@
                     })
                 }
             })
-            $('#create-user-button').on('click', function () {
+            const $editUserModal = $('#edit-user-modal')
-                $('#create-user-modal').modal('show')
+            $editUserModal.modal({
+                onApprove: function() {
+                    const form = document.querySelector('#edit-user-modal form')
+                    const user_id = form.querySelector('[name="id"]').value
+                    const old_password = form.querySelector('[name="old_password"]').value
+                    const password = form.querySelector('[name="password"]').value
+                    const password_confirmation = form.querySelector('[name="password_confirmation"]').value
+                    if (password !== password_confirmation) {
+                        alert('Las nuevas contraseñas no coinciden')
+                        return
+                    }
+                    const url = `{{$urls->api}}/admin/user/${user_id}/edit`
+                    const method = 'post'
+                    const body = new FormData(form)
+                    body.set('old_password', encryptPassword(old_password))
+                    body.set('password', encryptPassword(password))
+                    if (form.querySelector('[name="force"]').checked) {
+                        body.set('force', 'true')
+                    }
+                    fetchAPI(url, {method, body}).then(response => {
+                        if (!response) {
+                            return;
+                        }
+                        response.json().then(result => {
+                            if (result.success) {
+                                location.reload()
+                            }
+                        })
+                    })
+                }
+            })
+            document.getElementById('create-user-modal').addEventListener('submit', event => {
+                $createUserModal.modal('show')
+            })
+            document.querySelectorAll('.button.edit').forEach(button => {
+                button.addEventListener('click', clickEvent => {
+                    const user_id = clickEvent.currentTarget.dataset.user
+                    $editUserModal.find('input[name="id"]').val(user_id)
+                    $editUserModal.modal('show')
+                })
+            })
+            document.querySelectorAll('.button.remove').forEach(button => {
+                button.addEventListener('click', clickEvent => {
+                    const user_id = clickEvent.currentTarget.dataset.user
+                    const url = `{{$urls->api}}/admin/user/${user_id}`
+                    const method = 'delete'
+                    fetchAPI(url, {method}).then(response => {
+                        if (!response) {
+                            return;
+                        }
+                        response.json().then(result => {
+                            if (result.success) {
+                                location.reload()
+                            }
+                        })
+                    })
+                })
             })
         });
     </script>