reset page converted to vue form

public/css/custom.css

@@ -133,12 +133,14 @@
 }
 /*--------Carousel Arrows Finish--------*/
 
+
 /*--------Credit Card--------*/
 .card-input__input:hover, .card-input__input:focus {
     border-color: #55588b !important;
 }
 /*--------Credit Card Finish--------*/
 
+
 /*--------General Button Focus--------*/
 button:focus
 {
@@ -937,7 +939,7 @@ table .align-items-center td span.badge {
         width: 100%;
         height: 40px;
         font-size: .875rem;
-        padding: .425rem;
+        padding: .425rem 1.25rem;
         margin-top: 16px;
     }
 

resources/assets/js/views/auth/reset.js

@@ -11,16 +11,17 @@ import Vue from 'vue';
 import Global from './../../mixins/global';
 
 import Form from './../../plugins/form';
-import BulkAction from './../../plugins/bulk-action';
 
 const app = new Vue({
     el: '#app',
+
     mixins: [
         Global
     ],
+
     data: function () {
         return {
-            form: new Form('item')
+            form: new Form('reset')
         }
     }
 });

resources/views/auth/reset/create.blade.php

@@ -1,54 +1,39 @@
 @extends('layouts.auth')
 
-@section('title', trans('auth.reset_password'))
 @section('message', trans('auth.reset_password'))
 
 @section('content')
-    <form role="form" method="POST" action="{{ route('reset.store') }}">
+    {!! Form::open([
-        {{ csrf_field() }}
+        'route' => 'reset.store',
+        'id' => 'reset',
+        '@submit.prevent' => 'onSubmit',
+        '@keydown' => 'form.errors.clear($event.target.name)',
+        'files' => true,
+        'role' => 'form',
+        'class' => 'form-loading-button',
+        'novalidate' => true
+    ]) !!}
 
         <input type="hidden" name="token" value="{{ $token }}">
 
         @stack('email_input_start')
-            <div class="form-group has-feedback{{ $errors->has('email') ? ' has-error' : '' }}">
+            {{ Form::emailGroup('email', false, 'envelope', ['placeholder' => trans('general.email')], null, 'has-feedback', 'input-group-alternative') }}
-                <input name="email" type="email" class="form-control" required autofocus>
-                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
-                @if ($errors->has('email'))
-                    <span class="help-block">
-                        <strong>{{ $errors->first('email') }}</strong>
-                    </span>
-                @endif
-            </div>
         @stack('email_input_end')
 
         @stack('password_input_start')
-            <div class="form-group has-feedback{{ $errors->has('password') ? ' has-error' : '' }}">
+            {{ Form::passwordGroup('password', false, 'unlock-alt', ['placeholder' => trans('auth.password.new')], 'has-feedback', 'input-group-alternative') }}
-                <input name="password" type="password" class="form-control" required>
-                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
-                @if ($errors->has('password'))
-                    <span class="help-block">
-                        <strong>{{ $errors->first('password') }}</strong>
-                    </span>
-                @endif
-            </div>
         @stack('password_input_end')
 
         @stack('password_confirmation_input_start')
-            <div class="form-group has-feedback{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
+            {{ Form::passwordGroup('password_confirmation', false, 'unlock-alt', ['placeholder' => trans('auth.password.new_confirm')], 'has-feedback', 'input-group-alternative') }}
-                <input name="password_confirmation" type="password" class="form-control" placeholder="{{ trans('auth.password.new_confirm') }}" required>
-                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
-                @if ($errors->has('password_confirmation'))
-                    <span class="help-block">
-                        <strong>{{ $errors->first('password_confirmation') }}</strong>
-                    </span>
-                @endif
-            </div>
         @stack('password_confirmation_input_end')
 
         <div class="row">
-            <div class="col-sm-offset-8 col-sm-4">
+            <div class="col-xs-12 col-sm-12">
-                <button type="submit" class="btn btn-success btn-block btn-flat">{{ trans('auth.reset') }}</button>
+                {!! Form::button(
+                '<div class="aka-loader"></div> <span>' . trans('auth.reset') . '</span>',
+                [':disabled' => 'form.loading', 'type' => 'submit', 'class' => 'btn btn-success header-button-top float-right', 'data-loading-text' => trans('general.loading')]) !!}
             </div>
         </div>
-    </form>
+    {!! Form::close() !!}
 @endsection

routes/guest.php

@@ -9,5 +9,5 @@ Route::group(['prefix' => 'auth'], function () {
 
     //Route::get('reset', 'Auth\Reset@create');
     Route::get('reset/{token}', 'Auth\Reset@create')->name('reset');
-    Route::post('reset', 'Auth\Reset@store');
+    Route::post('reset', 'Auth\Reset@store')->name('reset.store');
 });