Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add loading state to buttons #17

Closed
wants to merge 2 commits into from
Closed

Add loading state to buttons #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3319422
First tryout
Wulfheart May 8, 2020
12dd418
Loading button state
Wulfheart May 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions stubs/auth/resources/views/livewire/auth/login.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
<x-logo class="w-auto h-16 mx-auto text-indigo-600" />
</a>

<h2 class="mt-6 text-3xl font-extrabold text-center text-gray-900 leading-9">
<h2 class="mt-6 text-3xl font-extrabold leading-9 text-center text-gray-900">
Sign in to your account
</h2>
<p class="mt-2 text-sm text-center text-gray-600 leading-5 max-w">
<p class="mt-2 text-sm leading-5 text-center text-gray-600 max-w">
Or
<a href="{{ route('register') }}" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
<a href="{{ route('register') }}" class="font-medium text-indigo-600 transition duration-150 ease-in-out hover:text-indigo-500 focus:outline-none focus:underline">
create a new account
</a>
</p>
Expand All @@ -19,7 +19,7 @@
<div class="px-4 py-8 bg-white shadow sm:rounded-lg sm:px-10">
<form wire:submit.prevent="authenticate">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 leading-5">
<label for="email" class="block text-sm font-medium leading-5 text-gray-700">
Email address
</label>

Expand All @@ -33,7 +33,7 @@
</div>

<div class="mt-6">
<label for="password" class="block text-sm font-medium text-gray-700 leading-5">
<label for="password" class="block text-sm font-medium leading-5 text-gray-700">
Password
</label>

Expand All @@ -48,22 +48,22 @@

<div class="flex items-center justify-between mt-6">
<div class="flex items-center">
<input wire:model.lazy="remember" id="remember" type="checkbox" class="form-checkbox w-4 h-4 text-indigo-600 transition duration-150 ease-in-out" />
<label for="remember" class="block ml-2 text-sm text-gray-900 leading-5">
<input wire:model.lazy="remember" id="remember" type="checkbox" class="w-4 h-4 text-indigo-600 transition duration-150 ease-in-out form-checkbox" />
<label for="remember" class="block ml-2 text-sm leading-5 text-gray-900">
Remember
</label>
</div>

<div class="text-sm leading-5">
<a href="{{ route('password.request') }}" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
<a href="{{ route('password.request') }}" class="font-medium text-indigo-600 transition duration-150 ease-in-out hover:text-indigo-500 focus:outline-none focus:underline">
Forgot your password?
</a>
</div>
</div>

<div class="mt-6">
<span class="block w-full rounded-md shadow-sm">
<button type="submit" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
<button type="submit" wire:loading.class="opacity-75 cursor-wait" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700">
Sign in
</button>
</span>
Expand Down
10 changes: 5 additions & 5 deletions stubs/auth/resources/views/livewire/auth/passwords/confirm.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
<x-logo class="w-auto h-16 mx-auto text-indigo-600" />
</a>

<h2 class="mt-6 text-3xl font-extrabold text-center text-gray-900 leading-9">
<h2 class="mt-6 text-3xl font-extrabold leading-9 text-center text-gray-900">
Confirm your password
</h2>
<p class="mt-2 text-sm text-center text-gray-600 leading-5 max-w">
<p class="mt-2 text-sm leading-5 text-center text-gray-600 max-w">
Please confirm your password before continuing
</p>
</div>
Expand All @@ -16,7 +16,7 @@
<div class="px-4 py-8 bg-white shadow sm:rounded-lg sm:px-10">
<form wire:submit.prevent="confirm">
<div>
<label for="password" class="block text-sm font-medium text-gray-700 leading-5">
<label for="password" class="block text-sm font-medium leading-5 text-gray-700">
Password
</label>

Expand All @@ -31,15 +31,15 @@

<div class="flex items-center justify-end mt-6">
<div class="text-sm leading-5">
<a href="{{ route('password.request') }}" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
<a href="{{ route('password.request') }}" class="font-medium text-indigo-600 transition duration-150 ease-in-out hover:text-indigo-500 focus:outline-none focus:underline">
Forgot your password?
</a>
</div>
</div>

<div class="mt-6">
<span class="block w-full rounded-md shadow-sm">
<button type="submit" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
<button type="submit" wire:loading.class="opacity-75 cursor-wait" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700">
Confirm password
</button>
</span>
Expand Down
12 changes: 6 additions & 6 deletions stubs/auth/resources/views/livewire/auth/passwords/email.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,24 @@
<x-logo class="w-auto h-16 mx-auto text-indigo-600" />
</a>

<h2 class="mt-6 text-3xl font-extrabold text-center text-gray-900 leading-9">
<h2 class="mt-6 text-3xl font-extrabold leading-9 text-center text-gray-900">
Reset password
</h2>
</div>

<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div class="px-4 py-8 bg-white shadow sm:rounded-lg sm:px-10">
@if ($emailSentMessage)
<div class="rounded-md bg-green-50 p-4">
<div class="p-4 rounded-md bg-green-50">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
<svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
</div>

