Register

100%
<div class="container error-message-wrapper" id="error-message-wrapper">
    <div class="row">
        <div class="col-sm-12">
        </div>
    </div>
</div>

<div class="container content__container register">
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="form__wrapper">
                <form method="post" action="register" id="register_form">
                    <h3 class="headline__text">Registrierung</h3>

                    <!-------------------------------------------->
                    <!------------------E-MAIL-------------------->
                    <!-------------------------------------------->
                    <label class="form__label">E-Mail-Adresse</label>
                    <input placeholder="E-Mail-Adresse" type="email" name="email" value="" id="field_email" class="form__input-field" required="">
                    <span class="email__message-error-text">
              Bitte geben Sie eine valide Email-Adresse an
          </span>

                    <!-------------------------------------------->
                    <!------------------PASSWORD------------------>
                    <!-------------------------------------------->
                    <label class="form__label">Passwort</label>
                    <i class="bi bi-eye-slash toggle_password_icon" id="togglePassword"></i>
                    <input placeholder="Passwort" type="password" name="password" id="field_password" class="toggle_password_field form__input-field" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required="">
                    <span class="password__message-error-text validation">
              Das Passwort muss folgende Kriterien erfüllen:
              <ul class="helper-text">
                  <li class="min_length">mindestens 8 Zeichen lang   und  maximal 100 Zeichen lang</li>
                  <li class="min_upper_case">mindestens 1 Großbuchstaben beinhalten</li>
                  <li class="min_custom_characters">mindestens 1 !  § $ % &amp; / ( ) = ? * _ : ; , . - # + @ € | Ä Ü Ö ä ö ü ß </li>
              </ul>
          </span>

                    <!-------------------------------------------->
                    <!-----------------ABO NUMBER----------------->
                    <!-------------------------------------------->
                    <div class="register-with-abo-wrapper">
                        <label class="form__label">Registrierung mit Abo-Vertragsnummer:</label>
                        <span class="disclaimer-text">Wenn Sie bereits ein Abo bei uns haben, geben Sie bitte noch Ihren Namen und Ihre Abovertrags-Nummer ein, sofern sie Ihnen vorliegt.</span>
                        <div class="field-line-wrapper">
                            <input placeholder="Vorname (optional)" type="text" name="abo-firstname" value="" id="field_abo_firstname" class="form__input-field">
                            <input placeholder="Nachname (optional)" type="text" name="abo-lastname" value="" id="field_abo_lastname" class="form__input-field">
                        </div>
                        <div class="field-line-wrapper">
                            <input placeholder="Abo-Vertragsnummer (optional)" type="text" name="abo-number" value="" id="field_abo_number" class="form__input-field">
                            <div class="abo_wrapper">
                                <a class="hd-pop-button" href="#abo-info"><i class="bi bi-info-circle"></i></a>
                                <div id="abo-info" class="hd-layer">
                                    <div class="hd-pop">
                                        <div class="content">
                                            <h3>Registrierung mit Abo-Vertragsnummer:</h3>
                                            <a class="close" href="#">&times;</a>
                                            <p>Wenn Sie bereits Kunde sind, geben Sie bitte Ihre Abo-Vertragsnummer ein. Diese finden Sie auf Ihrem Kontoauszug oder Rechnungen.</p><br>
                                            <p>Gerne können Sie diese bei unseren Mitarbeitern im Leserservice erfragen: 0800/1067200.</p><br>
                                            <p>Im Anschluss an die Registrierung können Sie dann sofort alle von Ihnen gebuchten digitalen Produkte nutzen (ePaper und digitale Abendausgabe) oder eine Anzeige aufgeben. Unser Vorteilsprogramm ABOextra steht
                                                Ihnen ebenfalls direkt zur Verfügung. Änderungen an Ihren persönlichen Daten sind sofort möglich.</p>
                                            <div class="content-image"><img src="https://www.hildesheimer-allgemeine.de/fileadmin/xpresso/hub/hub_register_abo.jpg"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-------------------------------------------->
                    <!-----------------Disclaimer----------------->
                    <!-------------------------------------------->
                    <span class="disclaimer_wrapper">
            <label class="checkbox__container">
                <div class="form__checkbox-text">Ich stimme den <a href="https://www.hildesheimer-allgemeine.de/agb.html">Allgemeinen Geschäftsbedingungen</a> und den <a href="https://www.hildesheimer-allgemeine.de/datenschutz.html">Datenschutzbestimmungen</a> zu</div>
                <input id="disclaimer_box" type="checkbox" name="disclaimer_check">
                <span class="checkmark"></span>
                    </label>
                    <span>Wenn Sie von uns in Zukunft keine weiteren Informationen per E-Mail erhalten möchten, können Sie jederzeit kostenfrei widersprechen. Senden Sie uns dafür einfach eine E-Mail an <a href="mailto:leserservice@hildesheimer-allgemeine.de">leserservice@hildesheimer-allgemeine.de</a>.</span>
                    </span>

                    <!-------------------------------------------->
                    <!-----------------CONSENTS------------------->
                    <!-------------------------------------------->
                    <div class="register__text"></div>
                    <div class="register__text"></div>

                    <!-------------------------------------------->
                    <!--------------SUBMIT BUTTON----------------->
                    <!-------------------------------------------->
                    <div class="btn btn__wrapper">
                        <div id="check_popup"></div>
                        <div id="clickable_button"></div>
                        <button type="submit" class="btn__submit" id="input_submit" disabled="" title="We ask for your age only for statistical purposes.">Registrieren</button>
                    </div>

                    <input type="hidden" name="client_id" value="gerstenberg-hiaz-lightbox"><input type="hidden" name="response_type" value="code"><input type="hidden" name="redirect_uri" value="https://sso-staging.hildesheimer-allgemeine.de/v4/sales/funnel/oauth/gerstenberg-hiaz-lightbox">
                    <input
                        type="hidden" name="state" value="ZDc2NjcxNzYtY2UwMS00ZmRmLWFjOGYtN2I5MzY4YjFiMDA1"><input type="hidden" name="code_challenge" value="dwrC3dwfyzZR3Uk31EpFPs8Mgq4z7yD-wtKq1eG9Sxc"><input type="hidden" name="code_challenge_method" value="S256">
                </form>
            </div>
        </div>
        <div class="col-md-6 col-sm-12 overlay">
            <div class="overlay__wrapper">
                <h4 class="overlay__heading">Schon registriert?</h4>
                <button class="btn btn__jumpTo" id="signIn"><a href="/v4/hub/sso/login?client_id=gerstenberg-hiaz-lightbox&amp;response_type=code&amp;redirect_uri=https%3A%2F%2Fsso-staging.hildesheimer-allgemeine.de%2Fv4%2Fsales%2Ffunnel%2Foauth%2Fgerstenberg-hiaz-lightbox&amp;state=ZDc2NjcxNzYtY2UwMS00ZmRmLWFjOGYtN2I5MzY4YjFiMDA1&amp;code_challenge=dwrC3dwfyzZR3Uk31EpFPs8Mgq4z7yD-wtKq1eG9Sxc&amp;code_challenge_method=S256">Jetzt einloggen!</a></button>
            </div>
        </div>
    </div>
