Well, you can have custom login/logout actions without visitors seeing WP admin enviroment. So I am not answering “modify WP-login page with JS” question, but letting know there is easier solution
You can add this form anywhere to you template, and voila, the login form!
<form name="loginform" id="loginform" action="<?php echo site_url('/wp-login.php') ?>" method="post">
<table class="logtable">
<tr>
<td class="first"><label for="user_login"><?php _e('Username:','your-theme') ?></label></td>
<td class="second"><input type="text" name="log" id="user_login" class="input" value="" size="20"></td>
</tr>
<tr>
<td class="first"><label for="user_pass"><?php _e('Password:','your-theme') ?></label></td>
<td class="second"><input type="password" name="pwd" id="user_pass" class="input" value="" size="20"></td>
</tr>
<tr>
<td class="remember" colspan="2">
<label><input name="rememberme" type="checkbox" id="rememberme" value="forever"> <?php _e('Remember me','your-theme') ?></label>
</td>
</tr>
<tr>
<td class="submit" colspan="2">
<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="<?php _e('Log in','your-theme') ?>">
<input type="hidden" name="redirect_to" value="<?php echo home_url() ?>">
</td>
</tr>
</table>
</form>
You want user to log in, but you don’t want him to see admin enviroment. So you can “block” him from admin entirely (and redirect him to home page).
function blockDashboard() {
$file = basename($_SERVER['PHP_SELF']);
if (is_user_logged_in() && is_admin() && !current_user_can('administrator') && $file != 'admin-ajax.php'){
wp_redirect( home_url() );
exit();
}
}
add_action('init', 'blockDashboard' );
And log out link? Easy.
<p class="logout">
<?php wp_loginout( home_url() ) ?>
</p>