|
|
@@ -0,0 +1,102 @@
|
|
|
+@{
|
|
|
+ Layout = null;
|
|
|
+ ViewData["Title"] = "Login";
|
|
|
+ var pathBase = Context.Request.PathBase.Value ?? string.Empty;
|
|
|
+}
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Login - Kitty Fall CMS</title>
|
|
|
+ <script src="https://cdn.tailwindcss.com"></script>
|
|
|
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
|
+ <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
+ <style>body { font-family: 'Plus Jakarta Sans', sans-serif; }</style>
|
|
|
+</head>
|
|
|
+<body class="flex h-screen items-center justify-center bg-gray-100">
|
|
|
+ <div class="mx-4 w-full max-w-md">
|
|
|
+ <div class="mb-10 text-center">
|
|
|
+ <div class="mb-4 inline-flex rounded-xl bg-purple-600 p-3 shadow-lg shadow-purple-200">
|
|
|
+ <i class="fas fa-cat text-2xl text-white"></i>
|
|
|
+ </div>
|
|
|
+ <h1 class="text-3xl font-bold text-gray-900">Kitty Fall CMS</h1>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rounded-3xl border border-gray-100 bg-white p-10 shadow-xl shadow-gray-200/50">
|
|
|
+ <form id="frmLogin" class="space-y-6" onsubmit="doLogin(); return false;">
|
|
|
+ <div>
|
|
|
+ <label class="mb-2 ml-1 block text-xs font-bold uppercase tracking-widest text-gray-400">Username</label>
|
|
|
+ <div class="relative">
|
|
|
+ <i class="fas fa-user absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|
|
+ <input type="text" id="txtUsername" autocomplete="username"
|
|
|
+ class="w-full rounded-2xl border-2 border-gray-50 bg-gray-50 py-4 pl-12 pr-4 outline-none transition-all focus:border-purple-600 focus:bg-white"
|
|
|
+ placeholder="Enter your username">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="mb-2 ml-1 block text-xs font-bold uppercase tracking-widest text-gray-400">Password</label>
|
|
|
+ <div class="relative">
|
|
|
+ <i class="fas fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|
|
+ <input type="password" id="txtPassword" autocomplete="current-password"
|
|
|
+ class="w-full rounded-2xl border-2 border-gray-50 bg-gray-50 py-4 pl-12 pr-4 outline-none transition-all focus:border-purple-600 focus:bg-white"
|
|
|
+ placeholder="••••••••">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="msgAlert" class="hidden rounded-2xl p-4 text-sm font-medium"></div>
|
|
|
+ <button type="submit" id="btnLogin"
|
|
|
+ class="w-full rounded-2xl bg-purple-600 py-4 text-lg font-bold text-white shadow-lg shadow-purple-200 transition-all hover:bg-purple-700 hover:shadow-xl active:scale-[0.98]">
|
|
|
+ Sign In
|
|
|
+ </button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="@(pathBase)/lib/jquery/dist/jquery.min.js"></script>
|
|
|
+ <script>
|
|
|
+ const appBase = '@pathBase';
|
|
|
+
|
|
|
+ function doLogin() {
|
|
|
+ const user = $('#txtUsername').val().trim();
|
|
|
+ const pass = $('#txtPassword').val();
|
|
|
+ const alertBox = $('#msgAlert');
|
|
|
+
|
|
|
+ if (!user || !pass) {
|
|
|
+ alertBox.removeClass('hidden bg-green-100 text-green-700')
|
|
|
+ .addClass('bg-red-100 text-red-700')
|
|
|
+ .text('Please enter both fields');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ $('#btnLogin').prop('disabled', true)
|
|
|
+ .html('<i class="fas fa-spinner fa-spin mr-2"></i> Signing in...');
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: appBase + '/Auth/LoginAction',
|
|
|
+ type: 'POST',
|
|
|
+ data: { username: user, password: pass },
|
|
|
+ success: function (res) {
|
|
|
+ if (res.errorCode === 200) {
|
|
|
+ let redirectUrl = res.redirectUrl || '/SubscriptionChargeReport';
|
|
|
+ if (redirectUrl.startsWith('/') && !redirectUrl.startsWith(appBase + '/')) {
|
|
|
+ redirectUrl = appBase + redirectUrl;
|
|
|
+ }
|
|
|
+ location.href = redirectUrl;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ showError(res.message || 'Login failed');
|
|
|
+ },
|
|
|
+ error: function () { showError('System error'); }
|
|
|
+ });
|
|
|
+
|
|
|
+ function showError(message) {
|
|
|
+ $('#btnLogin').prop('disabled', false).text('Sign In');
|
|
|
+ alertBox.removeClass('hidden bg-green-100 text-green-700')
|
|
|
+ .addClass('bg-red-100 text-red-700')
|
|
|
+ .text(message);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
student