Move the user api_token migration to its original migration, add website and social media columns to the original user migration, hook up user profile edit functionality on the dashboard settings page, name the user password function userPasswordUpdateInit to reflect its form name, clean up the dashboard settings layout and improve it on mobile, add a repeating pattern background to the dashboard so it's not so sparse, and sync the traditional-bootstrap routes/web.php with the main one

app/Http/Controllers/DashboardController.php

@@ -392,6 +392,24 @@ class DashboardController extends Controller {
         }
     }
 
+    // User Profile Update
+    public function postUserProfileUpdate(Request $request)
+    {
+        $this->validate($request, [
+            'name' => 'required|string|max:255'
+        ]);
+
+        $user = User::find(Auth::id());
+        $user->name = $request['name'];
+        $user->website = $request['website'];
+        $user->facebook = $request['facebook'];
+        $user->soundcloud = $request['soundcloud'];
+        $user->instagram = $request['instagram'];
+        $user->twitter = $request['twitter'];
+        $user->save();
+        return 'success';
+    }
+
     // User Profile Image Upload
     public function postUserProfileImageUpload(Request $request)
     {

database/migrations/2014_10_12_000000_create_users_table.php

@@ -15,9 +15,15 @@ class CreateUsersTable extends Migration
     {
         Schema::create('users', function(Blueprint $table) {
             $table->increments('id');
-            $table->string('name');
             $table->string('email')->unique();
+            $table->string('name');
+            $table->string('website')->nullable();
+            $table->string('facebook')->nullable();
+            $table->string('twitter')->nullable();
+            $table->string('instagram')->nullable();
+            $table->string('soundcloud')->nullable();
             $table->string('password');
+            $table->string('api_token', 60)->unique();
             $table->rememberToken();
             $table->timestamps();
         });

database/migrations/2017_11_21_193450_add_api_token_to_users_table.php

@@ -1,32 +0,0 @@
-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class AddApiTokenToUsersTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::table('users', function(Blueprint $table) {
-            $table->string('api_token', 60)->unique();
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::table('users', function(Blueprint $table) {
-            $table->dropColumn('api_token');
-        });
-    }
-}

public/img/dashboard/star-bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65.684 65.729"><path d="M65.55 47.072l-23.123-.345L29.035 65.58l-6.817-22.097L.15 36.572l18.909-13.313L18.812.136l18.504 13.87 21.915-7.38-7.473 21.883z" fill-opacity=".949" stroke="#000" stroke-width=".134" stroke-linecap="square" stroke-opacity=".893"/></svg>

resources/assets/js/dashboard.js

@@ -703,8 +703,82 @@ function userProfileImageInit() {
     });
 }
 
