Merge pull request #6 from priatmoko/user-profile

Add Change Password features

app/Http/Controllers/Admin/Profile/FormController.php

@@ -27,7 +27,6 @@ public function store(Request $r)
         //check validataion result    
         if ($validation->fails()) 
             return response()->json(['errors'=>$validation->errors()], 422);
-
         //passed input continue to run update operation    
         $user = User::find($r->input('id'));
 

app/Http/Controllers/Admin/Profile/PwdController.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Password Controller, handle all operation user profile change password
+ */
+namespace App\Http\Controllers\Admin\Profile;
+
+use Illuminate\Http\Request;
+use App\Http\Controllers\Controller;
+
+use App\User;
+
+class PwdController extends Controller
+{
+    /**
+     * Change password event
+     * @param void $r laravel request object
+     * @return string json 
+     */
+    public function change(Request $r)
+    {
+        //form validation
+        $validation = \Validator::make($r->all(),['password' => ['required', 'string', 'min:8', 'confirmed']]);
+        //add custom validator to validate current password, make sure that actor are user owner
+        $validation->after(function($validation) use($r){
+            if (!\Hash::check($r->input('password_current'), \Auth::user()->password))
+                $validation->errors()->add('password_current', 'Please fill in matched password to your user!');
+        });    
+        //check validataion result    
+        if ($validation->fails()) 
+            return response()->json(['status'=>'error', 'errors'=>$validation->errors()], 422);
+        //run the operation to change password    
+        $user = User::find($r->input('id'));        
+        $user->password=\Hash::make($r->input('password'));
+        if ($user->save()){
+            \Auth::logoutOtherDevices($r->input('password'));
+            \Auth::logout();
+            //return the success message
+            $response =['status'=>'success','data'=>'','message'=>''];
+            return response()->json($response, 200);
+        }
+    }
+}

public/assets/Admin/Profile/password.js

@@ -0,0 +1,30 @@
+/**
+ * Submit form change password
+ */
+var submitPassword = function(){
+    $('#form-user-pwd').submit(function(e){
+        //prevent submit event as default and we change it using our custom event (not reload page)
+        e.preventDefault();
+        if ($('#form-user-pwd').postValidate()===false){
+            return false;
+        }
+        $('#form-user-pwd').postAjax({
+            success : function(r){
+                if (r.status=="success"){
+                    iziToast.success({
+                        title: 'INFO !',
+                        message: 'Operation success. Please re-sign in using new password',
+                        position: 'topRight'
+                    });
+                    setTimeout(function(){window.location.reload()},5000);
+                }else if (r.status=="error"){
+                    iziToast.error({
+                        title: 'INFO !',
+                        message: 'Operation failed, please check the data input',
+                        position: 'topRight'
+                    });
+                }
+            }
+        });
+    });
+}

public/assets/Admin/Profile/setting.js

@@ -1,38 +1,43 @@
 //initial 
 var initProfile = function(){
-    $('#user-profile').submit(function(e){
-        e.preventDefault();
-        saveProfile(e);
-    });
+    //form user setting event
+    saveProfile();
+    //form change password event
+    submitPassword();
 }
 /**
  * save the profile
  */
