made entire accounts section dynamic

app/Controllers/Settings/AccountController.php

@@ -245,29 +245,26 @@ class AccountController extends Controller
         ];
 
         if (session_check() && $rank && $mode) {
-            $redirect = route('settings.account.ranks');
-
             // Check if user has this rank
             if (!CurrentSession::$user->hasRanks([$rank])) {
-                $message = "You aren't a part of this rank!";
-                return view('global/information', compact('redirect', 'message'));
+                return $this->json(['error' => "You aren't a part of this rank!"]);
             }
 
-            if ($mode == 'remove') {
+            switch ($mode) {
+                case 'remove':
                     if (in_array($rank, $locked)) {
-                    $message = "You aren't allowed to remove this rank from your account!";
-                    return view('global/information', compact('redirect', 'message'));
+                        return $this->json(['error' => "You aren't allowed to remove this rank from your account!"]);
                     }
 
                     CurrentSession::$user->removeRanks([$rank]);
+                    break;
 
-                $message = "Removed the rank from your account!";
-                return view('global/information', compact('redirect', 'message'));
+                case 'main':
+                    CurrentSession::$user->setMainRank($rank);
+                    break;
             }
 
-            CurrentSession::$user->setMainRank($rank);
-
-            return redirect($redirect);
+            return $this->json(['error' => null]);
         }
 
         return view('settings/account/ranks', compact('locked'));
@@ -287,21 +284,17 @@ class AccountController extends Controller
         $maxLength = config('user.page_max');
 
         if (session_check() && $userpage) {
-            $redirect = route('settings.account.userpage');
-
             if (strlen($userpage) > $maxLength) {
-                $message = 'Your userpage is too long, shorten it a little!';
-            } else {
+                return $this->json(['error' => 'Your userpage is too long, shorten it a little!']);
+            }
+
             DB::table('users')
                 ->where('user_id', CurrentSession::$user->id)
                 ->update([
                     'user_page' => $userpage,
                 ]);
 
-                $message = 'Updated your userpage!';
-            }
-
-            return view('global/information', compact('message', 'redirect'));
+            return $this->json(['error' => null]);
         }
 
         return view('settings/account/userpage', compact('maxLength'));
@@ -322,21 +315,17 @@ class AccountController extends Controller
         $maxLength = config('user.signature_max');
 
         if (session_check() && $signature) {
-            $redirect = route('settings.account.signature');
-
             if (strlen($signature) > $maxLength) {
-                $message = 'Your signature is too long, shorten it a little!';
-            } else {
+                return $this->json(['error' => 'Your signature is too long, shorten it a little!']);
+            }
+
             DB::table('users')
                 ->where('user_id', CurrentSession::$user->id)
                 ->update([
                     'user_signature' => $signature,
                 ]);
 
-                $message = 'Updated your signature!';
-            }
-
-            return view('global/information', compact('message', 'redirect'));
+            return $this->json(['error' => null]);
         }
 
         return view('settings/account/signature', compact('maxLength'));

resources/assets/less/yuuno/bem/friend-box.less

