initial commit
This commit is contained in:
@@ -0,0 +1,99 @@
|
||||
@{
|
||||
ViewData["Title"] = "Confirmemail1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Email Successfully<br/>Confirmed</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Your email has been verified and your account is now active. You can start exploring the full power of EnterpriseKit right away.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Account Active</span><p class="text-xs text-gray-400 mt-0.5">Your account is fully activated and ready to use</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Full Access Granted</span><p class="text-xs text-gray-400 mt-0.5">Access all enterprise modules from one dashboard</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Ready to Go</span><p class="text-xs text-gray-400 mt-0.5">Sign in now to start managing your enterprise operations</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Verification Complete</div>
|
||||
<div class="text-xs text-gray-400">Your email has been verified successfully</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Thank You for Confirming!</h2>
|
||||
<p class="text-gray-500 text-sm mt-2 leading-relaxed">Your email address has been successfully verified and your account is now fully active. You can start using EnterpriseKit immediately.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-gray-100 rounded-xl p-6 mb-6">
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Account Activated</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Your account is now active and ready for use</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Email Verified</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Your email address has been successfully verified</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Ready to Explore</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Sign in to access all EnterpriseKit features</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="login1.html" class="btn-primary w-full">
|
||||
Sign In to Your Account
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</a>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Need help?
|
||||
<a class="auth-link ml-1" href="#">Contact Support</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,99 @@
|
||||
@{
|
||||
ViewData["Title"] = "Confirmemail2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Email Successfully<br/>Confirmed</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Your email has been verified and your account is now active. You can start exploring the full power of EnterpriseKit right away.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Account Active</span><p class="text-xs text-gray-400 mt-0.5">Your account is fully activated and ready to use</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Full Access Granted</span><p class="text-xs text-gray-400 mt-0.5">Access all enterprise modules from one dashboard</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Ready to Go</span><p class="text-xs text-gray-400 mt-0.5">Sign in now to start managing your enterprise operations</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-blue-100 rounded-xl shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Verification Complete</div>
|
||||
<div class="text-xs text-gray-400">Your email has been verified successfully</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Thank You for Confirming!</h2>
|
||||
<p class="text-gray-500 text-sm mt-2 leading-relaxed">Your email address has been successfully verified and your account is now fully active. You can start using EnterpriseKit immediately.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-blue-100 rounded-xl p-6 mb-6 shadow-sm">
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Account Activated</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Your account is now active and ready for use</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Email Verified</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Your email address has been successfully verified</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Ready to Explore</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Sign in to access all EnterpriseKit features</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="login2.html" class="btn-primary w-full">
|
||||
Sign In to Your Account
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</a>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Need help?
|
||||
<a class="auth-link ml-1" href="#">Contact Support</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,99 @@
|
||||
@{
|
||||
ViewData["Title"] = "Confirmemail3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/15 rounded-xl flex items-center justify-center backdrop-blur-sm">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-100">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-white leading-tight mb-4">Email Successfully<br/>Confirmed</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">Your email has been verified and your account is now active. You can start exploring the full power of EnterpriseKit right away.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Account Active</span><p class="text-xs text-blue-200 mt-0.5">Your account is fully activated and ready to use</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Full Access Granted</span><p class="text-xs text-blue-200 mt-0.5">Access all enterprise modules from one dashboard</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Ready to Go</span><p class="text-xs text-blue-200 mt-0.5">Sign in now to start managing your enterprise operations</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 border border-white/20 rounded-xl backdrop-blur-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Verification Complete</div>
|
||||
<div class="text-xs text-blue-200">Your email has been verified successfully</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Thank You for Confirming!</h2>
|
||||
<p class="text-gray-500 text-sm mt-2 leading-relaxed">Your email address has been successfully verified and your account is now fully active. You can start using EnterpriseKit immediately.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-gray-100 rounded-xl p-6 mb-6">
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Account Activated</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Your account is now active and ready for use</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Email Verified</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Your email address has been successfully verified</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Ready to Explore</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Sign in to access all EnterpriseKit features</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="login3.html" class="btn-primary w-full">
|
||||
Sign In to Your Account
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</a>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Need help?
|
||||
<a class="text-blue-600 font-semibold text-sm hover:text-blue-700 hover:underline ml-1" href="#">Contact Support</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,99 @@
|
||||
@{
|
||||
ViewData["Title"] = "Confirmemail4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex flex-row">
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Thank You for Confirming!</h2>
|
||||
<p class="text-gray-500 text-sm mt-2 leading-relaxed">Your email address has been successfully verified and your account is now fully active. You can start using EnterpriseKit immediately.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-gray-100 rounded-2xl p-6 mb-6">
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Account Activated</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Your account is now active and ready for use</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Email Verified</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Your email address has been successfully verified</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Ready to Explore</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Sign in to access all EnterpriseKit features</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="login4.html" class="btn-primary w-full">
|
||||
Sign In to Your Account
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</a>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Need help?
|
||||
<a class="text-blue-600 font-semibold text-sm hover:text-blue-700 hover:underline ml-1" href="#">Contact Support</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/15 rounded-2xl flex items-center justify-center backdrop-blur-sm">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-100">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-white leading-tight mb-4">Email Successfully<br/>Confirmed</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">Your email has been verified and your account is now active. You can start exploring the full power of EnterpriseKit right away.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Account Active</span><p class="text-xs text-blue-200 mt-0.5">Your account is fully activated and ready to use</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Full Access Granted</span><p class="text-xs text-blue-200 mt-0.5">Access all enterprise modules from one dashboard</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Ready to Go</span><p class="text-xs text-blue-200 mt-0.5">Sign in now to start managing your enterprise operations</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 border border-white/20 rounded-2xl backdrop-blur-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Verification Complete</div>
|
||||
<div class="text-xs text-blue-200">Your email has been verified successfully</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,99 @@
|
||||
@{
|
||||
ViewData["Title"] = "Confirmemail5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex">
|
||||
<div class="hidden lg:flex w-1/2 bg-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Email Successfully<br/>Confirmed</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Your email has been verified and your account is now active. You can start exploring the full power of EnterpriseKit right away.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Account Active</span><p class="text-xs text-gray-400 mt-0.5">Your account is fully activated and ready to use</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Full Access Granted</span><p class="text-xs text-gray-400 mt-0.5">Access all enterprise modules from one dashboard</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Ready to Go</span><p class="text-xs text-gray-400 mt-0.5">Sign in now to start managing your enterprise operations</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 box-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-blue-50 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Verification Complete</div>
|
||||
<div class="text-xs text-gray-400">Your email has been verified successfully</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Thank You for Confirming!</h2>
|
||||
<p class="text-gray-500 text-sm mt-2 leading-relaxed">Your email address has been successfully verified and your account is now fully active. You can start using EnterpriseKit immediately.</p>
|
||||
</div>
|
||||
|
||||
<div class="box-card p-6 mb-6">
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<div class="w-6 h-6 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Account Activated</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Your account is now active and ready for use</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<div class="w-6 h-6 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Email Verified</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Your email address has been successfully verified</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-6 h-6 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-sm">Ready to Explore</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Sign in to access all EnterpriseKit features</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="login5.html" class="btn-primary w-full">
|
||||
Sign In to Your Account
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</a>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Need help?
|
||||
<a class="auth-link ml-1" href="#">Contact Support</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,121 @@
|
||||
@{
|
||||
ViewData["Title"] = "Forgotpassword1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Reset Your<br/>Account Password</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Enter your registered email address and we'll send you a secure link to reset your password. The link will expire in 24 hours for your security.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Quick & Secure</span><p class="text-xs text-gray-400 mt-0.5">Reset your password in just a few minutes</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Enterprise Security</span><p class="text-xs text-gray-400 mt-0.5">End-to-end encrypted password reset process</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">24/7 Support</span><p class="text-xs text-gray-400 mt-0.5">Contact our support team if you need help</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Your Data is Safe</div>
|
||||
<div class="text-xs text-gray-400">All password resets are encrypted and verified</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Forgot Password?</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">No worries. Enter your email and we'll send you a reset link.</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
if (!document.getElementById('email').value.trim()) { errors.email = true; return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Reset link sent! A confirmation email has been sent to your email address.' };
|
||||
setTimeout(() => { notification.show = false; }, 5000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required :class="{ 'error': errors.email }">
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
|
||||
Send Reset Link
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Sending reset link...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a class="auth-link inline-flex items-center gap-1.5" href="login1.html">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
|
||||
Back to Sign In
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,121 @@
|
||||
@{
|
||||
ViewData["Title"] = "Forgotpassword2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Reset Your<br/>Account Password</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Enter your registered email address and we'll send you a secure link to reset your password. The link will expire in 24 hours for your security.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Quick & Secure</span><p class="text-xs text-gray-400 mt-0.5">Reset your password in just a few minutes</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Enterprise Security</span><p class="text-xs text-gray-400 mt-0.5">End-to-end encrypted password reset process</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">24/7 Support</span><p class="text-xs text-gray-400 mt-0.5">Contact our support team if you need help</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-blue-100 rounded-xl shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Your Data is Safe</div>
|
||||
<div class="text-xs text-gray-400">All password resets are encrypted and verified</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Forgot Password?</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">No worries. Enter your email and we'll send you a reset link.</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
if (!document.getElementById('email').value.trim()) { errors.email = true; return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Reset link sent! A confirmation email has been sent to your email address.' };
|
||||
setTimeout(() => { notification.show = false; }, 5000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required :class="{ 'error': errors.email }">
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
|
||||
Send Reset Link
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Sending reset link...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a class="auth-link inline-flex items-center gap-1.5" href="login2.html">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
|
||||
Back to Sign In
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,121 @@
|
||||
@{
|
||||
ViewData["Title"] = "Forgotpassword3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-100">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-white leading-tight mb-4">Reset Your<br/>Account Password</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">Enter your registered email address and we'll send you a secure link to reset your password. The link will expire in 24 hours for your security.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded check-icon flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Quick & Secure</span><p class="text-xs text-blue-200 mt-0.5">Reset your password in just a few minutes</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded check-icon flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Enterprise Security</span><p class="text-xs text-blue-200 mt-0.5">End-to-end encrypted password reset process</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded check-icon flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">24/7 Support</span><p class="text-xs text-blue-200 mt-0.5">Contact our support team if you need help</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Your Data is Safe</div>
|
||||
<div class="text-xs text-blue-200">All password resets are encrypted and verified</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-white">Forgot Password?</h2>
|
||||
<p class="text-blue-100 text-sm mt-1">No worries. Enter your email and we'll send you a reset link.</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
if (!document.getElementById('email').value.trim()) { errors.email = true; return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Reset link sent! A confirmation email has been sent to your email address.' };
|
||||
setTimeout(() => { notification.show = false; }, 5000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required :class="{ 'error': errors.email }">
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
|
||||
Send Reset Link
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Sending reset link...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a class="auth-link inline-flex items-center gap-1.5" href="login3.html">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
|
||||
Back to Sign In
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,121 @@
|
||||
@{
|
||||
ViewData["Title"] = "Forgotpassword4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex flex-row-reverse bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-100">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-white leading-tight mb-4">Reset Your<br/>Account Password</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">Enter your registered email address and we'll send you a secure link to reset your password. The link will expire in 24 hours for your security.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Quick & Secure</span><p class="text-xs text-blue-200 mt-0.5">Reset your password in just a few minutes</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Enterprise Security</span><p class="text-xs text-blue-200 mt-0.5">End-to-end encrypted password reset process</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">24/7 Support</span><p class="text-xs text-blue-200 mt-0.5">Contact our support team if you need help</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Your Data is Safe</div>
|
||||
<div class="text-xs text-blue-200">All password resets are encrypted and verified</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-white">Forgot Password?</h2>
|
||||
<p class="text-blue-100 text-sm mt-1">No worries. Enter your email and we'll send you a reset link.</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
if (!document.getElementById('email').value.trim()) { errors.email = true; return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Reset link sent! A confirmation email has been sent to your email address.' };
|
||||
setTimeout(() => { notification.show = false; }, 5000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required :class="{ 'error': errors.email }">
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
|
||||
Send Reset Link
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Sending reset link...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a class="auth-link inline-flex items-center gap-1.5" href="login4.html">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
|
||||
Back to Sign In
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-2xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,121 @@
|
||||
@{
|
||||
ViewData["Title"] = "Forgotpassword5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex bg-white" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gray-50 items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Reset Your<br/>Account Password</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Enter your registered email address and we'll send you a secure link to reset your password. The link will expire in 24 hours for your security.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Quick & Secure</span><p class="text-xs text-gray-400 mt-0.5">Reset your password in just a few minutes</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Enterprise Security</span><p class="text-xs text-gray-400 mt-0.5">End-to-end encrypted password reset process</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">24/7 Support</span><p class="text-xs text-gray-400 mt-0.5">Contact our support team if you need help</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-gray-200">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Your Data is Safe</div>
|
||||
<div class="text-xs text-gray-400">All password resets are encrypted and verified</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Forgot Password?</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">No worries. Enter your email and we'll send you a reset link.</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
if (!document.getElementById('email').value.trim()) { errors.email = true; return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Reset link sent! A confirmation email has been sent to your email address.' };
|
||||
setTimeout(() => { notification.show = false; }, 5000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required :class="{ 'error': errors.email }">
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
|
||||
Send Reset Link
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Sending reset link...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a class="auth-link inline-flex items-center gap-1.5" href="login5.html">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
|
||||
Back to Sign In
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,142 @@
|
||||
@{
|
||||
ViewData["Title"] = "Login1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Welcome Back to<br/>Your Enterprise Hub</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Sign in to access your dashboard, manage your applications, and collaborate with your team across all your enterprise modules.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Multi-Module Access</span><p class="text-xs text-gray-400 mt-0.5">CRM, HRM, WMS, TMS, ITSM and more</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Real-Time Analytics</span><p class="text-xs text-gray-400 mt-0.5">Live dashboards with ChartJS visualization</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Enterprise Security</span><p class="text-xs text-gray-400 mt-0.5">SSO, MFA, and role-based access control</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
|
||||
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">24/7 Enterprise Support</div>
|
||||
<div class="text-xs text-gray-400">Dedicated support team available around the clock</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Sign In</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Enter your credentials to access your account</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Welcome back! You have been signed in successfully.' };
|
||||
setTimeout(() => { notification.show = false; }, 4000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label class="form-label mb-0" for="password">Password</label>
|
||||
<a class="text-link text-xs" href="forgotpassword1.html">Forgot password?</a>
|
||||
</div>
|
||||
<input class="input-field" id="password" type="password" placeholder="Enter your password" required>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="checkbox-custom" id="remember" type="checkbox">
|
||||
<label class="text-sm text-gray-600 cursor-pointer select-none" for="remember">Remember me</label>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
Sign In
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Signing in...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="divider"><span>Or continue with</span></div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<button class="btn-outline" type="button">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
|
||||
Sign in with Google
|
||||
</button>
|
||||
<button class="btn-outline" type="button">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
|
||||
Sign in with Facebook
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Don't have an account?
|
||||
<a class="auth-link ml-1" href="register1.html">Create one</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,141 @@
|
||||
@{
|
||||
ViewData["Title"] = "Login2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Welcome Back to<br/>Your Enterprise Hub</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Sign in to access your dashboard, manage your applications, and collaborate with your team across all your enterprise modules.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Multi-Module Access</span><p class="text-xs text-gray-400 mt-0.5">CRM, HRM, WMS, TMS, ITSM and more</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Real-Time Analytics</span><p class="text-xs text-gray-400 mt-0.5">Live dashboards with ChartJS visualization</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Enterprise Security</span><p class="text-xs text-gray-400 mt-0.5">SSO, MFA, and role-based access control</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-blue-100 rounded-xl shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">24/7 Enterprise Support</div>
|
||||
<div class="text-xs text-gray-400">Dedicated support team available around the clock</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Sign In</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Enter your credentials to access your account</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Welcome back! You have been signed in successfully.' };
|
||||
setTimeout(() => { notification.show = false; }, 4000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label class="form-label mb-0" for="password">Password</label>
|
||||
<a class="text-link text-xs" href="forgotpassword2.html">Forgot password?</a>
|
||||
</div>
|
||||
<input class="input-field" id="password" type="password" placeholder="Enter your password" required>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="checkbox-custom" id="remember" type="checkbox">
|
||||
<label class="text-sm text-gray-600 cursor-pointer select-none" for="remember">Remember me</label>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
Sign In
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Signing in...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="divider"><span>Or continue with</span></div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<button class="btn-outline" type="button">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
|
||||
Sign in with Google
|
||||
</button>
|
||||
<button class="btn-outline" type="button">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
|
||||
Sign in with Facebook
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Don't have an account?
|
||||
<a class="auth-link ml-1" href="register2.html">Create one</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,141 @@
|
||||
@{
|
||||
ViewData["Title"] = "Login3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
|
||||
<div class="max-w-md text-white">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-200">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold leading-tight mb-4">Welcome Back to<br/>Your Enterprise Hub</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">Sign in to access your dashboard, manage your applications, and collaborate with your team across all your enterprise modules.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Multi-Module Access</span><p class="text-xs text-blue-200 mt-0.5">CRM, HRM, WMS, TMS, ITSM and more</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Real-Time Analytics</span><p class="text-xs text-blue-200 mt-0.5">Live dashboards with ChartJS visualization</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Enterprise Security</span><p class="text-xs text-blue-200 mt-0.5">SSO, MFA, and role-based access control</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 backdrop-blur border border-white/20 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">24/7 Enterprise Support</div>
|
||||
<div class="text-xs text-blue-200">Dedicated support team available around the clock</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Sign In</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Enter your credentials to access your account</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Welcome back! You have been signed in successfully.' };
|
||||
setTimeout(() => { notification.show = false; }, 4000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label class="form-label mb-0" for="password">Password</label>
|
||||
<a class="text-link text-xs" href="forgotpassword3.html">Forgot password?</a>
|
||||
</div>
|
||||
<input class="input-field" id="password" type="password" placeholder="Enter your password" required>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="checkbox-custom" id="remember" type="checkbox">
|
||||
<label class="text-sm text-gray-600 cursor-pointer select-none" for="remember">Remember me</label>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
Sign In
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Signing in...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="divider"><span>Or continue with</span></div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<button class="btn-outline" type="button">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
|
||||
Sign in with Google
|
||||
</button>
|
||||
<button class="btn-outline" type="button">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
|
||||
Sign in with Facebook
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Don't have an account?
|
||||
<a class="auth-link ml-1" href="register3.html">Create one</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,141 @@
|
||||
@{
|
||||
ViewData["Title"] = "Login4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Sign In</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Enter your credentials to access your account</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Welcome back! You have been signed in successfully.' };
|
||||
setTimeout(() => { notification.show = false; }, 4000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label class="form-label mb-0" for="password">Password</label>
|
||||
<a class="text-link text-xs" href="forgotpassword4.html">Forgot password?</a>
|
||||
</div>
|
||||
<input class="input-field" id="password" type="password" placeholder="Enter your password" required>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="checkbox-custom" id="remember" type="checkbox">
|
||||
<label class="text-sm text-gray-600 cursor-pointer select-none" for="remember">Remember me</label>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
Sign In
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Signing in...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="divider"><span>Or continue with</span></div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<button class="btn-outline" type="button">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
|
||||
Sign in with Google
|
||||
</button>
|
||||
<button class="btn-outline" type="button">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
|
||||
Sign in with Facebook
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Don't have an account?
|
||||
<a class="auth-link ml-1" href="register4.html">Create one</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
|
||||
<div class="max-w-md text-white">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center backdrop-blur">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-200">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold leading-tight mb-4">Welcome Back to<br/>Your Enterprise Hub</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">Sign in to access your dashboard, manage your applications, and collaborate with your team across all your enterprise modules.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Multi-Module Access</span><p class="text-xs text-blue-200 mt-0.5">CRM, HRM, WMS, TMS, ITSM and more</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Real-Time Analytics</span><p class="text-xs text-blue-200 mt-0.5">Live dashboards with ChartJS visualization</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Enterprise Security</span><p class="text-xs text-blue-200 mt-0.5">SSO, MFA, and role-based access control</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 backdrop-blur border border-white/20 rounded-2xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">24/7 Enterprise Support</div>
|
||||
<div class="text-xs text-blue-200">Dedicated support team available around the clock</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-200 shadow-lg rounded-2xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,141 @@
|
||||
@{
|
||||
ViewData["Title"] = "Login5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Welcome Back to<br/>Your Enterprise Hub</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Sign in to access your dashboard, manage your applications, and collaborate with your team across all your enterprise modules.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Multi-Module Access</span><p class="text-xs text-gray-400 mt-0.5">CRM, HRM, WMS, TMS, ITSM and more</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Real-Time Analytics</span><p class="text-xs text-gray-400 mt-0.5">Live dashboards with ChartJS visualization</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Enterprise Security</span><p class="text-xs text-gray-400 mt-0.5">SSO, MFA, and role-based access control</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 feature-box">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">24/7 Enterprise Support</div>
|
||||
<div class="text-xs text-gray-400">Dedicated support team available around the clock</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Sign In</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Enter your credentials to access your account</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Welcome back! You have been signed in successfully.' };
|
||||
setTimeout(() => { notification.show = false; }, 4000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label class="form-label mb-0" for="password">Password</label>
|
||||
<a class="text-link text-xs" href="forgotpassword5.html">Forgot password?</a>
|
||||
</div>
|
||||
<input class="input-field" id="password" type="password" placeholder="Enter your password" required>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="checkbox-custom" id="remember" type="checkbox">
|
||||
<label class="text-sm text-gray-600 cursor-pointer select-none" for="remember">Remember me</label>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
Sign In
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Signing in...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="divider"><span>Or continue with</span></div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<button class="btn-outline" type="button">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
|
||||
Sign in with Google
|
||||
</button>
|
||||
<button class="btn-outline" type="button">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
|
||||
Sign in with Facebook
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Don't have an account?
|
||||
<a class="auth-link ml-1" href="register5.html">Create one</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,114 @@
|
||||
@{
|
||||
ViewData["Title"] = "Logout1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, logoutSuccess: false }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Secure<br/>Session Logout</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">End your current session securely. All active sessions will be terminated and you will be redirected to the login page.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Secure Session Termination</span><p class="text-xs text-gray-400 mt-0.5">All tokens and sessions are invalidated immediately</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Data Protection</span><p class="text-xs text-gray-400 mt-0.5">Your data remains encrypted and protected after logout</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Quick Re-Access</span><p class="text-xs text-gray-400 mt-0.5">Sign back in anytime with your credentials</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Secure by Default</div>
|
||||
<div class="text-xs text-gray-400">All sessions are encrypted with enterprise-grade security</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Logout</h2>
|
||||
<p class="text-gray-500 text-sm mt-3 max-w-sm mx-auto">Are you sure you want to logout? Click below button to confirm.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<button class="btn-primary" type="button" @@click="
|
||||
loading = true;
|
||||
logoutSuccess = false;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
logoutSuccess = true;
|
||||
notification = { show: true, message: 'You have been logged out successfully. Redirecting to login page...' };
|
||||
setTimeout(() => { notification.show = false; }, 4000);
|
||||
}, 3000);
|
||||
" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/></svg>
|
||||
Logout
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Logging out...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
<a href="dashboard1.html" class="btn-outline block text-center no-underline" :class="{ 'pointer-events-none opacity-50': loading }">
|
||||
<span class="flex items-center gap-2 justify-center">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg>
|
||||
Cancel
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Logout Successful</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,114 @@
|
||||
@{
|
||||
ViewData["Title"] = "Logout2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, logoutSuccess: false }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Secure<br/>Session Logout</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">End your current session securely. All active sessions will be terminated and you will be redirected to the login page.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-50 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Secure Session Termination</span><p class="text-xs text-gray-400 mt-0.5">All tokens and sessions are invalidated immediately</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-50 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Data Protection</span><p class="text-xs text-gray-400 mt-0.5">Your data remains encrypted and protected after logout</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-50 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Quick Re-Access</span><p class="text-xs text-gray-400 mt-0.5">Sign back in anytime with your credentials</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-blue-50/30 border border-blue-100 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Secure by Default</div>
|
||||
<div class="text-xs text-gray-400">All sessions are encrypted with enterprise-grade security</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Logout</h2>
|
||||
<p class="text-gray-500 text-sm mt-3 max-w-sm mx-auto">Are you sure you want to logout? Click below button to confirm.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<button class="btn-primary" type="button" @@click="
|
||||
loading = true;
|
||||
logoutSuccess = false;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
logoutSuccess = true;
|
||||
notification = { show: true, message: 'You have been logged out successfully. Redirecting to login page...' };
|
||||
setTimeout(() => { notification.show = false; }, 4000);
|
||||
}, 3000);
|
||||
" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/></svg>
|
||||
Logout
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Logging out...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
<a href="dashboard2.html" class="btn-outline block text-center no-underline" :class="{ 'pointer-events-none opacity-50': loading }">
|
||||
<span class="flex items-center gap-2 justify-center">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg>
|
||||
Cancel
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg shadow-blue-100/30 rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Logout Successful</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,114 @@
|
||||
@{
|
||||
ViewData["Title"] = "Logout3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, logoutSuccess: false }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center border border-white/10">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-200">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-white leading-tight mb-4">Secure<br/>Session Logout</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">End your current session securely. All active sessions will be terminated and you will be redirected to the login page.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/15 border border-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Secure Session Termination</span><p class="text-xs text-blue-200 mt-0.5">All tokens and sessions are invalidated immediately</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/15 border border-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Data Protection</span><p class="text-xs text-blue-200 mt-0.5">Your data remains encrypted and protected after logout</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/15 border border-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Quick Re-Access</span><p class="text-xs text-blue-200 mt-0.5">Sign back in anytime with your credentials</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Secure by Default</div>
|
||||
<div class="text-xs text-blue-200">All sessions are encrypted with enterprise-grade security</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Logout</h2>
|
||||
<p class="text-gray-500 text-sm mt-3 max-w-sm mx-auto">Are you sure you want to logout? Click below button to confirm.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<button class="btn-primary" type="button" @@click="
|
||||
loading = true;
|
||||
logoutSuccess = false;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
logoutSuccess = true;
|
||||
notification = { show: true, message: 'You have been logged out successfully. Redirecting to login page...' };
|
||||
setTimeout(() => { notification.show = false; }, 4000);
|
||||
}, 3000);
|
||||
" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/></svg>
|
||||
Logout
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Logging out...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
<a href="dashboard3.html" class="btn-outline block text-center no-underline" :class="{ 'pointer-events-none opacity-50': loading }">
|
||||
<span class="flex items-center gap-2 justify-center">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg>
|
||||
Cancel
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Logout Successful</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,114 @@
|
||||
@{
|
||||
ViewData["Title"] = "Logout4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, logoutSuccess: false }">
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Logout</h2>
|
||||
<p class="text-gray-500 text-sm mt-3 max-w-sm mx-auto">Are you sure you want to logout? Click below button to confirm.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<button class="btn-primary" type="button" @@click="
|
||||
loading = true;
|
||||
logoutSuccess = false;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
logoutSuccess = true;
|
||||
notification = { show: true, message: 'You have been logged out successfully. Redirecting to login page...' };
|
||||
setTimeout(() => { notification.show = false; }, 4000);
|
||||
}, 3000);
|
||||
" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/></svg>
|
||||
Logout
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Logging out...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
<a href="dashboard4.html" class="btn-outline block text-center no-underline" :class="{ 'pointer-events-none opacity-50': loading }">
|
||||
<span class="flex items-center gap-2 justify-center">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg>
|
||||
Cancel
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/10">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-200">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-white leading-tight mb-4">Secure<br/>Session Logout</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">End your current session securely. All active sessions will be terminated and you will be redirected to the login page.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/15 border border-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Secure Session Termination</span><p class="text-xs text-blue-200 mt-0.5">All tokens and sessions are invalidated immediately</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/15 border border-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Data Protection</span><p class="text-xs text-blue-200 mt-0.5">Your data remains encrypted and protected after logout</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/15 border border-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Quick Re-Access</span><p class="text-xs text-blue-200 mt-0.5">Sign back in anytime with your credentials</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Secure by Default</div>
|
||||
<div class="text-xs text-blue-200">All sessions are encrypted with enterprise-grade security</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-2xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Logout Successful</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,114 @@
|
||||
@{
|
||||
ViewData["Title"] = "Logout5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, logoutSuccess: false }">
|
||||
<div class="hidden lg:flex w-1/2 bg-white items-center justify-center p-12 border-r border-gray-200">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Secure<br/>Session Logout</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">End your current session securely. All active sessions will be terminated and you will be redirected to the login page.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Secure Session Termination</span><p class="text-xs text-gray-400 mt-0.5">All tokens and sessions are invalidated immediately</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Data Protection</span><p class="text-xs text-gray-400 mt-0.5">Your data remains encrypted and protected after logout</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Quick Re-Access</span><p class="text-xs text-gray-400 mt-0.5">Sign back in anytime with your credentials</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-gray-50 border border-gray-200">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Secure by Default</div>
|
||||
<div class="text-xs text-gray-400">All sessions are encrypted with enterprise-grade security</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Logout</h2>
|
||||
<p class="text-gray-500 text-sm mt-3 max-w-sm mx-auto">Are you sure you want to logout? Click below button to confirm.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<button class="btn-primary" type="button" @@click="
|
||||
loading = true;
|
||||
logoutSuccess = false;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
logoutSuccess = true;
|
||||
notification = { show: true, message: 'You have been logged out successfully. Redirecting to login page...' };
|
||||
setTimeout(() => { notification.show = false; }, 4000);
|
||||
}, 3000);
|
||||
" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/></svg>
|
||||
Logout
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Logging out...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
<a href="dashboard5.html" class="btn-outline block text-center no-underline" :class="{ 'pointer-events-none opacity-50': loading }">
|
||||
<span class="flex items-center gap-2 justify-center">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg>
|
||||
Cancel
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Logout Successful</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,169 @@
|
||||
@{
|
||||
ViewData["Title"] = "Multitenantselection1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, showNotification: false, notificationMessage: '', selectedTenant: '', selectedIndex: -1 }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Select Your<br/>Workspace</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Choose the organization you'd like to access. You can switch between workspaces at any time from your profile settings.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Multiple Workspaces</span><p class="text-xs text-gray-400 mt-0.5">Access all your organizations from one account</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Role-Based Access</span><p class="text-xs text-gray-400 mt-0.5">Each workspace has its own permissions and settings</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Secure & Isolated</span><p class="text-xs text-gray-400 mt-0.5">Data is completely isolated between workspaces</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Signed in as admin@@company.com</div>
|
||||
<div class="text-xs text-gray-400">Choose a workspace to continue</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Choose Workspace</h2>
|
||||
<p class="text-gray-500 text-sm mt-2 leading-relaxed">Select one of your workspaces below to access the EnterpriseKit platform. Your workspaces are listed with their current status.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 0 ? 'selected' : ''" @@click="selectedIndex = 0; selectedTenant = 'Acme Corporation'">
|
||||
<div class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Acme Corporation</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Global enterprise technology solutions provider specializing in digital transformation, cloud infrastructure, and managed IT services for Fortune 500 companies worldwide.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
248 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 1 ? 'selected' : ''" @@click="selectedIndex = 1; selectedTenant = 'Stark Industries'">
|
||||
<div class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Stark Industries</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">Pending</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Leading industrial manufacturing conglomerate based in Detroit, Michigan. Specializing in advanced manufacturing, defense technology, and sustainable energy solutions.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
1,247 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 2 ? 'selected' : ''" @@click="selectedIndex = 2; selectedTenant = 'Wayne Enterprises'">
|
||||
<div class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Wayne Enterprises</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Multinational conglomerate headquartered in New York City with diverse interests in technology, finance, defense, media, and pharmaceuticals across 47 countries.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
3,580 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template x-if="showNotification">
|
||||
<div class="fixed top-6 right-6 bg-green-50 border border-green-200 rounded-xl p-4 shadow-lg fade-in z-50 max-w-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-green-800" x-text="notificationMessage"></div>
|
||||
<div class="text-xs text-green-600 mt-0.5">You will be automatically redirected.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<button @@click="
|
||||
if(loading) return;
|
||||
if(!selectedTenant) { notificationMessage='Please select a workspace first.'; showNotification=true; setTimeout(()=>showNotification=false, 2000); return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notificationMessage = 'Tenant is ready, will be automatically redirected.';
|
||||
showNotification = true;
|
||||
setTimeout(() => showNotification = false, 3000);
|
||||
}, 2000);
|
||||
" :disabled="loading" class="btn-primary w-full mt-6" :class="loading ? 'opacity-70 cursor-not-allowed' : ''">
|
||||
<template x-if="loading">
|
||||
<svg class="w-4 h-4 spinner" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'Loading...' : 'Continue to Workspace'"></span>
|
||||
<template x-if="!loading">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</template>
|
||||
</button>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Don't see your workspace?
|
||||
<a class="auth-link ml-1" href="#">Contact Support</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,169 @@
|
||||
@{
|
||||
ViewData["Title"] = "Multitenantselection2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, showNotification: false, notificationMessage: '', selectedTenant: '', selectedIndex: -1 }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Select Your<br/>Workspace</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Choose the organization you'd like to access. You can switch between workspaces at any time from your profile settings.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Multiple Workspaces</span><p class="text-xs text-gray-400 mt-0.5">Access all your organizations from one account</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Role-Based Access</span><p class="text-xs text-gray-400 mt-0.5">Each workspace has its own permissions and settings</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Secure & Isolated</span><p class="text-xs text-gray-400 mt-0.5">Data is completely isolated between workspaces</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-blue-100 rounded-xl shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Signed in as admin@@company.com</div>
|
||||
<div class="text-xs text-gray-400">Choose a workspace to continue</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Choose Workspace</h2>
|
||||
<p class="text-gray-500 text-sm mt-2 leading-relaxed">Select one of your workspaces below to access the EnterpriseKit platform. Your workspaces are listed with their current status.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 0 ? 'selected' : ''" @@click="selectedIndex = 0; selectedTenant = 'Acme Corporation'">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Acme Corporation</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Global enterprise technology solutions provider specializing in digital transformation, cloud infrastructure, and managed IT services for Fortune 500 companies worldwide.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
248 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 1 ? 'selected' : ''" @@click="selectedIndex = 1; selectedTenant = 'Stark Industries'">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Stark Industries</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">Pending</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Leading industrial manufacturing conglomerate based in Detroit, Michigan. Specializing in advanced manufacturing, defense technology, and sustainable energy solutions.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
1,247 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 2 ? 'selected' : ''" @@click="selectedIndex = 2; selectedTenant = 'Wayne Enterprises'">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Wayne Enterprises</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Multinational conglomerate headquartered in New York City with diverse interests in technology, finance, defense, media, and pharmaceuticals across 47 countries.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
3,580 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template x-if="showNotification">
|
||||
<div class="fixed top-6 right-6 bg-green-50 border border-green-200 rounded-xl p-4 shadow-lg fade-in z-50 max-w-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-green-800" x-text="notificationMessage"></div>
|
||||
<div class="text-xs text-green-600 mt-0.5">You will be automatically redirected.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<button @@click="
|
||||
if(loading) return;
|
||||
if(!selectedTenant) { notificationMessage='Please select a workspace first.'; showNotification=true; setTimeout(()=>showNotification=false, 2000); return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notificationMessage = 'Tenant is ready, will be automatically redirected.';
|
||||
showNotification = true;
|
||||
setTimeout(() => showNotification = false, 3000);
|
||||
}, 2000);
|
||||
" :disabled="loading" class="btn-primary w-full mt-6" :class="loading ? 'opacity-70 cursor-not-allowed' : ''">
|
||||
<template x-if="loading">
|
||||
<svg class="w-4 h-4 spinner" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'Loading...' : 'Continue to Workspace'"></span>
|
||||
<template x-if="!loading">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</template>
|
||||
</button>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Don't see your workspace?
|
||||
<a class="auth-link ml-1" href="#">Contact Support</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,169 @@
|
||||
@{
|
||||
ViewData["Title"] = "Multitenantselection3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, showNotification: false, notificationMessage: '', selectedTenant: '', selectedIndex: -1 }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/15 rounded-xl flex items-center justify-center backdrop-blur-sm">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-100">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-white leading-tight mb-4">Select Your<br/>Workspace</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">Choose the organization you'd like to access. You can switch between workspaces at any time from your profile settings.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Multiple Workspaces</span><p class="text-xs text-blue-200 mt-0.5">Access all your organizations from one account</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Role-Based Access</span><p class="text-xs text-blue-200 mt-0.5">Each workspace has its own permissions and settings</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Secure & Isolated</span><p class="text-xs text-blue-200 mt-0.5">Data is completely isolated between workspaces</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 border border-white/20 rounded-xl backdrop-blur-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Signed in as admin@@company.com</div>
|
||||
<div class="text-xs text-blue-200">Choose a workspace to continue</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Choose Workspace</h2>
|
||||
<p class="text-gray-500 text-sm mt-2 leading-relaxed">Select one of your workspaces below to access the EnterpriseKit platform. Your workspaces are listed with their current status.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 0 ? 'selected' : ''" @@click="selectedIndex = 0; selectedTenant = 'Acme Corporation'">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Acme Corporation</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Global enterprise technology solutions provider specializing in digital transformation, cloud infrastructure, and managed IT services for Fortune 500 companies worldwide.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
248 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 1 ? 'selected' : ''" @@click="selectedIndex = 1; selectedTenant = 'Stark Industries'">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Stark Industries</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">Pending</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Leading industrial manufacturing conglomerate based in Detroit, Michigan. Specializing in advanced manufacturing, defense technology, and sustainable energy solutions.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
1,247 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 2 ? 'selected' : ''" @@click="selectedIndex = 2; selectedTenant = 'Wayne Enterprises'">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Wayne Enterprises</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Multinational conglomerate headquartered in New York City with diverse interests in technology, finance, defense, media, and pharmaceuticals across 47 countries.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
3,580 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template x-if="showNotification">
|
||||
<div class="fixed top-6 right-6 bg-green-50 border border-green-200 rounded-xl p-4 shadow-lg fade-in z-50 max-w-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-green-800" x-text="notificationMessage"></div>
|
||||
<div class="text-xs text-green-600 mt-0.5">You will be automatically redirected.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<button @@click="
|
||||
if(loading) return;
|
||||
if(!selectedTenant) { notificationMessage='Please select a workspace first.'; showNotification=true; setTimeout(()=>showNotification=false, 2000); return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notificationMessage = 'Tenant is ready, will be automatically redirected.';
|
||||
showNotification = true;
|
||||
setTimeout(() => showNotification = false, 3000);
|
||||
}, 2000);
|
||||
" :disabled="loading" class="btn-primary w-full mt-6" :class="loading ? 'opacity-70 cursor-not-allowed' : ''">
|
||||
<template x-if="loading">
|
||||
<svg class="w-4 h-4 spinner" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'Loading...' : 'Continue to Workspace'"></span>
|
||||
<template x-if="!loading">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</template>
|
||||
</button>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Don't see your workspace?
|
||||
<a class="text-blue-600 font-semibold text-sm hover:text-blue-700 hover:underline ml-1" href="#">Contact Support</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,169 @@
|
||||
@{
|
||||
ViewData["Title"] = "Multitenantselection4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex flex-row" x-data="{ loading: false, showNotification: false, notificationMessage: '', selectedTenant: '', selectedIndex: -1 }">
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Choose Workspace</h2>
|
||||
<p class="text-gray-500 text-sm mt-2 leading-relaxed">Select one of your workspaces below to access the EnterpriseKit platform. Your workspaces are listed with their current status.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 0 ? 'selected' : ''" @@click="selectedIndex = 0; selectedTenant = 'Acme Corporation'">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Acme Corporation</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Global enterprise technology solutions provider specializing in digital transformation, cloud infrastructure, and managed IT services for Fortune 500 companies worldwide.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
248 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 1 ? 'selected' : ''" @@click="selectedIndex = 1; selectedTenant = 'Stark Industries'">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Stark Industries</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">Pending</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Leading industrial manufacturing conglomerate based in Detroit, Michigan. Specializing in advanced manufacturing, defense technology, and sustainable energy solutions.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
1,247 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 2 ? 'selected' : ''" @@click="selectedIndex = 2; selectedTenant = 'Wayne Enterprises'">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Wayne Enterprises</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Multinational conglomerate headquartered in New York City with diverse interests in technology, finance, defense, media, and pharmaceuticals across 47 countries.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
3,580 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template x-if="showNotification">
|
||||
<div class="fixed top-6 right-6 bg-green-50 border border-green-200 rounded-full p-4 shadow-lg fade-in z-50 max-w-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-green-800" x-text="notificationMessage"></div>
|
||||
<div class="text-xs text-green-600 mt-0.5">You will be automatically redirected.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<button @@click="
|
||||
if(loading) return;
|
||||
if(!selectedTenant) { notificationMessage='Please select a workspace first.'; showNotification=true; setTimeout(()=>showNotification=false, 2000); return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notificationMessage = 'Tenant is ready, will be automatically redirected.';
|
||||
showNotification = true;
|
||||
setTimeout(() => showNotification = false, 3000);
|
||||
}, 2000);
|
||||
" :disabled="loading" class="btn-primary w-full mt-6" :class="loading ? 'opacity-70 cursor-not-allowed' : ''">
|
||||
<template x-if="loading">
|
||||
<svg class="w-4 h-4 spinner" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'Loading...' : 'Continue to Workspace'"></span>
|
||||
<template x-if="!loading">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</template>
|
||||
</button>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Don't see your workspace?
|
||||
<a class="text-blue-600 font-semibold text-sm hover:text-blue-700 hover:underline ml-1" href="#">Contact Support</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/15 rounded-2xl flex items-center justify-center backdrop-blur-sm">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-100">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-white leading-tight mb-4">Select Your<br/>Workspace</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">Choose the organization you'd like to access. You can switch between workspaces at any time from your profile settings.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Multiple Workspaces</span><p class="text-xs text-blue-200 mt-0.5">Access all your organizations from one account</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Role-Based Access</span><p class="text-xs text-blue-200 mt-0.5">Each workspace has its own permissions and settings</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Secure & Isolated</span><p class="text-xs text-blue-200 mt-0.5">Data is completely isolated between workspaces</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 border border-white/20 rounded-2xl backdrop-blur-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Signed in as admin@@company.com</div>
|
||||
<div class="text-xs text-blue-200">Choose a workspace to continue</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,169 @@
|
||||
@{
|
||||
ViewData["Title"] = "Multitenantselection5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, showNotification: false, notificationMessage: '', selectedTenant: '', selectedIndex: -1 }">
|
||||
<div class="hidden lg:flex w-1/2 bg-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Select Your<br/>Workspace</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Choose the organization you'd like to access. You can switch between workspaces at any time from your profile settings.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Multiple Workspaces</span><p class="text-xs text-gray-400 mt-0.5">Access all your organizations from one account</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Role-Based Access</span><p class="text-xs text-gray-400 mt-0.5">Each workspace has its own permissions and settings</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Secure & Isolated</span><p class="text-xs text-gray-400 mt-0.5">Data is completely isolated between workspaces</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 box-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-blue-50 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Signed in as admin@@company.com</div>
|
||||
<div class="text-xs text-gray-400">Choose a workspace to continue</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Choose Workspace</h2>
|
||||
<p class="text-gray-500 text-sm mt-2 leading-relaxed">Select one of your workspaces below to access the EnterpriseKit platform. Your workspaces are listed with their current status.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 0 ? 'selected' : ''" @@click="selectedIndex = 0; selectedTenant = 'Acme Corporation'">
|
||||
<div class="w-12 h-12 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Acme Corporation</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-green-100 text-green-700">Active</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Global enterprise technology solutions provider specializing in digital transformation, cloud infrastructure, and managed IT services for Fortune 500 companies worldwide.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
248 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 1 ? 'selected' : ''" @@click="selectedIndex = 1; selectedTenant = 'Stark Industries'">
|
||||
<div class="w-12 h-12 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Stark Industries</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-700">Pending</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Leading industrial manufacturing conglomerate based in Detroit, Michigan. Specializing in advanced manufacturing, defense technology, and sustainable energy solutions.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
1,247 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 2 ? 'selected' : ''" @@click="selectedIndex = 2; selectedTenant = 'Wayne Enterprises'">
|
||||
<div class="w-12 h-12 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold text-gray-900">Wayne Enterprises</h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-green-100 text-green-700">Active</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 leading-relaxed">Multinational conglomerate headquartered in New York City with diverse interests in technology, finance, defense, media, and pharmaceuticals across 47 countries.</p>
|
||||
<div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
|
||||
3,580 users
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
||||
Enterprise Plan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template x-if="showNotification">
|
||||
<div class="fixed top-6 right-6 bg-green-50 border border-green-200 p-4 shadow-lg fade-in z-50 max-w-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-green-800" x-text="notificationMessage"></div>
|
||||
<div class="text-xs text-green-600 mt-0.5">You will be automatically redirected.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<button @@click="
|
||||
if(loading) return;
|
||||
if(!selectedTenant) { notificationMessage='Please select a workspace first.'; showNotification=true; setTimeout(()=>showNotification=false, 2000); return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notificationMessage = 'Tenant is ready, will be automatically redirected.';
|
||||
showNotification = true;
|
||||
setTimeout(() => showNotification = false, 3000);
|
||||
}, 2000);
|
||||
" :disabled="loading" class="btn-primary w-full mt-6" :class="loading ? 'opacity-70 cursor-not-allowed' : ''">
|
||||
<template x-if="loading">
|
||||
<svg class="w-4 h-4 spinner" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'Loading...' : 'Continue to Workspace'"></span>
|
||||
<template x-if="!loading">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</template>
|
||||
</button>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Don't see your workspace?
|
||||
<a class="auth-link ml-1" href="#">Contact Support</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,143 @@
|
||||
@{
|
||||
ViewData["Title"] = "Register1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Join the<br/>Enterprise Ecosystem</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Create your account to unlock powerful enterprise tools, collaborate with teams, and drive business growth across all your modules.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Unified Workspace</span><p class="text-xs text-gray-400 mt-0.5">Access all enterprise modules from one dashboard</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Secure & Compliant</span><p class="text-xs text-gray-400 mt-0.5">Enterprise-grade security with SSO and MFA support</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">24/7 Support</span><p class="text-xs text-gray-400 mt-0.5">Dedicated support team for your enterprise needs</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Free 30-Day Trial</div>
|
||||
<div class="text-xs text-gray-400">Explore all features with no commitment</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Create Account</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Fill in the details below to get started</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
if (!document.getElementById('fullname').value.trim()) { errors.fullname = true; }
|
||||
if (!document.getElementById('email').value.trim()) { errors.email = true; }
|
||||
if (!document.getElementById('password').value.trim()) { errors.password = true; }
|
||||
if (!document.getElementById('confirmPassword').value.trim()) { errors.confirmPassword = true; }
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
if (document.getElementById('password').value !== document.getElementById('confirmPassword').value) {
|
||||
errors.confirmPassword = true;
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Registration successful! A confirmation email has been sent to your email address.' };
|
||||
setTimeout(() => { notification.show = false; }, 5000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="fullname">Full Name</label>
|
||||
<input class="input-field" id="fullname" type="text" placeholder="John Doe" required :class="{ 'error': errors.fullname }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required :class="{ 'error': errors.email }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="password">Password</label>
|
||||
<input class="input-field" id="password" type="password" placeholder="Create a strong password" required :class="{ 'error': errors.password }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="confirmPassword">Confirm Password</label>
|
||||
<input class="input-field" id="confirmPassword" type="password" placeholder="Confirm your password" required :class="{ 'error': errors.confirmPassword }">
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="w-4 h-4 border border-gray-300 rounded cursor-pointer accent-gray-900" id="terms" type="checkbox" required>
|
||||
<label class="text-sm text-gray-600 cursor-pointer select-none" for="terms">I agree to the <a class="auth-link text-xs" href="#">Terms of Service</a> and <a class="auth-link text-xs" href="#">Privacy Policy</a></label>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
Create Account
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Creating account...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Already have an account?
|
||||
<a class="auth-link ml-1" href="login1.html">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,143 @@
|
||||
@{
|
||||
ViewData["Title"] = "Register2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Join the<br/>Enterprise Ecosystem</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Create your account to unlock powerful enterprise tools, collaborate with teams, and drive business growth across all your modules.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Unified Workspace</span><p class="text-xs text-gray-400 mt-0.5">Access all enterprise modules from one dashboard</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Secure & Compliant</span><p class="text-xs text-gray-400 mt-0.5">Enterprise-grade security with SSO and MFA support</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">24/7 Support</span><p class="text-xs text-gray-400 mt-0.5">Dedicated support team for your enterprise needs</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-blue-100 rounded-xl shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Free 30-Day Trial</div>
|
||||
<div class="text-xs text-gray-400">Explore all features with no commitment</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Create Account</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Fill in the details below to get started</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
if (!document.getElementById('fullname').value.trim()) { errors.fullname = true; }
|
||||
if (!document.getElementById('email').value.trim()) { errors.email = true; }
|
||||
if (!document.getElementById('password').value.trim()) { errors.password = true; }
|
||||
if (!document.getElementById('confirmPassword').value.trim()) { errors.confirmPassword = true; }
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
if (document.getElementById('password').value !== document.getElementById('confirmPassword').value) {
|
||||
errors.confirmPassword = true;
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Registration successful! A confirmation email has been sent to your email address.' };
|
||||
setTimeout(() => { notification.show = false; }, 5000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="fullname">Full Name</label>
|
||||
<input class="input-field" id="fullname" type="text" placeholder="John Doe" required :class="{ 'error': errors.fullname }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required :class="{ 'error': errors.email }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="password">Password</label>
|
||||
<input class="input-field" id="password" type="password" placeholder="Create a strong password" required :class="{ 'error': errors.password }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="confirmPassword">Confirm Password</label>
|
||||
<input class="input-field" id="confirmPassword" type="password" placeholder="Confirm your password" required :class="{ 'error': errors.confirmPassword }">
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="w-4 h-4 border border-gray-300 rounded cursor-pointer accent-blue-600" id="terms" type="checkbox" required>
|
||||
<label class="text-sm text-gray-600 cursor-pointer select-none" for="terms">I agree to the <a class="auth-link text-xs" href="#">Terms of Service</a> and <a class="auth-link text-xs" href="#">Privacy Policy</a></label>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
Create Account
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Creating account...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Already have an account?
|
||||
<a class="auth-link ml-1" href="login2.html">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,143 @@
|
||||
@{
|
||||
ViewData["Title"] = "Register3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
|
||||
<div class="max-w-md text-white">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-200">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold leading-tight mb-4">Join the<br/>Enterprise Ecosystem</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">Create your account to unlock powerful enterprise tools, collaborate with teams, and drive business growth across all your modules.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Unified Workspace</span><p class="text-xs text-blue-200 mt-0.5">Access all enterprise modules from one dashboard</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Secure & Compliant</span><p class="text-xs text-blue-200 mt-0.5">Enterprise-grade security with SSO and MFA support</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">24/7 Support</span><p class="text-xs text-blue-200 mt-0.5">Dedicated support team for your enterprise needs</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 backdrop-blur border border-white/20 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Free 30-Day Trial</div>
|
||||
<div class="text-xs text-blue-200">Explore all features with no commitment</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Create Account</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Fill in the details below to get started</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
if (!document.getElementById('fullname').value.trim()) { errors.fullname = true; }
|
||||
if (!document.getElementById('email').value.trim()) { errors.email = true; }
|
||||
if (!document.getElementById('password').value.trim()) { errors.password = true; }
|
||||
if (!document.getElementById('confirmPassword').value.trim()) { errors.confirmPassword = true; }
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
if (document.getElementById('password').value !== document.getElementById('confirmPassword').value) {
|
||||
errors.confirmPassword = true;
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Registration successful! A confirmation email has been sent to your email address.' };
|
||||
setTimeout(() => { notification.show = false; }, 5000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="fullname">Full Name</label>
|
||||
<input class="input-field" id="fullname" type="text" placeholder="John Doe" required :class="{ 'error': errors.fullname }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required :class="{ 'error': errors.email }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="password">Password</label>
|
||||
<input class="input-field" id="password" type="password" placeholder="Create a strong password" required :class="{ 'error': errors.password }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="confirmPassword">Confirm Password</label>
|
||||
<input class="input-field" id="confirmPassword" type="password" placeholder="Confirm your password" required :class="{ 'error': errors.confirmPassword }">
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="w-4 h-4 border border-gray-300 rounded cursor-pointer accent-blue-600" id="terms" type="checkbox" required>
|
||||
<label class="text-sm text-gray-600 cursor-pointer select-none" for="terms">I agree to the <a class="auth-link text-xs" href="#">Terms of Service</a> and <a class="auth-link text-xs" href="#">Privacy Policy</a></label>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
Create Account
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Creating account...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Already have an account?
|
||||
<a class="auth-link ml-1" href="login3.html">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,143 @@
|
||||
@{
|
||||
ViewData["Title"] = "Register4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Create Account</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Fill in the details below to get started</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
if (!document.getElementById('fullname').value.trim()) { errors.fullname = true; }
|
||||
if (!document.getElementById('email').value.trim()) { errors.email = true; }
|
||||
if (!document.getElementById('password').value.trim()) { errors.password = true; }
|
||||
if (!document.getElementById('confirmPassword').value.trim()) { errors.confirmPassword = true; }
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
if (document.getElementById('password').value !== document.getElementById('confirmPassword').value) {
|
||||
errors.confirmPassword = true;
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Registration successful! A confirmation email has been sent to your email address.' };
|
||||
setTimeout(() => { notification.show = false; }, 5000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="fullname">Full Name</label>
|
||||
<input class="input-field" id="fullname" type="text" placeholder="John Doe" required :class="{ 'error': errors.fullname }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required :class="{ 'error': errors.email }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="password">Password</label>
|
||||
<input class="input-field" id="password" type="password" placeholder="Create a strong password" required :class="{ 'error': errors.password }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="confirmPassword">Confirm Password</label>
|
||||
<input class="input-field" id="confirmPassword" type="password" placeholder="Confirm your password" required :class="{ 'error': errors.confirmPassword }">
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="w-4 h-4 border border-gray-300 rounded cursor-pointer accent-blue-600" id="terms" type="checkbox" required>
|
||||
<label class="text-sm text-gray-600 cursor-pointer select-none" for="terms">I agree to the <a class="auth-link text-xs" href="#">Terms of Service</a> and <a class="auth-link text-xs" href="#">Privacy Policy</a></label>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
Create Account
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Creating account...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Already have an account?
|
||||
<a class="auth-link ml-1" href="login4.html">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
|
||||
<div class="max-w-md text-white">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center backdrop-blur">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-200">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold leading-tight mb-4">Join the<br/>Enterprise Ecosystem</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">Create your account to unlock powerful enterprise tools, collaborate with teams, and drive business growth across all your modules.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Unified Workspace</span><p class="text-xs text-blue-200 mt-0.5">Access all enterprise modules from one dashboard</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Secure & Compliant</span><p class="text-xs text-blue-200 mt-0.5">Enterprise-grade security with SSO and MFA support</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">24/7 Support</span><p class="text-xs text-blue-200 mt-0.5">Dedicated support team for your enterprise needs</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 backdrop-blur border border-white/20 rounded-2xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Free 30-Day Trial</div>
|
||||
<div class="text-xs text-blue-200">Explore all features with no commitment</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-200 shadow-lg rounded-2xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,143 @@
|
||||
@{
|
||||
ViewData["Title"] = "Register5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Join the<br/>Enterprise Ecosystem</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Create your account to unlock powerful enterprise tools, collaborate with teams, and drive business growth across all your modules.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Unified Workspace</span><p class="text-xs text-gray-400 mt-0.5">Access all enterprise modules from one dashboard</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Secure & Compliant</span><p class="text-xs text-gray-400 mt-0.5">Enterprise-grade security with SSO and MFA support</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">24/7 Support</span><p class="text-xs text-gray-400 mt-0.5">Dedicated support team for your enterprise needs</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 feature-box">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Free 30-Day Trial</div>
|
||||
<div class="text-xs text-gray-400">Explore all features with no commitment</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Create Account</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Fill in the details below to get started</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
if (!document.getElementById('fullname').value.trim()) { errors.fullname = true; }
|
||||
if (!document.getElementById('email').value.trim()) { errors.email = true; }
|
||||
if (!document.getElementById('password').value.trim()) { errors.password = true; }
|
||||
if (!document.getElementById('confirmPassword').value.trim()) { errors.confirmPassword = true; }
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
if (document.getElementById('password').value !== document.getElementById('confirmPassword').value) {
|
||||
errors.confirmPassword = true;
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Registration successful! A confirmation email has been sent to your email address.' };
|
||||
setTimeout(() => { notification.show = false; }, 5000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="fullname">Full Name</label>
|
||||
<input class="input-field" id="fullname" type="text" placeholder="John Doe" required :class="{ 'error': errors.fullname }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="email">Email Address</label>
|
||||
<input class="input-field" id="email" type="email" placeholder="you@@company.com" required :class="{ 'error': errors.email }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="password">Password</label>
|
||||
<input class="input-field" id="password" type="password" placeholder="Create a strong password" required :class="{ 'error': errors.password }">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="confirmPassword">Confirm Password</label>
|
||||
<input class="input-field" id="confirmPassword" type="password" placeholder="Confirm your password" required :class="{ 'error': errors.confirmPassword }">
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="w-4 h-4 border border-gray-300 rounded-none cursor-pointer accent-blue-600" id="terms" type="checkbox" required>
|
||||
<label class="text-sm text-gray-600 cursor-pointer select-none" for="terms">I agree to the <a class="auth-link text-xs" href="#">Terms of Service</a> and <a class="auth-link text-xs" href="#">Privacy Policy</a></label>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
Create Account
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Creating account...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
Already have an account?
|
||||
<a class="auth-link ml-1" href="login5.html">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,140 @@
|
||||
@{
|
||||
ViewData["Title"] = "Resetpassword1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Create a New<br/>Account Password</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Enter and confirm your new password below. Make sure it's strong and unique to keep your account secure.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Strong Password</span><p class="text-xs text-gray-400 mt-0.5">Minimum 8 characters with mixed case and numbers</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Encrypted Security</span><p class="text-xs text-gray-400 mt-0.5">Your password is encrypted end-to-end</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Instant Activation</span><p class="text-xs text-gray-400 mt-0.5">Your new password will be active immediately</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Password Tips</div>
|
||||
<div class="text-xs text-gray-400">Use a mix of letters, numbers and special characters</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8 lg:hidden">
|
||||
<div class="w-10 h-10 bg-gray-900 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-lg font-bold text-gray-900">EnterpriseKit</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Reset Password</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Enter your new password below.</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
const pass = document.getElementById('new_password').value;
|
||||
const confirm = document.getElementById('confirm_password').value;
|
||||
if (!pass.trim()) { errors.new_password = true; return; }
|
||||
if (pass.length < 8) { errors.new_password = true; return; }
|
||||
if (!confirm.trim()) { errors.confirm_password = true; return; }
|
||||
if (pass !== confirm) { errors.confirm_password = true; errors.match = true; return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Password has been reset successfully! Redirecting to sign in...' };
|
||||
setTimeout(() => { notification.show = false; window.location.href = 'login1.html'; }, 3000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="new_password">New Password</label>
|
||||
<input class="input-field" id="new_password" type="password" placeholder="Enter new password" required :class="{ 'error': errors.new_password }">
|
||||
<p x-show="errors.new_password" class="text-xs text-red-500 mt-1" x-cloak>Password must be at least 8 characters.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="confirm_password">Confirm New Password</label>
|
||||
<input class="input-field" id="confirm_password" type="password" placeholder="Confirm new password" required :class="{ 'error': errors.confirm_password }">
|
||||
<p x-show="errors.match" class="text-xs text-red-500 mt-1" x-cloak>Passwords do not match.</p>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
|
||||
Reset Password
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Resetting password...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a class="auth-link inline-flex items-center gap-1.5" href="login1.html">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
|
||||
Back to Sign In
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,140 @@
|
||||
@{
|
||||
ViewData["Title"] = "Resetpassword2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Create a New<br/>Account Password</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Enter and confirm your new password below. Make sure it's strong and unique to keep your account secure.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Strong Password</span><p class="text-xs text-gray-400 mt-0.5">Minimum 8 characters with mixed case and numbers</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Encrypted Security</span><p class="text-xs text-gray-400 mt-0.5">Your password is encrypted end-to-end</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Instant Activation</span><p class="text-xs text-gray-400 mt-0.5">Your new password will be active immediately</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-blue-100 rounded-xl shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Password Tips</div>
|
||||
<div class="text-xs text-gray-400">Use a mix of letters, numbers and special characters</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8 lg:hidden">
|
||||
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-lg font-bold text-gray-900">EnterpriseKit</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Reset Password</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Enter your new password below.</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
const pass = document.getElementById('new_password').value;
|
||||
const confirm = document.getElementById('confirm_password').value;
|
||||
if (!pass.trim()) { errors.new_password = true; return; }
|
||||
if (pass.length < 8) { errors.new_password = true; return; }
|
||||
if (!confirm.trim()) { errors.confirm_password = true; return; }
|
||||
if (pass !== confirm) { errors.confirm_password = true; errors.match = true; return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Password has been reset successfully! Redirecting to sign in...' };
|
||||
setTimeout(() => { notification.show = false; window.location.href = 'login2.html'; }, 3000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="new_password">New Password</label>
|
||||
<input class="input-field" id="new_password" type="password" placeholder="Enter new password" required :class="{ 'error': errors.new_password }">
|
||||
<p x-show="errors.new_password" class="text-xs text-red-500 mt-1" x-cloak>Password must be at least 8 characters.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="confirm_password">Confirm New Password</label>
|
||||
<input class="input-field" id="confirm_password" type="password" placeholder="Confirm new password" required :class="{ 'error': errors.confirm_password }">
|
||||
<p x-show="errors.match" class="text-xs text-red-500 mt-1" x-cloak>Passwords do not match.</p>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
|
||||
Reset Password
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Resetting password...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a class="auth-link inline-flex items-center gap-1.5" href="login2.html">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
|
||||
Back to Sign In
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,140 @@
|
||||
@{
|
||||
ViewData["Title"] = "Resetpassword3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-100">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-white leading-tight mb-4">Create a New<br/>Account Password</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">Enter and confirm your new password below. Make sure it's strong and unique to keep your account secure.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded check-icon flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Strong Password</span><p class="text-xs text-blue-200 mt-0.5">Minimum 8 characters with mixed case and numbers</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded check-icon flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Encrypted Security</span><p class="text-xs text-blue-200 mt-0.5">Your password is encrypted end-to-end</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded check-icon flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Instant Activation</span><p class="text-xs text-blue-200 mt-0.5">Your new password will be active immediately</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Password Tips</div>
|
||||
<div class="text-xs text-blue-200">Use a mix of letters, numbers and special characters</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8 lg:hidden">
|
||||
<div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-lg font-bold text-white">EnterpriseKit</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-white">Reset Password</h2>
|
||||
<p class="text-blue-100 text-sm mt-1">Enter your new password below.</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
const pass = document.getElementById('new_password').value;
|
||||
const confirm = document.getElementById('confirm_password').value;
|
||||
if (!pass.trim()) { errors.new_password = true; return; }
|
||||
if (pass.length < 8) { errors.new_password = true; return; }
|
||||
if (!confirm.trim()) { errors.confirm_password = true; return; }
|
||||
if (pass !== confirm) { errors.confirm_password = true; errors.match = true; return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Password has been reset successfully! Redirecting to sign in...' };
|
||||
setTimeout(() => { notification.show = false; window.location.href = 'login3.html'; }, 3000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="new_password">New Password</label>
|
||||
<input class="input-field" id="new_password" type="password" placeholder="Enter new password" required :class="{ 'error': errors.new_password }">
|
||||
<p x-show="errors.new_password" class="text-xs text-red-300 mt-1" x-cloak>Password must be at least 8 characters.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="confirm_password">Confirm New Password</label>
|
||||
<input class="input-field" id="confirm_password" type="password" placeholder="Confirm new password" required :class="{ 'error': errors.confirm_password }">
|
||||
<p x-show="errors.match" class="text-xs text-red-300 mt-1" x-cloak>Passwords do not match.</p>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
|
||||
Reset Password
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Resetting password...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a class="auth-link inline-flex items-center gap-1.5" href="login3.html">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
|
||||
Back to Sign In
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,140 @@
|
||||
@{
|
||||
ViewData["Title"] = "Resetpassword4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex flex-row-reverse bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">EnterpriseKit</div>
|
||||
<div class="text-sm text-blue-100">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-white leading-tight mb-4">Create a New<br/>Account Password</h2>
|
||||
<p class="text-blue-100 leading-relaxed mb-8">Enter and confirm your new password below. Make sure it's strong and unique to keep your account secure.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Strong Password</span><p class="text-xs text-blue-200 mt-0.5">Minimum 8 characters with mixed case and numbers</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Encrypted Security</span><p class="text-xs text-blue-200 mt-0.5">Your password is encrypted end-to-end</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-white text-sm">Instant Activation</span><p class="text-xs text-blue-200 mt-0.5">Your new password will be active immediately</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Password Tips</div>
|
||||
<div class="text-xs text-blue-200">Use a mix of letters, numbers and special characters</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8 lg:hidden">
|
||||
<div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-lg font-bold text-white">EnterpriseKit</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-white">Reset Password</h2>
|
||||
<p class="text-blue-100 text-sm mt-1">Enter your new password below.</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
const pass = document.getElementById('new_password').value;
|
||||
const confirm = document.getElementById('confirm_password').value;
|
||||
if (!pass.trim()) { errors.new_password = true; return; }
|
||||
if (pass.length < 8) { errors.new_password = true; return; }
|
||||
if (!confirm.trim()) { errors.confirm_password = true; return; }
|
||||
if (pass !== confirm) { errors.confirm_password = true; errors.match = true; return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Password has been reset successfully! Redirecting to sign in...' };
|
||||
setTimeout(() => { notification.show = false; window.location.href = 'login4.html'; }, 3000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="new_password">New Password</label>
|
||||
<input class="input-field" id="new_password" type="password" placeholder="Enter new password" required :class="{ 'error': errors.new_password }">
|
||||
<p x-show="errors.new_password" class="text-xs text-red-300 mt-1" x-cloak>Password must be at least 8 characters.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="confirm_password">Confirm New Password</label>
|
||||
<input class="input-field" id="confirm_password" type="password" placeholder="Confirm new password" required :class="{ 'error': errors.confirm_password }">
|
||||
<p x-show="errors.match" class="text-xs text-red-300 mt-1" x-cloak>Passwords do not match.</p>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
|
||||
Reset Password
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Resetting password...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a class="auth-link inline-flex items-center gap-1.5" href="login4.html">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
|
||||
Back to Sign In
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-2xl px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,140 @@
|
||||
@{
|
||||
ViewData["Title"] = "Resetpassword5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/auth5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
|
||||
<section class="min-h-screen flex bg-white" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
|
||||
<div class="hidden lg:flex w-1/2 bg-gray-50 items-center justify-center p-12">
|
||||
<div class="max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
|
||||
<div class="text-sm text-gray-500">Enterprise Application Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Create a New<br/>Account Password</h2>
|
||||
<p class="text-gray-500 leading-relaxed mb-8">Enter and confirm your new password below. Make sure it's strong and unique to keep your account secure.</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Strong Password</span><p class="text-xs text-gray-400 mt-0.5">Minimum 8 characters with mixed case and numbers</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Encrypted Security</span><p class="text-xs text-gray-400 mt-0.5">Your password is encrypted end-to-end</p></div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
|
||||
<div><span class="font-semibold text-gray-900 text-sm">Instant Activation</span><p class="text-xs text-gray-400 mt-0.5">Your new password will be active immediately</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-4 bg-white border border-gray-200">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Password Tips</div>
|
||||
<div class="text-xs text-gray-400">Use a mix of letters, numbers and special characters</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="flex items-center gap-3 mb-8 lg:hidden">
|
||||
<div class="w-10 h-10 bg-blue-600 flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-lg font-bold text-gray-900">EnterpriseKit</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Reset Password</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Enter your new password below.</p>
|
||||
</div>
|
||||
|
||||
<form @@submit.prevent="
|
||||
errors = {};
|
||||
const pass = document.getElementById('new_password').value;
|
||||
const confirm = document.getElementById('confirm_password').value;
|
||||
if (!pass.trim()) { errors.new_password = true; return; }
|
||||
if (pass.length < 8) { errors.new_password = true; return; }
|
||||
if (!confirm.trim()) { errors.confirm_password = true; return; }
|
||||
if (pass !== confirm) { errors.confirm_password = true; errors.match = true; return; }
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
notification = { show: true, message: 'Password has been reset successfully! Redirecting to sign in...' };
|
||||
setTimeout(() => { notification.show = false; window.location.href = 'login5.html'; }, 3000);
|
||||
}, 3000);
|
||||
">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="form-label" for="new_password">New Password</label>
|
||||
<input class="input-field" id="new_password" type="password" placeholder="Enter new password" required :class="{ 'error': errors.new_password }">
|
||||
<p x-show="errors.new_password" class="text-xs text-red-500 mt-1" x-cloak>Password must be at least 8 characters.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="confirm_password">Confirm New Password</label>
|
||||
<input class="input-field" id="confirm_password" type="password" placeholder="Confirm new password" required :class="{ 'error': errors.confirm_password }">
|
||||
<p x-show="errors.match" class="text-xs text-red-500 mt-1" x-cloak>Passwords do not match.</p>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" :disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
|
||||
Reset Password
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
|
||||
Resetting password...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a class="auth-link inline-flex items-center gap-1.5" href="login5.html">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
|
||||
Back to Sign In
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
|
||||
x-show="notification.show"
|
||||
x-transition:enter="transform ease-out duration-300"
|
||||
x-transition:enter-start="translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform ease-in duration-200"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="translate-x-full opacity-0"
|
||||
x-cloak>
|
||||
<div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg px-5 py-4 min-w-[320px]">
|
||||
<div class="w-8 h-8 bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-900">Success</p>
|
||||
<p class="text-xs text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user