</div>

<div class="mt-3 mb-3">
    <div class="container">
        <div class="row">
            <a href="/v4/hub/oauth/cancel?client_id=gerstenberg-hiaz-portal&amp;response_type=code&amp;redirect_uri=https%3A%2F%2Ffeature-xpresso-sso-ppzuqei-msbl2jexeq3ky.de-2.platformsh.site%2Fconnect%2Fxpresso%2Fcheck&amp;state=L2xlc2VyLXNlcnZpY2UvbWVpbi1rb250by5odG1sZTM0ODA5OGZlYmVkODMzN2JkZDZiOTZmYTU3MzcxZTMwMzg4YTM3Nw%3D%3D&amp;scope=openid+read%3Aentitlements+profile+email&amp;code_challenge=8i2uYTeh8PeUWckbdG_IR3_ZdZ1p5dbbyCTTO5Syql0&amp;code_challenge_method=S256&amp;origin=%2Fv4%2Fhub%2Fsso%2Flogin"><button class="btn btn__cancel">Abbrechen</button></a>
        </div>
    </div>
</div>

<script type="text/javascript">
    RegExp.quote = function(str) {
        return (str + '').replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&");
    };
    $('.validation').hide();
    let $password = $("#field_password");
    let $email = $("#field_email");
    let $disclaimer = $("#disclaimer_box");
    let $register = $('#input_submit');
    let $validator = $('#clickable_button');
    let $popup = $('#check_popup');

    function isPasswordValid() {
        return (checkMinLength() && checkMaxLength() && checkMinNumber() && checkMinUpperCase() && checkMinLowerCase() && checkMinCustomCharacters());
    }

    function checkMinLength() {
        return ($password.val().length >= 8);
    }

    function checkMaxLength() {
        return ($password.val().length <= 100);
    }

    function checkMinNumber() {
        return true;
    }

    function checkMinUpperCase() {
        let upper = ($password.val().match(/[A-Z]/g) || []);
        return (upper.length >= 1);
    }

    function checkMinLowerCase() {
        return true;
    }

    function checkMinCustomCharacters() {
        let regex = new RegExp('[' + RegExp.quote(htmlDecode(" ,!,&quot;,#,$,%,&amp;,',(,),*,+,,,-,.,/,:,;,&lt;,=,&gt;,?,@,[,\,],^,_,`,{,|,},~,€,§,°]")) + ']', 'g');
        let custom = ($password.val().match(regex) || []);
        return (custom.length >= 1);
    }

    function isEmailValid() {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test($email.val());
    }

    function isCheckedAGB() {
        const disclaimer = document.getElementById('disclaimer_box');
        return disclaimer.checked;
    }
    <!--Can submit -->
    function canSubmit() {
        return isPasswordValid() && isEmailValid() && isCheckedAGB();
    }

    function passwordEvent() {
        if (isPasswordValid()) {
            $password.next().hide();
        } else {
            $password.next().show();
        }
    }

    function emailEvent() {
        if (isEmailValid()) {
            $email.next().hide();
        } else {
            $email.next().show();
        }
    }

    function checkFields() {
        if (validateFields() !== "") {
            $validator.addClass('block');
            $popup.html(validateFields());
        } else {
            $validator.removeClass('block');
        }
    }

    function validateFields() {
        var message = ""
        if (!isEmailValid()) {
            message += "&check; E-Mail ist noch nicht korrekt ausgefüllt<br>";
        }
        if (!isPasswordValid()) {
            message += "&check; Passwort ist noch nicht korrekt ausgefüllt<br>";
        }
        if (!isCheckedAGB()) {
            message += "&check; Die AGBs wurden noch nicht bestätigt<br>";
        }
        return message;
    }

    function htmlDecode(input) {
        let doc = new DOMParser().parseFromString(input, "text/html");
        return doc.documentElement.textContent;
    }
    <!--Enable or disable the submit button-->
    function enableSubmitEvent() {
        checkFields();
        $("#input_submit").prop("disabled", !canSubmit());
    }
    <!--Run passwords length check-->
    $password.focus(passwordEvent).keyup(passwordEvent).keyup(enableSubmitEvent);
    $email.focus(emailEvent).keyup(emailEvent).keyup(enableSubmitEvent)
    $disclaimer.click(enableSubmitEvent);
    $validator.hover(function() {
        if (!canSubmit()) {
            $popup.addClass('show');
        }
    }, function() {
        $popup.removeClass('show');
    });
    $(document).ready(function() {
        checkFields();
    });
    $(document).change(function() {
        checkFields();
    });
    $validator.click(checkFields);
    <!--Run submit button function code-->
    enableSubmitEvent();
