Merge pull request #5 from priatmoko/user-profile

Change navigation type in user profile setting

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

@@ -0,0 +1,80 @@
+<form id="form-user-pwd" method='POST' novalidate action="{{url('profile/password')}}">
+    @component('layouts.elements.others.card',
+        ['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="password" class="form-control-label col-md-3">
+                    New Password
+                    <a href="javascript:;"
+                        data-html="true" 
+                        data-toggle="popover" 
+                        data-trigger="focus" 
+                        data-content="
+                            <b>New Password</b>, write your new password here <br/> 
+                            <b>Database info</b> : Users.password">
+                        <i class="far fa-question-circle"></i>
+                        </a>
+                </label>
+                <div class="col-md-9">
+                    <input type="password" id="password" name="password" class="form-control" required tabindex=1>
+                    <div class="invalid-feedback">
+                        @if ($errors->has('password'))
+                            {{ $errors->first('password') }}</strong>
+                        @else
+                            {{__('Please fill in your New Password')}}
+                        @endif
+                    </div>
+                </div>
+            </div>
+            <div class="form-group row align-items-center">
+                <label for="password_confirmation" class="form-control-label col-md-3">
+                    Password Conf.
+                    <a href="javascript:;"
+                        data-html="true" 
+                        data-toggle="popover" 
+                        data-trigger="focus" 
+                        data-content="<b>Password Confiormation</b>, confirm your new password <br/>"> 
+                        <i class="far fa-question-circle"></i>
+                    </a>
+                </label>
+                <div class="col-md-9">
+                    <input type="password" id="password_confirmation" name="password_confirmation" class="form-control" required tabindex=1>
+                    <div class="invalid-feedback">
+                        @if ($errors->has('password_confirmation'))
+                            {{ $errors->first('password_confirmation') }}</strong>
+                        @else
+                            {{__('Please fill in your Password Confirmation')}}
+                        @endif
+                    </div>
+                </div>
+            </div>
+            <div class="form-group row align-items-center">
+                <label for="password_current" class="form-control-label col-md-3">
+                    Current Password
+                    <a href="javascript:;"
+                        data-html="true" 
+                        data-toggle="popover" 
+                        data-trigger="focus" 
+                        data-content="<b>Password Confiormation</b>, confirm your new password <br/>"> 
+                        <i class="far fa-question-circle"></i>
+                    </a>
+                </label>
+                <div class="col-md-9">
+                    <input type="password" id="password_current" name="password_current" class="form-control" required tabindex=1>
+                    <div class="invalid-feedback">
+                        @if ($errors->has('password_current'))
+                            {{ $errors->first('password_current') }}</strong>
+                        @else
+                            {{__('Please fill in your Current Password')}}
+                        @endif
+                    </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>
+                </div>
+            @endslot
+    @endcomponent
+</form>            

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

@@ -13,8 +13,24 @@ class="rounded-circle author-box-picture"
     <div class="mt-3">
         <ul class="nav nav-pills flex-column">
             <li class="nav-item"><a href="{{route('profile')}}" class="nav-link">Profile</a></li>
-            <li class="nav-item"><a href="{{route('profile-setting')}}" class="nav-link active">Setting</a></li>
-            <li class="nav-item"><a href="#" class="nav-link">Password</a></li>
+            <li class="nav-item">
+                <!-- <a href="{{route('profile-setting')}}" class="nav-link active">Setting</a> -->
+                <a id="tab-setting" 
+                    data-toggle="tab" 
+                    href="#setting-user" 
+                    role="tab" 
+                    aria-controls="Setting User Profile" 
+                    aria-selected="true"
+                    class="nav-link active">Setting</a>
+            </li>
+            <li class="nav-item">
+                <a id="tab-password" 
+                    data-toggle="tab" 
+                    href="#setting-password" 
+                    role="tab" 
+                    aria-controls="Setting User Password"
+                    class="nav-link">Password</a>
+            </li>
             <li class="nav-item"><a href="#" class="nav-link">Theme</a></li>
         </ul>
     </div>

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

@@ -11,7 +11,14 @@
                     @include('Admin.Profile.menu-setting')
                 </div>
                 <div class="col-md-8">
-                    @include('Admin.Profile.form-setting')
+                    <div class="tab-content no-padding" id="user-tabs">
+                        <div class="tab-pane fade show active" id="setting-user" role="tabpanel" aria-labelledby="Setting User Profile">
+                            @include('Admin.Profile.form-setting')
+                        </div>
+                        <div class="tab-pane fade" id="setting-password" role="tabpanel" aria-labelledby="Setting User Password">
+                            @include('Admin.Profile.form-password')
+                        </div>
+                    </div>
                 </div>
             </div>
     @endcomponent