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

Redirecting to another page #426

Closed hi-Nobody closed 3 years ago

hi-Nobody commented 3 years ago

Hi, I have two problems. First, it is about redirecting to another page after authenticating on login page. I have found solution like this on the web, but it still can't work for me. I always get the error: OSError: [WinError 10048] Only one usage of each socket address (protocol/network address/port) is normally permitted

Second, why do I can't redirecting using js. If i change await eel.sign_in(myAccount.value, myPwd.value)(); to

try{
    await Promise.all([window.location.replace(redirectUrl)]) ;
}
catch (error){
    // Check for login session
    const response = Object.assign({}, error);
    if (response.response.status === 401 || response.response.status === 401) {
        alert(response);
    }
}

or window.location.replace(redirectUrl);

The following is my code. PYTHON:

import eel

eel.init('static')

@eel.expose
def sign_in(account, pwd):
    print(f"our account is {account} & password is {pwd}")
    if account != '':
        home()
    else:
        print('you need to input correct info.')

@eel.expose
def home():
    print("we'll go to home page")
    eel.start('home.html', size=(1280, 815), disable_cache=True)
    print('passing eel.start')
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:

const redirectUrl = 'home.html';
// Get the checkbox
var checkBox = document.getElementById("checking");
// Get the output text
var myAccount = document.getElementById("account1");
var myPwd = document.getElementById("pwd");
async function validate_form(){
    var valid = true;
    eel.sign_in(myAccount.value, myPwd.value);
    if (myAccount.value === ''){
                alert ( "Pleas input your information" );
                valid = false;
        }

    if (myPwd.value === ''){
                alert ( "Pleas input your information" );
                valid = false;
        }

    if (valid === true){
        alert('valid:'+valid);
        await eel.sign_in(myAccount.value, myPwd.value)();
    }
}

Could you help me, please Thank you.

samuelhwilliams commented 3 years ago

eel.start should only be called once. In your Python home function you're trying to call it for a second time, which wants to start up a second eel webserver.

You instead need to call a JavaScript function that performs the navigation. For example, if you eel.expose a JavaScript function like this:

eel.expose(go_to)
function go_to(url) {window.location.replace(url);};

Then you could update the Python home functions' eel.start call with something like eel.go_to('/home').

I'm going to close this as it should be enough to fix your issue. Hope it helps!