362 lines
12 KiB
PHP
362 lines
12 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Perhitungan SAW - Pengaturan</title>
|
|
|
|
<!-- favicon -->
|
|
<link rel="shortcut icon" href="{{ asset('user/favicon.svg') }}" type="image/svg+xml">
|
|
|
|
<style>
|
|
:root {
|
|
--white: #ffffff;
|
|
--mustard: #f4d35e;
|
|
--majorelle-blue: #4A6CF7;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: #333;
|
|
background-color: #f9f9f9;
|
|
background-image: linear-gradient(to right, var(--white) 85%, var(--mustard) 85%);
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
header {
|
|
background-color: white;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
padding: 0.8rem 0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
color: var(--majorelle-blue);
|
|
text-decoration: none;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.logo:hover {
|
|
color: #3958d0;
|
|
}
|
|
|
|
.profile-header {
|
|
color: #333;
|
|
}
|
|
|
|
main {
|
|
padding: 30px 0;
|
|
}
|
|
|
|
.profile-container {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.profile-section {
|
|
background: white;
|
|
margin-bottom: 20px;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.profile-section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.profile-section-title {
|
|
color: var(--majorelle-blue);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 6px;
|
|
background-color: #fff;
|
|
color: #333;
|
|
box-sizing: border-box;
|
|
font-size: 0.9rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--majorelle-blue);
|
|
box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.2);
|
|
outline: none;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--majorelle-blue);
|
|
color: var(--white);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #3958d0;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background-color: #c82333;
|
|
}
|
|
|
|
.section-description {
|
|
color: #6c757d;
|
|
margin-bottom: 15px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
max-width: 600px;
|
|
width: 100%;
|
|
}
|
|
|
|
.alert {
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
margin-bottom: 15px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.alert-success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
</style>
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
@if (session('status') === 'password-updated')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
setTimeout(function() {
|
|
const alert = document.createElement('div');
|
|
alert.className = 'alert alert-success';
|
|
alert.textContent = 'Password updated successfully!';
|
|
document.querySelector('.profile-container').prepend(alert);
|
|
|
|
setTimeout(function() {
|
|
alert.remove();
|
|
}, 5000);
|
|
}, 100);
|
|
});
|
|
</script>
|
|
@endif
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container header-container">
|
|
<h2 class="profile-header">Profil Pengguna</h2>
|
|
<a href="{{ route('dashboard') }}" class="logo">Pintera</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="container profile-container">
|
|
@if (session('status') === 'profile-updated')
|
|
<div class="alert alert-success">
|
|
Informasi profil berhasil diperbarui!
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Profile Information Section -->
|
|
<div class="profile-section">
|
|
<div class="profile-section-header">
|
|
<h3 class="profile-section-title">Informasi Profil</h3>
|
|
</div>
|
|
<p class="section-description">Perbarui informasi profil dan alamat email akun Anda.</p>
|
|
|
|
<form method="post" action="{{ route('profile.update') }}">
|
|
@csrf
|
|
@method('patch')
|
|
|
|
<div class="form-group">
|
|
<label for="name">Nama</label>
|
|
<input type="text" id="name" name="name" class="form-control" value="{{ old('name', $user->name) }}" required>
|
|
@error('name')
|
|
<p style="color: red; font-size: 0.8rem; margin-top: 5px;">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required>
|
|
@error('email')
|
|
<p style="color: red; font-size: 0.8rem; margin-top: 5px;">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-primary">Simpan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Update Password Section -->
|
|
<div class="profile-section">
|
|
<div class="profile-section-header">
|
|
<h3 class="profile-section-title">Perbarui Kata Sandi</h3>
|
|
</div>
|
|
<p class="section-description">Pastikan akun Anda menggunakan kata sandi yang panjang dan acak untuk menjaga keamanan.</p>
|
|
|
|
<form method="post" action="{{ route('password.update') }}">
|
|
@csrf
|
|
@method('put')
|
|
|
|
<div class="form-group">
|
|
<label for="current_password">Kata Sandi Saat Ini</label>
|
|
<input type="password" id="current_password" name="current_password" class="form-control" required>
|
|
@error('current_password', 'updatePassword')
|
|
<p style="color: red; font-size: 0.8rem; margin-top: 5px;">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">Kata Sandi Baru</label>
|
|
<input type="password" id="password" name="password" class="form-control" required>
|
|
@error('password', 'updatePassword')
|
|
<p style="color: red; font-size: 0.8rem; margin-top: 5px;">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password_confirmation">Konfirmasi Kata Sandi</label>
|
|
<input type="password" id="password_confirmation" name="password_confirmation" class="form-control" required>
|
|
@error('password_confirmation', 'updatePassword')
|
|
<p style="color: red; font-size: 0.8rem; margin-top: 5px;">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-primary">Simpan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Delete Account Section -->
|
|
<div class="profile-section">
|
|
<div class="profile-section-header">
|
|
<h3 class="profile-section-title">Hapus Akun</h3>
|
|
</div>
|
|
<p class="section-description">Setelah akun Anda dihapus, semua sumber daya dan data akan dihapus secara permanen.</p>
|
|
|
|
<button type="button" class="btn btn-danger" onclick="showDeleteModal()">Hapus Akun</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Delete Account Modal (hidden by default) -->
|
|
<div id="deleteModal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<div class="profile-section-header">
|
|
<h3 class="profile-section-title">Apakah Anda yakin ingin menghapus akun?</h3>
|
|
</div>
|
|
<p class="section-description">Akun dan seluruh data Anda akan dihapus secara permanen. Silakan masukkan kata sandi untuk konfirmasi.</p>
|
|
|
|
<form method="post" action="{{ route('profile.destroy') }}">
|
|
@csrf
|
|
@method('delete')
|
|
|
|
<div class="form-group">
|
|
<label for="password">Kata Sandi</label>
|
|
<input type="password" id="password" name="password" class="form-control" required>
|
|
@error('password', 'userDeletion')
|
|
<p style="color: red; font-size: 0.8rem; margin-top: 5px;">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="form-group" style="display: flex; justify-content: space-between;">
|
|
<button type="button" class="btn" style="background-color: #6c757d; color: white;" onclick="hideDeleteModal()">Batal</button>
|
|
<button type="submit" class="btn btn-danger">Hapus Akun</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showDeleteModal() {
|
|
document.getElementById('deleteModal').style.display = 'flex';
|
|
}
|
|
|
|
function hideDeleteModal() {
|
|
document.getElementById('deleteModal').style.display = 'none';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |