admin/accounting_dev_v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update login page

Browse Source
This commit is contained in:
Wian Drs
2026-09-11 18:26:50 +07:00
parent ff870b7667
commit 387ca54679
3 changed files with 409 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/config/routes.php
+1 -1
View File
@@ -49,7 +49,7 @@ defined('BASEPATH') OR exit('No direct script access allowed');
| Examples: my-controller/index -> my_controller/index
| my-controller/my-method -> my_controller/my_method
*/
$route['default_controller'] = 'dashboard';
$route['default_controller'] = 'auth';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
application/core/MY_Controller.php
+1 -1
View File
@@ -120,7 +120,7 @@ class MY_Controller extends CI_Controller
exit;
}
$this->session->set_flashdata('error', 'Silakan login untuk melanjutkan.');
$this->session->set_flashdata('auth_notice', 'Sesi Anda telah berakhir. Silakan masuk kembali.');
redirect('auth');
exit;
}
application/views/auth/login.php
+404 -87
View File
@@ -1,142 +1,459 @@
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$loginError = isset($error) && trim((string) $error) !== ''
? trim((string) $error)
: trim((string) $this->session->flashdata('error'));
$authNotice = trim((string) $this->session->flashdata('auth_notice'));
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Accounting</title>
<meta name="theme-color" content="#172b4d">
<title>Masuk | Accounting Workspace</title>
<link rel="icon" href="<?= base_url('assets/img/accounting-color.png') ?>" type="image/png">
<!-- Assets from Theme -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--orange-main: #ff8c00;
--orange-dark: #e67700;
--orange-soft: rgba(255, 140, 0, 0.15);
--navy-950: #101d35;
--navy-900: #172b4d;
--navy-800: #223b63;
--orange-600: #ed7600;
--orange-500: #ff8a00;
--orange-100: #fff0dd;
--slate-700: #344054;
--slate-500: #667085;
--slate-300: #d0d5dd;
--slate-100: #f2f4f7;
--danger-700: #b42318;
--danger-100: #fee4e2;
--info-700: #175cd3;
--info-100: #eff8ff;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
background-color: #fff8f1;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
min-height: 100vh;
min-height: 100dvh;
color: var(--slate-700);
background:
radial-gradient(circle at 8% 12%, rgba(255, 138, 0, .13), transparent 28rem),
linear-gradient(135deg, #f8fafc 0%, #fff8ef 100%);
font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.login-card {
width: 100%;
max-width: 450px;
border-radius: 16px;
padding: 2.5rem;
button, input { font: inherit; }
.auth-page {
min-height: 100vh;
min-height: 100dvh;
display: grid;
place-items: center;
padding: 32px;
}
.login-title {
color: var(--orange-dark);
.auth-shell {
width: min(1060px, 100%);
min-height: 620px;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
overflow: hidden;
border: 1px solid rgba(208, 213, 221, .75);
border-radius: 28px;
background: #fff;
box-shadow: 0 28px 80px rgba(16, 29, 53, .14);
}
.brand-panel {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: 52px;
color: #fff;
background: linear-gradient(145deg, var(--navy-950), var(--navy-800));
}
.brand-panel::before,
.brand-panel::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.brand-panel::before {
width: 360px;
height: 360px;
top: -180px;
right: -145px;
border: 70px solid rgba(255, 138, 0, .18);
}
.brand-panel::after {
width: 240px;
height: 240px;
right: -80px;
bottom: -95px;
background: rgba(255, 138, 0, .12);
}
.brand-mark,
.brand-copy,
.brand-footer { position: relative; z-index: 1; }
.brand-mark {
display: inline-flex;
align-items: center;
gap: 13px;
color: #fff;
font-size: 14px;
font-weight: 700;
font-size: 1.8rem;
text-align: center;
margin-bottom: 0.5rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.login-subtitle {
text-align: center;
color: #6c757d;
margin-bottom: 2.5rem;
.brand-logo-wrap {
width: 48px;
height: 48px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.brand-logo-wrap img { width: 38px; height: 38px; object-fit: contain; }
.eyebrow {
margin: 0 0 15px;
color: #ffb25b;
font-size: 12px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
.brand-copy h1 {
max-width: 470px;
margin: 0;
color: #fff;
font-size: clamp(35px, 4.3vw, 54px);
line-height: 1.08;
letter-spacing: -.045em;
}
.brand-copy p {
max-width: 450px;
margin: 22px 0 0;
color: rgba(255, 255, 255, .72);
font-size: 16px;
line-height: 1.75;
}
.brand-footer {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, .62);
font-size: 13px;
}
.form-panel {
display: flex;
align-items: center;
padding: 54px clamp(34px, 5vw, 66px);
background: rgba(255, 255, 255, .98);
}
.login-form { width: 100%; }
.mobile-logo { display: none; }
.form-heading { margin-bottom: 30px; }
.form-heading .eyebrow { color: var(--orange-600); }
.form-heading h2 {
margin: 0;
color: var(--navy-950);
font-size: 31px;
line-height: 1.2;
letter-spacing: -.03em;
}
.form-heading p {
margin: 10px 0 0;
color: var(--slate-500);
font-size: 14px;
line-height: 1.6;
}
.notice {
display: flex;
align-items: flex-start;
gap: 11px;
margin-bottom: 20px;
padding: 12px 14px;
border: 1px solid transparent;
border-radius: 12px;
font-size: 13px;
line-height: 1.5;
}
.notice svg { flex: 0 0 auto; margin-top: 1px; }
.notice-error { color: var(--danger-700); border-color: #fecdca; background: var(--danger-100); }
.notice-info { color: var(--info-700); border-color: #b2ddff; background: var(--info-100); }
.field { margin-bottom: 20px; }
.field label {
display: block;
margin-bottom: 8px;
color: var(--slate-700);
font-size: 13px;
font-weight: 700;
}
.input-wrap { position: relative; }
.input-icon {
position: absolute;
top: 50%;
left: 16px;
width: 20px;
height: 20px;
color: #98a2b3;
transform: translateY(-50%);
pointer-events: none;
}
.form-control {
width: 100%;
min-height: 50px;
padding: 12px 48px;
color: var(--navy-950);
outline: 0;
border: 1px solid var(--slate-300);
border-radius: 12px;
padding: 0.8rem 1rem;
border: 1px solid #ced4da;
transition: 0.2s ease-in-out;
background: #fff;
transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control::placeholder { color: #98a2b3; }
.form-control:hover { border-color: #98a2b3; }
.form-control:focus {
border-color: var(--orange-main);
box-shadow: 0 0 0 0.25rem var(--orange-soft);
border-color: var(--orange-500);
box-shadow: 0 0 0 4px var(--orange-100);
}
.btn-login {
.password-toggle {
position: absolute;
top: 50%;
right: 9px;
width: 38px;
height: 38px;
display: grid;
place-items: center;
padding: 0;
color: var(--slate-500);
cursor: pointer;
border: 0;
border-radius: 9px;
background: transparent;
transform: translateY(-50%);
}
.password-toggle:hover { color: var(--navy-900); background: var(--slate-100); }
.submit-button {
width: 100%;
padding: 0.8rem;
font-size: 1rem;
font-weight: 600;
border-radius: 12px;
background: var(--orange-main);
border: none;
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 8px;
padding: 12px 20px;
color: #fff;
transition: 0.2s ease;
cursor: pointer;
border: 0;
border-radius: 12px;
background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
box-shadow: 0 12px 24px rgba(237, 118, 0, .24);
font-weight: 750;
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn-login:hover {
background: var(--orange-dark);
.submit-button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 15px 28px rgba(237, 118, 0, .3);
}
.submit-button:focus-visible,
.password-toggle:focus-visible {
outline: 3px solid rgba(255, 138, 0, .3);
outline-offset: 2px;
}
.submit-button:disabled { cursor: wait; opacity: .72; }
.spinner {
width: 17px;
height: 17px;
display: none;
border: 2px solid rgba(255, 255, 255, .45);
border-top-color: #fff;
border-radius: 50%;
animation: spin .7s linear infinite;
}
.submit-button.is-loading .spinner { display: block; }
.support-note {
margin: 25px 0 0;
color: #98a2b3;
font-size: 12px;
line-height: 1.6;
text-align: center;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 820px) {
.auth-page { padding: 18px; }
.auth-shell { min-height: auto; grid-template-columns: 1fr; max-width: 500px; border-radius: 22px; }
.brand-panel { display: none; }
.form-panel { padding: 38px 30px; }
.mobile-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; color: var(--navy-900); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
}
@media (max-width: 480px) {
.auth-page { align-items: stretch; padding: 0; background: #fff; }
.auth-shell { width: 100%; min-height: 100vh; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
.form-panel { align-items: flex-start; padding: 30px 22px; }
.mobile-logo { margin-bottom: 42px; }
.form-heading h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
}
</style>
</head>
<body>
<main class="auth-page">
<section class="auth-shell" aria-label="Halaman masuk Accounting Workspace">
<aside class="brand-panel">
<div class="brand-mark">
<span class="brand-logo-wrap"><img src="<?= base_url('assets/img/accounting-color.png') ?>" alt=""></span>
Accounting Workspace
</div>
<div class="card modern-card login-card shadow-lg">
<div class="card-body">
<div class="brand-copy">
<p class="eyebrow">Sistem Keuangan Terintegrasi</p>
<h1>Kendali keuangan dalam satu ruang kerja.</h1>
<p>Kelola transaksi, persediaan, penjualan, pembelian, aset, dan laporan perusahaan secara terstruktur.</p>
</div>
<center style="margin-bottom: 20px;">
<img src="<?= base_url('assets/img/accounting-color.png'); ?>" width="150px">
</center>
<hr>
<p class="login-subtitle">Silakan login untuk melanjutkan</p>
<div class="brand-footer">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
Akses aman untuk pengguna yang terdaftar
</div>
</aside>
<?php if (!empty($error)): ?>
<div class="alert alert-danger" role="alert">
<?= $error; ?>
<div class="form-panel">
<form class="login-form" id="loginForm" action="<?= base_url('auth/process_login') ?>" method="post">
<div class="mobile-logo">
<span class="brand-logo-wrap"><img src="<?= base_url('assets/img/accounting-color.png') ?>" alt=""></span>
Accounting Workspace
</div>
<?php endif; ?>
<form action="<?= base_url('auth/process_login'); ?>" method="post">
<input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
<div class="form-heading">
<p class="eyebrow">Selamat Datang</p>
<h2>Masuk ke akun Anda</h2>
<p>Gunakan username dan password yang telah terdaftar.</p>
</div>
<div class="mb-3">
<label for="username" class="form-label fw-semibold">Username</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0"><i class="bi bi-person"></i></span>
<input type="text" class="form-control border-start-0" id="username" name="username" placeholder="Masukkan username Anda" autocomplete="username" maxlength="100" required autofocus>
<?php if ($loginError !== ''): ?>
<div class="notice notice-error" role="alert">
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/><path d="M12 7.5v5M12 16.5h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
<span><?= html_escape($loginError) ?></span>
</div>
<?php elseif ($authNotice !== ''): ?>
<div class="notice notice-info" role="status">
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/><path d="M12 11v5M12 7.5h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
<span><?= html_escape($authNotice) ?></span>
</div>
<?php endif; ?>
<input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>">
<div class="field">
<label for="username">Username</label>
<div class="input-wrap">
<svg class="input-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M20 21a8 8 0 0 0-16 0M12 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
<input class="form-control" type="text" id="username" name="username" placeholder="Masukkan username" autocomplete="username" maxlength="100" required autofocus>
</div>
</div>
<div class="mb-4">
<label for="password" class="form-label fw-semibold">Password</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0"><i class="bi bi-lock"></i></span>
<input type="password" class="form-control border-start-0" id="password" name="password" placeholder="Masukkan password Anda" autocomplete="current-password" required>
<div class="field">
<label for="password">Password</label>
<div class="input-wrap">
<svg class="input-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="4" y="10" width="16" height="11" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M8 10V7a4 4 0 1 1 8 0v3" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
<input class="form-control" type="password" id="password" name="password" placeholder="Masukkan password" autocomplete="current-password" required>
<button class="password-toggle" type="button" id="passwordToggle" aria-label="Tampilkan password" aria-pressed="false">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><circle cx="12" cy="12" r="2.5" stroke="currentColor" stroke-width="1.7"/></svg>
</button>
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-premium btn-login">Login</button>
</div>
<button class="submit-button" id="submitButton" type="submit">
<span class="spinner" aria-hidden="true"></span>
<span id="submitLabel">Masuk ke Workspace</span>
<svg id="submitArrow" width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<p class="support-note">Hubungi administrator apabila Anda mengalami kendala akses.</p>
</form>
</div>
</div>
</section>
</main>
<!-- Scripts from Theme -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
(function () {
'use strict';
var form = document.getElementById('loginForm');
var password = document.getElementById('password');
var toggle = document.getElementById('passwordToggle');
var button = document.getElementById('submitButton');
var label = document.getElementById('submitLabel');
var arrow = document.getElementById('submitArrow');
toggle.addEventListener('click', function () {
var showing = password.type === 'text';
password.type = showing ? 'password' : 'text';
toggle.setAttribute('aria-pressed', showing ? 'false' : 'true');
toggle.setAttribute('aria-label', showing ? 'Tampilkan password' : 'Sembunyikan password');
password.focus();
});
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
form.reportValidity();
return;
}
button.disabled = true;
button.classList.add('is-loading');
label.textContent = 'Memverifikasi...';
arrow.style.display = 'none';
});
}());
</script>
</body>
</html>
<?php if($this->session->flashdata('error')): ?>
<script>
Swal.fire({
icon: 'error',
title: 'Login Gagal',
text: '<?= $this->session->flashdata('error'); ?>',
confirmButtonText: 'Coba Lagi'
});
</script>
<?php endif; ?>