alfresco-ng2-components/demo-shell-ng2/app/components/login/login-demo.component.html

<!--BPM, ECN AND CSRF TOGGLE-->

<div class="settings">
    <p class="toggle">
        <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
            <input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
                   (click)="toggleECM()">
            <span class="mdl-switch__label">Content Services</span>
        </label>
    </p>
    <p class="toggle">
        <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
            <input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
                   (click)="toggleBPM()">
            <span class="mdl-switch__label">Process Services</span>
        </label>
    </p>
    <p class="toggle">
        <label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
            <input type="checkbox" id="switch3" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
            <span class="mdl-switch__label">CSRF</span>
        </label>
    </p>
    <p class="toggle">
        <label for="switch4" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
            <input type="checkbox" id="switch4" class="mdl-switch__input" [checked]="showFooter" (click)="showFooter = !showFooter">
            <span class="mdl-switch__label">Login footer</span>
        </label>
    </p>
</div>

<!--SETTING BUTTON-->
<a class="mdl-navigation__link setting-button" data-automation-id="settings" href="" routerLink="/settings">
    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
        <i class="material-icons">settings</i>
    </button>
</a>

<alfresco-login #alfrescologin
                [providers]="providers"
                [fieldsValidation]="customValidation"
                [disableCsrf]="disableCsrf"
                [showLoginActions]="showFooter"
                [showRememberMe]="showFooter"
                (onSuccess)="onLogin($event)"
                (onError)="onError($event)">
    <div class="mobile-settings">
        <p>
            <label for="switch1-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
                <input type="checkbox" id="switch1-mobile" [checked]="isECM" class="mdl-switch__input"
                       (click)="toggleECM()">
                <span class="mdl-switch__label">Content Services</span>
            </label>
        </p>
        <p>
            <label for="switch2-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
                <input type="checkbox" id="switch2-mobile" [checked]="isBPM" class="mdl-switch__input"
                       (click)="toggleBPM()">
                <span class="mdl-switch__label">Process Services</span>
            </label>
        </p>
        <p>
            <label for="switch3-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
                <input type="checkbox" id="switch3-mobile" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
                <span class="mdl-switch__label">CSRF</span>
            </label>
        </p>
        <p>
            <label for="switch4-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
                <input type="checkbox" id="switch4-mobile" class="mdl-switch__input" [checked]="showFooter" (click)="showFooter = !showFooter">
                <span class="mdl-switch__label">Login footer</span>
            </label>
        </p>
    </div>
</alfresco-login>