Adding the user profile component

Modules/User/Assets/js/UserRoutes.js

@@ -2,6 +2,7 @@ import RoleTable from './components/RoleTable.vue';
 import RoleForm from './components/RoleForm.vue';
 import UserTable from './components/UserTable.vue';
 import UserForm from './components/UserForm.vue';
+import UserProfile from './components/UserProfile.vue';
 
 
 const locales = window.AsgardCMS.locales;
@@ -55,4 +56,10 @@ export default [
             pageTitle: 'title.edit-user',
         },
     },
+    // Account routes
+    {
+        path: '/account/profile',
+        name: 'admin.user.users.account',
+        component: UserProfile,
+    },
 ];

Modules/User/Assets/js/components/UserProfile.vue

+<template>
+    <div>
+        <div class="content-header">
+            <h1>
+                {{ trans('users.title.edit-profile') }}
+            </h1>
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <a href="/backend">{{ trans('core.breadcrumb.home') }}</a>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item :to="{name: 'admin.user.users.profile'}">{{ trans('users.breadcrumb.edit-profile') }}
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+
+        <el-form ref="form"
+                 :model="user"
+                 label-width="120px"
+                 label-position="top"
+                 v-loading.body="loading"
+                 @keydown="form.errors.clear($event.target.name);">
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="box box-primary">
+                        <div class="box-body">
+                            <el-tabs>
+                                <el-tab-pane :label="trans('users.tabs.data')">
+                                    <span slot="label"
+                                          :class="{'error' : form.errors.any()}">
+                                        {{ trans('users.tabs.data') }}
+                                    </span>
+                                    <el-form-item :label="trans('users.form.first-name')"
+                                                  :class="{'el-form-item is-error': form.errors.has('first_name') }">
+                                        <el-input v-model="user.first_name"></el-input>
+                                        <div class="el-form-item__error" v-if="form.errors.has('first_name')"
+                                             v-text="form.errors.first('first_name')"></div>
+                                    </el-form-item>
+                                    <el-form-item :label="trans('users.form.last-name')"
+                                                  :class="{'el-form-item is-error': form.errors.has('last_name') }">
+                                        <el-input v-model="user.last_name"></el-input>
+                                        <div class="el-form-item__error" v-if="form.errors.has('last_name')"
+                                             v-text="form.errors.first('last_name')"></div>
+                                    </el-form-item>
+                                    <el-form-item :label="trans('users.form.email')"
+                                                  :class="{'el-form-item is-error': form.errors.has('email') }">
+                                        <el-input v-model="user.email"></el-input>
+                                        <div class="el-form-item__error" v-if="form.errors.has('email')"
+                                             v-text="form.errors.first('email')"></div>
+                                    </el-form-item>
+                                </el-tab-pane>
+                                <el-tab-pane :label="trans('users.tabs.new password')" v-if="! user.is_new">
+                                        <h4>{{ trans('users.new password setup') }}</h4>
+                                        <el-form-item :label="trans('users.form.password')"
+                                                      :class="{'el-form-item is-error': form.errors.has('password') }">
+                                            <el-input v-model="user.password"
+                                                      type="password"></el-input>
+                                            <div class="el-form-item__error" v-if="form.errors.has('password')"
+                                                 v-text="form.errors.first('password')"></div>
+                                        </el-form-item>
+                                        <el-form-item :label="trans('users.form.password-confirmation')"
+                                                      :class="{'el-form-item is-error': form.errors.has('password_confirmation') }">
+                                            <el-input v-model="user.password_confirmation"
+                                                      type="password"></el-input>
+                                            <div class="el-form-item__error" v-if="form.errors.has('password_confirmation')"
+                                                 v-text="form.errors.first('password_confirmation')"></div>
+                                        </el-form-item>
+                                </el-tab-pane>
+                            </el-tabs>
+                        </div>
+                        <div class="box-footer">
+                            <el-form-item>
+                                <el-button type="primary" @click="onSubmit()" :loading="loading">
+                                    {{ trans('core.save') }}
+                                </el-button>
+                            </el-form-item>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios';
+    import Form from 'form-backend-validation';
+
+    export default {
+        props: {
+            locales: { default: null },
+        },
+        data() {
+            return {
+                user: {
+                    first_name: '',
+                    last_name: '',
+                    permissions: {},
+                    roles: {},
+                    is_new: false,
+                },
+                roles: {},
+                form: new Form(),
+                loading: false,
+            };
+        },
+        methods: {
+            onSubmit() {
+                this.form = new Form(this.user);
+                this.loading = true;
+
+                this.form.post(route('api.account.profile.update'))
+                    .then((response) => {
+                        this.loading = false;
+                        this.$message({
+                            type: 'success',
+                            message: response.message,
+                        });
+                    })
+                    .catch((error) => {
+                        console.log(error);
+                        this.loading = false;
+                        this.$notify.error({
+                            title: 'Error',
+                            message: 'There are some errors in the form.',
+                        });
+                    });
+            },
+            fetchUser() {
+                this.loading = true;
+                axios.get(route('api.account.profile.find-current-user'))
+                    .then((response) => {
+                        this.loading = false;
+                        this.user = response.data.data;
+                    });
+            },
+        },
+        mounted() {
+            this.fetchUser();
+        },
+    };
+</script>

Modules/User/Http/Controllers/Admin/Account/ProfileController.php

