Add encrypted Etsy app credential settings

resources/views/etsy.blade.php

@@ -1,8 +1,8 @@
 @extends('layouts.app')
 @section('title', 'Etsy shop')
 @section('content')
-<div class="flex flex-wrap items-end justify-between gap-4"><div><p class="text-xs font-bold uppercase tracking-[.2em] text-brand">Sales</p><h2 class="mt-2 text-2xl font-bold">{{ $connection?->shop_name ?? 'Connect your Etsy shop' }}</h2><p class="mt-1 text-slate-400">Paid orders awaiting dispatch and active listings.</p></div><form method="post" action="{{ route('etsy.connect') }}">@csrf<button class="rounded-xl bg-brand px-4 py-3 text-sm font-semibold text-slate-950 hover:bg-brand/90">{{ $connection ? 'Reconnect Etsy' : 'Connect Etsy' }}</button></form></div>
-@if(! $configured)<div role="alert" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-200">Add ETSY_KEYSTRING and ETSY_SHARED_SECRET to the application environment, then register {{ route('etsy.callback') }} as the Etsy redirect URI.</div>@endif
+<div class="flex flex-wrap items-end justify-between gap-4"><div><p class="text-xs font-bold uppercase tracking-[.2em] text-brand">Sales</p><h2 class="mt-2 text-2xl font-bold">{{ $connection?->shop_name ?? 'Connect your Etsy shop' }}</h2><p class="mt-1 text-slate-400">Paid orders awaiting dispatch and active listings.</p></div>@if($configured)<form method="post" action="{{ route('etsy.connect') }}">@csrf<button class="rounded-xl bg-brand px-4 py-3 text-sm font-semibold text-slate-950 hover:bg-brand/90">{{ $connection ? 'Reconnect Etsy' : 'Connect Etsy' }}</button></form>@else<a href="{{ route('settings.index') }}" class="rounded-xl bg-brand px-4 py-3 text-sm font-semibold text-slate-950 hover:bg-brand/90">Set up Etsy</a>@endif</div>
+@if(! $configured)<div role="alert" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-200">Add your Etsy app key and shared secret in <a class="underline" href="{{ route('settings.index') }}">Settings</a>, then connect your shop.</div>@endif
 @if($integrationError)<div role="alert" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-200">{{ $integrationError }}</div>@endif
 @if($connection)
 <div class="grid gap-4 sm:grid-cols-2"><div class="rounded-2xl border border-slate-800 bg-slate-900 p-6"><p class="text-sm text-slate-400">Awaiting dispatch</p><p class="mt-3 text-4xl font-bold">{{ count($receipts) }}</p></div><div class="rounded-2xl border border-slate-800 bg-slate-900 p-6"><p class="text-sm text-slate-400">Active listings shown</p><p class="mt-3 text-4xl font-bold">{{ count($listings) }}</p></div></div>

resources/views/layouts/app.blade.php

@@ -27,6 +27,7 @@
                 @endif
             @endforeach
             @if(auth()->user()->role === 'admin')
+                <a href="{{ route('settings.index') }}" @class(['shrink-0 rounded-xl px-4 py-3 text-sm font-medium hover:bg-slate-800', 'bg-brand/10 text-brand' => request()->routeIs('settings.*'), 'text-slate-400' => !request()->routeIs('settings.*')])>Settings</a>
                 <a href="{{ route('users.index') }}" @class(['shrink-0 rounded-xl px-4 py-3 text-sm font-medium hover:bg-slate-800', 'bg-brand/10 text-brand' => request()->routeIs('users.*'), 'text-slate-400' => !request()->routeIs('users.*')])>Users</a>
             @endif
         </nav>

resources/views/settings/index.blade.php

@@ -0,0 +1,43 @@
+@extends('layouts.app')
+@section('title', 'Settings')
+@section('content')
+<div>
+    <p class="text-xs font-bold uppercase tracking-[.2em] text-brand">Integrations</p>
+    <h2 class="mt-2 text-2xl font-bold">Etsy app credentials</h2>
+    <p class="mt-1 text-sm text-slate-400">Save the credentials from your Etsy developer app, then connect your shop with OAuth.</p>
+</div>
+
+<section class="rounded-2xl border border-slate-800 bg-slate-900 p-6">
+    <div class="flex flex-wrap items-center justify-between gap-3">
+        <div>
+            <h3 class="text-lg font-semibold">API access</h3>
+            <p class="mt-1 text-sm text-slate-400">{{ $storedCredentials ? 'Credentials saved in the database.' : ($configured ? 'Using server credentials. Save them here to manage them in the dashboard.' : 'No credentials saved yet.') }}</p>
+        </div>
+        <span class="rounded-full px-3 py-1 text-xs font-semibold {{ $configured ? 'bg-emerald-500/10 text-emerald-300' : 'bg-amber-500/10 text-amber-200' }}">{{ $configured ? 'Configured' : 'Setup needed' }}</span>
+    </div>
+
+    <form method="post" action="{{ route('settings.etsy.update') }}" class="mt-6 grid gap-5 md:grid-cols-2">
+        @csrf
+        @method('PUT')
+        <label class="grid gap-2 text-sm text-slate-300">
+            Etsy app keystring
+            <input name="keystring" type="password" autocomplete="new-password" maxlength="255" placeholder="{{ $storedCredentials ? 'Leave blank to keep saved key' : 'Enter your app keystring' }}" class="rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-slate-100 placeholder:text-slate-500" {{ $storedCredentials ? '' : 'required' }}>
+        </label>
+        <label class="grid gap-2 text-sm text-slate-300">
+            Etsy shared secret
+            <input name="shared_secret" type="password" autocomplete="new-password" maxlength="255" placeholder="{{ $storedCredentials ? 'Leave blank to keep saved secret' : 'Enter your shared secret' }}" class="rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-slate-100 placeholder:text-slate-500" {{ $storedCredentials ? '' : 'required' }}>
+        </label>
+        <div class="md:col-span-2">
+            <button class="rounded-xl bg-brand px-5 py-3 text-sm font-semibold text-slate-950 hover:bg-brand/90">Save credentials</button>
+        </div>
+    </form>
+    <p class="mt-4 text-xs text-slate-500">Saved values are encrypted and are never shown again. Changing the app key disconnects the current Etsy shop.</p>
+</section>
+
+<section class="rounded-2xl border border-slate-800 bg-slate-900 p-6">
+    <h3 class="text-lg font-semibold">OAuth callback</h3>
+    <p class="mt-1 text-sm text-slate-400">Register this exact HTTPS URL in your Etsy developer app.</p>
+    <code class="mt-4 block overflow-x-auto rounded-xl border border-slate-800 bg-slate-950 px-4 py-3 text-sm text-slate-200">{{ $redirectUri }}</code>
+    @if($configured)<a href="{{ route('etsy.index') }}" class="mt-5 inline-flex rounded-xl border border-slate-700 px-4 py-3 text-sm font-semibold text-slate-200 hover:border-brand hover:text-white">Go to Etsy shop</a>@endif
+</section>
+@endsection