Magic login placement adjustment

@teeboy4real

To be compatible with the Magic Login plugin style, please follow these steps:

1. Add a Custom Template

In your theme directory, create a folder named secure-passkeys and add a file named login.custom.php with the following content:

/wp-content/themes/your-theme/secure-passkeys/login.custom.php

<?php
/**
 * Login Custom template
 *
 * @package SecurePasskeys
 */

defined('ABSPATH') || exit;
?>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const box = document.getElementById("secure-passkey-login-container");
  const submit = document.querySelector(".continue-with-magic-login");
  if (box && submit) {
    submit.insertAdjacentElement("afterend", box);
  }
  if (box) {
    box.style.display = "block";
  }
});
</script>

<div class="secure-passkey-login-wrapper" id="secure-passkey-login-container" style="display: none;text-align: center;border:0;margin-top: 0;padding: 0;">
    <span class="magic-login-or-separator"></span>
    <div id="errorMessage" class="notice notice-error" style="display: none;"></div>
    <div id="successMessage" class="notice notice-success" style="display: none;"></div>
    <button id="login-via-passkey" class="button button-primary button-hero login-via-passkey" style="width: 100%;">
        <span id="spinnerText" style="display: none;"><?php esc_html_e('Login via Passkey..', 'secure-passkeys') ;?></span>
        <span id="buttonText"><?php esc_html_e('Login via Passkey', 'secure-passkeys') ;?></span>
    </button>
</div>

2- Register the Template in functions.php

In your theme’s /wp-content/themes/your-theme/functions.php add the following code:

<?php
add_filter('secure_passkeys_include_view_frontend_file', function ($file_path, $theme, $template) {
    if ($template === 'login.default') {
        $custom_file_path = __DIR__ . '/secure-passkeys/login.custom.php';
        if (file_exists($custom_file_path)) {
            $file_path = $custom_file_path;
        }
    }

    return $file_path;
}, 10, 3);
s

Note: If you change the folder or file name, make sure to update the path in the code accordingly.

Output: https://ibb.co/fzWz1Q1n