@@ -36,9 +36,7 @@ class ProfileController extends AdminBaseController
      */
     public function edit()
     {
-        $user = $this->auth->user();
-
-        return view('user::admin.account.profile.edit', compact('user'));
+        return view('user::admin.account.profile.edit');
     }
 
     /**

Modules/User/Http/Controllers/Api/ProfileController.php

+<?php
+
+namespace Modules\User\Http\Controllers\Api;
+
+use Illuminate\Routing\Controller;
+use Modules\User\Contracts\Authentication;
+use Modules\User\Http\Requests\UpdateProfileRequest;
+use Modules\User\Repositories\UserRepository;
+use Modules\User\Transformers\UserProfileTransformer;
+
+class ProfileController extends Controller
+{
+    /**
+     * @var Authentication
+     */
+    private $auth;
+    /**
+     * @var UserRepository
+     */
+    private $user;
+
+    public function __construct(Authentication $auth, UserRepository $user)
+    {
+        $this->auth = $auth;
+        $this->user = $user;
+    }
+
+    public function findCurrentUser()
+    {
+        return new UserProfileTransformer($this->auth->user());
+    }
+
+    public function update(UpdateProfileRequest $request)
+    {
+        $user = $this->auth->user();
+
+        $this->user->update($user, $request->all());
+
+        return response()->json([
+            'errors' => false,
+            'message' => trans('user::messages.profile updated'),
+        ]);
+    }
+}

Modules/User/Http/apiRoutes.php

@@ -86,6 +86,17 @@ $router->group(['prefix' => '/user', 'middleware' => ['api.token', 'auth.admin']
         ]);
     });
 
+    $router->group(['prefix' => '/account'], function (Router $router) {
+        $router->get('profile', [
+            'as' => 'api.account.profile.find-current-user',
+            'uses' => 'ProfileController@findCurrentUser',
+        ]);
+        $router->post('profile', [
+            'as' => 'api.account.profile.update',
+            'uses' => 'ProfileController@update',
+        ]);
+    });
+
     $router->get('permissions', [
         'as' => 'api.user.permissions.index',
         'uses' => 'PermissionsController@index',

Modules/User/Resources/views/admin/account/profile/edit.blade.php

 @extends('layouts.master')
 
 @section('content-header')
-<h1>
-    {{ trans('user::users.title.edit-profile') }}
-</h1>
-<ol class="breadcrumb">
-    <li><a href="{{ route('dashboard.index') }}"><i class="fa fa-dashboard"></i> {{ trans('core::core.breadcrumb.home') }}</a></li>
-    <li class="active">{{ trans('user::users.breadcrumb.edit-profile') }}</li>
-</ol>
 @stop
 
 @section('content')
-{!! Form::open(['route' => ['admin.account.profile.update'], 'method' => 'put']) !!}
-<div class="row">
-    <div class="col-md-12">
-        <div class="nav-tabs-custom">
-            <ul class="nav nav-tabs">
-                <li class="active"><a href="#account_tab" data-toggle="tab">{{ trans('user::users.tabs.data') }}</a></li>
-                <li class=""><a href="#password_tab" data-toggle="tab">{{ trans('user::users.tabs.new password') }}</a></li>
-            </ul>
-            <div class="tab-content">
-                <div class="tab-pane active" id="account_tab">
-                    <div class="box-body">
-                        <div class="row">
-                            <div class="col-md-4">
-                                {{ Form::normalInput('first_name', trans('user::users.form.first-name'), $errors, $user) }}
-                            </div>
-                            <div class="col-md-4">
-                                {{ Form::normalInput('last_name', trans('user::users.form.last-name'), $errors, $user) }}
-                            </div>
-                            <div class="col-md-4">
-                                {{ Form::normalInputOfType('email', 'email', trans('user::users.form.email'), $errors, $user) }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="tab-pane" id="password_tab">
-                    <div class="box-body">
-                        <h4>{{ trans('user::users.new password setup') }}</h4>
-                        <div class="row">
-                            <div class="col-md-6">
-                                {{ Form::normalInputOfType('password', 'password', trans('user::users.form.new password'), $errors) }}
-                            </div>
-                            <div class="col-md-6">
-                                {{ Form::normalInputOfType('password', 'password_confirmation', trans('user::users.form.new password confirmation'), $errors) }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="box-footer">
-                    <button type="submit" class="btn btn-primary btn-flat">{{ trans('core::core.button.update') }}</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{!! Form::close() !!}
 @stop
-@section('footer')
-    <a data-toggle="modal" data-target="#keyboardShortcutsModal"><i class="fa fa-keyboard-o"></i></a> &nbsp;
-@stop
-@section('shortcuts')
-@stop
-
-@push('js-stack')
-<script>
-$( document ).ready(function() {
-    $('[data-toggle="tooltip"]').tooltip();
-    $('input[type="checkbox"].flat-blue, input[type="radio"].flat-blue').iCheck({
-        checkboxClass: 'icheckbox_flat-blue',
-        radioClass: 'iradio_flat-blue'
-    });
-});
-</script>
-@endpush

Modules/User/Transformers/UserProfileTransformer.php

+<?php
+
+namespace Modules\User\Transformers;
+
+use Illuminate\Http\Resources\Json\Resource;
+
+class UserProfileTransformer extends Resource
+{
+    public function toArray($request)
+    {
+        return [
+            'id' => $this->id,
+            'first_name' => $this->first_name,
+            'last_name' => $this->last_name,
+            'email' => $this->email,
+            'created_at' => $this->created_at,
+        ];
+    }
+}