doublespark/contao-custom-login-bundle

Adds a DS/TF branded login screen to Contao

Maintainers

Details

github.com/doublespark/contao-custom-login-bundle

Source

Issues

Installs: 101

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 2

Forks: 0

Open Issues: 0

Type:ds-contao-bundle

v2.0.3 2024-01-22 10:15 UTC

Requires

MIT fe5db125943f2eeeff869fd96a0bf4a795adeea2

This package is auto-updated.

Last update: 2024-04-22 11:14:32 UTC

README

A custom login page for the backend, branded with Doublespark or TitmanFirth branding.

Settings

The settings can be found under Contao's "Settings" page in the CMS. The following options are available:

Field Description
Login theme Sets the theme of the login page
Messages endpoint URL The URL where messages can be fetched from

Developer notes

Login page modifications

Step 1: Add the common stylesheet /bundles/doublesparkcontaocustomlogin/css/common.css

Step 2: Add the theme stylesheet, the path is in the following variable $this->loginTheme

Step 3: Add the following snippet to the <head> for the pop-up functionality:

<!-- Custom login popup -->
<script>window.popupUrl = '<?= $this->popupUrl; ?>';window.popupLink = '<?= $this->popupLink; ?>';</script>
<link rel="stylesheet" href="/bundles/doublesparkcontaocustomlogin/css/popup.css">

Step 4: Add the following snippet to the end of the <body>:

<!-- Custom login JS -->
<script src="/bundles/doublesparkcontaocustomlogin/js/cookies.js"></script>
<script src="/bundles/doublesparkcontaocustomlogin/js/popup.js"></script>
<script src="/bundles/doublesparkcontaocustomlogin/js/messages.js"></script>

Step 5: Add the following code snippet below the <form> in order to output the custom messages:

<?php if($this->arrMessages): ?>
    <div class="messages-wrapper">
        <?php foreach($this->arrMessages as $message): ?>
        <div id="message-<?= $message['id']; ?>" data-mid="<?= $message['id']; ?>" class="message">
            <button class="close-button">Dismiss X</button>
            <?= $message['messageText']; ?>
        </div>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

Step 6: Add the following code to output the stickied messages:

<?php if($this->arrStickyMessages): ?>
  <div class="sticky-messages-wrapper">
      <?php foreach($this->arrStickyMessages as $message): ?>
          <div class="message">
              <?= $message['messageText']; ?>
          </div>
      <?php endforeach; ?>
  </div>
<?php endif; ?>