103 lines
4.5 KiB
PHP
103 lines
4.5 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Outlook Connect Test</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg p-10 w-full max-w-md text-center space-y-6">
|
|
|
|
{{-- Logo --}}
|
|
<div class="flex justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-14 h-14" viewBox="0 0 48 48">
|
|
<rect width="26" height="26" x="2" y="11" fill="#0078d4" rx="2"/>
|
|
<path fill="#fff" d="M15 18a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/>
|
|
<path fill="#0078d4" d="M28 11h16a2 2 0 0 1 2 2v22a2 2 0 0 1-2 2H28V11z"/>
|
|
<path fill="#fff" d="M30 17h14v2H30zm0 4h14v2H30zm0 4h14v2H30zm0 4h8v2h-8z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">Outlook Integration</h1>
|
|
<p class="text-gray-500 text-sm mt-1">Connect your Microsoft Outlook account</p>
|
|
</div>
|
|
|
|
{{-- Flash messages --}}
|
|
@if(session('success'))
|
|
<div class="bg-green-50 border border-green-200 text-green-700 rounded-lg px-4 py-3 text-sm">
|
|
✅ {{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-sm">
|
|
❌ {{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Status card --}}
|
|
<div class="bg-gray-50 rounded-xl px-6 py-4 text-sm text-left space-y-2">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-600 font-medium">Status</span>
|
|
@if($connected)
|
|
<span class="inline-flex items-center gap-1 text-green-600 font-semibold">
|
|
<span class="w-2 h-2 rounded-full bg-green-500 inline-block"></span> Connected
|
|
</span>
|
|
@else
|
|
<span class="inline-flex items-center gap-1 text-gray-400 font-semibold">
|
|
<span class="w-2 h-2 rounded-full bg-gray-300 inline-block"></span> Not connected
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
@if($connected && $token)
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-600">Token expires</span>
|
|
<span class="text-gray-700 font-mono text-xs">{{ $token->expires_at->diffForHumans() }}</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Action buttons --}}
|
|
@if($connected)
|
|
{{-- Open Outlook --}}
|
|
<a href="{{ route('outlook.open') }}"
|
|
class="flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-xl transition duration-150">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
|
</svg>
|
|
Open Outlook
|
|
</a>
|
|
|
|
{{-- Disconnect --}}
|
|
<form method="POST" action="{{ route('outlook.disconnect') }}">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit"
|
|
class="w-full text-sm text-red-500 hover:text-red-700 underline transition">
|
|
Disconnect Outlook
|
|
</button>
|
|
</form>
|
|
@else
|
|
{{-- Connect button --}}
|
|
<a href="{{ route('outlook.connect') }}"
|
|
class="flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-xl transition duration-150">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M21.35 11.1H12.18V13.83H18.69C18.36 17.64 15.19 19.27 12.19 19.27C8.36 19.27 5 16.25 5 12C5 7.9 8.2 4.73 12.2 4.73C15.29 4.73 17.1 6.7 17.1 6.7L19 4.72C19 4.72 16.56 2 12.1 2C6.42 2 2.03 6.8 2.03 12C2.03 17.05 6.16 22 12.25 22C17.6 22 21.5 18.33 21.5 12.91C21.5 11.76 21.35 11.1 21.35 11.1Z"/>
|
|
</svg>
|
|
Connect to Outlook
|
|
</a>
|
|
|
|
<p class="text-xs text-gray-400">
|
|
You'll be redirected to Microsoft login. After connecting, you won't need to log in again.
|
|
</p>
|
|
@endif
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |