Login

Das Login ist ein Pattern, welches ein Anmeldeformular enthält. Es wird zur Authentifizierung des Benutzers mit einem Benutzernamen und einem Passwort verwendet.

Das Login Pattern umfasst zwei Eingabefelder (E-Mail-Adresse und Passwort), eine Checkbox („Angemeldet bleiben“), einen Textlink („Passwort vergessen“) und einen Button mit Icon („Anmelden“). Zusätzlich gibt es Anmeldemöglichkeiten über ID Austria, Google, Apple oder Facebook. Diese Optionen werden durch Secondary Buttons dargestellt, die den jeweiligen Anmeldeprozess starten, und bieten Nutzer:innen eine benutzerfreundliche Alternative zur klassischen Anmeldung.

<form class="form form-login needs-validation" novalidate>
  <div
    class="alert text-center rounded-0 alert-danger bg--error text-white"
    role="alert"
  >
    Individuelle Login Fehlermeldung
  </div>
  <div class="form-group element-text">
    <div class="form-floating">
      <input
        type="email"
        class="form-control"
        id="email"
        name="email"
        placeholder="Placeholder"
        required
      />
      <label for="email">E-Mail-Adresse</label>
      <div class="invalid-feedback"></div>
      <div class="valid-feedback"></div>
    </div>
  </div>
  <div class="form-group element-text">
    <div class="form-floating input-group">
      <input
        type="password"
        class="form-control"
        id="passwort"
        name="passwort"
        placeholder="Placeholder"
        required
      />
      <label for="passwort">Passwort</label>
      <button type="button" id="toggle-passwort">
        <span class="icon-visible"></span>
        <span class="visually-hidden">Passwort einblenden</span>
      </button>
      <div class="invalid-feedback"></div>
      <div class="valid-feedback"></div>
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-auto">
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          name="keep-login"
          id="keep-login"
        />
        <label class="form-check-label" for="keep-login"
          >Angemeldet bleiben</label
        >
        <div class="invalid-feedback"></div>
        <div class="valid-feedback"></div>
      </div>
    </div>
    <div class="col-auto">
      <p><a href="#">Passwort vergessen?</a></p>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">
    <svg class="icon icon-user">
      <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-user"></use>
    </svg>
    Anmelden
  </button>
  <div class="login-connect">
    <p>oder anmelden mit</p>
    <a class="btn btn-secondary" href="#">
      <svg class="icon icon-id-austria">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-id-austria"
        ></use>
      </svg>
      ID Austria
    </a>
    <a class="btn btn-secondary" href="#">
      <svg class="icon icon-google">
        <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-google"></use>
      </svg>
      Google
    </a>
    <a class="btn btn-secondary" href="#">
      <svg class="icon icon-apple">
        <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-apple"></use>
      </svg>
      Apple
    </a>
    <a class="btn btn-secondary" href="#">
      <svg class="icon icon-facebook-outline">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook-outline"
        ></use>
      </svg>
      Facebook
    </a>
  </div>
</form>

Validierungsvarianten und Benutzer:innen-Feedback

Im Rahmen des wko.at Design Systems verfügen Formularelemente standardmäßig über Erfolgsmeldungen und Fehlermeldungen. Für den spezifischen Anwendungsfall des Login-Prozesses wurde diese Logik angepasst:

Erfolgsmeldungen entfallen, da der eingeloggte Zustand selbst den Erfolg für die Benutzer:innen darstellt.

Rückmeldungen für Benutzer:innen

In der Login-Maske stehen folgende Feedbacks für Benutzer:innen zur Verfügung:

Ungültige E-Mail-Adresse:

Wenn die eingegebene E-Mail-Adresse nicht den formalen Anforderungen entspricht, wird eine entsprechende Fehlermeldung angezeigt.

Login-Fehlermeldung:

Wenn der Login insgesamt fehlschlägt (z.B. aufgrund falscher Zugangsdaten), wird eine individuelle Fehlermeldung ausgegeben.
Diese Fehlermeldung orientiert sich optisch an der allgemeinen Fehlermeldung des Design Systems. Sie wird über den Eingabefeldern platziert.