id: 22
pagetitle: Login
alias: login
published: 1
parent: 6
introtext: ''
richtext: 0
template: 5
createdby: 1
createdon: 1682939547
publishedon: 1682939520
publishedby: 1
context_key: justknit
uri: member/login/
properties: null
tvs: {  }

-----

[[!ClientLogin? &loginResourceId=`[[GetId? &alias=`rechnen`]]`]]
[[- loginResourceId = dahin wir nach erfolgreichem Login weitergeleitet]]
<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/login.png" alt="Login"></div>
        <!-- Register Form -->
        
        [[!+errors: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>[[+errors]]</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">[[!+isLoggedIn:is=`1`:then=`[[%justknit.logout_title? &namespace=`justknit` &topic=`register` ]]`:else=`[[%justknit.login_title? &namespace=`justknit` &topic=`register`]]`]] [[-Melde Dich an, <br>um mit JustKnit <br>fortzufahren.]]</h6>
            
        [[!+isLoggedIn:is=`1`:then=`
            <p class="text-center"><i class="bi bi-arrow-down text-primary  blurb-badge d-block mb-2"></i></p>
            <p class="mt-3 mb-1"><a class="btn btn-primary w-100" href="[[~[[*id]]? &service=`logout`]]" title="Logout">Logout</a></p>
                
        `:else=`
            <form class="" action="[[~[[*id]]]]" method="post" id="login">
                
                <div class="mb-3">
                    <input class="form-control" type="text" placeholder="[[%justknit.login_username?  &namespace=`justknit` &topic=`register` ]]" name="username">
                </div>
                <div class="mb-3 pw-switch">
                    <input id="password" class="form-control" type="password" placeholder="[[%justknit.login_password?  &namespace=`justknit` &topic=`register`]]" name="password">
                    <i class="bi bi-eye fs-4" id="togglePassword"></i>
                </div>
                <div id="rememberme-checkbox" class="mb-3">
                    <input type="checkbox" id="rememberme" name="rememberme" autocomplete="on" value="1">
                    <label for="rememberme">[[%justknit.login_rememberme?  &namespace=`justknit` &topic=`register`]]</label>
                </div>
                
                <input class="returnUrl" type="hidden" name="returnUrl" value="[[!+request_uri]]" />
                [[+login.recaptcha_html]]
                <input class="loginLoginValue" type="hidden" name="service" value="login" />
                <button class="btn btn-primary w-100" type="submit" name="Login" value="[[!+actionMsg]]" >[[-+actionMsg]]Einloggen</button>
            </form>
        `]]  
        </div>
[[!+isLoggedIn:is=`1`:then=``:else=`      
        <div class="login-meta-data text-center">
            <p class="mt-3 mb-1"><a class="forgot-password" href="[[~[[GetId? &alias=`passwort_zuruecksetzen`]]]]">[[%justknit.forgotPw_link_text?  &namespace=`justknit` &topic=`register`]][[-Passwort vergessen?]]</a></p>
        </div>    
`]]        
        <!-- Login Meta -->
        
[[-   box-arrow-right
        <div class="login-meta-data text-center">
            <p class="mt-3 mb-1"><a class="forgot-password" href="[[~15]]">Passwort vergessen?</a></p>
            
            <p>actionMsg: [[!+actionMsg]]</p>
            <ul>Active: [[!ActiveUsers]]</ul>
]] 
        </div>
    </div>
</div>
<script>
    const togglePassword = document.querySelector('#togglePassword');
    const password = document.querySelector('#password');
    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>