id: 27
pagetitle: 'Passwort ändern'
alias: passwort_aendern
published: 1
parent: 6
introtext: ''
richtext: 0
template: 5
menuindex: 6
createdby: 1
createdon: 1683700611
publishedon: 1683700560
publishedby: 1
context_key: justknit
uri: member/passwort_aendern/
properties: null
tvs: {  }

-----

<!-- Login Wrapper Area -->
[[!ClientChangePassword]]
<div class="login-wrapper d-flex align-items-center justify-content-center">
    <div class="custom-container">
        <div class="text-center px-4"><img class="login-intro-img w-100" src="assets/components/justknit/img/bg/changepw.png" alt="Change Password"></div>
        <!-- Register Form -->
        [[!+justknit.successMessage:is=``:then=``:else=`
    <div class="alert custom-alert-3 alert-success alert-dismissible fade show m-3" role="alert">
        <i class="bi bi-check-circle fs-xxlarge"></i>
        <div class="alert-text"><h5>Erfolgreich gesendet!</h5>[[!+justknit.successMessage]]</div>
        <button class="btn btn-close position-relative p-1 ms-auto" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
            `]]
            [[!+justknit.error_message:is=``:then=``:else=`
    <div class="alert custom-alert-3 alert-danger alert-dismissible fade show m-3" role="alert">
        <i class="bi bi-exclamation-triangle-fill fs-xxlarge"></i>
        <div class="alert-text"><h5>Da stimmt was nicht!</h5>[[!+justknit.error_message]]</div>
        <button class="btn btn-close position-relative p-1 ms-auto" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
            `]]
        <div class="mt-4">
            <h6 class="mb-3 text-center">Passwort ändern</h6>
            <form class="" action="[[~[[*id]]]]" method="post">
                <input type="hidden" name="nospam" value="" />
                <div class="form-group text-start mb-3 pw-switch">
                    <input class="form-control [[!+justknit.error.password_old:is=``:then=``:else=`is-invalid`]]" type="password" name="password_old" id="password_old" value="[[+password_old]]"  placeholder="Altes Passwort" aria-describedby="password_old_valid" />
                    <i class="bi bi-eye fs-4" id="togglePassword_pwold"></i>
                    <div id="password_old_valid" class="invalid-feedback">[[!+justknit.error.password_old]]</div>
                </div>
                <div class="form-group text-start mb-3 pw-switch">
                    <input class="form-control input-psswd [[!+justknit.error.password_new:is=``:then=``:else=`is-invalid`]]" type="password" name="password_new" id="password_new" value="[[+password_new]]"  placeholder="Neues Passwort" aria-describedby="password_new_valid" />
                    <i class="bi bi-eye fs-4" id="togglePassword_pwnew"></i>
                    <div id="password_new_valid" class="invalid-feedback">[[!+justknit.error.password_new]]</div>
                </div>
                <div class="form-group text-start mb-3 pw-switch">
                    <input class="form-control [[!+justknit.error.password_new_confirm:is=``:then=``:else=`is-invalid`]]" type="password" name="password_new_confirm" id="password_new_confirm" value="[[+password_new_confirm]]"  placeholder="Wiederhole das neue Passwort" aria-describedby="password_new_confirm_valid" />
                    <i class="bi bi-eye fs-4" id="togglePassword_pwconfirm"></i>
                    <div id="password_new_confirm_valid" class="invalid-feedback">[[!+justknit.error.password_new_confirm]]</div>
                </div>
                <input type="submit" class="btn btn-primary w-100" type="submit" name="change-password" value="Passwort aktualisieren" >
            </form>
        </div>
    </div>
</div>
<!-- END Login Wrapper Area -->

<script>
    const tPW = ['togglePassword_pwold', 'togglePassword_pwnew','togglePassword_pwconfirm'];
    const pw = ['password_old', 'password_new', 'password_new_confirm'];
//    const togglePassword = document.querySelector('#togglePassword');
//    const password = document.querySelector('#password');
for (let i = 0; i < tPW.length; ++i) {
    const toggleField = document.querySelector('#' + tPW[i]);
    const password = document.querySelector('#' + pw[i]);
    toggleField.addEventListener('click', () => {
        // Toggle the type attribute using
        // getAttribure() method
        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';   
        password.setAttribute('type', type);
        toggleField.classList.toggle('bi-eye-slash');
        toggleField.classList.toggle('bi-eye');        
    });
    
}
/*
    togglePassword.addEventListener('click', () => {
        // Toggle the type attribute using
        // getAttribure() method
        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
        password.setAttribute('type', type);
        // Toggle the eye and bi-eye icon
        togglePassword.classList.toggle('bi-eye-slash');
        togglePassword.classList.toggle('bi-eye');
    });
*/    
</script>