Skip to content

Passwort

In der WKO wird sowohl baulich als auch digital auf einen offenen und niederschwelligen Zugang Wert gelegt, um den Mitgliedern rasche und einfache Information zu ermöglichen. Manche Bereiche müssen dennoch gesichert und verifiziert werden, wie beispielsweise der Zugang zum eigenen Benutzerkonto.

Das Benutzerkonto ist der Schlüssel zu den Unternehmensdaten des Mitglieds über die vielfältige Services abgerufen werden können. Es wird daher mit einem vom Mitglied selbstgewählten Passwort geschützt. Der eingeschränkte Zugang mit Passwort wird generell sparsam eingesetzt und nur bei notwendigen Aktionen verlangt.

Passwortfeld

Die Zeichen im Passwortfeld sind standardmäßig verschlüsselt dargestellt. Mittels Icon (Auge) werden die Zeichen ein- und ausgeblendet.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<div class="form-group element-text">
  <div class="form-floating input-group">
    <input
      type="password"
      class="form-control"
      id="passwortinput-1"
      name="passwortinput-1"
      placeholder="Placeholder"
      required
    />
    <label for="passwortinput-1">Passwort</label>
    <button type="button" id="toggle-passwortinput-1">
      <span class="icon-visible"></span>
      <span class="visually-hidden">Passwort einblenden</span>
    </button>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>
Vorbefüllt

Das <input> Element enthält ein befülltes value Attribut.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<div class="form-group element-text">
  <div class="form-floating input-group">
    <input
      type="password"
      class="form-control"
      id="passwortinput-1a"
      name="passwortinput-1a"
      placeholder="Placeholder"
      required
      value="test1234"
    />
    <label for="passwortinput-1a">Passwort</label>
    <button type="button" id="toggle-passwortinput-1a">
      <span class="icon-visible"></span>
      <span class="visually-hidden">Passwort einblenden</span>
    </button>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>
Disabled

Das <input> Element enthält ein disabled Attribut.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<div class="form-group element-text">
  <div class="form-floating input-group">
    <input
      type="password"
      class="form-control"
      id="passwortinput-1b"
      name="passwortinput-1b"
      placeholder="Placeholder"
      disabled
      required
    />
    <label for="passwortinput-1b">Passwort</label>
    <button type="button" id="toggle-passwortinput-1b">
      <span class="icon-visible"></span>
      <span class="visually-hidden">Passwort einblenden</span>
    </button>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>
Infotext

Textfelder können optional mit einem Infotext unterhalb des Eingabefeldes ergänzt werden.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung

Infotext ergänzend zum Eingabefeld 

<div class="form-group element-text">
  <div class="form-floating input-group">
    <input
      type="password"
      class="form-control"
      id="passwortinput-1d"
      name="passwortinput-1d"
      placeholder="Placeholder"
      required
    />
    <label for="passwortinput-1d">Passwort</label>
    <button type="button" id="toggle-passwortinput-1d">
      <span class="icon-visible"></span>
      <span class="visually-hidden">Passwort einblenden</span>
    </button>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <p class="infotext">Infotext ergänzend zum Eingabefeld</p>
</div>
Validierung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung

Passwort Kriterien

Die Passwortkriterien entsprechen den aktuellen Sicherheitsstandards. Sie werden laufend überprüft und aktuell gehalten. Erst wenn alle Kriterien erfüllt sind, kann das Passwort gesetzt werden.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
  • Mindestens 12 Zeichen
  • Groß- und Kleinbuchstaben
  • Mindestens 1 Ziffer
  • Mindestens 1 Sonderzeichen
<div class="form-group element-text">
  <div class="form-floating input-group">
    <input
      type="password"
      class="form-control"
      id="passwortinput-2"
      name="passwortinput-2"
      placeholder="Placeholder"
      required
      data-pw-criteria="true"
    />
    <label for="passwortinput-2">Passwort</label>
    <button type="button" id="toggle-passwortinput-2">
      <span class="icon-visible"></span>
      <span class="visually-hidden">Passwort einblenden</span>
    </button>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <ul class="" data-criteria-list="passwortinput-2">
    <li data-criterion="length">Mindestens 12 Zeichen</li>
    <li data-criterion="case">Groß- und Kleinbuchstaben</li>
    <li data-criterion="number">Mindestens 1 Ziffer</li>
    <li data-criterion="special">Mindestens 1 Sonderzeichen</li>
  </ul>
</div>

Passwort editieren

Um das Passwort zu editieren, gibt es zwei Varianten. Das Editieren im Modal hat den Vorteil, dass der/die User:in im Seitenkontext bleibt. Die Möglichkeit, das Passwort anzuzeigen gibt es im zweiten Schritt – es wird immer nur ein Icon pro Formularfeld verwendet (Auge oder Stift):

Editieren im Modal
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<div class="form-group element-text">
  <div class="form-floating input-group">
    <input
      type="password"
      class="form-control"
      id="passwortinput-3"
      name="passwortinput-3"
      placeholder="Placeholder"
      required
      value="test1234"
    />
    <label for="passwortinput-3">Passwort</label>
    <button
      class="btn"
      type="button"
      data-bs-toggle="modal"
      data-bs-target="#editPasswordModal"
    >
      <svg class="icon icon-edit">
        <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-edit"></use>
      </svg>
      <span class="visually-hidden">Passwort editieren Modal</span>
    </button>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>