</script>
<div class="container error-message-wrapper" id="error-message-wrapper">
  <div class="row">
    <div class="col-sm-12">
    </div>
  </div>
</div>

<div class="container content__container register">
  <div class="row">
    <div class="col-md-6 col-sm-12">
      <div class="form__wrapper">
        <form method="post" action="register" id="register_form">
          <h3 class="headline__text">Registrierung</h3>

          <!-------------------------------------------->
          <!------------------E-MAIL-------------------->
          <!-------------------------------------------->
          <label class="form__label">E-Mail-Adresse</label>
          <input placeholder="E-Mail-Adresse" type="email" name="email" value="" id="field_email" class="form__input-field" required="">
          <span class="email__message-error-text">
              Bitte geben Sie eine valide Email-Adresse an
          </span>


          <!-------------------------------------------->
          <!------------------PASSWORD------------------>
          <!-------------------------------------------->
          <label class="form__label">Passwort</label>
          <i class="bi bi-eye-slash toggle_password_icon" id="togglePassword"></i>
          <input placeholder="Passwort" type="password" name="password" id="field_password" class="toggle_password_field form__input-field" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required="">
          <span class="password__message-error-text validation">
              Das Passwort muss folgende Kriterien erfüllen:
              <ul class="helper-text">
                  <li class="min_length">mindestens 8 Zeichen lang   und  maximal 100 Zeichen lang</li>
                  <li class="min_upper_case">mindestens 1 Großbuchstaben beinhalten</li>
                  <li class="min_custom_characters">mindestens 1 !  § $ % &amp; / ( ) = ? * _ : ; , . - # + @ € | Ä Ü Ö ä ö ü ß </li>
              </ul>
          </span>

          <!-------------------------------------------->
          <!-----------------ABO NUMBER----------------->
          <!-------------------------------------------->
          <div class="register-with-abo-wrapper">
            <label class="form__label">Registrierung mit Abo-Vertragsnummer:</label>
            <span class="disclaimer-text">Wenn Sie bereits ein Abo bei uns haben, geben Sie bitte noch Ihren Namen und Ihre Abovertrags-Nummer ein, sofern sie Ihnen vorliegt.</span>
            <div class="field-line-wrapper">
              <input placeholder="Vorname (optional)" type="text" name="abo-firstname" value="" id="field_abo_firstname" class="form__input-field">
              <input placeholder="Nachname (optional)" type="text" name="abo-lastname" value="" id="field_abo_lastname" class="form__input-field">
            </div>
            <div class="field-line-wrapper">
              <input placeholder="Abo-Vertragsnummer (optional)" type="text" name="abo-number" value="" id="field_abo_number" class="form__input-field">
              <div class="abo_wrapper">
                <a class="hd-pop-button" href="#abo-info"><i class="bi bi-info-circle"></i></a>
                <div id="abo-info" class="hd-layer">
                  <div class="hd-pop">
                    <div class="content">
                      <h3>Registrierung mit Abo-Vertragsnummer:</h3>
                      <a class="close" href="#">&times;</a>
                      <p>Wenn Sie bereits Kunde sind, geben Sie bitte Ihre Abo-Vertragsnummer ein. Diese finden Sie auf Ihrem Kontoauszug oder Rechnungen.</p><br>
                      <p>Gerne können Sie diese bei unseren Mitarbeitern im Leserservice erfragen: 0800/1067200.</p><br>
                      <p>Im Anschluss an die Registrierung können Sie dann sofort alle von Ihnen gebuchten digitalen Produkte nutzen
                        (ePaper und digitale Abendausgabe) oder eine Anzeige aufgeben. Unser Vorteilsprogramm ABOextra steht Ihnen ebenfalls direkt zur
                        Verfügung. Änderungen an Ihren persönlichen Daten sind sofort möglich.</p>
                      <div class="content-image"><img src="https://www.hildesheimer-allgemeine.de/fileadmin/xpresso/hub/hub_register_abo.jpg"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-------------------------------------------->
          <!-----------------Disclaimer----------------->
          <!-------------------------------------------->
          <span class="disclaimer_wrapper">
            <label class="checkbox__container">
                <div class="form__checkbox-text">Ich stimme den <a href="https://www.hildesheimer-allgemeine.de/agb.html">Allgemeinen Geschäftsbedingungen</a> und den <a href="https://www.hildesheimer-allgemeine.de/datenschutz.html">Datenschutzbestimmungen</a> zu</div>
                <input id="disclaimer_box" type="checkbox" name="disclaimer_check">
                <span class="checkmark"></span>
            </label>
            <span>Wenn Sie von uns in Zukunft keine weiteren Informationen per E-Mail erhalten möchten, können Sie jederzeit kostenfrei widersprechen. Senden Sie uns dafür einfach eine E-Mail an <a href="mailto:leserservice@hildesheimer-allgemeine.de">leserservice@hildesheimer-allgemeine.de</a>.</span>
          </span>

          <!-------------------------------------------->
          <!-----------------CONSENTS------------------->
          <!-------------------------------------------->
          <div class="register__text"></div>
          <div class="register__text"></div>

          <!-------------------------------------------->
          <!--------------SUBMIT BUTTON----------------->
          <!-------------------------------------------->
          <div class="btn btn__wrapper">
            <div id="check_popup"></div>
            <div id="clickable_button"></div>
            <button type="submit" class="btn__submit" id="input_submit" disabled="" title="We ask for your age only for statistical purposes.">Registrieren</button>
          </div>

          <input type="hidden" name="client_id" value="gerstenberg-hiaz-lightbox"><input type="hidden" name="response_type" value="code"><input type="hidden" name="redirect_uri" value="https://sso-staging.hildesheimer-allgemeine.de/v4/sales/funnel/oauth/gerstenberg-hiaz-lightbox"><input type="hidden" name="state" value="ZDc2NjcxNzYtY2UwMS00ZmRmLWFjOGYtN2I5MzY4YjFiMDA1"><input type="hidden" name="code_challenge" value="dwrC3dwfyzZR3Uk31EpFPs8Mgq4z7yD-wtKq1eG9Sxc"><input type="hidden" name="code_challenge_method" value="S256">
        </form>
      </div>
    </div>
    <div class="col-md-6 col-sm-12 overlay">
      <div class="overlay__wrapper">
        <h4 class="overlay__heading">Schon registriert?</h4>
        <button class="btn btn__jumpTo" id="signIn"><a href="/v4/hub/sso/login?client_id=gerstenberg-hiaz-lightbox&amp;response_type=code&amp;redirect_uri=https%3A%2F%2Fsso-staging.hildesheimer-allgemeine.de%2Fv4%2Fsales%2Ffunnel%2Foauth%2Fgerstenberg-hiaz-lightbox&amp;state=ZDc2NjcxNzYtY2UwMS00ZmRmLWFjOGYtN2I5MzY4YjFiMDA1&amp;code_challenge=dwrC3dwfyzZR3Uk31EpFPs8Mgq4z7yD-wtKq1eG9Sxc&amp;code_challenge_method=S256">Jetzt einloggen!</a></button>
      </div>
    </div>
  </div>