-function userPasswordInit() {
+function userProfileUpdateInit() {
-    const $form = $("#user-password"),
+    const $form = $("#user-profile-update"),
+        $submit = $form.find(".submit-button"),
+        $inputs = $form.find("input"),
+        $name = $("#name"),
+        $website = $("#website"),
+        $facebook = $("#facebook"),
+        $soundcloud = $("#soundcloud"),
+        $instagram = $("#instagram"),
+        $twitter = $("#twitter"),
+        $token = $("#token");
+
+    let formData = {},
+        submitting = false;
+
+    const getFormData = function() {
+        formData = {
+            name: $name.val(),
+            website: $website.val(),
+            facebook: $facebook.val(),
+            soundcloud: $soundcloud.val(),
+            instagram: $instagram.val(),
+            twitter: $twitter.val(),
+            _token: $token.val()
+        };
+    };
+
+    // remove the error class from an input and enable submit when its value changes
+    $inputs.on("input change", function() {
+        $submit.removeClass("no-input");
+        $(this).removeClass("error");
+    });
+
+    // initialize submit button
+    $submit.on("click", function() {
+        if (!submitting) {
+            submitting = true;
+
+            // remove the error class from inputs
+            $inputs.removeClass("error");
+
+            // show the loading modal
+            showLoadingModal();
+
+            // populate the formData object
+            getFormData();
+
+            // submit the update
+            $.ajax({
+                type: "POST",
+                url: "/dashboard/user/profile-update",
+                data: formData
+            }).always(function(response) {
+                hideLoadingModal();
+                submitting = false;
+
+                if (response === "success") {
+                    $submit.addClass("no-input");
+                    showAlert("User profile updated successfully");
+                } else {
+                    // add the error class to fields that haven't been filled correctly
+                    for (let errorName in response.responseJSON.errors) {
+                        if ($form.find(`[name='${errorName}']`).length) {
+                            $form.find(`[name='${errorName}']`).addClass("error");
+                        }
+                    }
+
+                    showAlert("Error updating user profile");
+                }
+            });
+        }
+    });
+}
+
+function userPasswordUpdateInit() {
+    const $form = $("#user-password-update"),
         $submit = $form.find(".submit-button"),
         $inputs = $form.find("input"),
         $oldpass = $("#oldpass"),
@@ -806,7 +880,11 @@ $(document).ready(function() {
         userProfileImageInit();
     }
 
-    if ($("#user-password").length) {
+    if ($("#user-profile-update").length) {
-        userPasswordInit();
+        userProfileUpdateInit();
+    }
+
+    if ($("#user-password-update").length) {
+        userPasswordUpdateInit();
     }
 });

resources/assets/sass/dashboard.scss

@@ -39,6 +39,7 @@ body {
 }
 
 .site-content {
+    position: relative;
     display: flex;
     min-height: 100vh;
     flex-direction: column;
@@ -48,6 +49,33 @@ body {
     }
 }
 
+.dashboard-background {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background-image: url("/img/dashboard/star-bg.svg");
+    background-position: center top;
+    background-size: 65px auto;
+    background-repeat: repeat;
+
+    &:after {
+        content: "";
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        background-color: fade-out(#fff, 0.02);
+    }
+}
+
+.navbar, .dashboard-footer {
+    z-index: 10;
+    position: relative;
+}
+
 .navbar {
     margin-bottom: $grid-gutter-width;
     border: 0;
@@ -652,10 +680,20 @@ body {
     }
 }
 
-.edit-item {
+form {
-    $label-height: 30px;
     margin-top: 10px;
 
+    .form-title {
+        @include font-sans-semibold;
+        margin-top: 0px;
+        margin-bottom: 15px;
+        font-size: 14px;
+        text-transform: uppercase;
+    }
+
+    &.edit-item {
+        $label-height: 30px;
+
         .CodeMirror {
             height: 300px;
             padding: 5px;
@@ -795,26 +833,30 @@ body {
                     margin-bottom: 20px;
                 }
             }
-
-        &.no-horizontal-margins {
-            margin-right: 0px;
-            margin-left: 0px;
-
-            @include media-breakpoint-down(sm) {
-                width: 100%;
         }
     }
+}
+
+.dashboard-settings-container {
+    @include media-breakpoint-up(lg) {
+        display: flex;
+        flex-direction: row;
     }
 
+    form {
         &.user-profile-image {
             display: block;
             width: 100%;
             max-width: 150px;
 
-        @include media-breakpoint-down(sm) {
+            @include media-breakpoint-down(md) {
                 margin: $grid-gutter-width auto;
             }
 
+            @include media-breakpoint-up(lg) {
+                flex-shrink: 0;
+            }
+
             .image-display {
                 @include aspect-ratio(1, 1);
                 position: relative;
@@ -872,6 +914,52 @@ body {
                 }
             }
         }
+
+        &.user-profile-update {
+            @include media-breakpoint-down(md) {
+                border-top: 1px solid darken($c-dashboard-light, 10%);
+                border-bottom: 1px solid darken($c-dashboard-light, 10%);
+            }
+
+            @include media-breakpoint-up(lg) {
+                margin-right: $grid-gutter-width;
+                margin-left: $grid-gutter-width;
+                width: 100%;
+                padding: 0px $grid-gutter-width;
+                flex-grow: 1;
+                border-right: 1px solid darken($c-dashboard-light, 10%);
+                border-left: 1px solid darken($c-dashboard-light, 10%);
+            }
+        }
+
+        &.user-password-update {
+            @include media-breakpoint-up(lg) {
+                width: 225px;
+                flex-shrink: 0;
+            }
+        }
+
+        .form-title {
+            @include media-breakpoint-down(md) {
+                margin-top: 25px;
+                margin-bottom: 20px;
+                text-align: center;
+            }
+        }
+
+        .submit-button {
+            @include media-breakpoint-down(sm) {
+                margin-right: auto;
+                margin-left: auto;
+                width: 100%;
+            }
+
+            @include media-breakpoint-up(md) {
+                float: none;
+                margin: ($grid-gutter-width / 2) 0px;
+            }
+        }
+    }
 }
 
 #loading-modal {

resources/views/dashboard/pages/settings.blade.php

@@ -7,10 +7,12 @@
 
     <div class="container-fluid">
         <div class="row">
-            <div class="col-12 col-md-8">
+            <div class="col-12">
-                <form id="user-profile-image" class="edit-item user-profile-image">
+                <div class="dashboard-settings-container">
+                    <form id="user-profile-image" class="user-profile-image">
                         @set('profile_image', $user->profileImage())
                         @set('default_image', App\User::$default_profile_image)
+                        <h2 class="form-title">Profile Image</h2>
 
                         <div
                             class="image-display"
@@ -24,16 +26,57 @@
                             <span id="profile-image-delete" class="image-delete-button {{ $profile_image === null ? 'inactive' : '' }}" title="Delete Profile Image"></span>
                         </div>
                     </form>
+
+                    <form id="user-profile-update" class="edit-item user-profile-update">
+                        <h2 class="form-title">User Profile</h2>
+
+                        <label for="email">Email:</label>
+                        <input class="text-input" type="text" name="email" id="email" value="{{ $user->email }}" disabled />
+
+                        <div class="row">
+                            <div class="col-12 col-md-6">
+                                <label for="name">Name:</label>
+                                <input class="text-input" type="text" name="name" id="name" value="{{ $user->name }}" />
                             </div>
 
-            <div class="col-12 col-md-4">
+                            <div class="col-12 col-md-6">
-                <form id="user-password" class="edit-item">
+                                <label for="website">Website:</label>
+                                <input class="text-input" type="text" name="website" id="website" value="{{ $user->website }}" />
+                            </div>
+
+                            <div class="col-12 col-md-6">
+                                <label for="facebook">Facebook URL:</label>
+                                <input class="text-input" type="text" name="facebook" id="facebook" value="{{ $user->facebook }}" />
+                            </div>
+
+                            <div class="col-12 col-md-6">
+                                <label for="soundcloud">SoundCloud URL:</label>
+                                <input class="text-input" type="text" name="soundcloud" id="soundcloud" value="{{ $user->soundcloud }}" />
+                            </div>
+
+                            <div class="col-12 col-md-6">
+                                <label for="instagram">Instagram Handle:</label>
+                                <input class="text-input" type="text" name="instagram" id="instagram" value="{{ $user->instagram }}" />
+                            </div>
+
+                            <div class="col-12 col-md-6">
+                                <label for="twitter">Twitter Handle:</label>
+                                <input class="text-input" type="text" name="twitter" id="twitter" value="{{ $user->twitter }}" />
+                            </div>
+                        </div>
+
+                        <button type="button" class="submit-button btn btn-primary no-input">Update User Profile</button>
+                    </form>
+
+                    <form id="user-password-update" class="edit-item user-password-update">
+                        <h2 class="form-title">Update Password</h2>
                         <input class="text-input" type="password" name="oldpass" id="oldpass" placeholder="Old Password" value="" />
                         <input class="text-input" type="password" name="newpass" id="newpass" placeholder="New Password" value="" />
                         <input class="text-input" type="password" name="newpass_confirmation" id="newpass_confirmation" placeholder="Repeat New Password" value="" />
-                    <button type="button" class="submit-button no-horizontal-margins btn btn-primary no-input">Update Password</button>
+                        <button type="button" class="submit-button btn btn-primary no-input">Update Password</button>
                     </form>
                 </div>
             </div>
         </div>
+    </div>
 @endsection

resources/views/templates/dashboard.blade.php

@@ -8,6 +8,7 @@
 @endsection
 
 @section('page-top')
+    <div class="dashboard-background"></div>
     @include('dashboard.sections.nav')
 @endsection
 

routes/web.php

@@ -46,6 +46,7 @@ Route::group([ 'prefix' => 'dashboard' ], function() {
     // Dashboard Settings
     Route::get('/settings', 'DashboardController@getSettings');
     Route::post('/user/password-update', 'DashboardController@postUserPasswordUpdate');
+    Route::post('/user/profile-update', 'DashboardController@postUserProfileUpdate');
     Route::post('/user/profile-image-upload', 'DashboardController@postUserProfileImageUpload');
     Route::delete('/user/profile-image-delete', 'DashboardController@deleteUserProfileImageDelete');
 

traditional-bootstrap/routes/web.php

@@ -29,19 +29,29 @@ Route::get('/logout', 'Auth\LoginController@logout');
 */
 
 Route::group([ 'prefix' => 'dashboard' ], function() {
+    // Dashboard CMS
     Route::get('/', 'DashboardController@getIndex');
-    Route::get('/credits', 'DashboardController@getCredits');
     Route::get('/view/{model}', 'DashboardController@getView');
     Route::get('/edit/{model}', 'DashboardController@getEditList');
     Route::get('/edit/{model}/{id}', 'DashboardController@getEditItem');
     Route::get('/export/{model}', 'DashboardController@getExport');
+    Route::post('/reorder', 'DashboardController@postReorder');
+    Route::post('/update', 'DashboardController@postUpdate');
     Route::post('/image-upload', 'DashboardController@postImageUpload');
     Route::post('/file-upload', 'DashboardController@postFileUpload');
-    Route::post('/update', 'DashboardController@postUpdate');
-    Route::post('/reorder', 'DashboardController@postReorder');
     Route::delete('/delete', 'DashboardController@deleteDelete');
     Route::delete('/image-delete', 'DashboardController@deleteImageDelete');
     Route::delete('/file-delete', 'DashboardController@deleteFileDelete');
+
+    // Dashboard Settings
+    Route::get('/settings', 'DashboardController@getSettings');
+    Route::post('/user/password-update', 'DashboardController@postUserPasswordUpdate');
+    Route::post('/user/profile-update', 'DashboardController@postUserProfileUpdate');
+    Route::post('/user/profile-image-upload', 'DashboardController@postUserProfileImageUpload');
+    Route::delete('/user/profile-image-delete', 'DashboardController@deleteUserProfileImageDelete');
+
+    // Credits Page
+    Route::get('/credits', 'DashboardController@getCredits');
 });
 
 /*