104 lines
4.8 KiB
PHP
104 lines
4.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Edit Profil</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="bg-gradient-to-br from-blue-400 via-white to-blue-200 min-h-screen py-10 flex items-center justify-center">
|
|
|
|
<div class="w-full max-w-md bg-white p-8 rounded-2xl shadow-xl border border-gray-200">
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Edit Profil</h2>
|
|
|
|
<form action="{{ route('users.updateProfile') }}" method="POST" class="space-y-5">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<!-- Nama -->
|
|
<div>
|
|
<label class="block text-gray-700 font-semibold mb-1">Nama</label>
|
|
<input type="text" name="name" value="{{ old('name', Auth::user()->name) }}"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400"
|
|
required>
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div>
|
|
<label class="block text-gray-700 font-semibold mb-1">Email</label>
|
|
<input type="email" name="email" value="{{ old('email', Auth::user()->email) }}"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400"
|
|
required>
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div class="relative mb-4">
|
|
<label for="password" class="block text-gray-700 font-semibold mb-1">Password Baru</label>
|
|
|
|
<input type="password" id="password" name="password" placeholder="Kosongkan jika tidak ingin mengganti"
|
|
class="w-full px-4 py-2 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
|
|
|
|
<!-- Tombol Toggle Mata -->
|
|
<button type="button" onclick="togglePassword()"
|
|
class="absolute top-9 right-3 text-gray-600 hover:text-gray-800 focus:outline-none">
|
|
<svg id="eyeIcon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943
|
|
9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword() {
|
|
const password = document.getElementById('password');
|
|
const icon = document.getElementById('eyeIcon');
|
|
|
|
if (password.type === 'password') {
|
|
password.type = 'text';
|
|
icon.innerHTML = `
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.477
|
|
0-8.268-2.943-9.542-7a9.955 9.955 0
|
|
013.276-4.419m3.085-1.676A9.958 9.958 0
|
|
0112 5c4.478 0 8.268 2.943 9.542 7a9.957
|
|
9.957 0 01-4.217 5.168M15 12a3 3 0
|
|
11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 3l18 18"/>
|
|
`;
|
|
} else {
|
|
password.type = 'password';
|
|
icon.innerHTML = `
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12
|
|
5c4.478 0 8.268 2.943 9.542
|
|
7-1.274 4.057-5.064 7-9.542
|
|
7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
`;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Tombol Aksi -->
|
|
<div class="flex justify-between items-center mt-6">
|
|
<button type="submit"
|
|
class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-full shadow-md transition duration-200">
|
|
Simpan Perubahan
|
|
</button>
|
|
<a href="{{ route('users.profile') }}"
|
|
class="text-gray-600 hover:text-gray-800 hover:underline transition duration-200">
|
|
Batal
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |