‫-: Dan sekarang, untuk menutup bagian ini,
‫mari kita kembali menggunakan API
‫kita, kali ini juga untuk memperbarui kata sandi pengguna.
‫Pada dasarnya, yang akan
‫kita lakukan adalah membuat formulir ini berfungsi.
‫Kita sudah
‫membuat fungsi update data di kuliah terakhir,
‫dan sekarang kita bisa melanjutkan
‫dan membuat fungsi update password juga.
‫Tetapi fungsi itu pada dasarnya akan terlihat persis sama.
‫Jadi, alih-alih melakukan itu,
‫saya akan mengubah fungsi ini
‫sedikit, dan mengizinkannya memperbarui data dan kata sandi.
‫Jadi sebut saja ini pengaturan pembaruan.
‫Dan kemudian di sini, yang akan kita lewati
‫adalah, alih-alih nama dan
‫email, sebuah objek yang berisi semua data yang ingin kita perbarui,
‫dan kemudian juga sebuah string untuk tipenya.
‫Yang kemudian bisa berupa data atau kata sandi.
‫Di sini, kita akan memiliki data, yang lagi-lagi
‫akan menjadi objek dari semua data yang akan diperbarui, dan kemudian jenisnya.
‫Jadi mari kita tulis di sini.
‫Jenisnya adalah kata
‫sandi atau
‫data.
‫Kemudian di sini, data yang
‫kita kirim sebenarnya hanyalah objek data.
‫Karena ketika kita memanggil
‫fungsi ini, kita sudah akan membuat objek yang mirip dengan yang ini.
‫Jadi di sini, kita hanya perlu menggunakan data.
‫Jadi, yang perlu kita lakukan hanyalah ini.
‫Kemudian tentu
‫saja, ketika kami memperbarui
‫kata sandi, kami juga menggunakan URL lain.
‫Jadi mari kita gunakan operator ternary untuk
‫menentukan URL mana yang ingin kita panggil
‫tergantung pada jenis string.
‫Mari kita pergi ke Postman dan benar-benar menyalin
‫URL kata sandi pembaruan.
‫Di sini dalam otentikasi, kami
‫telah memperbarui kata sandi pengguna saat ini.
‫Dan yang satu membutuhkan kata sandi saat ini, kata sandi,
‫jadi pada dasarnya yang baru, dan
‫kemudian konfirmasi kata sandi.
‫Dan rute di sini adalah memperbarui kata sandi saya.
‫Mirip dengan yang
‫ini, jadi, mari kita cari URL di sini dan katakan jika
‫jenisnya sama dengan kata sandi, maka biarkan URL itu
‫baik-baik
‫saja, semua ini, lalu slash perbarui kata sandi saya.
‫Dan yang lain, itu akan menjadi yang ini di sini.
‫Dan itulah yang kami gunakan parameter tipe ini di sini.
‫Di sini, kemudian, kita hanya perlu URL,
‫dan hanya itu.
‫Dan juga di sini dalam rangkaian
‫sukses, kita mungkin harus memasukkan apakah kata sandi
‫atau data berhasil diperbarui.
‫Dan pada dasarnya di sini, kita akan menempatkan tipenya sekarang.
‫Oh dan mari kita juga mengubahnya menjadi huruf
‫besar di sini, karena jika tidak, jenisnya akan menjadi huruf kecil, seperti ini.
‫Ini sudah terlihat bagus bagi saya seperti ini.
‫Mari sekarang, hanya untuk melihat apakah itu
‫berfungsi, sebenarnya gunakan pengaturan pembaruan ini di sini
‫untuk memperbarui data.
‫Jadi apa yang kami lakukan
‫di kuliah terakhir, tetapi sekarang dengan fungsi baru ini.
‫Pertama-tama, yang perlu kita impor di sini
‫sekarang adalah fungsi pengaturan pembaruan.
‫Dan di sini, kita perlu memanggil pengaturan pembaruan, dengan tentu
‫saja dan objek sekarang.
‫Dan jadi yang satu ini.
‫Dan sekarang tipe string yang data.
‫Mari kita uji dengan sangat cepat.
‫Mari kita
‫tambahkan lagi di sini beberapa
‫nama simpan ke
‫pengaturan dan data berhasil diperbarui.
‫Hanya memuat ulang
‫cepat, dan memang semuanya berfungsi.
‫Jadi sekarang yang perlu kita lakukan adalah
‫membaca data dari ketiga
‫bidang input ini, dan kemudian meneruskannya ke fungsi pengaturan pembaruan.
‫Pertama-tama mari kita pilih formulir kata
‫sandi, dan kembali ke templat
‫akun kita, yang ini disebut pengaturan pengguna formulir.
‫Mari kita pilih berdasarkan itu.
‫Jadi hanya duplikasi.
‫Bentuk pengaturan pengguna, dan mungkin itu
‫harus disebut kata sandi sekarang.
‫Ya, mari kita sebut kata sandi itu di sini.
‫Itu sedikit lebih masuk akal.
‫Jadi formulir kata sandi pengguna, dan sekarang di sini kita
‫memiliki sesuatu yang sangat mirip.
‫Mari kita
‫salin, formulir kata sandi
‫pengguna, dan sekarang kita hanya perlu mendapatkan tiga kata sandi.
‫Dan mereka disebut kata sandi saat ini, kata sandi, dan
‫konfirmasi kata sandi dengan tanda hubung.
‫Arus kata sandi
‫di sini disebut dengan arus kata sandi ID,
‫dan sekarang hanya menduplikasinya tiga kali.
‫Mengonfirmasi.
‫Dan di sini, konfirmasi juga.
‫Dan sekarang mari kita beralih ke Postman lagi, hanya untuk
‫benar-benar memastikan bahwa ini adalah nama variabel
‫yang diharapkan API kita.
‫Mari kita salin ini di sini untuk membandingkannya dengan cepat.
‫Dan memang mereka disebut kata sandi saat ini, jadi
‫nama yang sama persis
‫di sini, lalu kata sandi, dan konfirmasi kata sandi.
‫Jadi jika sekarang kita membuat objek dengan ketiganya, maka itu
‫akan menjadi data persis
‫yang akan dikirim ke API, dan pawang kita
‫akan dapat membaca data itu dengan benar.
‫Kata sandi saat ini, kata sandi, dan konfirmasi kata sandi.
‫Dan sekarang
‫tinggal selesai, disini tentunya harus password.
‫Sekarang mari kita uji itu.
‫Dan kata sandi saat ini adalah test1234, dan sekarang saya akan membuat
‫kata sandi baru, yang disebut
‫kata sandi baru.
‫Kata sandi baru lagi, dan seperti yang telah saya sebutkan, kita
‫perlu memasukkan kata sandi saat ini, sehingga jika
‫seseorang menemukan komputer Anda terbuka, misalnya,
‫mereka tidak dapat begitu saja mengubah
‫kata sandi Anda tanpa mengetahui kata
‫sandi Anda saat ini.
‫Dan tentu saja kita perlu mengkonfirmasi kata sandinya,
‫supaya kita tidak membuat kesalahan pada kata sandi aslinya.
‫Jadi mari kita
‫simpan sekarang, dan kata sandi diperbarui dengan benar.
‫Besar.
‫Mari kita lihat cookie sekarang,
‫karena kita harus segera mendapatkan yang baru.
‫Dan sebenarnya, itu tepat sekarang.
‫Saat itulah saya merekam video ini, dan itu
‫artinya kita sekarang masih login.
‫Hanya untuk mengingat mengapa ini terjadi, itu
‫karena di sini di pengontrol auth, di sini di
‫pembaruan kata sandi, kami pada
‫akhirnya benar-benar login pengguna, jadi di
‫sini dalam membuat token
‫terkirim, kami segera mengirim cookie baru.
‫Dan itu artinya kita masih login.
‫Jika sekarang kita akan memuat ulang halaman ini,
‫dan sebenarnya saya tidak akan memuatnya
‫kembali, saya hanya akan membukanya di tab
‫baru, karena saya ingin menunjukkan sesuatu yang
‫lain kepada Anda, tetapi, yang penting di sini adalah bahwa kita masih masuk.
‫Apa yang ingin saya tunjukkan kepada
‫Anda adalah bahwa kami sekarang masih memiliki kata sandi di sini.
‫Dan kami sebenarnya tidak menginginkan itu.
‫Setelah panggilan API berhasil, kita harus
‫melanjutkan dan menghapus
‫konten dari kolom input ini.
‫Itu adalah sesuatu yang harus kami lakukan juga di file ini,
‫karena kami mengatakan bahwa di sinilah kami
‫menangani segala sesuatu yang berhubungan dengan antarmuka pengguna.
‫Sekarang, ingat bahwa fungsi pengaturan pembaruan di sini
‫sebenarnya adalah fungsi asinkron.
‫Dan itu akan mengembalikan janji.
‫Seperti yang sudah Anda ketahui, pada titik ini kita dapat
‫menunggu janji itu di sini.
‫Dan dalam hal ini sebenarnya bukan untuk
‫menyimpan hasil dari janji ke apapun,
‫hanya menunggu sampai selesai, agar
‫setelah itu, kita bisa melakukan beberapa hal lainnya.
‫Dan dalam hal ini, yaitu untuk menghapus kolom input
‫yang baru saja saya tunjukkan kepada Anda.
‫Sekarang tentu saja, agar dapat menggunakan menunggu, kita
‫perlu menandai fungsi ini di sini sebagai async, tapi
‫itu sangat mudah.
‫Jadi sekarang yang perlu kita lakukan adalah memilih bidang ini
‫lagi, lalu mengosongkannya.
‫Jadi mari kita ambil ini
‫di sini.
‫Dan kemudian mengaturnya menjadi kosong.
‫Dan itu saja.
‫Jadi itu sangat sederhana.
‫Dan mari kita gandakan
‫ini, dan konfirmasi.
‫Jadi mari kita coba lagi.
‫Jadi sekarang mari kita ingat bahwa kata sandi
‫saat ini adalah kata sandi
‫baru, dan sekarang mari kembali
‫ke test1234, test1234.
‫Dan sekarang sebenarnya ladang sudah dibersihkan.
‫Tapi mungkin Anda juga memperhatikan, sama seperti saya,
‫bahwa butuh waktu cukup lama sampai kita
‫benar-benar mendapat peringatan di sini.
‫Dan itu karena pengaturan
‫kata sandi baru menetapkan beberapa waktu karena proses enkripsi.
‫Jadi kita harus memberikan semacam umpan balik kepada pengguna bahwa
‫sebenarnya ada sesuatu yang terjadi di latar belakang.
‫Dan biasanya Anda melihat beberapa pemintal pemuatan di suatu tempat di
‫halaman, tetapi mari kita buat
‫ini tetap sederhana di sini,
‫dan yang akan saya lakukan adalah memperbarui teks di sini
‫segera setelah kita
‫mengkliknya, dan kemudian ketika panggilan API
‫selesai, kami akan mengaturnya kembali untuk menyimpan kata sandi.
‫Itu adalah sentuhan kecil yang sangat bagus yang dapat kami
‫tambahkan ke antarmuka pengguna kami, dan kami
‫dapat melakukan hal yang sama di sini untuk formulir
‫data pengguna, tetapi yang itu biasanya sangat cepat,
‫jadi kami tidak memerlukannya.
‫Saya akan kembali ke template ini di sini
‫lagi, karena saya harus memilih tombol ini di sini.
‫Tak satu pun dari mereka di sini yang benar-benar unik,
‫jadi mari kita tambahkan satu lagi.
‫Jadi tombol simpan kata sandi.
‫Jadi mari kita lakukan
‫itu di
‫sini, tepat di awal, dokumen. queryselector, itu yang salah, jadi
‫queryselector. forlcass. nilai
‫dan atur ke "Memperbarui ... " Dan kemudian, setelah
‫kami selesai, jadi setelah ini menunggu, kami
‫mengaturnya kembali untuk memperbarui, atau menyimpan, saya
‫yakin, ya,
‫itu sebenarnya menyimpan kata sandi.
‫Berikan save, dan lihat apakah itu berhasil, dan
‫jika berhasil, maka kita benar-benar selesai.
‫Dan sekali lagi, sekarang kata sandinya adalah test1234, dan saya
‫menyetelnya kembali ke kata sandi baru, dan
‫sekarang mari kita lihat di
‫sini tombol kita, ah, itu tidak berhasil, dan saya sudah tahu mengapa itu terjadi.
‫Dan itu karena,
‫tentu saja, kita tidak dapat
‫menggunakan nilai untuk mengubah konten beberapa elemen html.
‫Jadi untuk itu, kami menggunakan html dalam, atau juga konten teks.
‫Jadi kita bisa menggunakan konten teks juga, jadi
‫ayo lakukan itu.
‫Dan untuk terakhir kalinya, dan sekarang kita
‫benar-benar dapat mengaturnya kembali ke kata sandi default.
‫Kata sandi saat ini sekarang adalah kata
‫sandi baru, dan kemudian test1234,
‫test1234.
‫Dan sekarang mari kita
‫lihat, ah, dan sekarang berhasil.
‫Cantik.
‫Dan lagi, Anda akan melihat bahwa kami masih masuk.
‫Sempurna.
‫Dan dengan ini, kami benar-benar menyelesaikan bagian ini.
‫Selamat, sekali lagi, karena telah sejauh ini,
‫dan semua kemajuan luar biasa yang telah Anda lakukan.
‫Kami sebenarnya hampir selesai dengan proyek kami, tetapi
‫di bagian berikutnya,
‫kami akan terus menambahkan beberapa hal lagi ke dalamnya.
‫Kami akan mengupload file,
‫kami akan membuat beberapa template email yang sangat
‫keren, dan juga, kami bahkan
‫akan memasukkan pembayaran ke dalam aplikasi ini.
‫Masih ada banyak konten luar biasa di depan
‫untuk membuat proyek ini lebih baik.