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

@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">Usuarios</h2>
        <table class="ui table">
            <thead>
            <tr>
                <th>Nombre</th>
                <th class="right aligned">
                    <button class="ui mini green icon button" id="create-user-button">
                        <i class="plus icon"></i>
                    </button>
                </th>
            </tr>
            </thead>
            <tbody id="users">
            @foreach($users as $user)
                <tr data-user="{{ $user->id }}">
                    <td>{{ $user->name }}</td>
                    <td class="right aligned">
                        <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 remove" data-user="{{ $user->id }}">
                            <i class="trash icon"></i>
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    <div class="ui modal" id="create-user-modal">
        <i class="close icon"></i>
        <div class="header">
            Crear usuario
        </div>
        <div class="content">
            <form class="ui form">
                <div class="field">
                    <label>Nombre</label>
                    <input type="text" name="name" placeholder="Nombre">
                </div>
                <div class="field">
                    <label>Correo</label>
                    <input type="email" name="email" placeholder="Correo">
                </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">
                Crear
                <i class="checkmark icon"></i>
            </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')

@push('page_scripts')
    <script>
        function encryptPassword(password) {
            const passphrase = Math.floor(Math.random() * Date.now()).toString()
            const encrypted = CryptoJS.AES.encrypt(password, passphrase)
            return [passphrase, encrypted.toString()].join('')
        }
        $(document).ready(function () {
            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(form)
                    body.set('password', encryptPassword(password))
                    fetchAPI(url, {method, body}).then(response => {
                        if (!response) {
                            return;
                        }
                        response.json().then(result => {
                            if (result.success) {
                                location.reload()
                            }
                        })
                    })
                }
            })
            const $editUserModal = $('#edit-user-modal')
            $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>
@endpush