</div>

<div class="mt-3 mb-3">
  <div class="container">
    <div class="row">
      <a href="/v4/hub/oauth/cancel?client_id=gerstenberg-hiaz-portal&amp;response_type=code&amp;redirect_uri=https%3A%2F%2Ffeature-xpresso-sso-ppzuqei-msbl2jexeq3ky.de-2.platformsh.site%2Fconnect%2Fxpresso%2Fcheck&amp;state=L2xlc2VyLXNlcnZpY2UvbWVpbi1rb250by5odG1sZTM0ODA5OGZlYmVkODMzN2JkZDZiOTZmYTU3MzcxZTMwMzg4YTM3Nw%3D%3D&amp;scope=openid+read%3Aentitlements+profile+email&amp;code_challenge=8i2uYTeh8PeUWckbdG_IR3_ZdZ1p5dbbyCTTO5Syql0&amp;code_challenge_method=S256&amp;origin=%2Fv4%2Fhub%2Fsso%2Flogin"><button class="btn btn__cancel">Abbrechen</button></a>
    </div>
  </div>
</div>

<script type="text/javascript">

  RegExp.quote = function(str) {
    return (str+'').replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&");
  };

  $('.validation').hide();

  let $password = $("#field_password");
  let $email = $("#field_email");
  let $disclaimer = $("#disclaimer_box");
  let $register =  $('#input_submit');
  let $validator =  $('#clickable_button');
  let $popup = $('#check_popup');

  function isPasswordValid() {
    return (checkMinLength() && checkMaxLength() && checkMinNumber() && checkMinUpperCase() && checkMinLowerCase() && checkMinCustomCharacters());
  }

  function checkMinLength() {
    return ($password.val().length >= 8);
  }

  function checkMaxLength() {
    return ($password.val().length <= 100);
  }

  function checkMinNumber() {
    return true;
  }

  function checkMinUpperCase() {
    let upper = ($password.val().match(/[A-Z]/g) || []);
    return (upper.length >= 1);
  }

  function checkMinLowerCase() {
    return true;
  }

  function checkMinCustomCharacters() {
    let regex = new RegExp('[' + RegExp.quote(htmlDecode(" ,!,&quot;,#,$,%,&amp;,',(,),*,+,,,-,.,/,:,;,&lt;,=,&gt;,?,@,[,\,],^,_,`,{,|,},~,€,§,°]")) + ']', 'g');
    let custom = ($password.val().match(regex) || []);
    return (custom.length >= 1);
  }

  function isEmailValid() {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test($email.val());
  }

  function isCheckedAGB() {
    const disclaimer = document.getElementById('disclaimer_box');
    return disclaimer.checked;
  }

  <!--Can submit -->
  function canSubmit() {
    return isPasswordValid() && isEmailValid() && isCheckedAGB();
  }

  function passwordEvent() {
    if (isPasswordValid()) {
      $password.next().hide();
    } else {
      $password.next().show();
    }
  }

  function emailEvent() {
    if (isEmailValid()) {
      $email.next().hide();
    } else {
      $email.next().show();
    }
  }

  function checkFields() {
    if(validateFields() !== ""){
      $validator.addClass('block');
      $popup.html(validateFields());
    } else {
      $validator.removeClass('block');
    }
  }

  function validateFields(){
    var message = ""
    if(!isEmailValid()) {
      message += "&check; E-Mail ist noch nicht korrekt ausgefüllt<br>";
    }
    if (!isPasswordValid()) {
      message += "&check; Passwort ist noch nicht korrekt ausgefüllt<br>";
    }
    if (!isCheckedAGB()) {
      message += "&check; Die AGBs wurden noch nicht bestätigt<br>";
    }
    return message;
  }

  function htmlDecode(input) {
    let doc = new DOMParser().parseFromString(input, "text/html");
    return doc.documentElement.textContent;
  }

  <!--Enable or disable the submit button-->
  function enableSubmitEvent() {
    checkFields();
    $("#input_submit").prop("disabled", !canSubmit());
  }

  <!--Run passwords length check-->
  $password.focus(passwordEvent).keyup(passwordEvent).keyup(enableSubmitEvent);
  $email.focus(emailEvent).keyup(emailEvent).keyup(enableSubmitEvent)
  $disclaimer.click(enableSubmitEvent);

  $validator.hover(function(){
    if(!canSubmit()) {
      $popup.addClass('show');
    }
  }, function(){
      $popup.removeClass('show');
  });

  $(document).ready(function() {
    checkFields();
  });

  $(document).change(function() {
    checkFields();
  });

  $validator.click(checkFields);

  <!--Run submit button function code-->
  enableSubmitEvent();
