How would I be able to send a Popup upon submitting a form when a user doesn't exist?-CodePudding

Im creating a login and signup system and upon logging in, if the user doesn't exist I want to return a popup message saying "Please signup first" and then an 'OK' button in the popup that when pressed will send the user back to main page 'index.html'. Also same thing when password entered is wrong.

here is login part of main.py:

@app.route("/login", methods = ['GET', 'POST'])
def login():
    if request.method=='GET':
        return render_template("login.html")
    else:
        email = request.form['email']
        password = request.form ['password']
        user = get_user(email)
        
        if user != None: 
          
          if user.password == password:
            return render_template("home.html")
          else:
            return render_template("index.html")
        else:
          return render_template ('index.html')

I tried using flash and it didn't work, the html part of login (login.html).

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <title>DeBank</title>
  </head>
  <body style = "text-align: center; font-family: arial">

    <form action="/login" method="POST">
        <input type="text" name="email" placeholder="email:" required>
        <br>
        <input type="text" name="password" placeholder="password:" required>
        <br>
        <a href = "{{ url_for('index') }} "><input type="submit" value="Submit"></a>
    </form>

    <script src="{{ url_for ('static', filename='js/script.js')}}"></script>
  </body>
</html>

Thanks

CodePudding user response：

From your code, you are submitting your form directly when user clicks on submit and you are doing a return render_template which means you are returning an entire page (new page).
If you use flash in the above code, it will simply display the message at the top of the 'new' page that you have returned to.
To display a popup, you have to programmatically submit the form i.e. when the user clicks the submit button, you need to intercept it with Javascript and then via the same Javascript do an asynchronous post to your server. Your server output will get returned to your code. If it was a successful login, you redirect user. If it's not, you trigger a popup. Essentially, something like (this is a very rough outline)

a) On form submit, intercept it

    document.getElementById(<form_id>).onsubmit = function() {

    }

b) Submit your form via something like fetch. See this example on how to submit a form via fetch

c) If no password match, trigger a popup else redirect user

d) Your python code should not do a return render_template. You should just return a value that lets you know if everything was a success or something failed