-var saveProfile = function(e){
-    // if ($('#user-profile').postValidate()===false){
-    //     return false;
-    // }
-    $('#user-profile').postFile({
-        ext : ['png', 'jpg'],
-        maxsize : 1024,
-        success : function(r){
-            console.log(r);
-            $('#avatar').val('');
-            if (r.status=="success"){
-                if (r.data.hasOwnProperty('image'))
-                    $('#avatar-image').attr('src', r.data.image);
-                iziToast.success({
-                    title: 'INFO !',
-                    message: 'Operation success, the changing has been saved',
-                    position: 'topRight'
-                });
-            }else if (r.status=="error"){
-                iziToast.error({
-                    title: 'INFO !',
-                    message: 'Operation failed, please check the data input',
-                    position: 'topRight'
-                });
-            }
+var saveProfile = function(){
+    //catch submit event
+    $('#user-profile').submit(function(e){
+        e.preventDefault();
+        //validate form
+        if ($('#user-profile').postValidate()===false){
+            return false;
         }
+        //make ajax request
+        $('#user-profile').postFile({
+            ext : ['png', 'jpg'],
+            maxsize : 1024,
+            success : function(r){
+                $('#avatar').val('');
+                if (r.status=="success"){
+                    if (r.data.hasOwnProperty('image'))
+                        $('#avatar-image').attr('src', r.data.image);
+                    iziToast.success({
+                        title: 'INFO !',
+                        message: 'Operation success, the changing has been saved',
+                        position: 'topRight'
+                    });
+                }else if (r.status=="error"){
+                    iziToast.error({
+                        title: 'INFO !',
+                        message: 'Operation failed, please check the data input',
+                        position: 'topRight'
+                    });
+                }
+            }
+        });
     });
 }

resources/views/Admin/Profile/form-password.blade.php

@@ -3,6 +3,44 @@
         ['title'=>'User Profile Change Password'])
             @csrf
             <p class="text-muted">Update your current password to the safer new password.</p>
+            <div class="form-group row align-items-center">
+                <label for="site-title" class="form-control-label col-md-3">
+                    ID / Username
+                    <a href="javascript:;"
+                        data-html="true" 
+                        data-toggle="popover" 
+                        data-trigger="focus" 
+                        data-content="
+                            <b>Username</b>, it is your username. You can sign in using this username beside email <br/> 
+                            <b>Database info</b> : Users.username">
+                        <i class="far fa-question-circle"></i>
+                        </a>
+                </label>
+                <div class="col-md-3">
+                    <input type="text" name="id"  
+                        class="form-control {{ $errors->has('id') ? ' is-invalid' : '' }} text-center" 
+                        required value="{{\Auth::user()->id}}"  tabindex=1 readonly/>
+                    <div class="invalid-feedback">
+                        @if ($errors->has('id'))
+                            {{ $errors->first('id') }}</strong>
+                        @else
+                            {{__('Please fill in your username')}}
+                        @endif
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <input type="text" name="username"  
+                        class="form-control {{ $errors->has('username') ? ' is-invalid' : '' }}" 
+                        required value="{{\Auth::user()->username}}"  tabindex=2 readonly/>
+                    <div class="invalid-feedback">
+                        @if ($errors->has('username'))
+                            {{ $errors->first('username') }}</strong>
+                        @else
+                            {{__('Please fill in your username')}}
+                        @endif
+                    </div>
+                </div>
+            </div>
             <div class="form-group row align-items-center">
                 <label for="password" class="form-control-label col-md-3">
                     New Password
@@ -73,7 +111,7 @@
             </div>
             @slot('footer')
                 <div class="float-md-right">
-                    <button type="submit" class="btn btn-icon icon-right btn-outline-primary"  tabindex=5> <i class="fa fa-save"></i> &nbsp; Save</button>
+                    <button type="submit" class="btn btn-icon icon-right btn-danger"  tabindex=5> <i class="fa fa-save"></i> &nbsp; Save</button>
                 </div>
             @endslot
     @endcomponent

resources/views/Admin/Profile/form-setting.blade.php

@@ -4,45 +4,30 @@
             @csrf
             <p class="text-muted">General settings such as name, photo profile, etc</p>
             <div class="form-group row align-items-center">
-                <label for="name" class="form-control-label col-md-3">
-                    Name
+                <label for="site-title" class="form-control-label col-md-3">
+                    ID / Username
                     <a href="javascript:;"
                         data-html="true" 
                         data-toggle="popover" 
                         data-trigger="focus" 
                         data-content="
-                            <b>Name</b>, it is your name. <br/> 
-                            <b>Database info</b> : Users.name">
+                            <b>Username</b>, it is your username. You can sign in using this username beside email <br/> 
+                            <b>Database info</b> : Users.username">
                         <i class="far fa-question-circle"></i>
                         </a>
                 </label>
-                <div class="col-md-9">
-                    <input type="text" id="name" name="name" 
-                        class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }}" 
-                        required 
-                        value="{{\Auth::user()->name}}" tabindex=1>
+                <div class="col-md-3">
+                    <input type="text" id="id" name="id"  
+                        class="form-control {{ $errors->has('id') ? ' is-invalid' : '' }} text-center" 
+                        required value="{{\Auth::user()->id}}"  tabindex=1 readonly/>
                     <div class="invalid-feedback">
-                        @if ($errors->has('email'))
-                            {{ $errors->first('name') }}</strong>
+                        @if ($errors->has('id'))
+                            {{ $errors->first('id') }}</strong>
                         @else
-                            {{__('Please fill in your name')}}
+                            {{__('Please fill in your username')}}
                         @endif
                     </div>
                 </div>
-            </div>
-            <div class="form-group row align-items-center">
-                <label for="site-title" class="form-control-label col-md-3">
-                    Username / ID
-                    <a href="javascript:;"
-                        data-html="true" 
-                        data-toggle="popover" 
-                        data-trigger="focus" 
-                        data-content="
-                            <b>Username</b>, it is your username. You can sign in using this username beside email <br/> 
-                            <b>Database info</b> : Users.username">
-                        <i class="far fa-question-circle"></i>
-                        </a>
-                </label>
                 <div class="col-md-6">
                     <input type="text" id="username" name="username"  
                         class="form-control {{ $errors->has('username') ? ' is-invalid' : '' }}" 
@@ -55,15 +40,30 @@ class="form-control {{ $errors->has('username') ? ' is-invalid' : '' }}"
                         @endif
                     </div>
                 </div>
-                <div class="col-md-3">
-                    <input type="text" id="id" name="id"  
-                        class="form-control {{ $errors->has('id') ? ' is-invalid' : '' }} text-center" 
-                        required value="{{\Auth::user()->id}}"  tabindex=2 readonly/>
+            </div>
+            <div class="form-group row align-items-center">
+                <label for="name" class="form-control-label col-md-3">
+                    Name
+                    <a href="javascript:;"
+                        data-html="true" 
+                        data-toggle="popover" 
+                        data-trigger="focus" 
+                        data-content="
+                            <b>Name</b>, it is your name. <br/> 
+                            <b>Database info</b> : Users.name">
+                        <i class="far fa-question-circle"></i>
+                        </a>
+                </label>
+                <div class="col-md-9">
+                    <input type="text" id="name" name="name" 
+                        class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }}" 
+                        required 
+                        value="{{\Auth::user()->name}}" tabindex=3>
                     <div class="invalid-feedback">
