‫Kursleiter: Lassen Sie uns nun endlich
‫diesen Teil der Anmeldefunktionalität beenden.
‫Und denken Sie daran, wie ich
‫in diesem Video gesagt habe, dass ich eine
‫wirklich nette Warnung implementieren wollte, wenn sich der Benutzer erfolgreich
‫anmeldet. Um dies zu sehen, melden wir den Benutzer
‫zunächst ab, indem wir das Cookie manuell entfernen.
‫Lassen Sie uns neu laden, und so sollte
‫der Benutzer jetzt natürlich nicht mehr eingeloggt sein,
‫und das ist er auch nicht.
‫Wie wir bereits wissen, liegt das daran, dass das
‫Cookie nicht in der Anfrage gesendet wurde.
‫Es gibt also eingeloggte Middleware, die wir im letzten
‫Video erstellt haben und
‫das Benutzerobjekt nicht in Reaktion gebracht hat. Einheimische, erinnerst du
‫dich daran?
‫Wenn es also nicht da ist, wird das Benutzerhandbuch nicht
‫gerendert, sondern dieser Teil wird gerendert, sodass wir
‫jetzt hier auf Anmelden klicken können.
‫Diese Warnung, über die ich gesprochen habe, möchte ich,
‫dass sie hier im Grunde am Anfang
‫auftaucht und dann
‫nach eineinhalb Sekunden immer noch nachladen.
‫Also auf die Haupthomepage wechseln.
‫Wie auch immer, lassen Sie
‫uns einige Funktionen für diese Warnung in einer weiteren separaten Datei erstellen.
‫Also neue Datei,
‫Alarm. js.
‫Alles klar, aber bevor wir wirklich weitermachen können,
‫müssen wir hier
‫ein wenig über unsere Front-End-Architektur nachdenken.
‫In diesem Kurs geht es natürlich nicht um das
‫Frontend, aber wir müssen uns hier zumindest
‫ein bisschen darum
‫kümmern, denn wir fangen wirklich
‫an, hier eine schöne Menge an
‫Dateien zu bekommen, und zwar alle in
‫unsere Seiten ist keine gute Praxis.
‫So wie
‫wir es hier gemacht haben.
‫Dies ist also keine gute Praxis.
‫Wir sollten nur eine große JavaScript-Datei haben,
‫die den gesamten Code enthält.
‫In der modernen JavaScript-Frontend-Entwicklung verwenden
‫wir daher normalerweise einen sogenannten Modulbundler.
‫Das beliebteste ist wahrscheinlich immer noch Webpack, aber normalerweise
‫bereitet uns Webpack viele Probleme und es
‫ist wirklich mühsam, es einzurichten.
‫Es gibt also sozusagen einen ganz netten
‫Neuzugang, der Parcel heißt.
‫Also schauen wir uns das an und sehen, ob es bereits auftaucht, und
‫tatsächlich ist es das Richtige.
‫Ein blitzschneller, konfigurationsfreier Webanwendungsbundler.
‫Also genau das suchen wir.
‫Einfach ein Bundler, der keine aufwendigen
‫Konfigurationen erfordert, denn damit wollen
‫wir keine Zeit verlieren.
‫In Ordnung, also lass es uns einfach hier installieren.
‫Also npm install und ich
‫bin mir nicht sicher, ob es wirklich nur Parcel ist.
‫Gehen wir
‫also hierher zurück.
‫Wahrscheinlich ist das Paket. js oder so, denn
‫ich erinnere mich, als ich es das letzte Mal
‫installiert habe, hat es nicht sofort funktioniert, also lass uns das überprüfen.
‫Ja, in der Tat, es ist Paket-Bündel.
‫Jetzt haben wir einen Fehler.
‫Okay, ich habe vergessen, es als Dev-Abhängigkeit zu speichern.
‫Wir wollen es also eigentlich als sicheres Dev, okay, und
‫das liegt daran, dass es ein Entwicklungstool ist.
‫Jetzt ist noch etwas schief gelaufen.
‫Lass es mich hier mit sudo versuchen.
‫Wenn es also auch in Ihrem Fall
‫nicht funktioniert hat, verwenden Sie einfach sudo, um die entsprechenden Berechtigungen zu erhalten.
‫In Ordnung, also schauen wir uns unser Paket an. json
‫und tatsächlich ist es hier, in Ordnung.
‫Wenn Sie sich
‫dieses Video einige Zeit nach der Aufnahme
‫ansehen, ist möglicherweise bereits Version Nummer zwei vorhanden, und
‫das könnte, wie wir bereits
‫wissen, einige grundlegende Änderungen mit sich bringen.
‫Wenn Sie also von diesem Punkt an Fehler erhalten, die
‫Sie hier im Video nicht
‫sehen, installieren Sie dieses Paket bitte hier mit Version
‫.
‫1, okay.
‫Also füge
‫im Grunde so einen hinzu, okay.
‫Das macht Sie dann darauf aufmerksam, dass Sie auf diese seltsamen
‫Fehler stoßen, und rettet mich hoffentlich auch
‫vor Tonnen von negativen Kommentaren oder
‫negativen Bewertungen, die erwarten, dass ich alle meine Videos alle zwei Wochen
‫aktualisiere, nur weil ein Tool aktualisiert wird, und das
‫ist natürlich nicht möglich.
‫So oft ist die
‫einfachste Lösung, dass Sie einfach dieselbe
‫Version verwenden, die ich im Video verwende, in Ordnung.
‫Wie auch immer, um Parcel jetzt tatsächlich zu verwenden,
‫fügen wir hier einige Skripte hinzu.
‫Also füge ich eine zu Watch oder JavaScript hinzu.
‫Okay, und dafür
‫verwende ich den Befehl Parcel watch.
‫Das würde eigentlich schon gut laufen, aber ich
‫möchte noch ein bisschen konfigurieren, weil es
‫sonst das letzte Bundle in einigen Ordnern ablegt,
‫die ich nicht haben möchte.
‫Legen wir also fest, welcher Ordner tatsächlich überwacht werden soll.
‫Das ist also öffentlich/JavaScript und dann Index. js, das ist also unser Einstiegspunkt und
‫das ist die
‫Datei, die wir gleich erstellen werden.
‫Okay.
‫Dann sollte das Ausgabeverzeichnis auch öffentlich
‫sein.
‫js, okay.
‫Oftmals haben Sie verschiedene
‫Ordner für die Entwicklung und für die Ausgabe,
‫aber in diesem Fall, da es sich um eine sehr
‫einfache Architektur handelt, werde ich die Bundle-Datei genau an
‫derselben Stelle wie die Entwicklungsdateien ablegen.
‫In Ordnung, lassen Sie uns auch die
‫Ausgabedatei
‫angeben, die Bundle sein sollte. js, alles klar.
‫Jetzt kann ich dies ausführen und es wird sich
‫dann diese Datei hier ansehen und sehen, ob sich etwas
‫ändert oder in einer der
‫Abhängigkeiten und wann
‫immer das passiert, werden alle Dateien
‫wieder in diesem Bundle gebündelt. js-Datei, alles klar.
‫Dann lass uns
‫das auch duplizieren, denn wir wollen ja
‫auch eine finale, sagen wir Serienversion, okay.
‫Also werden wir diese hier ausführen, wo
‫sie wirklich fertig sind, okay.
‫Das dauert also etwas länger, macht aber
‫auch ein bisschen mehr Optimierungskram, aber das brauchen wir
‫natürlich nicht für die Entwicklung.
‫In der Entwicklung wie immer wollen wir einfach, dass es funktioniert.
‫Lassen Sie uns also npm
‫run watch:js ausführen, aber bevor wir das tun, erstellen wir den
‫Index. js.
‫Schließen wir hier einige dieser Ordner.
‫Das ist so etwas zu verwirrend.
‫Also indexieren. js und machen wir einfach eine
‫einfache Konsole. logge dich jetzt hier ein.
‫Hallo von Parcel, alles
‫klar.
‫Dann lass uns auch hier zu
‫unserer Basis gehen und dann werden wir das jetzt tatsächlich
‫alle auskommentieren und
‫nur die Bundle-Datei einbinden.
‫Also wieder eine Datei, die im Grunde den gesamten Code enthält, der
‫in allen anderen Dateien enthalten ist,
‫und alle ihre Abhängigkeiten.
‫Lassen Sie uns es also speichern, und jetzt lassen Sie uns das tatsächlich ausführen und sehen,
‫was wir da hinbekommen.
‫Und tatsächlich haben wir unsere neue Datei bekommen, die Bundle ist. js und es
‫hat all diesen Code bereits drin, okay,
‫nur für diese eine Codezeile an dieser Stelle.
‫Aber trotzdem lasst uns unsere Seite hier
‫neu laden und hallo von Parcel.
‫Das hat also funktioniert, und jetzt können wir diese
‫Datei hier tatsächlich einrichten.
‫Um Verwirrung zu vermeiden, schließen wir diese Dateien,
‫die wir für unsere aktuellen Aufgaben
‫nicht mehr benötigen.
‫Das ist also eine Menge Zeug.
‫Alles klar, dieser auch.
‫Die Idee ist nun im Grunde, dass dieser Index. js-Datei ist unsere
‫Eintragsdatei, und in dieser können wir
‫keine Daten von der Benutzeroberfläche abrufen und
‫dann delegieren wir Aktionen an einige Funktionen,
‫die von diesen anderen Modulen hier im Grunde kommen.
‫Wir haben also jetzt das Login-Modul,
‫wir haben unser Alerts-Modul und so
‫wie in Node. js können
‫wir nun tatsächlich Daten aus diesen Modulen exportieren.
‫Lassen Sie uns das tun, und was ich exportieren
‫möchte, ist diese Funktion hier.
‫Jetzt funktioniert es ein bisschen anders
‫als bei Node. js,
‫weil Node. js verwendet etwas
‫namens CommonJS, um Module zu implementieren.
‫Ich bin mir nicht
‫sicher, ob ich das erwähnt habe,
‫als wir zum ersten Mal über Module sprachen, aber hier im Front-End-JavaScript seit ES2015
‫oder ES6 gibt es auch in JavaScript so genannte Module.
‫Die Syntax ist etwas
‫anders, aber tatsächlich funktioniert sie hinter den
‫Kulissen, aber wenn Sie verstehen, wie sie mit CommonJS
‫funktioniert, wird diese hier sehr ähnlich sein.
‫ES6-Module verwenden also die Export-Import-Syntax.
‫Hier müssen wir also nur Exportieren und dann alles,
‫was wir aus dieser Datei exportieren möchten, sagen,
‫und das war's.
‫Jetzt werden wir diesen Code hier tatsächlich
‫in der Indexdatei verwenden.
‫Denken Sie also daran, wie ich gesagt habe, dass diese
‫Datei hier mehr dazu dient, wirklich Daten von der Benutzeroberfläche zu erhalten
‫und dann die Aktion zu delegieren.
‫Genau das machen wir hier also, okay.
‫Hier haben wir also nur ein solches
‫Modul, das dann die Login-Funktion exportiert.
‫Dann können wir das hier importieren und Login
‫direkt hier im Index aufrufen. js und
‫das funktioniert so.
‫Also importiere anstatt den Namen
‫der Variablen zu verlangen, die wir importieren wollen.
‫Also verwende ich hier geschweifte Klammern.
‫Es heißt also
‫Login und dann vom Namen der Datei.
‫Welche in diesem Fall das gleiche Verzeichnis, Login.
‫Jetzt deaktivieren wir eslint auch hier wieder, und ich habe
‫diese geschweiften Klammern hier verwendet, im Grunde, weil wir
‫den Export auf diese Weise durchführen, aber es gibt auch
‫etwas Ähnliches wie module. export, was
‫eine Art Standardexport ist.
‫In ES6-Modulen wird es daher als Standardexport bezeichnet.
‫In diesem Fall bräuchten wir diese geschweiften Klammern dann nicht.
‫Okay.
‫Im Moment müssen wir es so machen,
‫denn das ist der Name dieser Funktion, die wir
‫exportiert haben, in Ordnung.
‫Wichtig bei diesem Login ist nun auch, dass wir
‫Axios verwendet haben.
‫Und erinnern Sie sich, wie ich sagte,
‫dass wir es tatsächlich von npm als npm-Modul installieren würden, oder?
‫Also lass uns das jetzt tun, und zwar weil wir
‫Axios von hier aus bereits auskommentiert haben.
‫Im Moment kann die Anmeldung also keine Axios verwenden.
‫Nun, weil wir es hier nicht mehr aufgenommen haben.
‫Also lass uns hinzufügen, ein neues Terminal öffnen
‫und axios in unser Projekt installieren.
‫Dann müssen wir jetzt nur noch sagen, Axios aus
‫Axios importieren, und das
‫war's.
‫Diese Datei ist also, zumindest vorerst, fertig, aber schließen
‫wir sie nicht, da wir sie sehr
‫bald noch brauchen werden.
‫Als nächstes sollten wir eigentlich auch ein Polyfill
‫installieren, damit einige der neueren
‫JavaScript-Funktionen auch in älteren Browsern funktionieren.
‫Sagen wir also npm install und dann sieht
‫das hier etwas komisch aus.
‫Also fügen wir Babel/Polyfill wie folgt
‫hinzu.
‫Dann werden wir hier
‫oben
‫einfach so importieren, in Ordnung.
‫Dieses hier speichern wir also nicht in einer Variablen, weil
‫das überhaupt nicht nötig ist.
‫Alles, was wir damit erreichen wollen, ist im Grunde genommen
‫in unser endgültiges Bundle aufgenommen zu werden, um einige
‫der Funktionen von JavaScript gut auszufüllen.
‫In Ordnung, und deshalb steht es auch hier
‫in der ersten Zeile dieser Importe.
‫Wie auch immer, lassen Sie uns jetzt auch diese Mapbox importieren.
‫Dafür müssen wir tatsächlich zuerst
‫eine Funktion erstellen, die all diese Dinge hier erledigt.
‫Okay.
‫Lassen Sie uns
‫also
‫export displayMap erstellen, das das Array der Standorte aufnimmt.
‫Das wird dann auch tatsächlich im Index gelesen. js-Datei, alles klar.
‫Also nochmal Index. js dient eher dazu, Daten
‫von der Benutzeroberfläche, also von der
‫Website, abzurufen und dann einige Aktionen an diese anderen Module
‫zu delegieren.
‫Daher werden diese Dinge hier im Index erledigt.
‫Machen wir es hier oben.
‫Dann importiere displayMap Mapbox,
‫alles klar.
‫Nennen wir das
‫also auch mit den Standorten.
‫Erinnern Sie sich jetzt an die Zeit, als wir diese Karte tatsächlich erstellt haben,
‫und erinnern Sie sich daran, wie sie uns gefragt hat, ob
‫wir die Mapbox-Bibliothek auf npm verwenden möchten?
‫Also könnten wir jetzt fortfahren und
‫tatsächlich diesen anstelle desjenigen verwenden, den wir gerade verwenden.
‫Also gut, es ist
‫nicht hier.
‫Ja, also dieser.
‫Dies hier ist also die Mapbox-Bibliothek, die
‫wir derzeit verwenden, aber auch hier
‫gibt es eine npm-Version.
‫Dann bräuchten wir das hier nicht.
‫Aus irgendeinem Grund gibt es jedoch
‫ein Problem bei der Verwendung dieser Bibliothek zusammen mit Parcel, okay.
‫Also stoßen andere Leute tatsächlich auf dieses Problem.
‫Daher können wir die mapbox npm-Bibliothek nicht
‫zusammen mit Parcel verwenden.
‫Das ist ein Grund, warum ich es immer noch so mache.
‫Okay.
‫Damit ist mapbox komplett.
‫Auch das brauchen wir nicht mehr.
‫Lassen Sie uns nun einige dieser Fehler, die wir hier
‫unten gesehen haben, tatsächlich beseitigen.
‫Nun, jetzt sind sie
‫nicht mehr hier, aber zum Beispiel hatten wir
‫das Problem, dass dieser Code hier
‫einige Fehler verursachte, als wir auf Seiten waren, die diese Karte hier nicht hatten, richtig.
‫Denn auf der Detailseite hat diese Karte natürlich so dieses
‫Element, aber dann läuft dieser Code natürlich auf
‫allen anderen Seiten,
‫das wird dann dort Fehler machen.
‫Also lass uns das beheben.
‫Was ich hier also mache, ist zuerst ein
‫Element damit zu erstellen und dann zu testen, ob es tatsächlich
‫existiert, bevor wir diese Codezeile ausführen.
‫Daher werden wir hier einige DOM-Elemente erstellen.
‫Und hier
‫würde ich Delegation sagen.
‫Also wenn mapbox
‫und erst dann auf diese beiden Aktionen
‫hier, okay.
‫Hier heißt es dann auch mapbox
‫und das ist viel schöner.
‫Hier lasst uns
‫auch Werte setzen, und ich
‫werde diese beiden angeben, weil wir sie tatsächlich
‫brauchen könnten oder tatsächlich auch für andere Dinge brauchen werden.
‫So ist es etwas sauberer.
‫Lassen Sie uns diesen Ereignis-Listener hier auch
‫nur hinzufügen, wenn dieses Element vorhanden ist, richtig.
‫Denn auch hier wird ein Fehler erzeugt, wenn dies nicht der Fall ist.
‫Also Loginformular, und wenn
‫und dann
‫lass
‫es uns hier wiederverwenden, speichern Sie es, und so
‫sieht es jetzt besser aus.
‫Okay.
‫Lassen Sie uns dieses Terminal tatsächlich schließen.
‫Dies sollten Sie unseren Code jedes Mal bündeln, wenn
‫es einen Speichervorgang gibt.
‫Speichern wir es einfach noch einmal hier.
‫Okay, ich hoffe, das hat sich jetzt geändert.
‫Also lass uns weitermachen und das ausprobieren.
‫Wenn Sie sich an dieser Stelle also noch gut einloggen
‫können, bedeutet das, dass es tatsächlich funktioniert hat.
‫Nun, vielleicht nicht.
‫Versuchen wir es hier noch einmal.
‫Alles klar, hier stimmt also etwas nicht.
‫Lassen Sie uns also wie immer diese E-Mail und dieses Passwort
‫hier in die Konsole eintragen.
‫Ich meine, weil wir ja schon wissen,
‫dass diese Funktion hier eigentlich aufgerufen wird, richtig.
‫Sonst würden wir den Fehler nicht einmal bekommen.
‫Richtig, denn dieser Fehler kommt eindeutig von unserer API.
‫Also alles, was wir hier haben, funktioniert tatsächlich, glaube ich.
‫Werfen wir einen Blick auf die Konsole.
‫Es scheint also, dass es tatsächlich keinen Benutzernamen und
‫kein Passwort gibt.
‫Okay.
‫Ich bin mir nicht sicher, warum das so ist.
‫Schauen wir mal, ob wir tatsächlich etwas bekommen.
‫Also logge dich ein und ich
‫werde diese auch gleich hier einloggen, nicht
‫hier sondern
‫hier.
‫Und so muss das
‫Problem anscheinend sein, dass Benutzername und
‫Passwort nicht wirklich definiert sind.
‫Oh, und jetzt verstehe ich natürlich, warum das so ist.
‫Was für ein dummer Fehler.
‫Wir versuchen also, diese Werte hier gleich zu
‫Beginn beim Laden der Seite zu
‫lesen, und natürlich sind diese Werte an dieser Stelle noch nicht definiert.
‫Also können wir sie natürlich
‫nur hier in unserem Event-Listener definieren, richtig.
‫Wenn diese Funktion hier also
‫gut aufgerufen wird, sind natürlich E-Mail und Passwort
‫festgelegt, damit wir sie dann lesen können.
‫Das war also irgendwie
‫dumm, aber manchmal passiert so etwas.
‫Jetzt kopieren wir das hier tatsächlich.
‫Diesmal sind wir erfolgreich eingeloggt, was
‫bedeutet, dass unser Code hier noch funktioniert.
‫Großartig, und jetzt machen wir den letzten Teil, den
‫wir in dieser
‫Vorlesung machen wollten, nämlich diese Warnungen zu erstellen, in Ordnung.
‫Lassen Sie uns also eine Funktion namens show alert erstellen und exportieren.
‫Beim Login werden wir diese Funktion importieren und
‫dort verwenden.
‫Also showAlert und this
‫als Eingabe bekommt einen Typ und eine Nachricht,
‫also einfach so.
‫Und dieser Typ
‫ist entweder Erfolg
‫oder Fehler,
‫okay.
‫Denn abhängig von dieser Eingabe haben wir dann für
‫jeden dieser Alerts unterschiedliche CSS und das werden Sie
‫in einer Sekunde sehen.
‫Was wir also tun werden, ist, hier im Grunde
‫etwas HTML-Markup zu erstellen und es dann in unseren HTML-Code einzufügen, also ist
‫es etwas wirklich Einfaches.
‫Also ein Markup und der Template-String und
‫jetzt etwas nettes HTML.
‫Es ist also einfach ein div mit einer Klasse
‫von alert und dann
‫alert -- also ein Modifikator mit unserem
‫Typ.
‫Okay, und deshalb muss
‫es entweder Erfolg oder Fehler sein.
‫Lassen Sie mich das also schnell
‫in CSS zeigen, denn ich denke, es ist
‫wirklich wichtig, wirklich zu wissen, wie das alles zusammenspielt, okay.
‫Hier haben wir also
‫unsere Alert-Klasse und dann Alert-Erfolg und Alert-Fehler.
‫Gut.
‫Wie immer lasst uns eslint hier deaktivieren, okay,
‫und das loswerden und jetzt kommt
‫natürlich hier die Meldung, die wir in
‫diese Funktion übergeben.
‫Natürlich könnten wir dies
‫dann in der gesamten Anwendung verwenden, aber
‫in diesem Fall brauchen wir es hier nur für unseren Login.
‫Also dokumentieren. queryselector, und hier
‫wählen wir nun das Element
‫aus, in das wir diesen gerade erstellten HTML-Code einfügen möchten.
‫Das ist also eigentlich direkt am
‫Anfang des body-Elements.
‫Also ganz oben auf der Seite.
‫Also
‫body, und dann angrenzendes HTML einfügen, also dieses hier.
‫Wenn Sie meinen kompletten JavaScript-Kurs belegt
‫haben, ist das alles hier nichts Neues für
‫Sie, okay.
‫Hier können wir also ein paar Schlüsselwörter angeben, und
‫in diesem Fall wollen wir afterbegin.
‫Das bedeutet im Grunde
‫genommen das Innere des Körpers, aber gleich zu Beginn, in Ordnung.
‫Dann das HTML, also das
‫Markup, das wir eigentlich einbinden wollen.
‫Groß.
‫Dies wird also eine sehr einfache Warnung basierend
‫auf Typ und Methode erstellen, aber jetzt wollen wir auch eine
‫Funktion zum Ausblenden von Warnungen.
‫Also lass es uns auch hier erstellen, exportieren, und wahrscheinlich
‫brauchen wir es außerhalb von hier nicht einmal, aber
‫dennoch ist es aus Gründen der Wiederverwendbarkeit immer eine gute Idee, all
‫das zu exportieren.
‫Dieser braucht keine Argumente aufzunehmen.
‫Jetzt müssen wir nur noch das Element
‫mit der Alert-Klasse
‫auswählen und es anschließend entfernen.
‫Also Queryselector-Warnung.
‫Also genau der gleiche Klassenname wie hier.
‫Dann müssen wir einen JavaScript-Trick anwenden, bei
‫dem wir eine Ebene nach oben zum übergeordneten Element verschieben
‫und dann von dort ein untergeordnetes Element entfernen müssen.
‫Wenn es also ein Element gibt, dann
‫Element. parentElement. removeChild
‫und dann das Element.
‫Okay.
‫Das sollte also wieder nur grundlegendes JavaScript
‫oder grundlegende DOM-Manipulation sein.
‫Da dies ein Knotenkurs ist,
‫werde ich nicht tiefer darauf eingehen.
‫Wie auch immer, was ich hier jetzt
‫tun möchte, ist, jedes Mal, wenn
‫wir eine Warnung anzeigen, zuerst alle bereits vorhandenen Warnungen auszublenden.
‫Also führen wir immer
‫nur zur Sicherheit immer hideAlert aus.
‫Schließlich möchte ich auch immer alle Benachrichtigungen nach fünf
‫Sekunden ausblenden.
‫Also Fenster
‫setTimeout hideAlert nach fünf
‫Sekunden.
‫In Ordnung, und jetzt importieren wir das hier.
‫Display-Warnung hieß es, oder?
‫Oh showAlert, mit Typ und Nachricht.
‫Also showAlert von
‫rechts ab und so ...
‫Ja, also wollen wir das hier richtig nutzen.
‫Anstelle des JavaScript-Alarms möchten wir also showAlert
‫ausführen, in Ordnung, und hier
‫das gleiche.
‫Wir müssen hier noch den
‫Typ angeben,
‫also ist das in diesem Fall erfolgreich
‫und hier ist es ein Fehler.
‫Wir haben die automatische Vervollständigung erreicht.
‫Gut, das ist besser.
‫Also lass es uns testen.
‫Und zuerst müssen wir uns abmelden, indem wir dieses Cookie löschen.
‫Neu laden, einloggen, und
‫jetzt teste
‫ich es erstmal mit einem falschen
‫Passwort und los gehts.
‫Also falsche E-Mail oder falsches Passwort direkt in unserer netten Benachrichtigung und Sie
‫haben gesehen, dass es nach fünf Sekunden verschwunden ist.
‫Natürlich hätten wir da
‫ein paar nette Animationen hinstellen können und
‫so, aber ich denke so ist es schon mehr als genug.
‫Sehen wir uns das noch einmal kurz
‫an, und so wird es dann aussehen, aber
‫wenn es richtig ist, dann sollte es natürlich grün sein.
‫Also ja, erfolgreich eingeloggt und nach
‫anderthalb Sekunden sehen wir einen Reload und
‫jetzt funktioniert es wirklich.
‫Das ist unsere vollständige Authentifizierung am Frontend.
‫Das war viel Arbeit, aber wenn du mich fragst lohnt es sich total.
‫Jetzt fehlt nur noch, dass wir
‫uns tatsächlich abmelden, wenn wir hier auf diese Schaltfläche klicken.
‫Im Moment ist das also nicht
‫der Fall und im nächsten Video wollen wir das beheben.