xNightR00T File Manager

<?php
/*
 Template Name: Login Page
 */
?>
<?php if(is_user_logged_in()) wp_safe_redirect(site_url()); ?>
<?php get_header(); ?>
<?php
    $txtEmail = "Email";
    $txtEmailPlaceholder = "Enter your email address";
    $txtPassword = "Password";
    $txtPasswordPlaceholder = "Enter your password";
    $txtForgot = "Forgot password?";
    $txtSignup = "Don't have an account?";
    $txtSignup2 = "Sign Up";
    $txtLogin = "Login";

    if ( get_locale() == 'ja') {
        $txtLogin = "ログイン ";
        $txtEmail = "メール ";
        $txtEmailPlaceholder = "メールアドレスを入力してください";
        $txtPassword = "パスワード ";
        $txtPasswordPlaceholder = "パスワードを入力してください";
        $txtForgot = " パスワードを忘れましたか？";
        $txtSignup = "アカウントをお持ちでないですか?";
        $txtSignup2 = "登録";
    }

?>
<main id="main">

<!-- ======= Values Form ======= -->
<section class="form-contact">
    <div class="container">
        <div class="row gx-0">
            <div class="bg-form-contact col-md-9 mx-auto">
                <div class="form-contact">
                    <section class="forms">
                        <div class="form login">
                            <div class="form-content p-4">
                                <header> <?php echo $txtLogin; ?></header>
                                <div class="mb-20">
                                    <p class="alert-success"></p>
                                    <p class="status"></p>
                                </div>
                                <form id="login_form" method="POST">
                                    <p class="status"></p>
                                    <div class="field input-field">
                                        <label for="name" class="form-label"><?php echo $txtEmail; ?><span class="req"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">*</font></font></span></label>
                                        <input maxlength="255" type="text" name="email" id="username" placeholder="<?php echo $txtEmailPlaceholder; ?>" class="input">
                                    </div>

                                    <div class="field input-field m-0">
                                        <label for="password" class="form-label"><?php echo $txtPassword; ?><span class="req"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">*</font></font></span></label>
                                        <input maxlength="20" type="password" name="password" id="password" placeholder="<?php echo $txtPasswordPlaceholder; ?>" class="password">
                                        <i class='bx bx-hide eye-icon'></i>
                                    </div>
                                    <div class="field input-field m-0">
                                        <div id="inline-badge"></div>
                                    </div>

                                    <div class="field button-field">
                                        <button  id="submit" class="btn btn-submit" type="submit"><?php echo $txtLogin; ?></button>
                                    </div>
                                    <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
                                </form>

                                <div class="form-link">
                                    <span><?php echo $txtSignup; ?>&ensp;<a style="cursor: pointer;" onclick="location.href='<?php echo home_url() . '/sign-up/'; ?>'"class="link signup-link"><?php echo $txtSignup2; ?></a></span>
                                    <a href="<?php echo home_url() . "/forgots-password"; ?>" class="forgot-pass"><?php echo $txtForgot; ?></a>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</section><!-- End Values Section -->



</main><!-- End #main -->
<?php
 global $wp_query;
 $postID = $wp_query->post->ID;
 $footer = get_post_meta($postID, "footer", true);
 get_footer($footer);
 wp_reset_query();
?>
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
<link href='<?php echo get_template_directory_uri(); ?>/css/common.css' rel='stylesheet'>
<style>

.form.signup{
    opacity: 0;
    pointer-events: none;
}
.forms.show-signup .form.signup{
    opacity: 1;
    pointer-events: auto;
}
.forms.show-signup .form.login{
    opacity: 0;
    pointer-events: none;
}
.line{
    position: relative;
    height: 1px;
    width: 100%;
    margin: 36px 0;
    background-color: #d4d4d4;
}
.line::before{
    content: 'Or';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFF;
    color: #8b8b8b;
    padding: 0 15px;
}

</style>

<script>
     const forms = document.querySelector(".forms"),
      pwShowHide = document.querySelectorAll(".eye-icon"),
      links = document.querySelectorAll(".link");

pwShowHide.forEach(eyeIcon => {
    eyeIcon.addEventListener("click", () => {
        let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
        
        pwFields.forEach(password => {
            if(password.type === "password"){
                password.type = "text";
                eyeIcon.classList.replace("bx-hide", "bx-show");
                return;
            }
            password.type = "password";
            eyeIcon.classList.replace("bx-show", "bx-hide");
        })
        
    })
})      

links.forEach(link => {
    link.addEventListener("click", e => {
       e.preventDefault(); //preventing form submit
       forms.classList.toggle("show-signup");
    })
})
</script>