Skip to content

Commit

Permalink
Adding updates to pages if auth config is not published
Browse files Browse the repository at this point in the history
  • Loading branch information
@tnylea
tnylea committed May 5, 2024
1 parent 589f861 commit 2bf33e5
Show file tree
Hide file tree
Showing 7 changed files with 146 additions and 87 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ Auth has just been isntalled and you'll be able to visit the following authentic

## Auth Config

You may also want to publish the auth config by running the following:
You will also need to publish the auth config by running the following:

```
php artisan vendor:publish --tag=auth:config
Expand Down
10 changes: 6 additions & 4 deletions resources/views/components/setup/config-notification.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<div class="relative w-full rounded-lg border border-transparent bg-yellow-500 p-4 [&amp;>svg]:absolute [&amp;>svg]:text-foreground [&amp;>svg]:left-4 [&amp;>svg]:top-4 [&amp;>svg+div]:translate-y-[-3px] [&amp;:has(svg)]:pl-11 text-white">
<svg class="w-5 h-5 -translate-y-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path></svg>
<h5 class="mb-1 font-medium tracking-tight leading-none">Auth configurations have not been published</h5>
<div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
<div class="relative w-full rounded-lg border border-yellow-300 mb-8 bg-yellow-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-yellow-600">
<svg class="absolute w-5 h-5 -translate-y-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path></svg>
<h5 class="mb-1.5 font-medium tracking-tight leading-none">Auth configurations have not been published</h5>
<div class="text-sm">
<span class="opacity-80">You need to</span> <a href="https://github.com/thedevdojo/auth#auth-config" target="_blank" class="underline opacity-100 cursor-pointer">publish the authentication configs</a> <span class="opacity-80">in order to change setup configurations.</span>
</div>
</div>
80 changes: 44 additions & 36 deletions resources/views/pages/auth/setup/appearance.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,43 +58,51 @@ public function update($key, $value){
<x-auth::setup.full-screen-loader wire:target="update" />
<x-auth::setup.heading title="Appearance" description="Change the appearance of your auth screens, add a logo, modify the color, and more." />

<div>
<div class="sm:hidden">
<label for="tabs" class="sr-only">Select a tab</label>
<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
<select id="tabs" name="tabs" class="block py-2 pr-10 pl-3 w-full text-base rounded-md border-gray-300 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
<option>My Account</option>
<option>Company</option>
<option selected>Team Members</option>
<option>Billing</option>
</select>
</div>
<div class="hidden sm:block">
<div class="border-b border-gray-200">
@php
$tabs = ['logo' => 'Logo', 'background' => 'Background', 'colors' => 'Colors', 'alignment' => 'Alignment', 'favicon' => 'Favicon'];
@endphp
<nav class="flex -mb-px space-x-8" aria-label="Tabs">
@foreach($tabs as $slug => $tab)
<a href="#_" @click.prevent="tab = '{{ $slug }}'"
:class="{ 'border-indigo-500 text-indigo-600' : tab == '{{ $slug }}', 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' : tab != '{{ $slug }}' }"
class="px-1 py-4 text-sm font-medium whitespace-nowrap border-b-2">{{ $tab }}</a>
@endforeach
<!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
</nav>
<div class="relative w-full">
@if(!file_exists(base_path('config/devdojo/auth/appearance.php')))
<x-auth::setup.config-notification />
@else
<div class="relative w-full">
<div>
<div class="sm:hidden">
<label for="tabs" class="sr-only">Select a tab</label>
<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
<select id="tabs" name="tabs" class="block py-2 pr-10 pl-3 w-full text-base rounded-md border-gray-300 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
<option>My Account</option>
<option>Company</option>
<option selected>Team Members</option>
<option>Billing</option>
</select>
</div>
<div class="hidden sm:block">
<div class="border-b border-gray-200">
@php
$tabs = ['logo' => 'Logo', 'background' => 'Background', 'colors' => 'Colors', 'alignment' => 'Alignment', 'favicon' => 'Favicon'];
@endphp
<nav class="flex -mb-px space-x-8" aria-label="Tabs">
@foreach($tabs as $slug => $tab)
<a href="#_" @click.prevent="tab = '{{ $slug }}'"
:class="{ 'border-indigo-500 text-indigo-600' : tab == '{{ $slug }}', 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' : tab != '{{ $slug }}' }"
class="px-1 py-4 text-sm font-medium whitespace-nowrap border-b-2">{{ $tab }}</a>
@endforeach
<!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
</nav>
</div>
</div>
</div>
<div class="mt-10">
<div x-show="tab == 'logo'" class="w-full h-auto" x-cloak>
<livewire:auth.setup.logo />
</div>
<div x-show="tab == 'background'" class="w-full h-auto" x-cloak>
<livewire:auth.setup.background />
</div>
<div x-show="tab == 'alignment'" class="w-full h-auto" x-cloak>
align
</div>
</div>
</div>
</div>
</div>
<div class="mt-10">
<div x-show="tab == 'logo'" class="w-full h-auto" x-cloak>
<livewire:auth.setup.logo />
</div>
<div x-show="tab == 'background'" class="w-full h-auto" x-cloak>
<livewire:auth.setup.background />
</div>
<div x-show="tab == 'alignment'" class="w-full h-auto" x-cloak>
align
</div>
@endif
</div>

</section>
Expand Down
4 changes: 3 additions & 1 deletion resources/views/pages/auth/setup/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@

@volt('auth.setup')
<section class="px-4 py-14 mx-auto max-w-screen-lg">
<x-auth::setup.config-notification />
@if(!file_exists(base_path('config/devdojo/auth/settings.php')))
<x-auth::setup.config-notification />
@endif
<div class="mb-10">
<h2 class="mb-2 text-2xl font-bold text-left">Authentication Setup</h2>
<p class="text-sm text-left text-gray-600">Welcome to your authentication setup. Below you will find sections to help you configure and customize the auth in your application.</p>
Expand Down
36 changes: 36 additions & 0 deletions resources/views/pages/auth/setup/language.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<?php
use function Laravel\Folio\name;
use Livewire\Volt\Component;
use Livewire\Attributes\Validate;
use Devdojo\Auth\Helper;
use Winter\LaravelConfigWriter\ArrayFile;
name('auth.setup.language');
new class extends Component
{
};
?>

<x-auth::layouts.setup>

@volt('auth.setup.language')
<section class="relative px-4 py-5 mx-auto w-full max-w-screen-lg">
<x-auth::setup.full-screen-loader wire:target="update" />
<x-auth::setup.heading title="Language" description="Update the text copy on your login, registration, and other authentication pages" />
<div class="relative w-full">
@if(!file_exists(base_path('config/devdojo/auth/language.php')))
<x-auth::setup.config-notification />
@else
<div class="mt-10">
addl language stuff here
</div>
@endif
</div>
</section>
@endvolt

</x-auth::layouts.setup>
69 changes: 37 additions & 32 deletions resources/views/pages/auth/setup/providers.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,41 +36,46 @@ public function update($slug, $checked){
<section class="relative px-4 py-5 mx-auto w-full max-w-screen-lg">
<x-auth::setup.full-screen-loader wire:target="update" />
<x-auth::setup.heading title="Social Providers" description="Select the social networks that users can use for authentication" />
<div class="grid grid-cols-2">
@foreach($this->providers as $network_slug => $provider)

<div class="flex relative justify-between items-center max-w-sm border-b border-b-zinc-200">
<div class="flex relative justify-start items-center py-5 space-x-3">
<div class="flex items-center space-x-3">
<div class="w-7 h-7">
@if(isset($provider['svg']) && !empty(trim($provider['svg'])))
{!! $provider['svg'] !!}
@else
<span class="block w-full h-full rounded-full bg-zinc-200"></span>
@endif
</div>
<div class="relative">
<h4 class="text-base font-bold">{{ $provider['name'] }}</h4>
<p class="hidden text-sm">slug: {{ $network_slug }}</p>
<div class="relative w-full">
@if(!file_exists(base_path('config/devdojo/auth/providers.php')))
<x-auth::setup.config-notification />
@else
<div class="grid grid-cols-2">
@foreach($this->providers as $network_slug => $provider)

<div class="flex relative justify-between items-center max-w-sm border-b border-b-zinc-200">
<div class="flex relative justify-start items-center py-5 space-x-3">
<div class="flex items-center space-x-3">
<div class="w-7 h-7">
@if(isset($provider['svg']) && !empty(trim($provider['svg'])))
{!! $provider['svg'] !!}
@else
<span class="block w-full h-full rounded-full bg-zinc-200"></span>
@endif
</div>
<div class="relative">
<h4 class="text-base font-bold">{{ $provider['name'] }}</h4>
<p class="hidden text-sm">slug: {{ $network_slug }}</p>
</div>
</div>
<div class="relative right">
@if(isset($provider['client_id']) && !empty(trim($provider['client_id'])) && isset($provider['client_secret']) && !empty(trim($provider['client_secret'])))
<span x-tooltip="Keys have been added" class="flex justify-center items-center w-7 h-7 text-green-500 bg-green-100 rounded-full">
<x-phosphor-key-duotone class="w-4 h-4 text-green-500" />
<span>
@else
<span x-tooltip="Missing keys for {{ strtoupper($network_slug) }}_CLIENT_ID and {{ strtoupper($network_slug) }}_CLIENT_SECRET inside your .env" class="flex justify-center items-center w-7 h-7 text-red-500 bg-red-100 rounded-full border-red-200">
<x-phosphor-key-duotone class="w-4 h-4 text-red-500" />
<span>
@endif
</div>
</div>
<x-auth::setup.checkbox wire:change="update('{{ $network_slug }}', $el.checked)" :checked="($provider['active'] ? true : false)" />
</div>
<div class="relative right">
@if(isset($provider['client_id']) && !empty(trim($provider['client_id'])) && isset($provider['client_secret']) && !empty(trim($provider['client_secret'])))
<span x-tooltip="Keys have been added" class="flex justify-center items-center w-7 h-7 text-green-500 bg-green-100 rounded-full">
<x-phosphor-key-duotone class="w-4 h-4 text-green-500" />
<span>
@else
<span x-tooltip="Missing keys for {{ strtoupper($network_slug) }}_CLIENT_ID and {{ strtoupper($network_slug) }}_CLIENT_SECRET inside your .env" class="flex justify-center items-center w-7 h-7 text-red-500 bg-red-100 rounded-full border-red-200">
<x-phosphor-key-duotone class="w-4 h-4 text-red-500" />
<span>
@endif
</div>
</div>
<x-auth::setup.checkbox wire:change="update('{{ $network_slug }}', $el.checked)" :checked="($provider['active'] ? true : false)" />
@endforeach
</div>

@endforeach
</div>
@endif
</div>
</section>
@endvolt

Expand Down
32 changes: 19 additions & 13 deletions resources/views/pages/auth/setup/settings.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,20 +36,26 @@ public function update($key, $value){
<section class="relative px-4 py-5 mx-auto w-full max-w-screen-lg">
<x-auth::setup.full-screen-loader wire:target="update" />
<x-auth::setup.heading title="Settings" description="Adjust specific authentication features and enable/disable functionality." />
<div class="mt-10">
@foreach((array)$this->settings as $key => $value)
<div class="pb-5 mb-5 border-b border-zinc-200">
@php
$description = ($this->descriptions->settings[$key] ?? '');
@endphp
@if(is_bool($value))
<x-auth::setup.checkbox-title-description wire:change="update('{{ $key }}', $el.checked)" name="{{ $key }}" :$key :title="Helper::convertSlugToTitle($key)" :$description :checked="($value ? true : false)" />
@else
<x-auth::setup.input :id="$key" wire:blur="update('{{ $key }}', $el.value)" :$description :label="Helper::convertSlugToTitle($key)" type="text" name="{{ $key }}" value="{{ $value }}" />
@endif

<div class="relative w-full">
@if(!file_exists(base_path('config/devdojo/auth/settings.php')))
<x-auth::setup.config-notification />
@else
<div class="mt-10">
@foreach((array)$this->settings as $key => $value)
<div class="pb-5 mb-5 border-b border-zinc-200">
@php
$description = ($this->descriptions->settings[$key] ?? '');
@endphp
@if(is_bool($value))
<x-auth::setup.checkbox-title-description wire:change="update('{{ $key }}', $el.checked)" name="{{ $key }}" :$key :title="Helper::convertSlugToTitle($key)" :$description :checked="($value ? true : false)" />
@else
<x-auth::setup.input :id="$key" wire:blur="update('{{ $key }}', $el.value)" :$description :label="Helper::convertSlugToTitle($key)" type="text" name="{{ $key }}" value="{{ $value }}" />
@endif

</div>
@endforeach
</div>
@endforeach
@endif
</div>
</section>
@endvolt
Expand Down

0 comments on commit 2bf33e5

Please sign in to comment.