@@ -13,11 +13,14 @@
 
     &__container {
         display: block;
+        width: 100%;
+        height: 100%;
         text-decoration: none !important;
         color: #000;
         margin: 5px auto;
         background-color: transparent;
         border: 0;
+        cursor: pointer;
 
         &:active {
             color: inherit;
@@ -61,6 +64,7 @@
         background-color: transparent;
         border: 0;
         transition: color .2s;
+        cursor: pointer;
 
         &:hover {
             color: #333;

resources/views/yuuno/settings/account/_preview.twig

@@ -5,7 +5,7 @@
         preview = document.getElementById("settingsPreview");
 
     parser.SetUrl("{{ route('helper.bbcode.parse') }}");
-    parser.ContentType("application/x-www-form-urlencoded");
+    parser.Form();
 
     function settingsPreview() {
         var text = form.value;

resources/views/yuuno/settings/account/details.twig

@@ -8,6 +8,7 @@
 
 {% block settingsContent %}
     <form enctype="multipart/form-data" method="post" action="javascript:;" onsubmit="updateSettingsConfirm(this, '{{ route('settings.account.details') }}');">
+        <input type="hidden" name="session" value="{{ session_id() }}">
         <div class="profile-field">
             <div><h2>E-mail address</h2></div>
             <div><input type="text" name="email" placeholder="{{ user.email }}" class="input__text"></div>
@@ -28,7 +29,7 @@
             <div><h2>Password</h2></div>
             <div><input type="password" name="password" placeholder="Must be at least decently strong, size doesn't matter" class="input__text"></div>
         </div>
-        <button value="{{ session_id() }}" name="session" class="input__button">Save</button>
+        <button class="input__button">Save</button>
         <button type="reset" class="input__button">Reset</button>
     </form>
 {% endblock %}

resources/views/yuuno/settings/account/profile.twig

@@ -91,6 +91,7 @@
 
 {% block settingsContent %}
     <form enctype="multipart/form-data" method="post" action="javascript:;" onsubmit="updateSettings(this, '{{ route('settings.account.profile') }}');">
+        <input type="hidden" name="session" value="{{ session_id() }}">
         {% for id, vars in fields %}
             <div class="profile-field {{ id }}">
                 <div>
@@ -141,7 +142,7 @@
                 </label>
             </div>
         </div>
-        <button name="session" value="{{ session_id() }}" class="input__button">Save</button>
+        <button class="input__button">Save</button>
         <button type="reset" class="input__button">Reset</button>
     </form>
 {% endblock %}

resources/views/yuuno/settings/account/ranks.twig

@@ -6,19 +6,100 @@
     <p>Manage what ranks you're in and what is set as your main rank. Your main rank is highlighted. You get the permissions of all of the ranks you're in combined.</p>
 {% endblock %}
 
+{% block js %}
+    <script>
+        function yuunoRankProtected() {
+            var confirm = new Sakura.Dialogue;
+
+            confirm.Title = "Ranks";
+            confirm.Text = "You aren't allowed to remove this rank from your account!";
+
+            confirm.AddCallback(Sakura.DialogueButton.Ok, function () {
+                this.Close();
+            });
+
+            confirm.Display();
+        }
+
+        function yuunoRankSwitch(id, csrf) {
+            // not really that much of an impactful action so just proxy
+            yuunoRankDo(id, csrf, 'main');
+        }
+
+        function yuunoRankRemove(id, csrf, name) {
+            var confirm = new Sakura.Dialogue;
+
+            confirm.SetType(Sakura.DialogueType.ConfirmNegative);
+            confirm.Title = "Ranks";
+            confirm.Text = "You are about to remove the rank '" + name + "' from your account. Are you sure about this?";
+
+            confirm.AddCallback(Sakura.DialogueButton.No, function () {
+                this.Close();
+            });
+
+            confirm.AddCallback(Sakura.DialogueButton.Yes, function () {
+                this.Close();
+                yuunoRankDo(id, csrf, 'remove');
+            });
+
+            confirm.Display();
+        }
+
+        function yuunoRankDo(id, csrf, mode) {
+            var ajax = new Sakura.AJAX,
+                formData = new FormData;
+
+            formData.append('rank', id);
+            formData.append('mode', mode);
+            formData.append('session', csrf);
+
+            ajax.SetUrl("{{ route('settings.account.ranks') }}");
+            ajax.SetFormData(formData);
+
+            ajax.AddCallback(200, function () {
+                var result = ajax.JSON();
+
+                if (result.error) {
+                    var error = new Sakura.Dialogue;
+                    error.Title = "Ranks";
+                    error.Text = result.error;
+                    error.SetType(Sakura.DialogueType.Info);
+
+                    error.AddCallback(Sakura.DialogueButton.Ok, function () {
+                        this.Close();
+                    });
+
+                    error.Display();
+                } else if (mode === 'remove') {
+                    Sakura.DOM.Remove(Sakura.DOM.ID('rank-' + id));
+                } else if (mode === 'main') {
+                    Sakura.DOM.RemoveClass(document.querySelector('.friend-box--active'), ['friend-box--active']);
+                    Sakura.DOM.AddClass(Sakura.DOM.ID('rank-' + id), ['friend-box--active']);
+                }
+            });
+
+            ajax.Start(Sakura.HTTPMethod.POST);
+        }
+    </script>
+{% endblock %}
+
 {% block settingsContent %}
     <div style="text-align: center">
         {% for rank in user.ranks %}
-            <form method="post" action="{{ route('settings.account.ranks') }}" class="friend-box {% if rank.id == user.mainRankId %}friend-box--active{% endif %}">
-                <input type="hidden" name="session" value="{{ session_id() }}">
-                <input type="hidden" name="rank" value="{{ rank.id }}">
-                <button class="friend-box__container" name="mode" value="main">
+            <div class="friend-box {% if rank.id == user.mainRankId %}friend-box--active{% endif %}" id="rank-{{ rank.id }}">
+                <button class="friend-box__container" onclick="yuunoRankSwitch({{ rank.id }}, '{{ session_id() }}')">
                     <div class="friend-box__name" style="color: {{ rank.colour }}">{{ rank.name }}</div>
                 </button>
                 <div class="friend-box__actions">
-                    <button title="{% if rank.id in locked %}You can't leave this rank{% else %}Leave rank{% endif %}" class="friend-box__action friend-box__action--red fa fa-{% if rank.id in locked %}shield{% else %}remove{% endif %}" name="mode" value="remove" {% if rank.id in locked %}disabled{% endif %}></button>
+                    <button
+                        title="{% if rank.id in locked %}You can't leave this rank{% else %}Leave rank{% endif %}"
+                        class="friend-box__action friend-box__action--red fa fa-{% if rank.id in locked %}shield{% else %}remove{% endif %}"
+                        name="mode"
+                        value="remove"
+                        onclick="{% if rank.id in locked %}yuunoRankProtected(){% else %}yuunoRankRemove({{ rank.id }}, '{{ session_id() }}', '{{ rank.name }}'){% endif %}"
+                    ></button>
+                </div>
             </div>
-            </form>
         {% endfor %}
     </div>
 {% endblock %}

resources/views/yuuno/settings/account/signature.twig

@@ -9,13 +9,14 @@
 {% block settingsContent %}
     <div class="bbcode" id="settingsPreview" style="max-height: 500px; overflow-y: auto; background: #C2AEEE; box-shadow: inset 0 0 1em 1em #D3BFFF;">{{ user.signature()|raw|nl2br }}</div>
     <hr>
-    <form enctype="multipart/form-data" method="post" action="{{ route('settings.account.signature') }}">
+    <form enctype="multipart/form-data" method="post" action="javascript:;" onsubmit="updateSettings(this, '{{ route('settings.account.signature') }}');">
+        <input type="hidden" name="session" value="{{ session_id() }}">
         <div>
             <textarea name="signature" id="settingsEditor" class="input__text" style="height: 400px;">{{ user.signature }}</textarea>
         </div>
-        <button value="{{ session_id() }}" name="session" class="input__button">Save</button>
+        <button class="input__button">Save</button>
         <button type="reset" class="input__button">Reset</button>
-        <button type="button" class="input__button" onclick="settingsPreview();">Preview</button>
+        <button type="button" class="input__button" onclick="settingsPreview()">Preview</button>
     </form>
     {% include 'settings/account/_preview.twig' %}
 {% endblock %}

resources/views/yuuno/settings/account/userpage.twig

@@ -9,13 +9,14 @@
 {% block settingsContent %}
     <div class="bbcode" id="settingsPreview" style="max-height: 500px; overflow-y: auto; background: #C2AEEE; box-shadow: inset 0 0 1em 1em #D3BFFF;">{{ user.userPage()|raw|nl2br }}</div>
     <hr>
-    <form enctype="multipart/form-data" method="post" action="{{ route('settings.account.userpage') }}">
+    <form enctype="multipart/form-data" method="post" action="javascript:;" onsubmit="updateSettings(this, '{{ route('settings.account.userpage') }}');">
+        <input type="hidden" name="session" value="{{ session_id() }}">
         <div>
             <textarea name="userpage" id="settingsEditor" class="input__text" style="height: 400px;">{% if user.page %}{{ user.page }}{% else %}[header]Welcome to my userpage![/header]{% endif %}</textarea>
         </div>
-        <button value="{{ session_id() }}" name="session" class="input__button">Save</button>
+        <button class="input__button">Save</button>
         <button type="reset" class="input__button">Reset</button>
-        <button type="button" class="input__button" onclick="settingsPreview();">Preview</button>
+        <button type="button" class="input__button" onclick="settingsPreview()">Preview</button>
     </form>
     {% include 'settings/account/_preview.twig' %}
 {% endblock %}

resources/views/yuuno/settings/master.twig

@@ -5,25 +5,22 @@
 {% block js %}
 <script>
     function updateSettings(form, action, text) {
-        var forms = {},
-            dialogue = new Sakura.Dialogue,
+        var dialogue = new Sakura.Dialogue,
             updater = new Sakura.AJAX;
 
-        dialogue.AddCallback(Sakura.DialogueButton.Ok, function () {
-            this.Close();
-        });
-
-        for (var a = 0; a < form.elements.length; a++) {
-            forms[form.elements.item(a).name] = form.elements.item(a).value;
-        }
-
         updater.SetUrl(action);
-        updater.Form();
-        updater.SetSend(forms);
+        updater.SetFormData(new FormData(form));
         updater.AddCallback(0, function () {
             var resp = updater.JSON();
             dialogue.Title = resp.error ? "Error" : "Information";
             dialogue.Text = resp.error || text || 'Updated!';
+            dialogue.AddCallback(Sakura.DialogueButton.Ok, function () {
+                if (resp.go) {
+                    window.location.assign(resp.go);
+                }
+
+                this.Close();
+            });
             dialogue.Display();
         });
         updater.Start(Sakura.HTTPMethod.POST);