<div
  class="modal fade"
  id="editPasswordModal"
  tabindex="-1"
  aria-labelledby="editPasswordModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="editPasswordModalLabel">
          Passwort editieren
        </h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <form class="form needs-validation" novalidate>
          <div class="form-group element-text">
            <div class="form-floating input-group">
              <input
                type="password"
                class="form-control"
                id="old-pw"
                name="old-pw"
                placeholder="Placeholder"
                required
              />
              <label for="old-pw">Aktuelles Passwort eingeben</label>
              <button type="button" id="toggle-old-pw">
                <span class="icon-visible"></span>
                <span class="visually-hidden">Passwort einblenden</span>
              </button>
              <div class="invalid-feedback">Individuelle Fehlermeldung</div>
              <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
            </div>
          </div>
          <div class="form-group element-text">
            <div class="form-floating input-group">
              <input
                type="password"
                class="form-control"
                id="new-pw"
                name="new-pw"
                placeholder="Placeholder"
                required
                data-pw-criteria="true"
                data-pw-match="true"
              />
              <label for="new-pw">Neues Passwort</label>
              <button type="button" id="toggle-new-pw">
                <span class="icon-visible"></span>
                <span class="visually-hidden">Passwort einblenden</span>
              </button>
              <div class="invalid-feedback">Individuelle Fehlermeldung</div>
              <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
            </div>
            <ul class="" data-criteria-list="new-pw">
              <li data-criterion="length">Mindestens 12 Zeichen</li>
              <li data-criterion="case">Groß- und Kleinbuchstaben</li>
              <li data-criterion="number">Mindestens 1 Ziffer</li>
              <li data-criterion="special">Mindestens 1 Sonderzeichen</li>
            </ul>
          </div>
          <div class="form-group element-text">
            <div class="form-floating input-group">
              <input
                type="password"
                class="form-control"
                id="new-pw-repeat"
                name="new-pw-repeat"
                placeholder="Placeholder"
                required
                data-pw-match="true"
              />
              <label for="new-pw-repeat">Neues Passwort wiederholen</label>
              <button type="button" id="toggle-new-pw-repeat">
                <span class="icon-visible"></span>
                <span class="visually-hidden">Passwort einblenden</span>
              </button>
              <div class="invalid-feedback">Individuelle Fehlermeldung</div>
              <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
            </div>
          </div>
          <div class="button-group">
            <a class="btn btn-link" href="#"> Abbrechen </a>
            <button class="btn btn-primary" type="submit">Speichern</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Anmerkung: Einbindung des Modals

Weiterleitung auf eine neue Seite
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<div class="form-group element-text">
  <div class="form-floating input-group">
    <input
      type="password"
      class="form-control"
      id="passwortinput-4"
      name="passwortinput-4"
      placeholder="Placeholder"
      required
      value="test1234"
    />
    <label for="passwortinput-4">Passwort</label>
    <a class="btn" href="#">
      <svg class="icon icon-edit">
        <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-edit"></use>
      </svg>
      <span class="visually-hidden">Passwort editieren</span>
    </a>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Passwort vergeben oder ändern

Um ein neues Passwort zu vergeben oder das bestehende zu ändern, muss das aktuelle Passwort bekannt sein. Anschließend wird nach den Passwortkriterien ein neues Passwort erstellt.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
  • Mindestens 12 Zeichen
  • Groß- und Kleinbuchstaben
  • Mindestens 1 Ziffer
  • Mindestens 1 Sonderzeichen
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Abbrechen 
<form class="form needs-validation" novalidate>
  <div class="form-group element-text">
    <div class="form-floating input-group">
      <input
        type="password"
        class="form-control"
        id="altes-passwort"
        name="altes-passwort"
        placeholder="Placeholder"
        required
      />
      <label for="altes-passwort">Aktuelles Passwort eingeben</label>
      <button type="button" id="toggle-altes-passwort">
        <span class="icon-visible"></span>
        <span class="visually-hidden">Passwort einblenden</span>
      </button>
      <div class="invalid-feedback">Individuelle Fehlermeldung</div>
      <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
    </div>
  </div>
  <div class="form-group element-text">
    <div class="form-floating input-group">
      <input
        type="password"
        class="form-control"
        id="neues-passwort"
        name="neues-passwort"
        placeholder="Placeholder"
        required
        data-pw-criteria="true"
        data-pw-match="true"
      />
      <label for="neues-passwort">Neues Passwort</label>
      <button type="button" id="toggle-neues-passwort">
        <span class="icon-visible"></span>
        <span class="visually-hidden">Passwort einblenden</span>
      </button>
      <div class="invalid-feedback">Individuelle Fehlermeldung</div>
      <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
    </div>
    <ul class="" data-criteria-list="neues-passwort">
      <li data-criterion="length">Mindestens 12 Zeichen</li>
      <li data-criterion="case">Groß- und Kleinbuchstaben</li>
      <li data-criterion="number">Mindestens 1 Ziffer</li>
      <li data-criterion="special">Mindestens 1 Sonderzeichen</li>
    </ul>
  </div>
  <div class="form-group element-text">
    <div class="form-floating input-group">
      <input
        type="password"
        class="form-control"
        id="neues-passwort-wiederholen"
        name="neues-passwort-wiederholen"
        placeholder="Placeholder"
        required
        data-pw-match="true"
      />
      <label for="neues-passwort-wiederholen">Neues Passwort wiederholen</label>
      <button type="button" id="toggle-neues-passwort-wiederholen">
        <span class="icon-visible"></span>
        <span class="visually-hidden">Passwort einblenden</span>
      </button>
      <div class="invalid-feedback">Individuelle Fehlermeldung</div>
      <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
    </div>
  </div>
  <div class="button-group">
    <a class="btn btn-link" href="#"> Abbrechen </a>
    <button class="btn btn-primary" type="submit">Speichern</button>
  </div>
</form>