<div class="ml-3">
<p class="text-sm leading-5 font-medium text-green-800">
<p class="text-sm font-medium leading-5 text-green-800">
{{ $emailSentMessage }}
</p>
</div>
Expand All @@ -30,7 +30,7 @@
@else
<form wire:submit.prevent="sendResetPasswordLink">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 leading-5">
<label for="email" class="block text-sm font-medium leading-5 text-gray-700">
Email address
</label>

Expand All @@ -45,7 +45,7 @@

<div class="mt-6">
<span class="block w-full rounded-md shadow-sm">
<button type="submit" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
<button type="submit" wire:loading.class="opacity-75 cursor-wait" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700">
Send password reset link
</button>
</span>
Expand Down
12 changes: 6 additions & 6 deletions stubs/auth/resources/views/livewire/auth/passwords/reset.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<x-logo class="w-auto h-16 mx-auto text-indigo-600" />
</a>

<h2 class="mt-6 text-3xl font-extrabold text-center text-gray-900 leading-9">
<h2 class="mt-6 text-3xl font-extrabold leading-9 text-center text-gray-900">
Reset password
</h2>
</div>
Expand All @@ -15,7 +15,7 @@
<input wire:model="token" type="hidden">

<div>
<label for="email" class="block text-sm font-medium text-gray-700 leading-5">
<label for="email" class="block text-sm font-medium leading-5 text-gray-700">
Email address
</label>

Expand All @@ -29,7 +29,7 @@
</div>

<div class="mt-6">
<label for="password" class="block text-sm font-medium text-gray-700 leading-5">
<label for="password" class="block text-sm font-medium leading-5 text-gray-700">
Password
</label>

Expand All @@ -43,18 +43,18 @@
</div>

<div class="mt-6">
<label for="password_confirmation" class="block text-sm font-medium text-gray-700 leading-5">
<label for="password_confirmation" class="block text-sm font-medium leading-5 text-gray-700">
Confirm Password
</label>

<div class="mt-1 rounded-md shadow-sm">
<input wire:model.lazy="passwordConfirmation" id="password_confirmation" type="password" required class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 appearance-none rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
<input wire:model.lazy="passwordConfirmation" id="password_confirmation" type="password" required class="block w-full px-3 py-2 placeholder-gray-400 transition duration-150 ease-in-out border border-gray-300 rounded-md appearance-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5" />
</div>
</div>

<div class="mt-6">
<span class="block w-full rounded-md shadow-sm">
<button type="submit" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
<button type="submit" wire:loading.class="opacity-75 cursor-wait" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700">
Reset password
</button>
</span>
Expand Down
18 changes: 9 additions & 9 deletions stubs/auth/resources/views/livewire/auth/register.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
<x-logo class="w-auto h-16 mx-auto text-indigo-600" />
</a>

<h2 class="mt-6 text-3xl font-extrabold text-center text-gray-900 leading-9">
<h2 class="mt-6 text-3xl font-extrabold leading-9 text-center text-gray-900">
Create a new account
</h2>

<p class="mt-2 text-sm text-center text-gray-600 leading-5 max-w">
<p class="mt-2 text-sm leading-5 text-center text-gray-600 max-w">
Or
<a href="{{ route('login') }}" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
<a href="{{ route('login') }}" class="font-medium text-indigo-600 transition duration-150 ease-in-out hover:text-indigo-500 focus:outline-none focus:underline">
sign in to your account
</a>
</p>
Expand All @@ -20,7 +20,7 @@
<div class="px-4 py-8 bg-white shadow sm:rounded-lg sm:px-10">
<form wire:submit.prevent="register">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 leading-5">
<label for="name" class="block text-sm font-medium leading-5 text-gray-700">
Name
</label>

Expand All @@ -34,7 +34,7 @@
</div>

<div class="mt-6">
<label for="email" class="block text-sm font-medium text-gray-700 leading-5">
<label for="email" class="block text-sm font-medium leading-5 text-gray-700">
Email address
</label>

Expand All @@ -48,7 +48,7 @@
</div>

<div class="mt-6">
<label for="password" class="block text-sm font-medium text-gray-700 leading-5">
<label for="password" class="block text-sm font-medium leading-5 text-gray-700">
Password
</label>

Expand All @@ -62,18 +62,18 @@
</div>

<div class="mt-6">
<label for="password_confirmation" class="block text-sm font-medium text-gray-700 leading-5">
<label for="password_confirmation" class="block text-sm font-medium leading-5 text-gray-700">
Confirm Password
</label>

<div class="mt-1 rounded-md shadow-sm">
<input wire:model.lazy="passwordConfirmation" id="password_confirmation" type="password" required class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 appearance-none rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
<input wire:model.lazy="passwordConfirmation" id="password_confirmation" type="password" required class="block w-full px-3 py-2 placeholder-gray-400 transition duration-150 ease-in-out border border-gray-300 rounded-md appearance-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5" />
</div>
</div>

<div class="mt-6">
<span class="block w-full rounded-md shadow-sm">
<button type="submit" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
<button type="submit" wire:loading.class="opacity-75 cursor-wait" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700">
Register
</button>
</span>
Expand Down