akaunting 3.0 (the last dance)

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

@@ -1,47 +1,69 @@
-@extends('layouts.auth')
+<x-layouts.auth>
+    <x-slot name="title">
+        {{ trans('auth.reset_password') }}
+    </x-slot>
 
-@section('title', trans('auth.reset_password'))
+    <x-slot name="content">
+        <div>
+            <img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-16" alt="Akaunting" />
 
-@section('message', trans('auth.reset_password'))
-
-@section('content')
-    <div role="alert" class="alert alert-danger d-none" :class="(form.response.error) ? 'show' : ''" v-if="form.response.error" v-html="form.response.message"></div>
-
-    {!! Form::open([
-        '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')
-            {{ Form::emailGroup('email', false, 'envelope', ['placeholder' => trans('general.email')], null, 'has-feedback', 'input-group-alternative') }}
-        @stack('email_input_end')
-
-        @stack('password_input_start')
-            {{ Form::passwordGroup('password', false, 'unlock-alt', ['placeholder' => trans('auth.password.new')], 'has-feedback', 'input-group-alternative') }}
-        @stack('password_input_end')
-
-        @stack('password_confirmation_input_start')
-            {{ Form::passwordGroup('password_confirmation', false, 'unlock-alt', ['placeholder' => trans('auth.password.new_confirm')], 'has-feedback', 'input-group-alternative') }}
-        @stack('password_confirmation_input_end')
-
-        <div class="row">
-            <div class="col-xs-12 col-sm-12">
-                {!! Form::button(
-                '<div class="aka-loader"></div> <span>' . trans('auth.reset') . '</span>',
-                [':disabled' => 'form.loading', 'type' => 'submit', 'class' => 'btn btn-success float-right', 'data-loading-text' => trans('general.loading')]) !!}
-            </div>
+            <h1 class="text-lg my-3">
+                {{ trans('auth.reset_password') }}
+            </h1>
         </div>
-    {!! Form::close() !!}
-@endsection
 
-@push('scripts_start')
-    <script src="{{ asset('public/js/auth/reset.js?v=' . version('short')) }}"></script>
-@endpush
+        <div :class="(form.response.success) ? 'w-full bg-green-100 text-green-600 p-3 rounded-sm font-semibold text-xs' : 'hidden'"
+            v-if="form.response.success"
+            v-html="form.response.message"
+            v-cloak
+        ></div>
+
+        <div :class="(form.response.error) ? 'w-full bg-red-100 text-red-600 p-3 rounded-sm font-semibold text-xs' : 'hidden'"
+            v-if="form.response.error"
+            v-html="form.response.message"
+            v-cloak
+        ></div>
+
+        <x-form id="auth" route="reset.store">
+            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 items-center my-3.5 lg:h-64">
+                <x-form.input.hidden name="token" value="{{ $token }}" />
+
+                <x-form.group.email
+                    name="email"
+                    label="{{ trans('general.email') }}"
+                    placeholder="{{ trans('general.email') }}"
+                    form-group-class="sm:col-span-6"
+                    input-group-class="input-group-alternative"
+                />
+
+                <x-form.group.password
+                    name="password"
+                    label="{{ trans('auth.password.new') }}"
+                    placeholder="{{ trans('auth.password.new') }}"
+                    form-group-class="sm:col-span-6"
+                    input-group-class="input-group-alternative"
+                />
+
+                <x-form.group.password
+                    name="password_confirmation"
+                    label="{{ trans('auth.password.new_confirm') }}"
+                    form-group-class="sm:col-span-6"
+                    input-group-class="input-group-alternative"
+                />
+
+                <x-button
+                    type="submit"
+                    ::disabled="form.loading"
+                    class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100 sm:col-span-6"
+                    override="class"
+                    data-loading-text="{{ trans('general.loading') }}"
+                >
+                <i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
+                <span :class="[{'opacity-0': form.loading}]">{{ trans('auth.reset') }}</span>
+                </x-button>
+            </div>
+        </x-form>
+    </x-slot>
+
+    <x-script folder="auth" file="common" />
+</x-layouts.auth>