Untuk menambahkan tombol "Logout" di aplikasi login berbasis Google Apps Script yang telah kita buat, kita perlu mengimplementasik...
Untuk menambahkan tombol "Logout" di aplikasi login berbasis Google Apps Script yang telah kita buat, kita perlu mengimplementasikan mekanisme sederhana untuk mengembalikan pengguna ke halaman login setelah logout. Langkah-langkah ini termasuk menambahkan tombol logout di halaman yang menampilkan informasi pengguna dan mengatur ulang tampilan ketika tombol logout diklik.
Berikut adalah perubahan yang perlu dilakukan untuk menambahkan tombol "Logout" di aplikasi ini.
Langkah 1: Tambahkan Tombol Logout di Halaman HTML
Kita perlu menambahkan tombol "Logout" di bagian HTML yang menampilkan informasi pengguna setelah login berhasil.
Perubahan pada File HTML (LoginForm.html):
<!DOCTYPE html><html> <head> <base target="_top"> <script> function handleLogin() { var username = document.getElementById('username').value; var password = document.getElementById('password').value; google.script.run.withSuccessHandler(function(response) { if (response.success) { document.getElementById('login-form').style.display = 'none'; document.getElementById('welcome-section').style.display = 'block'; document.getElementById('user-name').innerText = response.name; document.getElementById('user-email').innerText = response.email; document.getElementById('user-image').src = response.pp_url; } else { document.getElementById('error-message').innerText = 'Login gagal. Username atau password salah.'; } }).login(username, password); } // Fungsi untuk logout function handleLogout() { // Sembunyikan welcome section dan tampilkan form login kembali document.getElementById('welcome-section').style.display = 'none'; document.getElementById('login-form').style.display = 'block'; // Kosongkan field username dan password document.getElementById('username').value = ''; document.getElementById('password').value = ''; } </script> </head> <body> <!-- Form Login --> <div id="login-form"> <h3>Login</h3> <label for="username">Username:</label> <input type="text" id="username"><br><br> <label for="password">Password:</label> <input type="password" id="password"><br><br> <button onclick="handleLogin()">Login</button> <p id="error-message" style="color:red;"></p> </div> <!-- Welcome Section Setelah Login --> <div id="welcome-section" style="display:none;"> <h3>Welcome</h3> <p>Name: <span id="user-name"></span></p> <p>Email: <span id="user-email"></span></p> <img id="user-image" alt="User Image" src=""> <br><br> <!-- Tombol Logout --> <button onclick="handleLogout()">Logout</button> </div> </body></html>
Penjelasan Perubahan:
Tombol Logout: Di dalam
welcome-section, kami menambahkan tombol dengan teks "Logout" yang ketika diklik akan memanggil fungsihandleLogout().Fungsi
handleLogout(): Fungsi ini bertanggung jawab untuk menyembunyikan elemenwelcome-sectionyang menampilkan informasi pengguna, dan kembali menampilkan form login. Selain itu, fungsi ini juga mengosongkan input username dan password untuk memastikan form bersih ketika pengguna mencoba login kembali.
Langkah 2: Mengatur Kembali State Setelah Logout
Saat pengguna menekan tombol "Logout", aplikasi akan mengatur ulang tampilan menjadi seperti sebelum pengguna login. Fungsi handleLogout() melakukan ini dengan:
- Menyembunyikan bagian
welcome-section. - Menampilkan kembali form login.
- Mengosongkan kolom input
usernamedanpassword.
Uji Coba Logout
Setelah menambahkan tombol logout, coba jalankan aplikasi Anda di browser. Langkah-langkah berikut ini menggambarkan proses yang seharusnya terjadi:
- Login: Pengguna memasukkan username dan password yang valid dan berhasil login.
- Tampilan Informasi Pengguna: Setelah login, pengguna melihat informasi mereka (nama, email, dan gambar profil dummy) bersama dengan tombol logout.
- Logout: Ketika pengguna menekan tombol logout, aplikasi akan kembali ke halaman login, mengosongkan input username dan password.
Penutup
Dengan menambahkan fitur logout, aplikasi login berbasis Google Apps Script ini menjadi lebih lengkap dan memberikan kontrol penuh bagi pengguna. Fitur logout ini tidak hanya membantu meningkatkan pengalaman pengguna tetapi juga merupakan bagian penting dari setiap aplikasi berbasis login untuk memastikan pengguna dapat mengakhiri sesi mereka dengan benar.
Sekarang aplikasi Anda siap digunakan, dengan proses login yang mudah, tampilan informasi pengguna yang menarik, dan fitur logout yang fungsional. Anda bisa mengembangkan fitur ini lebih lanjut dengan menambahkan validasi keamanan, autentikasi dua faktor, atau integrasi dengan sistem login berbasis Google Account di masa mendatang.
COMMENTS