</script>
/* No context defined for this component. */
  • Content:
    ${> header}$
    <div class="container error-message-wrapper" id="error-message-wrapper">
        <div class="row">
            <div class="col-sm-12">
                ${#errors.property_messages.hubuserinfo}$
                <div id="error_message" class="error">
                    ${message}$
                </div>
                ${/errors.property_messages.hubuserinfo}$
            </div>
        </div>
    </div>
    <div class="container content__container">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="form__wrapper">
                    <form method="${forms.register.method}$" action="${forms.register.action}$" id="register_form">
                        <h3 class="headline__text">${texts.hub-register-title}$</h3>
    
                        <!-------------------------------------------->
                        <!------------------E-MAIL-------------------->
                        <!-------------------------------------------->
                        <label class="form__label">${texts.hub-register-email}$</label>
                        <input placeholder="${texts.hub-register-email}$"
                               type="${forms.register.fields.email.type}$"
                               name="${forms.register.fields.email.name}$"
                               value="${forms.register.fields.email.value}$"
                               id="field_email"
                               class="form__input-field"
                               ${forms.register.fields.email.required}$>
                        <span class="email__message-error-text">
                            ${texts.hub-register-password-error-message}$
                        </span>
                        ${#errors.property_messages.credentialsusername}$
                        <div>
                            <span id="username-error-message" class="error">${message}$</span>
                        </div>
                        ${/errors.property_messages.credentialsusername}$
                        ${#errors.property_messages.credentialsemail}$
                        <div>
                            <span id="username-error-message" class="error">${message}$</span>
                        </div>
                        ${/errors.property_messages.credentialsemail}$
    
    
                        <!-------------------------------------------->
                        <!------------------PASSWORD------------------>
                        <!-------------------------------------------->
                        <label class="form__label">${texts.hub-register-password}$</label>
                        <i class="bi bi-eye-slash toggle_password_icon" id="togglePassword"></i>
                        <input placeholder="${texts.hub-register-password}$"
                               type="${forms.register.fields.password.type}$"
                               name="${forms.register.fields.password.name}$"
                               id="field_password"
                               class="toggle_password_field form__input-field"
                               ${forms.register.fields.password.required}$>
                        <span class="password__message-error-text">
                            ${texts.hub-password-rules-intro}$
                            ${#data.password_rules}$
                            <ul class="helper-text">
                                ${#min_length}$<li class="min_length">${texts.hub-password-rules-min}$ ${min_length}$ ${texts.hub-password-rules-min-length}$${/min_length}$ ${#max_length}$ ${#min_length}$ ${texts.hub-password-rules-and}$ ${/min_length}$ ${texts.hub-password-rules-max}$ ${max_length}$ ${texts.hub-password-rules-min-length}$</li>${/max_length}$
                                ${#min_upper_case}$<li class="min_upper_case">${texts.hub-password-rules-min}$ ${min_upper_case}$ ${texts.hub-password-rules-min-upper-case}$</li>${/min_upper_case}$
                                ${#min_lower_case}$<li class="min_lower_case">${texts.hub-password-rules-min}$ ${min_lower_case}$ ${texts.hub-password-rules-min-lower-case}$</li>${/min_lower_case}$
                                ${#min_number}$<li class="min_number">${texts.hub-password-rules-min}$ ${min_number}$ ${texts.hub-password-rules-min-number}$</li>${/min_number}$
                                ${#min_custom_characters}$<li class="min_custom_characters">${texts.hub-password-rules-min}$ ${min_custom_characters}$ ${texts.hub-password-rules-custom-characters}$</li>${/min_custom_characters}$
                            </ul>
                            ${/data.password_rules}$
                        </span>
                        ${#errors.property_messages.credentialspassword}$
                        <div>
                            <span id="password-error-message" class="error">${message}$</span>
                        </div>
                        ${/errors.property_messages.credentialspassword}$
    
                        ${#forms.register.fields.legalform.activated}$
                        <!-------------------------------------------->
                        <!------------------Legalform----------------->
                        <!-------------------------------------------->
                        <label class="form__label">${texts.hub-register-legalform}$</label>
                        <select name="${forms.register.fields.legalform.name}$">
                        ${#forms.register.fields.legalform.items}$
                            <option value="${value}$" ${selected}$>${label}$</option>
                        ${/forms.register.fields.legalform.items}$
                        </select>
    
                        ${#errors.property_messages.legalform}$
                        <div>
                            <span id="legelform-error-message" class="error">${message}$</span>
                        </div>
                        ${/errors.property_messages.legalform}$
                        ${/forms.register.fields.legalform.activated}$
    
                        ${#forms.register.fields.company.activated}$
                        <!-------------------------------------------->
                        <!------------------Company name-------------->
                        <!-------------------------------------------->
                        <label class="form__label">${texts.hub-register-company}$</label>
                        <input placeholder="${texts.hub-register-company}$"
                               type="${forms.register.fields.company.type}$"
                               name="${forms.register.fields.company.name}$"
                               value="${forms.register.fields.company.value}$"
                               id="field_forename"
                               class="form__input-field"
                               ${forms.register.fields.company.required}$>
                        ${#errors.property_messages.company}$
                        <div>
                            <span id="company-error-message" class="error">${message}$</span>
                        </div>
                        ${/errors.property_messages.company}$
                        ${/forms.register.fields.company.activated}$
    
                        ${#forms.register.fields.salutation.activated}$
                        <!-------------------------------------------->
                        <!------------------Salutation---------------->
                        <!-------------------------------------------->
                        <label class="form__label">${texts.hub-register-salutation}$</label>
                        ${#forms.register.fields.salutation.items}$
                        <input type="radio" name="${forms.register.fields.salutation.name}$" value="${value}$"
                            ${checked}$> ${label}$
                        ${/forms.register.fields.salutation.items}$
    
                        ${#errors.property_messages.salutation}$
                        <div>
                            <span id="salutation-error-message" class="error">${message}$</span>
                        </div>
                        ${/errors.property_messages.salutation}$
                        ${/forms.register.fields.salutation.activated}$
    
                        ${#forms.register.fields.forename.activated}$
                        <!-------------------------------------------->
                        <!------------------Forename------------------>
                        <!-------------------------------------------->
                        <label class="form__label">${texts.hub-register-forename}$</label>
                        <input placeholder="${texts.hub-register-forename}$"
                               type="${forms.register.fields.forename.type}$"
                               name="${forms.register.fields.forename.name}$"
                               value="${forms.register.fields.forename.value}$"
                               id="field_forename"
                               class="form__input-field"
                               ${forms.register.fields.forename.required}$>
                        ${#errors.property_messages.forename}$
                        <div>
                            <span id="forename-error-message" class="error">${message}$</span>
                        </div>
                        ${/errors.property_messages.forename}$
                        ${/forms.register.fields.forename.activated}$
    
                        ${#forms.register.fields.surname.activated}$
                        <!-------------------------------------------->
                        <!-------------------Surname------------------>
                        <!-------------------------------------------->
                        <label class="form__label">${texts.hub-register-surname}$</label>
                        <input placeholder="${texts.hub-register-surname}$"
                               type="${forms.register.fields.surname.type}$"
                               name="${forms.register.fields.surname.name}$"
                               value="${forms.register.fields.surname.value}$"
                               id="field_surname"
                               class="form__input-field"
                               ${forms.register.fields.surname.required}$>
                        ${#errors.property_messages.surname}$
                        <div>
                            <span id="surname-error-message" class="error">${message}$</span>
                        </div>
                        ${/errors.property_messages.surname}$
                        ${/forms.register.fields.surname.activated}$
    
                        <!-------------------------------------------->
                        <!-----------------ABO NUMBER----------------->
                        <!-------------------------------------------->
                        <div class="register-with-abo-wrapper">
                          <label class="form__label">Registrierung mit Abo-Vertragsnummer:</label>
                          <span class="disclaimer-text">Wenn Sie bereits ein Abo bei uns haben, geben Sie bitte noch Ihren Namen und Ihre Abo-Vertragsnummer ein, sofern sie Ihnen vorliegt.</span>
                            <div class="field-line-wrapper">
                              <input placeholder="Vorname (optional)" type="text" name="abo-firstname" value="" id="field_abo_firstname" class="form__input-field">
                              <input placeholder="Nachname (optional)" type="text" name="abo-lastname" value="" id="field_abo_lastname" class="form__input-field">
                            </div>
                            <div class="field-line-wrapper">
                              <input placeholder="Abo-Vertragsnummer (optional)" type="text" name="${forms.register.fields.backends_viva_subscription_id.name}$" value="" id="field_abo_number" class="form__input-field" value="${forms.register.fields.backends_viva_subscription_id.value}$">
                              <div class="abo_wrapper">
                                <a class="hd-pop-button" href="#abo-info"><i class="bi bi-info-circle"></i></a>
                                <div id="abo-info" class="hd-layer">
                                  <div class="hd-pop">
                                    <div class="content">
                                      <h3>Registrierung mit Abo-Vertragsnummer:</h3>
                                      <a class="close" href="#">&times;</a>
                                      <p>Wenn Sie bereits Kunde sind, geben Sie bitte Ihre Abo-Vertragsnummer ein. Diese finden Sie auf Ihrem Kontoauszug oder Rechnungen.</p><br>
                                      <p>Gerne können Sie diese bei unseren Mitarbeitern im Leserservice erfragen: 0800/1067200.</p><br>
                                      <p>Im Anschluss an die Registrierung können Sie dann sofort alle von Ihnen gebuchten digitalen Produkte nutzen
                                        (ePaper und digitale Abendausgabe) oder eine Anzeige aufgeben. Unser Vorteilsprogramm ABOextra steht Ihnen ebenfalls direkt zur
                                        Verfügung. Änderungen an Ihren persönlichen Daten sind sofort möglich.</p>
                                      <div class="content-image"><img src="https://www.hildesheimer-allgemeine.de/fileadmin/xpresso/hub/hub_register_abo.jpg"></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                        </div>
    
                        <!-------------------------------------------->
                        <!-----------------DISCLAIMER----------------->
                        <!-------------------------------------------->
                        <span class="disclaimer_wrapper">
                        <label class="checkbox__container">
                            <div class="form__checkbox-text">Ich stimme den <a href="https://www.hildesheimer-allgemeine.de/agb.html">Allgemeinen Geschäftsbedingungen</a> und den <a href="https://www.hildesheimer-allgemeine.de/datenschutz.html">Datenschutzbestimmungen</a> zu</div>
                            <input id="disclaimer_box" type="checkbox" name="${forms.register.fields.consents.name}$" value="xpresso_registration_terms">
                            <span class="checkmark"></span>
                        </label>
                        <span>Wenn Sie von uns in Zukunft keine weiteren Informationen per E-Mail erhalten möchten, können Sie jederzeit kostenfrei widersprechen. Senden Sie uns dafür einfach eine E-Mail an <a href="mailto:leserservice@hildesheimer-allgemeine.de">leserservice@hildesheimer-allgemeine.de</a>.</span>
                      </span>
    
                        <!-------------------------------------------->
                        <!--------------SUBMIT BUTTON----------------->
                        <!-------------------------------------------->
                      <div class="btn btn__wrapper">
                        <div id="check_popup"></div>
                        <div id="clickable_button"></div>
                        <button type="submit" class="btn__submit" id="input_submit" disabled="" title="We ask for your age only for statistical purposes.">${texts.hub-register-submit-register}$</button>
                      </div>
    
                        ${{forms.register.parameters}}$
                    </form>
                </div>
            </div>
            <div class="col-md-6 col-sm-12 overlay">
                <div class="overlay__wrapper">
                    <h4 class="overlay__heading">${texts.hub-register-already-registered-text}$</h4>
                    <button class="btn btn__jumpTo" id="signIn"><a href="${links.hub.login}$">${texts.hub-register-link-login-text}$</a></button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="mt-3 mb-3">
        <div class="container">
            <div class="row">
                <a href="${links.hub.cancel}$"><button class="btn btn__cancel">${texts.hub-register-cancel}$</button></a>
            </div>
        </div>
    </div>
    
    ${> registerCheckInput}$
    
    ${> footer}$
    
  • URL: /components/raw/xpresso-register/register.mustache
  • Filesystem Path: src/patterns/50-external/Xpresso/Hub/xpresso-register/register.mustache
  • Size: 15.6 KB
  • Handle: @xpresso-register
  • Preview:
  • Filesystem Path: src/patterns/50-external/Xpresso/Hub/xpresso-register/xpresso-register.twig

There are no notes for this item.