‫-: Und nun, um diesen Abschnitt abzuschließen,
‫verwenden wir noch einmal unsere API,
‫diesmal um auch das Passwort des Benutzers zu aktualisieren.
‫Im Grunde werden
‫wir dieses Formular hier zum Laufen bringen.
‫Die Funktion zum Aktualisieren
‫von Daten haben wir bereits in der letzten Vorlesung
‫erstellt, und jetzt können wir auch
‫eine Funktion zum Aktualisieren des Passworts erstellen.
‫Aber diese Funktion würde im Grunde genauso aussehen.
‫Anstatt dies zu tun, werde
‫ich diese Funktion ein wenig ändern und
‫ihr erlauben, sowohl die Daten als auch das Passwort zu aktualisieren.
‫Nennen wir dieses eine Update-Einstellungen.
‫Und dann übergeben wir hier anstelle von Name
‫und E-Mail ein Objekt,
‫das alle Daten enthält, die wir aktualisieren möchten, und dann
‫auch noch einen String für den Typ.
‫Das können dann entweder Daten oder ein Passwort sein.
‫Hier haben wir Daten, die wiederum ein
‫Objekt aller zu aktualisierenden Daten sind, und dann den Typ.
‫Also schreiben wir das hier.
‫Typ ist entweder
‫Passwort oder
‫Daten.
‫Dann sind die Daten, die
‫wir hier senden, eigentlich nur das Datenobjekt.
‫Denn wenn wir diese
‫Funktion aufrufen, erzeugen wir dann bereits ein ähnliches Objekt wie dieses.
‫Hier müssen wir also nur Daten verwenden.
‫Also, alles, was wir tun müssen, ist wirklich dies.
‫Dann
‫verwenden wir beim Aktualisieren
‫der Passwörter natürlich auch eine andere URL.
‫Lassen Sie uns also einfach einen ternären Operator
‫verwenden, um zu bestimmen, welche URL wir je
‫nach Typ string aufrufen möchten.
‫Lassen Sie uns zu Postman gehen und tatsächlich
‫die Update-Passwort-URL kopieren.
‫Hier unten in der
‫Authentifizierung haben wir das aktuelle Benutzerpasswort aktualisiert.
‫Und damit benötigt man das aktuelle Passwort, die Passwörter,
‫also im Grunde das neue, und
‫dann Passwort bestätigen.
‫Und die Route hier ist mein Passwort aktualisieren.
‫Ähnlich wie hier,
‫suchen wir hier eine URL und sagen, wenn der Typ gleich Passwort
‫ist, dann lassen Sie die URL in Ordnung sein,
‫all
‫dies, und aktualisieren Sie dann mein Passwort mit einem Schrägstrich.
‫Und sonst wird es dieser hier sein.
‫Und deshalb verwenden wir hier diesen Typparameter.
‫Hier brauchen wir also nur die URL,
‫und das war's.
‫Und auch hier unten im Erfolgsstring
‫sollten wir wohl dann angeben, ob die Passwörter oder
‫die Daten erfolgreich aktualisiert wurden.
‫Und im Grunde werden wir jetzt den Typ hier platzieren.
‫Ach und lass es uns hier auch in
‫Großbuchstaben umwandeln, denn sonst wird der Typ klein geschrieben, so wie hier.
‫Das sieht für mich schon so gut aus.
‫Lassen Sie uns nun, um zu sehen,
‫ob es funktioniert, diese Update-Einstellungen hier verwenden, um
‫die Daten zu aktualisieren.
‫Also, was wir in der letzten
‫Vorlesung gemacht haben, aber jetzt mit dieser neuen Funktion.
‫Was wir hier zunächst importieren müssen,
‫ist nun die Funktion Update-Einstellungen.
‫Und hier müssen wir die Update-Einstellungen aufrufen, mit natürlich
‫und Objekt jetzt.
‫Und das ist also dieser.
‫Und jetzt der Typ String, der Daten ist.
‫Lass uns das ganz schnell testen.
‫Lassen Sie uns
‫hier wieder einige Namen hinzufügen, die
‫zu den Einstellungen gespeichert
‫und die Daten erfolgreich aktualisiert wurden.
‫Nur ein kurzes
‫Nachladen, und tatsächlich funktioniert alles.
‫Jetzt müssen wir also nur noch die
‫Daten aus diesen drei Eingabefeldern
‫auslesen und dann auch noch an die Funktion Update-Einstellungen übergeben.
‫Wählen wir zunächst das Passwortformular
‫aus, und zurück in
‫unserer Kontovorlage heißt dieses Formular Benutzereinstellungen.
‫Lassen Sie uns basierend darauf auswählen.
‫Also nur duplizieren.
‫Formular Benutzereinstellungen, und wahrscheinlich sollte
‫das jetzt Passwort heißen.
‫Ja, nennen wir dieses Passwort hier tatsächlich.
‫Das macht etwas mehr Sinn.
‫Also User-Passwort-Formular, und hier haben wir
‫etwas ganz Ähnliches.
‫Kopieren wir
‫es einfach, das Formular für das
‫Benutzerpasswort, und jetzt müssen wir nur noch die drei Passwörter abrufen.
‫Und sie heißen Passwort aktuell, Passwort und
‫Passwort bestätigen mit Bindestrichen.
‫Password current wird
‫hier mit der ID password current aufgerufen und
‫jetzt nur noch dreimal dupliziert.
‫Bestätigen Sie.
‫Und auch hier bestätigen.
‫Und jetzt gehen wir noch einmal ganz schnell zu Postman,
‫um wirklich sicherzustellen, dass dies die Variablennamen sind,
‫die unsere API erwartet.
‫Lassen Sie uns diese einfach hier kopieren, um sie schnell zu vergleichen.
‫Und so heißen sie tatsächlich Passwort aktuell, also
‫genau der gleiche
‫Name hier, dann Passwort und Passwort bestätigen.
‫Wenn wir also jetzt ein Objekt mit diesen drei
‫erstellen, werden genau die
‫Daten an die API gesendet, und unser Handler
‫kann diese Daten dann korrekt lesen.
‫Passwort aktuell, Passwort und Passwort bestätigen.
‫Und jetzt
‫zum Schluss, hier muss es natürlich Passwort sein.
‫Lass uns das jetzt testen.
‫Das aktuelle Passwort ist also test1234, und jetzt werde ich
‫ein neues Passwort namens
‫newpassword erstellen.
‫Nochmals neues Passwort, und daher müssen wir, wie bereits
‫erwähnt, das aktuelle Passwort eingeben, damit
‫jemand, der beispielsweise Ihren Computer
‫geöffnet vorfindet, Ihr Passwort nicht
‫einfach ändern kann, ohne Ihr
‫aktuelles zu kennen.
‫Und dann müssen wir natürlich das Passwort
‫bestätigen, damit wir keinen Fehler im Original machen.
‫Also lass es
‫uns jetzt speichern und das Passwort richtig aktualisieren.
‫Groß.
‫Schauen wir uns den Keks jetzt tatsächlich
‫an, denn wir hätten gleich einen neuen bekommen sollen.
‫Und eigentlich ist das genau jetzt so.
‫Das ist die Zeit, in der ich dieses Video aufnehme, und
‫das bedeutet, dass wir jetzt noch eingeloggt sind.
‫Nur um sich daran zu erinnern, warum dies
‫passiert, liegt es daran, dass wir hier im Authentifizierungscontroller,
‫hier unten bei Passwort aktualisieren, am
‫Ende tatsächlich den Benutzer eingeloggt haben, also
‫senden wir hier in Gesendetes
‫Token erstellen sofort ein neues Cookie.
‫Und das bedeutet, dass wir immer noch eingeloggt sind.
‫Wenn wir jetzt diese Seite neu laden
‫und ich sie eigentlich nicht
‫neu laden werde, öffne ich sie einfach
‫in einem neuen Tab, weil ich euch
‫noch etwas zeigen möchte, aber hier zählt, dass wir noch eingeloggt sind.
‫Was ich Ihnen zeigen wollte,
‫ist, dass wir jetzt noch die Passwörter hier haben.
‫Und das wollen wir eigentlich nicht.
‫Nachdem der API-Aufruf erfolgreich war,
‫sollten wir den
‫Inhalt aus diesen Eingabefeldern löschen.
‫Das sollten wir auch hier in dieser Datei tun, denn
‫wir haben gesagt, dass wir
‫hier alles rund um die Benutzeroberfläche handhaben.
‫Denken Sie daran, dass diese Funktion zum Aktualisieren von Einstellungen
‫hier eigentlich eine asynchrone Funktion ist.
‫Und so wird es ein Versprechen zurückgeben.
‫Wie Sie bereits wissen, können wir an dieser Stelle dann
‫genau hier auf dieses Versprechen warten.
‫Und in diesem Fall geht es nicht wirklich
‫darum, das Ergebnis des Versprechens zu speichern,
‫sondern nur zu warten, bis es
‫fertig ist, damit wir danach etwas anderes tun können.
‫Und in diesem Fall also, diese Eingabefelder zu löschen,
‫die ich Ihnen gerade gezeigt habe.
‫Um nun wait verwenden zu können, müssen wir
‫diese Funktion hier natürlich als async markieren, aber das
‫ist ganz einfach.
‫Jetzt müssen wir diese Felder nur noch einmal auswählen
‫und dann löschen.
‫Also lass uns das hier
‫einfach greifen.
‫Und dann stellen Sie sie auf leer.
‫Und das ist es.
‫Das ist also ganz einfach.
‫Und lass uns das einfach
‫duplizieren und bestätigen.
‫Versuchen wir es also noch einmal.
‫Denken wir also jetzt daran, dass das
‫Passwort derzeit newpassword ist, und
‫gehen wir nun zurück
‫zu test1234, test1234.
‫Und jetzt sind tatsächlich die Felder geräumt.
‫Aber vielleicht haben Sie, genau wie ich, auch mitbekommen,
‫dass es einige Zeit gedauert hat, bis wir
‫hier tatsächlich unseren Alarm bekommen haben.
‫Und das liegt daran, dass
‫das Festlegen eines neuen Passworts aufgrund des Verschlüsselungsprozesses einige Zeit in Anspruch nimmt.
‫Und so sollten wir dem Benutzer eine Art Feedback
‫geben, dass tatsächlich etwas im Hintergrund passiert.
‫Und normalerweise sehen Sie irgendwo auf der Seite einige Lade-Spinner, aber
‫halten wir es hier ganz
‫einfach, und alles, was ich
‫tun werde, ist den Text hier zu aktualisieren, sobald wir
‫darauf klicken, und
‫dann, wenn der API-Aufruf abgeschlossen ist,
‫Wir werden es zurücksetzen, um das Passwort zu speichern.
‫Das ist eine sehr nette Kleinigkeit, die wir unseren
‫Benutzeroberflächen hinzufügen können, und das gleiche
‫könnten wir hier für das Benutzerdatenformular machen, aber
‫das ist normalerweise sehr schnell und wir
‫brauchen das nicht.
‫Ich gehe hier noch einmal auf diese
‫Vorlage zurück, da ich diese Schaltfläche hier auswählen muss.
‫Keiner von ihnen hier ist wirklich einzigartig, also
‫fügen wir noch einen hinzu.
‫Also Schaltfläche Passwort speichern.
‫Und das machen wir
‫gleich
‫hier, gleich zu Beginn, dokumentieren. queryselector, das war der falsche,
‫also queryselector. forcasse. Wert und
‫setzen Sie ihn auf "Aktualisierung... "Und dann, wenn wir fertig
‫sind, also nach diesem Warten, setzen wir es zurück,
‫um es zu aktualisieren oder zu speichern, ich
‫glaube, es ist
‫ja, es ist tatsächlich das Passwort speichern.
‫Speichern Sie es und sehen Sie, ob das funktioniert,
‫und wenn ja, dann sind wir tatsächlich fertig.
‫Und so wieder, jetzt ist das Passwort test1234, und ich setze
‫es zurück auf newpassword, und jetzt schauen
‫wir uns hier unseren Button
‫an, ah, das hat nicht funktioniert, und ich weiß auch schon, warum das so ist.
‫Und das liegt
‫daran, dass wir den Inhalt
‫einiger HTML-Elemente natürlich nicht mithilfe von Werten ändern können.
‫Dafür verwenden wir inneres HTML oder auch Textinhalte.
‫Wir könnten also auch Textinhalte verwenden, also machen
‫wir das.
‫Und so ein letztes Mal, und jetzt
‫können wir es tatsächlich auf das Standardkennwort zurücksetzen.
‫Das aktuelle Passwort ist jetzt
‫newpassword und dann test1234,
‫test1234.
‫Und jetzt mal sehen,
‫ah, und jetzt funktioniert es.
‫Wunderschönen.
‫Und wieder werden Sie sehen, dass wir noch eingeloggt sind.
‫Perfekt.
‫Und damit schließen wir diesen Abschnitt tatsächlich ab.
‫Herzlichen Glückwunsch noch einmal, dass Sie es bis hierher
‫geschafft haben und all diese erstaunlichen Fortschritte, die Sie gemacht haben.
‫Wir sind eigentlich fast fertig mit unserem
‫Projekt, aber
‫im nächsten Abschnitt werden wir noch einiges mehr hinzufügen.
‫Wir werden
‫Datei-Uploads durchführen, einige wirklich coole E-Mail-Vorlagen
‫erstellen und sogar
‫Zahlungen in diese Anwendung aufnehmen.
‫Es liegt noch eine Menge großartiger Inhalte vor uns,
‫um dieses Projekt noch besser zu machen.