python-eel / Eel

A little Python library for making simple Electron-like HTML/JS GUI apps
MIT License
6.44k stars 587 forks source link

Can't redirecting to another page using relative path #440

Closed hi-Nobody closed 3 years ago

hi-Nobody commented 3 years ago

Hi, I can't redirecting to another page using relative path when I use the function: async function & eel.fun()() The following is my code: PYTHON:

import eel

eel.init('static')
@eel.expose

@eel.expose
def sign_in(account,pwd):
    print(f"our account is {account} & password is {pwd}")
    if account != '' or pwd != '':
        return 'home.html'
    else:
        print('input your account or password')

eel.start('sign_in.html',size=(350,400),disable_cache=True)

sign_in.html:

<!DOCTYPE html>
<html>

<head>
    <title>login</title>
    <meta charset="utf-8">

    <!-- eel.js , this is necessary  -->
    <script type="text/javascript" src="/eel.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">

</head>

<body>
    <div class="container">
        <h1>Account Login</h1>
        <form onsubmit="validate_form()" id="myform">
            <div class="form-group row">
                <label for="account1" class="custom-control-label">Account</label>
                <input type="text" class="form-control account-input" id="account1">
            </div>
            <div class="form-group row">
                <label for="pwd" class="custom-control-label">Password</label>
                <div class="input-group" id="show_hide_password">
                    <input type="password" class="form-control account-input show_hide_pwd" id="pwd">
                      <div class="input-group-append">
                        <button class="btn reveal" type="button">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
                              <path class="pwd_svg" d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                              <path class="pwd_svg"  d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                            </svg>
                        </button>

                      </div>
                </div>

            </div>
            <div class="custom-control custom-checkbox row">
                <input type="checkbox" class="custom-control-input" id="checking" onclick="myCheckBox()">
                <label class="custom-control-label" for="checking">Remember</label>

            </div>
            <i class="bi bi-eye-fill"></i>
            <button type="submit" class="btn btn-primary btn-block" onclick="btn_click()">login</button>

        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="js/sign_in.js"></script>
</body>

</html>

sign_in.js:

var checkBox = document.getElementById("checking");
var myAccount = document.getElementById("account1");
var myPwd = document.getElementById("pwd");

$(document).ready(function (){
    window.resizeTo(350, 400);
    document.getElementById("pwd").innerHTML = localStorage.getItem('my_Checkbox');
    if (checkBox.checked === true){
        document.getElementById("account1").innerHTML = localStorage.getItem('my_Account');
        document.getElementById("pwd").innerHTML = localStorage.getItem('my_Pwd');
    }
});

async function validate_form(){
    this.redirectUrl = eel.sign_in(myAccount.value, myPwd.value)();
    console.log('rendering page...,redirectUrl:'+this.redirectUrl);
    window.location.replace(this.redirectUrl);
}

$(".reveal").on('click',function() {
    var $pwd = $(".show_hide_pwd");
    if ($pwd.attr('type') === 'password') {
        $pwd.attr('type', 'text');
    } else {
        $pwd.attr('type', 'password');
    }
});

function myCheckBox() {
  if (checkBox.checked === true){
    localStorage.setItem('my_Account', myAccount);
    localStorage.setItem('my_Pwd', myPwd);
    localStorage.setItem('my_Checkbox', true);
  } else {
    localStorage.removeItem("my_Account");
    localStorage.removeItem("my_Pwd");
  }
}

Could you help me, please Thank you.

hi-Nobody commented 3 years ago

I had solved this problem when I changed return 'home.html' to return '/home.html'