magic-login-email-only.php

<?php


/**
 * Add JavaScript to modify login field for email-only input
 */
function fix_magic_login_set_email_only() {
	?>
	<script type="text/javascript">
		(function() {
			// Wait for DOM to be ready
			document.addEventListener('DOMContentLoaded', function() {
				const loginInput = document.getElementById('user_login');
				const loginLabel = document.querySelector('label[for="user_login"]');

				if (loginInput && loginLabel) {
					// Update label text
					loginLabel.textContent = '<?php esc_html_e( 'Email Address', 'magic-login' ); ?>';

					// Change input type to email
					loginInput.type = 'email';
					loginInput.autocomplete = 'email';
					loginInput.pattern = '[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$';
					loginInput.title = '<?php esc_attr_e( 'Please enter a valid email address', 'magic-login' ); ?>';

					// Add real-time validation
					loginInput.addEventListener('input', function() {
						const emailRegex = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i;
						if (this.value && !emailRegex.test(this.value)) {
							this.setCustomValidity('<?php esc_js( esc_attr__( 'Please enter a valid email address', 'magic-login' ) ); ?>');
						} else {
							this.setCustomValidity('');
						}
					});
				}
			});
		})();
	</script>
	<?php
}

add_action( 'wp_footer', 'fix_magic_login_set_email_only' );
add_action( 'login_footer', 'fix_magic_login_set_email_only' );