login remember me
This commit is contained in:
RetasyaSalsabila
parent
bc69735b8d
commit
3e4c585230
|
|
@ -0,0 +1,47 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
public function up(): void
|
||||
{
|
||||
// Siswa
|
||||
if (!Schema::hasColumn('siswas', 'remember_token')) {
|
||||
Schema::table('siswas', function (Blueprint $table) {
|
||||
$table->rememberToken();
|
||||
});
|
||||
}
|
||||
|
||||
// Guru
|
||||
if (!Schema::hasColumn('gurus', 'remember_token')) {
|
||||
Schema::table('gurus', function (Blueprint $table) {
|
||||
$table->rememberToken();
|
||||
});
|
||||
}
|
||||
|
||||
// Admin
|
||||
if (!Schema::hasColumn('admins', 'remember_token')) {
|
||||
Schema::table('admins', function (Blueprint $table) {
|
||||
$table->rememberToken();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public function down(): void
|
||||
{
|
||||
Schema::table('siswas', function (Blueprint $table) {
|
||||
$table->dropColumn('remember_token');
|
||||
});
|
||||
|
||||
Schema::table('gurus', function (Blueprint $table) {
|
||||
$table->dropColumn('remember_token');
|
||||
});
|
||||
|
||||
Schema::table('admins', function (Blueprint $table) {
|
||||
$table->dropColumn('remember_token');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@400;600;700;800&display=swap");
|
||||
|
||||
*,
|
||||
*::before,
|
||||
|
|
@ -9,267 +9,292 @@
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
background: #eee8f4;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
rgba(120, 80, 180, 0.08) 1px,
|
||||
transparent 1px
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#0d47a1 0%,
|
||||
#1565c0 35%,
|
||||
#1976d2 65%,
|
||||
#283593 100%
|
||||
);
|
||||
background-size: 24px 24px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ── WRAPPER ── */
|
||||
/* ── DECORATIVE SHAPES ── */
|
||||
.shape {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.shape-1 {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
border: 2.5px solid rgba(255, 255, 255, 0.07);
|
||||
border-radius: 60px;
|
||||
top: -80px;
|
||||
left: 80px;
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
||||
.shape-2 {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 40px;
|
||||
bottom: -40px;
|
||||
left: 260px;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
.shape-3 {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 36px;
|
||||
top: 40px;
|
||||
right: 320px;
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
|
||||
.shape-4 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.04);
|
||||
border-radius: 80px;
|
||||
bottom: -160px;
|
||||
right: -80px;
|
||||
transform: rotate(12deg);
|
||||
}
|
||||
|
||||
.shape-5 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: 24px;
|
||||
top: 30%;
|
||||
left: 38%;
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
||||
.blob {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
filter: blur(80px);
|
||||
}
|
||||
|
||||
.blob-1 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: rgba(100, 180, 255, 0.12);
|
||||
top: -200px;
|
||||
left: -100px;
|
||||
}
|
||||
|
||||
.blob-2 {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: rgba(120, 80, 255, 0.1);
|
||||
bottom: -100px;
|
||||
right: 200px;
|
||||
}
|
||||
|
||||
/* ── MAIN LAYOUT ── */
|
||||
.page-wrap {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
/* ── LEFT PANEL ── */
|
||||
.left-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 60px 56px;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(155deg, #1a5fd4 0%, #1e3fa8 55%, #162d82 100%);
|
||||
}
|
||||
|
||||
.left-panel::before {
|
||||
.school-tag {
|
||||
font-family: "Sora", sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin-bottom: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.school-tag::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(100, 180, 255, 0.18) 0%,
|
||||
transparent 65%
|
||||
);
|
||||
top: -120px;
|
||||
right: -100px;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 2px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 99px;
|
||||
}
|
||||
|
||||
.left-panel::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.07);
|
||||
bottom: -80px;
|
||||
left: -60px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.left-accent {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: repeating-linear-gradient(
|
||||
-55deg,
|
||||
transparent,
|
||||
transparent 40px,
|
||||
rgba(255, 255, 255, 0.015) 40px,
|
||||
rgba(255, 255, 255, 0.015) 80px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.school-logo {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.2);
|
||||
.left-logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 36px;
|
||||
position: relative;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.school-logo img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
.left-logo img {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
object-fit: contain;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.left-tag {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.left-title {
|
||||
font-size: clamp(26px, 3vw, 40px);
|
||||
.left-welcome {
|
||||
font-family: "Sora", sans-serif;
|
||||
font-size: clamp(42px, 5.5vw, 72px);
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
margin-bottom: 14px;
|
||||
letter-spacing: -0.5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.left-title em {
|
||||
font-style: normal;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.left-title em::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 1px;
|
||||
height: 3px;
|
||||
border-radius: 99px;
|
||||
background: #a5d8ff;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.left-school {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.42);
|
||||
font-weight: 500;
|
||||
line-height: 1.05;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: -1px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.left-welcome span {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
font-size: 0.42em;
|
||||
font-weight: 600;
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
letter-spacing: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.left-divider {
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 99px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.left-desc {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: 1.75;
|
||||
max-width: 320px;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
line-height: 1.8;
|
||||
max-width: 300px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 14px;
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
.btn-learn {
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.22);
|
||||
color: white;
|
||||
line-height: 1;
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
padding: 10px 22px;
|
||||
border-radius: 99px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
margin-top: 5px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* ── RIGHT PANEL ── */
|
||||
.right-panel {
|
||||
width: 420px;
|
||||
flex-shrink: 0;
|
||||
background: #eee8f4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 44px;
|
||||
.btn-learn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* ── FORM CARD ── */
|
||||
.form-card {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
padding: 36px 36px 32px;
|
||||
width: 380px;
|
||||
flex-shrink: 0;
|
||||
background: #f3effc;
|
||||
border: 1px solid rgba(180, 160, 230, 0.3);
|
||||
border-radius: 28px;
|
||||
padding: 40px 40px 36px;
|
||||
box-shadow:
|
||||
0 4px 6px rgba(100, 60, 180, 0.04),
|
||||
0 20px 40px rgba(100, 60, 180, 0.1),
|
||||
0 0 0 1px rgba(100, 60, 180, 0.06);
|
||||
0 32px 64px rgba(0, 0, 0, 0.22),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.7);
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.card-title-wrap {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
background: #ede9fb;
|
||||
background: white;
|
||||
border: 1px solid rgba(180, 160, 230, 0.35);
|
||||
border-radius: 99px;
|
||||
padding: 5px 13px;
|
||||
padding: 5px 14px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #5b3fc0;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
margin-bottom: 18px;
|
||||
font-family: "Sora", sans-serif;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #7c5cbf;
|
||||
background: #69f0ae;
|
||||
box-shadow: 0 0 6px #69f0ae;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 22px;
|
||||
.card-title {
|
||||
font-family: "Sora", sans-serif;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #1a1a2e;
|
||||
margin-bottom: 3px;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.form-sub {
|
||||
font-size: 13px;
|
||||
color: #9ba3b8;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 500;
|
||||
.title-underline {
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #60b4ff, #a78bfa);
|
||||
border-radius: 99px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ── FIELDS ── */
|
||||
.field-group {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #4a5568;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.field-wrap {
|
||||
|
|
@ -278,23 +303,18 @@ .field-wrap {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.field-icon {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
.field-wrap .field-input {
|
||||
padding-right: 44px;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
width: 100%;
|
||||
background: #f7f5fc;
|
||||
border: 1.5px solid #e8e2f5;
|
||||
border-radius: 11px;
|
||||
padding: 11px 13px 11px 38px;
|
||||
background: white;
|
||||
border: 1.5px solid #ddd6f5;
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
font-weight: 500;
|
||||
color: #1a1a2e;
|
||||
outline: none;
|
||||
|
|
@ -314,19 +334,18 @@ .field-input:focus {
|
|||
|
||||
.toggle-password {
|
||||
position: absolute;
|
||||
right: 11px;
|
||||
right: 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.eye-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s;
|
||||
|
|
@ -336,10 +355,11 @@ .toggle-password:hover .eye-icon {
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* ── REMEMBER ── */
|
||||
.remember-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 8px 0 18px;
|
||||
margin: 6px 0 20px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -382,37 +402,40 @@ .remember-text {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
/* ── SUBMIT BUTTON ── */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #1e6fd4, #1a3fa8);
|
||||
background: linear-gradient(135deg, #7c5cbf, #5b3fc0);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 11px;
|
||||
padding: 13px;
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
box-shadow: 0 6px 18px rgba(30, 63, 168, 0.3);
|
||||
box-shadow: 0 8px 24px rgba(91, 63, 192, 0.3);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 26px rgba(30, 63, 168, 0.4);
|
||||
box-shadow: 0 12px 30px rgba(91, 63, 192, 0.4);
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ── DIVIDER ── */
|
||||
.card-divider {
|
||||
border: none;
|
||||
border-top: 1px solid #f0ebfa;
|
||||
margin: 18px 0 14px;
|
||||
border-top: 1px solid #ede9fb;
|
||||
margin: 20px 0 16px;
|
||||
}
|
||||
|
||||
/* ── OTHER PORTALS ── */
|
||||
.other-portals {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
|
@ -436,31 +459,17 @@ .other-portals a:hover {
|
|||
background: #ede9fb;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: rgba(80, 60, 140, 0.45);
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
margin-top: 16px;
|
||||
transition: color 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: rgba(80, 60, 140, 0.75);
|
||||
}
|
||||
|
||||
/* ── TOAST ── */
|
||||
.toast-error {
|
||||
background: linear-gradient(135deg, #ff6b6b, #d32f2f);
|
||||
color: white;
|
||||
background: #fee2e2;
|
||||
border: 1px solid #fca5a5;
|
||||
color: #dc2626;
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-bottom: 14px;
|
||||
box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2);
|
||||
animation:
|
||||
toastIn 0.3s ease both,
|
||||
toastOut 0.4s ease 3.5s forwards;
|
||||
|
|
@ -487,22 +496,38 @@ @keyframes toastOut {
|
|||
}
|
||||
}
|
||||
|
||||
/* ── BACK LINK ── */
|
||||
.back-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
margin-top: 14px;
|
||||
transition: color 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* ── RESPONSIVE ── */
|
||||
@media (max-width: 860px) {
|
||||
.page-wrap {
|
||||
flex-direction: column;
|
||||
}
|
||||
body {
|
||||
overflow: auto;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.left-panel {
|
||||
padding: 40px 32px 32px;
|
||||
.page-wrap {
|
||||
flex-direction: column;
|
||||
padding: 48px 24px;
|
||||
gap: 32px;
|
||||
min-height: auto;
|
||||
}
|
||||
.right-panel {
|
||||
.form-card {
|
||||
width: 100%;
|
||||
padding: 32px 24px 48px;
|
||||
}
|
||||
.stats-row {
|
||||
display: none;
|
||||
.left-welcome {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,120 +5,121 @@
|
|||
@section('content')
|
||||
<link rel="stylesheet" href="{{ asset('css/login.css') }}">
|
||||
|
||||
<div class="shape shape-1"></div>
|
||||
<div class="shape shape-2"></div>
|
||||
<div class="shape shape-3"></div>
|
||||
<div class="shape shape-4"></div>
|
||||
<div class="shape shape-5"></div>
|
||||
<div class="blob blob-1"></div>
|
||||
<div class="blob blob-2"></div>
|
||||
|
||||
<div class="page-wrap">
|
||||
|
||||
{{-- LEFT: Info Panel --}}
|
||||
{{-- LEFT --}}
|
||||
<div class="left-panel">
|
||||
<div class="left-accent"></div>
|
||||
|
||||
<div class="school-logo">
|
||||
<div class="left-logo">
|
||||
<img src="{{ asset('images/logo/logosmk.png') }}" alt="Logo SMK">
|
||||
</div>
|
||||
|
||||
<div class="left-tag">SMK Negeri 1 Tapen</div>
|
||||
|
||||
<h1 class="left-title">
|
||||
Platform<br>
|
||||
<em>E-Learning</em><br>
|
||||
RPL
|
||||
</h1>
|
||||
|
||||
<div class="left-school">Rekayasa Perangkat Lunak</div>
|
||||
|
||||
<p class="left-desc">
|
||||
Kelola data jurusan, publish challenge, dan pantau seluruh aktivitas di platform.
|
||||
</p>
|
||||
|
||||
<div class="stats-row">
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">3</div>
|
||||
<div class="stat-label">Kelas RPL</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">EXP</div>
|
||||
<div class="stat-label">Sistem Poin</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">#1</div>
|
||||
<div class="stat-label">Leaderboard</div>
|
||||
</div>
|
||||
<div class="school-tag">SMK Negeri 1 Tapen</div>
|
||||
<div class="left-welcome">
|
||||
Selamat<br>Datang!
|
||||
<span>Rekayasa Perangkat Lunak</span>
|
||||
</div>
|
||||
<div class="left-divider"></div>
|
||||
<p class="left-desc">
|
||||
Kelola data jurusan RPL, publish challenge, dan pantau seluruh aktivitas di platform.
|
||||
</p>
|
||||
<a href="{{ route('landing-page') }}" class="btn-learn">Pelajari Platform</a>
|
||||
</div>
|
||||
|
||||
{{-- RIGHT: Form --}}
|
||||
<div class="right-panel">
|
||||
<div>
|
||||
<div class="form-card">
|
||||
|
||||
<div class="role-badge">
|
||||
<span class="badge-dot"></span>
|
||||
Portal Admin
|
||||
</div>
|
||||
|
||||
<div class="form-title">Masuk ke Akun</div>
|
||||
<div class="form-sub">Gunakan username kamu untuk login</div>
|
||||
|
||||
@if ($errors->any())
|
||||
<div id="toast-error" class="toast-error">{{ $errors->first() }}</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('admin.login.submit') }}">
|
||||
@csrf
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">Username</label>
|
||||
<div class="field-wrap">
|
||||
<img src="{{ asset('icons/username.svg') }}" class="field-icon" alt="">
|
||||
<input type="text" name="username" class="field-input"
|
||||
placeholder="Masukkan username" required
|
||||
value="{{ old('username') }}" autocomplete="username">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">Password</label>
|
||||
<div class="field-wrap">
|
||||
<img src="{{ asset('icons/password.svg') }}" class="field-icon" alt="">
|
||||
<input type="password" name="password" class="field-input password-input"
|
||||
placeholder="Masukkan password" required autocomplete="current-password">
|
||||
<button type="button" class="toggle-password" aria-label="Lihat password">
|
||||
<img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="remember-row">
|
||||
<input type="checkbox" class="remember-check" name="remember" id="remember"
|
||||
{{ old('remember') ? 'checked' : '' }}>
|
||||
<label class="remember-text" for="remember">Ingat saya</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">Masuk ke Dashboard</button>
|
||||
</form>
|
||||
|
||||
<hr class="card-divider">
|
||||
|
||||
<div class="other-portals">
|
||||
<span>Login sebagai</span>
|
||||
<a href="{{ route('siswa.login') }}">Siswa</a>
|
||||
<span>·</span>
|
||||
<a href="{{ route('guru.login') }}">Guru</a>
|
||||
</div>
|
||||
{{-- RIGHT: Form Card --}}
|
||||
<div>
|
||||
<div class="form-card">
|
||||
|
||||
<div class="card-title-wrap">
|
||||
<div class="role-badge"><span class="badge-dot"></span>Portal Admin</div>
|
||||
<div class="card-title">Sign In</div>
|
||||
<div class="title-underline"></div>
|
||||
</div>
|
||||
|
||||
@if ($errors->any())
|
||||
<div id="toast-error" class="toast-error">{{ $errors->first() }}</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('admin.login.submit') }}" id="login-form">
|
||||
@csrf
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">Username</label>
|
||||
<input type="text" name="username" id="field-identity" class="field-input"
|
||||
placeholder="Masukkan username" required
|
||||
value="{{ old('username') }}" autocomplete="username">
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">Password</label>
|
||||
<div class="field-wrap">
|
||||
<input type="password" name="password" class="field-input password-input"
|
||||
placeholder="Masukkan password" required autocomplete="current-password">
|
||||
<button type="button" class="toggle-password" aria-label="Lihat password">
|
||||
<img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="remember-row">
|
||||
<input type="checkbox" class="remember-check" name="remember" id="remember"
|
||||
{{ old('remember') ? 'checked' : '' }}>
|
||||
<label class="remember-text" for="remember">Ingat saya</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">Masuk</button>
|
||||
</form>
|
||||
|
||||
<hr class="card-divider">
|
||||
|
||||
<div class="other-portals">
|
||||
<span>Login sebagai</span>
|
||||
<a href="{{ route('siswa.login') }}">Siswa</a>
|
||||
<span>·</span>
|
||||
<a href="{{ route('guru.login') }}">Guru</a>
|
||||
</div>
|
||||
|
||||
<a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
|
||||
</div>
|
||||
<a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const identityInput = document.getElementById('field-identity');
|
||||
const rememberCheck = document.getElementById('remember');
|
||||
const form = document.getElementById('login-form');
|
||||
const toggleBtn = document.querySelector('.toggle-password');
|
||||
const passwordInput = document.querySelector('.password-input');
|
||||
const eyeIcon = toggleBtn?.querySelector('img');
|
||||
const STORAGE_KEY = 'remember_username';
|
||||
|
||||
// Auto-fill dari localStorage jika tidak ada old() value
|
||||
if (!identityInput.value) {
|
||||
const saved = localStorage.getItem(STORAGE_KEY);
|
||||
if (saved) {
|
||||
identityInput.value = saved;
|
||||
rememberCheck.checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Simpan / hapus saat submit
|
||||
form.addEventListener('submit', function () {
|
||||
if (rememberCheck.checked) {
|
||||
localStorage.setItem(STORAGE_KEY, identityInput.value);
|
||||
} else {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle password
|
||||
toggleBtn?.addEventListener('click', () => {
|
||||
const isVisible = passwordInput.type === 'text';
|
||||
passwordInput.type = isVisible ? 'password' : 'text';
|
||||
|
|
@ -127,6 +128,7 @@
|
|||
: "{{ asset('icons/hide.svg') }}";
|
||||
});
|
||||
|
||||
// Auto remove toast
|
||||
const toast = document.getElementById('toast-error');
|
||||
if (toast) setTimeout(() => toast.remove(), 4000);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,120 +5,121 @@
|
|||
@section('content')
|
||||
<link rel="stylesheet" href="{{ asset('css/login.css') }}">
|
||||
|
||||
<div class="shape shape-1"></div>
|
||||
<div class="shape shape-2"></div>
|
||||
<div class="shape shape-3"></div>
|
||||
<div class="shape shape-4"></div>
|
||||
<div class="shape shape-5"></div>
|
||||
<div class="blob blob-1"></div>
|
||||
<div class="blob blob-2"></div>
|
||||
|
||||
<div class="page-wrap">
|
||||
|
||||
{{-- LEFT: Info Panel --}}
|
||||
{{-- LEFT --}}
|
||||
<div class="left-panel">
|
||||
<div class="left-accent"></div>
|
||||
|
||||
<div class="school-logo">
|
||||
<div class="left-logo">
|
||||
<img src="{{ asset('images/logo/logosmk.png') }}" alt="Logo SMK">
|
||||
</div>
|
||||
|
||||
<div class="left-tag">SMK Negeri 1 Tapen</div>
|
||||
|
||||
<h1 class="left-title">
|
||||
Platform<br>
|
||||
<em>E-Learning</em><br>
|
||||
RPL
|
||||
</h1>
|
||||
|
||||
<div class="left-school">Rekayasa Perangkat Lunak</div>
|
||||
|
||||
<div class="school-tag">SMK Negeri 1 Tapen</div>
|
||||
<div class="left-welcome">
|
||||
Selamat<br>Datang!
|
||||
<span>Rekayasa Perangkat Lunak</span>
|
||||
</div>
|
||||
<div class="left-divider"></div>
|
||||
<p class="left-desc">
|
||||
Kelola materi, buat tugas, pantau pengumpulan, dan lihat perkembangan kelas kamu.
|
||||
</p>
|
||||
|
||||
<div class="stats-row">
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">3</div>
|
||||
<div class="stat-label">Kelas RPL</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">EXP</div>
|
||||
<div class="stat-label">Sistem Poin</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">#1</div>
|
||||
<div class="stat-label">Leaderboard</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ route('landing-page') }}" class="btn-learn">Pelajari Platform</a>
|
||||
</div>
|
||||
|
||||
{{-- RIGHT: Form --}}
|
||||
<div class="right-panel">
|
||||
<div>
|
||||
<div class="form-card">
|
||||
|
||||
<div class="role-badge">
|
||||
<span class="badge-dot"></span>
|
||||
Portal Guru
|
||||
</div>
|
||||
|
||||
<div class="form-title">Masuk ke Akun</div>
|
||||
<div class="form-sub">Gunakan NIP kamu untuk login</div>
|
||||
|
||||
@if ($errors->any())
|
||||
<div id="toast-error" class="toast-error">{{ $errors->first() }}</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('guru.login.submit') }}">
|
||||
@csrf
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">NIP</label>
|
||||
<div class="field-wrap">
|
||||
<img src="{{ asset('icons/username.svg') }}" class="field-icon" alt="">
|
||||
<input type="text" name="nip" class="field-input"
|
||||
placeholder="Masukkan NIP" required
|
||||
value="{{ old('nip') }}" autocomplete="username">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">Password</label>
|
||||
<div class="field-wrap">
|
||||
<img src="{{ asset('icons/password.svg') }}" class="field-icon" alt="">
|
||||
<input type="password" name="password" class="field-input password-input"
|
||||
placeholder="Masukkan password" required autocomplete="current-password">
|
||||
<button type="button" class="toggle-password" aria-label="Lihat password">
|
||||
<img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="remember-row">
|
||||
<input type="checkbox" class="remember-check" name="remember" id="remember"
|
||||
{{ old('remember') ? 'checked' : '' }}>
|
||||
<label class="remember-text" for="remember">Ingat saya</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">Masuk ke Dashboard</button>
|
||||
</form>
|
||||
|
||||
<hr class="card-divider">
|
||||
|
||||
<div class="other-portals">
|
||||
<span>Login sebagai</span>
|
||||
<a href="{{ route('siswa.login') }}">Siswa</a>
|
||||
<span>·</span>
|
||||
<a href="{{ route('admin.login') }}">Admin</a>
|
||||
</div>
|
||||
{{-- RIGHT: Form Card --}}
|
||||
<div>
|
||||
<div class="form-card">
|
||||
|
||||
<div class="card-title-wrap">
|
||||
<div class="role-badge"><span class="badge-dot"></span>Portal Guru</div>
|
||||
<div class="card-title">Sign In</div>
|
||||
<div class="title-underline"></div>
|
||||
</div>
|
||||
|
||||
@if ($errors->any())
|
||||
<div id="toast-error" class="toast-error">{{ $errors->first() }}</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('guru.login.submit') }}" id="login-form">
|
||||
@csrf
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">NIP</label>
|
||||
<input type="text" name="nip" id="field-identity" class="field-input"
|
||||
placeholder="Masukkan NIP" required
|
||||
value="{{ old('nip') }}" autocomplete="username">
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">Password</label>
|
||||
<div class="field-wrap">
|
||||
<input type="password" name="password" class="field-input password-input"
|
||||
placeholder="Masukkan password" required autocomplete="current-password">
|
||||
<button type="button" class="toggle-password" aria-label="Lihat password">
|
||||
<img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="remember-row">
|
||||
<input type="checkbox" class="remember-check" name="remember" id="remember"
|
||||
{{ old('remember') ? 'checked' : '' }}>
|
||||
<label class="remember-text" for="remember">Ingat saya</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">Masuk</button>
|
||||
</form>
|
||||
|
||||
<hr class="card-divider">
|
||||
|
||||
<div class="other-portals">
|
||||
<span>Login sebagai</span>
|
||||
<a href="{{ route('siswa.login') }}">Siswa</a>
|
||||
<span>·</span>
|
||||
<a href="{{ route('admin.login') }}">Admin</a>
|
||||
</div>
|
||||
|
||||
<a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
|
||||
</div>
|
||||
<a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const identityInput = document.getElementById('field-identity');
|
||||
const rememberCheck = document.getElementById('remember');
|
||||
const form = document.getElementById('login-form');
|
||||
const toggleBtn = document.querySelector('.toggle-password');
|
||||
const passwordInput = document.querySelector('.password-input');
|
||||
const eyeIcon = toggleBtn?.querySelector('img');
|
||||
const STORAGE_KEY = 'remember_nip';
|
||||
|
||||
// Auto-fill dari localStorage jika tidak ada old() value
|
||||
if (!identityInput.value) {
|
||||
const saved = localStorage.getItem(STORAGE_KEY);
|
||||
if (saved) {
|
||||
identityInput.value = saved;
|
||||
rememberCheck.checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Simpan / hapus saat submit
|
||||
form.addEventListener('submit', function () {
|
||||
if (rememberCheck.checked) {
|
||||
localStorage.setItem(STORAGE_KEY, identityInput.value);
|
||||
} else {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle password
|
||||
toggleBtn?.addEventListener('click', () => {
|
||||
const isVisible = passwordInput.type === 'text';
|
||||
passwordInput.type = isVisible ? 'password' : 'text';
|
||||
|
|
@ -127,6 +128,7 @@
|
|||
: "{{ asset('icons/hide.svg') }}";
|
||||
});
|
||||
|
||||
// Auto remove toast
|
||||
const toast = document.getElementById('toast-error');
|
||||
if (toast) setTimeout(() => toast.remove(), 4000);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,120 +5,121 @@
|
|||
@section('content')
|
||||
<link rel="stylesheet" href="{{ asset('css/login.css') }}">
|
||||
|
||||
<div class="shape shape-1"></div>
|
||||
<div class="shape shape-2"></div>
|
||||
<div class="shape shape-3"></div>
|
||||
<div class="shape shape-4"></div>
|
||||
<div class="shape shape-5"></div>
|
||||
<div class="blob blob-1"></div>
|
||||
<div class="blob blob-2"></div>
|
||||
|
||||
<div class="page-wrap">
|
||||
|
||||
{{-- LEFT: Info Panel --}}
|
||||
{{-- LEFT --}}
|
||||
<div class="left-panel">
|
||||
<div class="left-accent"></div>
|
||||
|
||||
<div class="school-logo">
|
||||
<div class="left-logo">
|
||||
<img src="{{ asset('images/logo/logosmk.png') }}" alt="Logo SMK">
|
||||
</div>
|
||||
|
||||
<div class="left-tag">SMK Negeri 1 Tapen</div>
|
||||
|
||||
<h1 class="left-title">
|
||||
Platform<br>
|
||||
<em>E-Learning</em><br>
|
||||
RPL
|
||||
</h1>
|
||||
|
||||
<div class="left-school">Rekayasa Perangkat Lunak</div>
|
||||
|
||||
<div class="school-tag">SMK Negeri 1 Tapen</div>
|
||||
<div class="left-welcome">
|
||||
Selamat<br>Datang!
|
||||
<span>Rekayasa Perangkat Lunak</span>
|
||||
</div>
|
||||
<div class="left-divider"></div>
|
||||
<p class="left-desc">
|
||||
Akses materi, kumpulkan tugas, ikuti challenge, dan bersaing di leaderboard kelas.
|
||||
</p>
|
||||
|
||||
<div class="stats-row">
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">3</div>
|
||||
<div class="stat-label">Kelas RPL</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">EXP</div>
|
||||
<div class="stat-label">Sistem Poin</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">#1</div>
|
||||
<div class="stat-label">Leaderboard</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ route('landing-page') }}" class="btn-learn">Pelajari Platform</a>
|
||||
</div>
|
||||
|
||||
{{-- RIGHT: Form --}}
|
||||
<div class="right-panel">
|
||||
<div>
|
||||
<div class="form-card">
|
||||
|
||||
<div class="role-badge">
|
||||
<span class="badge-dot"></span>
|
||||
Portal Siswa
|
||||
</div>
|
||||
|
||||
<div class="form-title">Masuk ke Akun</div>
|
||||
<div class="form-sub">Gunakan NISN kamu untuk login</div>
|
||||
|
||||
@if ($errors->any())
|
||||
<div id="toast-error" class="toast-error">{{ $errors->first() }}</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('siswa.login.submit') }}">
|
||||
@csrf
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">NISN</label>
|
||||
<div class="field-wrap">
|
||||
<img src="{{ asset('icons/username.svg') }}" class="field-icon" alt="">
|
||||
<input type="text" name="nisn" class="field-input"
|
||||
placeholder="Masukkan NISN" required
|
||||
value="{{ old('nisn') }}" autocomplete="username">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">Password</label>
|
||||
<div class="field-wrap">
|
||||
<img src="{{ asset('icons/password.svg') }}" class="field-icon" alt="">
|
||||
<input type="password" name="password" class="field-input password-input"
|
||||
placeholder="Masukkan password" required autocomplete="current-password">
|
||||
<button type="button" class="toggle-password" aria-label="Lihat password">
|
||||
<img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="remember-row">
|
||||
<input type="checkbox" class="remember-check" name="remember" id="remember"
|
||||
{{ old('remember') ? 'checked' : '' }}>
|
||||
<label class="remember-text" for="remember">Ingat saya</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">Masuk ke Dashboard</button>
|
||||
</form>
|
||||
|
||||
<hr class="card-divider">
|
||||
|
||||
<div class="other-portals">
|
||||
<span>Login sebagai</span>
|
||||
<a href="{{ route('guru.login') }}">Guru</a>
|
||||
<span>·</span>
|
||||
<a href="{{ route('admin.login') }}">Admin</a>
|
||||
</div>
|
||||
{{-- RIGHT: Form Card --}}
|
||||
<div>
|
||||
<div class="form-card">
|
||||
|
||||
<div class="card-title-wrap">
|
||||
<div class="role-badge"><span class="badge-dot"></span>Portal Siswa</div>
|
||||
<div class="card-title">Sign In</div>
|
||||
<div class="title-underline"></div>
|
||||
</div>
|
||||
|
||||
@if ($errors->any())
|
||||
<div id="toast-error" class="toast-error">{{ $errors->first() }}</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('siswa.login.submit') }}" id="login-form">
|
||||
@csrf
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">NISN</label>
|
||||
<input type="text" name="nisn" id="field-identity" class="field-input"
|
||||
placeholder="Masukkan NISN" required
|
||||
value="{{ old('nisn') }}" autocomplete="username">
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">Password</label>
|
||||
<div class="field-wrap">
|
||||
<input type="password" name="password" class="field-input password-input"
|
||||
placeholder="Masukkan password" required autocomplete="current-password">
|
||||
<button type="button" class="toggle-password" aria-label="Lihat password">
|
||||
<img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="remember-row">
|
||||
<input type="checkbox" class="remember-check" name="remember" id="remember"
|
||||
{{ old('remember') ? 'checked' : '' }}>
|
||||
<label class="remember-text" for="remember">Ingat saya</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">Masuk</button>
|
||||
</form>
|
||||
|
||||
<hr class="card-divider">
|
||||
|
||||
<div class="other-portals">
|
||||
<span>Login sebagai</span>
|
||||
<a href="{{ route('guru.login') }}">Guru</a>
|
||||
<span>·</span>
|
||||
<a href="{{ route('admin.login') }}">Admin</a>
|
||||
</div>
|
||||
|
||||
<a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
|
||||
</div>
|
||||
<a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const identityInput = document.getElementById('field-identity');
|
||||
const rememberCheck = document.getElementById('remember');
|
||||
const form = document.getElementById('login-form');
|
||||
const toggleBtn = document.querySelector('.toggle-password');
|
||||
const passwordInput = document.querySelector('.password-input');
|
||||
const eyeIcon = toggleBtn?.querySelector('img');
|
||||
const STORAGE_KEY = 'remember_nisn';
|
||||
|
||||
// Auto-fill dari localStorage jika tidak ada old() value
|
||||
if (!identityInput.value) {
|
||||
const saved = localStorage.getItem(STORAGE_KEY);
|
||||
if (saved) {
|
||||
identityInput.value = saved;
|
||||
rememberCheck.checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Simpan / hapus saat submit
|
||||
form.addEventListener('submit', function () {
|
||||
if (rememberCheck.checked) {
|
||||
localStorage.setItem(STORAGE_KEY, identityInput.value);
|
||||
} else {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle password
|
||||
toggleBtn?.addEventListener('click', () => {
|
||||
const isVisible = passwordInput.type === 'text';
|
||||
passwordInput.type = isVisible ? 'password' : 'text';
|
||||
|
|
@ -127,6 +128,7 @@
|
|||
: "{{ asset('icons/hide.svg') }}";
|
||||
});
|
||||
|
||||
// Auto remove toast
|
||||
const toast = document.getElementById('toast-error');
|
||||
if (toast) setTimeout(() => toast.remove(), 4000);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue