Create DeleteUserButton component and show it in settings

Author: range-of-motion

app/Http/Controllers/SettingsController.php

@@ -94,6 +94,13 @@ public function getAccount()
         return view('settings.account');
     }
 
+    public function postAccountDelete()
+    {
+        // TODO DELETE
+
+        return redirect()->route('login');
+    }
+
     public function getSpaces()
     {
         return view('settings.spaces.index', [

resources/assets/js/app.js

@@ -6,6 +6,7 @@ import { Chrome } from 'vue-color';
 import ButtonDropdown from './components/ButtonDropdown.vue';
 import DatePicker from './components/DatePicker.vue';
 import BarChart from './components/BarChart.vue';
+import DeleteUserButton from './components/DeleteUserButton.vue';
 import Dropdown from './components/Dropdown.vue';
 import TransactionWizard from './components/TransactionWizard.vue';
 import ValidationError from './components/ValidationError.vue';
@@ -21,6 +22,7 @@ Vue.component('button-dropdown', ButtonDropdown);
 Vue.component('datepicker', DatePicker); // TODO DEPRECATE
 Vue.component('date-picker', DatePicker);
 Vue.component('barchart', BarChart);
+Vue.component('delete-user-button', DeleteUserButton);
 Vue.component('dropdown', Dropdown);
 Vue.component('transaction-wizard', TransactionWizard);
 Vue.component('validation-error', ValidationError);

resources/assets/js/components/DeleteUserButton.vue

@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <button
+            class="button link button--link-danger"
+            @click.prevent="showWarning">Delete</button>
+        <div
+            v-if="warningShown"
+            style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.50); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);"
+            @click.self="hideWarning">
+            <div style="margin: 50px auto; max-width: 500px; padding: 20px; background: #FFF; border-radius: 5px;">
+                <div>Are you sure you want to delete your user? This is irreversible.</div>
+                <div class="row mt-2">
+                    <form method="POST" action="/settings/account/delete">
+                        <input
+                            type="hidden"
+                            name="_token"
+                            :value="csrfToken" />
+                        <button class="button button--danger mr-2">Yes, I am sure</button>
+                    </form>
+                    <button
+                        class="button button--light"
+                        @click="hideWarning">No</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: [
+        'csrfToken'
+    ],
+
+    data() {
+        return {
+            warningShown: false
+        };
+    },
+
+    methods: {
+        showWarning() {
+            this.warningShown = true;
+        },
+
+        hideWarning() {
+            this.warningShown = false;
+        },
+
+        doIt() {
+            // axios.
+        }
+    }
+};
+</script>

resources/assets/sass/components/input.scss

@@ -140,10 +140,26 @@ button.button {
         background: none;
     }
 
+    &.button--link-danger {
+        padding: 0;
+        font-size: 16px;
+        color: $colors-red;
+        background: none;
+    }
+
     &.button--wide {
         padding: 12.5px 20px;
         width: 100%;
     }
+
+    &.button--light {
+        background: #EEE;
+        color: #000;
+    }
+
+    &.button--danger {
+        background: $colors-red;
+    }
 }
 
 .button, .button-dropdown {

resources/views/settings/account.blade.php

@@ -27,3 +27,9 @@
         </div>
     </div>
 @endsection
+
+@section('settings_body_formless')
+    <delete-user-button
+        class="mt-2"
+        csrf-token="{{ csrf_token() }}"></delete-user-button>
+@endsection

routes/web.php

@@ -120,6 +120,7 @@
         Route::post('/settings', [SettingsController::class, 'postIndex']);
         Route::get('/settings/profile', [SettingsController::class, 'getProfile'])->name('profile');
         Route::get('/settings/account', [SettingsController::class, 'getAccount'])->name('account');
+        Route::post('/settings/account/delete', [SettingsController::class, 'postAccountDelete'])->name('account.delete');
         Route::get('/settings/preferences', [SettingsController::class, 'getPreferences'])->name('preferences');
         Route::get('/settings/billing', [SettingsController::class, 'getBilling'])->name('billing')->middleware('stripe');
         Route::post('/settings/billing/upgrade', [SettingsController::class, 'postUpgrade'])->name('billing.upgrade')->middleware('stripe');