-                        @if ($errors->has('id'))
-                            {{ $errors->first('id') }}</strong>
+                        @if ($errors->has('email'))
+                            {{ $errors->first('name') }}</strong>
                         @else
-                            {{__('Please fill in your username')}}
+                            {{__('Please fill in your name')}}
                         @endif
                     </div>
                 </div>
@@ -84,7 +84,7 @@ class="form-control {{ $errors->has('id') ? ' is-invalid' : '' }} text-center"
                 <div class="col-md-9">
                     <input type="email" id="email" name="email" 
                         class="form-control {{ $errors->has('email') ? ' is-invalid' : '' }}" required 
-                        value="{{\Auth::user()->email}}" tabindex=3/>
+                        value="{{\Auth::user()->email}}" tabindex=4/>
                     <div class="invalid-feedback">
                         @if ($errors->has('email'))
                             {{ $errors->first('email') }}</strong>
@@ -108,13 +108,13 @@ class="form-control {{ $errors->has('email') ? ' is-invalid' : '' }}" required
                         </a>
                 </label>
                 <div class="col-md-9">
-                    <input type="file" name="avatar" class="form-control" id="avatar" tabindex=4>
+                    <input type="file" name="avatar" class="form-control" id="avatar" tabindex=5>
                     <div class="invalid-feedback"></div>
                 </div>
             </div>
             @slot('footer')
                 <div class="float-md-right">
-                    <button type="submit" class="btn btn-icon icon-right btn-outline-primary"  tabindex=5> <i class="fa fa-save"></i> &nbsp; Save</button>
+                    <button type="submit" class="btn btn-icon icon-right btn-info"  tabindex=6> <i class="fa fa-save"></i> &nbsp; Save</button>
                 </div>
             @endslot
     @endcomponent

resources/views/Admin/Profile/setting.blade.php

@@ -27,6 +27,7 @@
     <script src="{{asset('assets/modules/izitoast/js/iziToast.min.js')}}"></script>
     <script src="{{asset('js/postAjax.js')}}"></script>
     <script src="{{asset('assets/Admin/Profile/setting.js')}}"></script>
+    <script src="{{asset('assets/Admin/Profile/password.js')}}"></script>
     <script>
         //init setting
         initProfile();

resources/views/layouts/elements/topbar/usernav.blade.php

@@ -21,7 +21,7 @@
         <a href="@if (Route::has('profile-setting')) {{route('profile-setting')}} @endif" class="dropdown-item has-icon">
             <i class="fas fa-cog"></i> Settings
         </a>
-        <a href="features-activities.html" class="dropdown-item has-icon">
+        <a href="{{url('profile/setting#setting-password')}}" class="dropdown-item has-icon">
             <i class="fas fa-key"></i> Change Password
         </a>
         <div class="dropdown-divider"></div>

routes/web.php

@@ -23,4 +23,5 @@
     Route::get('profile', 'Admin\Profile\IndexController@index')->name('profile');
     Route::get('profile/setting', 'Admin\Profile\IndexController@setting')->name('profile-setting');
     Route::post('profile/store', 'Admin\Profile\FormController@store')->name('profile-store');
+    Route::post('profile/password', 'Admin\Profile\PwdController@change')->name('profile-change-pwd');
 });