Should users confirm their account deletion before it is processed?

[mathmari]

Hey!

I have written a code in Python for a server to search for movies. At the site for the user I have added at the html template the options to change the password and to delete the account. For this do I have to write a separate html or a separate endpoint for these ones or can I write it as a box that appears only when I click on the specific option ? :unsure:

At the user.html so far I have written the following :

{% extends "base_page.html" %} 
{% block my_title %}My Profile{% endblock %} 
{% block my_head %} 

{% endblock %}

{% block my_body %} 
    <div class="col-md-6 offset-md-3">
        <span class="anchor" id="formChangePassword"></span>
        <hr class="mb-5">
        <!-- form card change password -->
        <div class="card card-outline-secondary">
            <div class="card-header">
                <h3 class="mb-0">Change Password</h3>
            </div>
            <div class="card-body">
                <form class="form" role="form" autocomplete="off">
                    <div class="form-group">
                        <label for="inputPasswordOld">Current Password</label>
                        <input type="password" class="form-control" id="inputPasswordOld" required="">
                    </div>
                    <div class="form-group">
                        <label for="inputPasswordNew">New Password</label>
                        <input type="password" class="form-control" id="inputPasswordNew" required="">
                        <span class="form-text small text-muted">
                                The password must be 8-20 characters, and must <em>not</em> contain spaces.
                            </span>
                    </div>
                    <div class="form-group">
                        <label for="inputPasswordNewVerify">Verify</label>
                        <input type="password" class="form-control" id="inputPasswordNewVerify" required="">
                        <span class="form-text small text-muted">
                                To confirm, type the new password again.
                            </span>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-success btn-lg float-right">Save</button>
                    </div>
                </form>
            </div>
        </div> 

{% endblock %}

The box for changing the password is it better to be appeared only when I click on "Change password" or in a separate site? To be appeared only when we click on "Change password" it is done with Javascript, right? Would we write that insode my_body or at which point? Or do we have to create for that a new endpoint ?

:unsure:

 

[I like Serena]

Hey mathmari!

In its simplest form the box to change the password is simply always visible with its own submit button.
If you want, you can have a button or option "Change password" somewhere that makes the box visible, and you might initially make is invisible.

 

[mathmari]

In its simplest form the box to change the password is simply always visible with its own submit button.
If you want, you can have a button or option "Change password" somewhere that makes the box visible, and you might initially make is invisible.

So you mean instead to have

<a href="#" class="settings">Change password</a>

we should have

<button ... >

or what do you mean? :unsure:

 

[I like Serena]

So you mean instead to have

<a href="#" class="settings">Change password</a>

we should have

<button ... >

or what do you mean?

That is one way to do it yes.
You can also have a hyperlink with <a href... that sends a request to the server that responds with a dedicated html page with the form.

 

[mathmari]

That is one way to do it yes.

This is done with javascript, right? Do we write that part inside the block my_body ? :unsure:

You can also have a hyperlink with <a href... that sends a request to the server that responds with a dedicated html page with the form.

Is this done with a separate html template ? Do I have to write also a new endpoint for changing the password ? :unsure:

 

[I like Serena]

This is done with javascript, right? Do we write that part inside the block my_body ?

If you go this way, then you should have an element like a button that you can click. When clicked it should execute something like document.getElementById("formChangePassword").style.display= "block", assuming you have a <div id="formChangePassword"> element
The html element should then have the initial style display: none.
It is a typical way to set up tab sheets. In that case all html pages are all present in the same html template, but only one is displayed at a time.

Is this done with a separate html template ? Do I have to write also a new endpoint for changing the password ?

Your endpoint should already be able to handle a request to change the password, given the required fields, doesn't it?
What kind of response does it send back now?
You might reuse the same request handler so that if there are no fields, that it sends back an html template with the change password form.

 

[mathmari]

If you go this way, then you should have an element like a button that you can click. When clicked it should execute something like document.getElementById("formChangePassword").style.display= "block", assuming you have a <div id="formChangePassword"> element
The html element should then have the initial style display: none.
It is a typical way to set up tab sheets. In that case all html pages are all present in the same html template, but only one is displayed at a time.

Your endpoint should already be able to handle a request to change the password, given the required fields, doesn't it?
What kind of response does it send back now?
You might reuse the same request handler so that if there are no fields, that it sends back an html template with the change password form.

I got stuck right now. So to change the password I have to write also a corresponding function that updates with a SQL query the password in the database, right? So is it necessary to write a new endpoint or can this be done in the endpoint /user that we are right now? :unsure:

 

[I like Serena]

I got stuck right now. So to change the password I have to write also a corresponding function that updates with a SQL query the password in the database, right? So is it necessary to write a new endpoint or can this be done in the endpoint /user that we are right now?

Ah right. I think you should have multiple endpoints to manage a user.
Something like:

• /user/register to register a user.
• /user/login to allow the user to login.
• /user/change to allow the user to change their password.

 

[mathmari]

Ah right. I think you should have multiple endpoints to manage a user.
Something like:

• /user/register to register a user.
• /user/login to allow the user to login.
• /user/change to allow the user to change their password.

I have already an endpoint and a html template for the login system, an endpoint and a html template for the register system. So I have to write also an endpoint and a html template for the change of password, right? :unsure:

 

[I like Serena]

I have already an endpoint and a html template for the login system, an endpoint and a html template for the register system. So I have to write also an endpoint and a html template for the change of password, right?

I think so yes. :unsure:

 

[mathmari]

I think so yes. :unsure:

I have done the following so far :

The endpoint :

@route_users.route("/change_password/", methods=["POST", "GET"]) 
def change(): 
    if "email" in session: 
        if request.method=="POST": 
            password=request.form["password"]
            username_data=change_password_by_email(database_file_name, session["email"], session["email"]) 
            if username_data == False : 
                return render_template("change_password.html") 
            else : 
                return redirect(url_for(".user")) 
        else : 
            return render_template("change_password.html")
    else : 
        return redirect(url_for(".user"))

The function that is used here :

def change_password_by_email(database_file_name, email, password): 
    con = sqlite3.connect(database_file_name) 
    changed = False 
    try : 
        hashed_password = generate_password_hash(password,method='sha256')
        query = f"Update User set password = '{hashed_password}' where email='{email}'" 
        cursor = con.cursor() 
        cursor.execute(query)   
        con.commit() 
        changed = True 
    except : 
        print("An exception occurred") 
    con.close() 
    return changed

And the change_password.html contains the box to change the password :

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title> 
    <style>
      .to_login{ 
        text-decoration: none;
      }
    </style> 
    
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
    

    <div class="col-md-6 offset-md-3">
        <span class="anchor" id="formChangePassword"></span>
        <hr class="mb-5">
        <!-- form card change password -->
        <div class="card card-outline-secondary">
            <div class="card-header">
                <h3 class="mb-0">Change Password</h3>
            </div>
            <div class="card-body">
                <form class="form" role="form" autocomplete="off">
                    <div class="form-group">
                        <label for="inputPasswordOld">Current Password</label>
                        <input type="password" class="form-control" id="inputPasswordOld" required="">
                    </div>
                    <div class="form-group">
                        <label for="inputPasswordNew">New Password</label>
                        <input type="password" class="form-control" id="inputPasswordNew" required="">
                    </div>
                    <div class="form-group">
                        <label for="inputPasswordNewVerify">Verify</label>
                        <input type="password" class="form-control" id="inputPasswordNewVerify" required="">
                        <span class="form-text small text-muted">
                                To confirm, type the new password again.
                            </span>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-success btn-lg float-right">Save</button>
                    </div>
                </form>
            </div>
        </div> 

      <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>

Is everything correct so far ? :unsure:

I think I got stuck about the html. To check the password and the password at the verify box do we do that check at the html template or at the endpoint ? :unsure:

 

[I like Serena]

Is everything correct so far ?

Generally speaking, it looks about right.

I am missing a check for the old password though. We don't want anyone to change their password if they don't know their old password, do we? (Wondering)

I think I got stuck about the html. To check the password and the password at the verify box do we do that check at the html template or at the endpoint ?

This is a security issue. The server wants to be sure that the user is who he says he is before allowing him to change his password.
So the old password must be checked on the server side.

We do have a choice for the verify password though. We can either do it on the client side, or on server side.
If I'm not mistaken, it is just to help the user from avoiding typos.
If we do it on the client side, then there is no need to send the verify password to the server.
If we do it on the server side, then we have all verification logic in 1 place.

 

[mathmari]

Generally speaking, it looks about right.

I am missing a check for the old password though. We don't want anyone to change their password if they don't know their old password, do we? (Wondering)This is a security issue. The server wants to be sure that the user is who he says he is before allowing him to change his password.
So the old password must be checked on the server side.

We do have a choice for the verify password though. We can either do it on the client side, or on server side.
If I'm not mistaken, it is just to help the user from avoiding typos.
If we do it on the client side, then there is no need to send the verify password to the server.
If we do it on the server side, then we have all verification logic in 1 place.

I amended the endpoint :

@route_users.route("/change_password/", methods=["POST", "GET"]) 
def change(): 
    if "email" in session: 
        if request.method=="POST": 
            old_password=request.form["old_password"] 
            new_password=request.form["new_password"] 
            verify_password=request.form["verify_password"] 
            username_data=get_user_by_email(database_file_name, session["email"]) 
            if not check_password_hash(username_data[1], old_password) : 
                return render_template("change_password.html", error = "old_password") 
            if new_password != verify_password : 
                return render_template("change_password.html", error = "verify")
            change_password=change_password_by_email(database_file_name, session["email"], new_password) 
            if change_password == False : 
                return render_template("change_password.html", error = "change") 
            else : 
                return render_template("change_password.html", error = "ok")  
        else : 
            return render_template("change_password.html")
    else : 
        return redirect(url_for(".user"))

and the html template :

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change password</title> 
    
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
    

    <div class="col-md-6 offset-md-3">
        <span class="anchor" id="formChangePassword"></span>
        <hr class="mb-5">
        <!-- form card change password -->
        <div class="card card-outline-secondary">
            <div class="card-header">
                <h3 class="mb-0">Change Password</h3>
            </div>
            <div class="card-body">
                <form class="form" role="form" autocomplete="off">
                    <div class="form-group">
                        <label for="inputPasswordOld">Current Password</label>
                        <input type="password" name="old_password" class="form-control" id="inputPasswordOld" required="">
                    </div>
                    <div class="form-group">
                        <label for="inputPasswordNew">New Password</label>
                        <input type="password" name="new_password" class="form-control" id="inputPasswordNew" required="">
                    </div>
                    <div class="form-group">
                        <label for="inputPasswordNewVerify">Verify</label>
                        <input type="password" name="verify_password" class="form-control" id="inputPasswordNewVerify" required="">
                        <span class="form-text small text-muted">
                                To confirm, type the new password again.
                            </span>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-success btn-lg float-right">Save</button>
                    </div>
                </form>
            </div>
        </div> 
    {% if error == "old_password" or error == "verify" or error == "change" or error == "ok" %} 
        <label class = "error">Wrong {{error}}</label>
    {% endif %} 

      <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>

But the error messages that we should get, don't seem to work. Have I done somethig wrong ? :unsure:

 

[I like Serena]

How are the errors misbehaving? (Wondering)

 

[mathmari]

How are the errors misbehaving? (Wondering)

I mean I don;t get any message. For example I give as input a new password and a different one to verify, but the message "Wrong verify" doesn't appear. Is something wrong at my code ? :unsure:

 

[I like Serena]

I mean I don;t get any message. For example I give as input a new password and a different one to verify, but the message "Wrong verify" doesn't appear. Is something wrong at my code ?

Your code seems similar to your register user code. Do the errors work for that one? (Wondering)

Do you have some logging? (Wondering)

In the browser you can see what your client code sends and receive, and also if there are any errors.
Did you inspect those? (Wondering)
You can see the network traffic if you right click on your browser, select Inspect, select the Network tab sheet, and submit your form.
Furthermore, you can select the Console tab sheet and see if there are any error messages.
Additionally, you can select the Sources tab sheet, find the code that you wrote, put breakpoints in it, step through it, and generally inspect what is happening.

 

[mathmari]

Your code seems similar to your register user code. Do the errors work for that one? (Wondering)

Do you have some logging? (Wondering)

In the browser you can see what your client code sends and receive, and also if there are any errors.
Did you inspect those? (Wondering)
You can see the network traffic if you right click on your browser, select Inspect, select the Network tab sheet, and submit your form.
Furthermore, you can select the Console tab sheet and see if there are any error messages.
Additionally, you can select the Sources tab sheet, find the code that you wrote, put breakpoints in it, step through it, and generally inspect what is happening.

It works now! :geek:

I have also an other question... Now I want to write the code for the option to delete the account. Do I use for that the same card form? Or what would you suggest to use here? :unsure:

 

[I like Serena]

I have also an other question... Now I want to write the code for the option to delete the account. Do I use for that the same card form? Or what would you suggest to use here?

It seems to me that should be yet another end point with yet another template. One that only asks for the password.

 

[mathmari]

It seems to me that should be yet another end point with yet another template. One that only asks for the password.

Yes, I have already written the endpoint for deleting the account.

I am asking about the card that I used in the template for changing the password, if I could use the same or a similar one for deleting the account in the respective template.

I tried to write the following inside the template of deleting the account :

{% extends "base_page.html" %} 
{% block my_title %}Delete account{% endblock %} 
{% block my_head %} 
<style>
.cancelbtn, .deletebtn {
    float: left;
    width: 50%;
  }
  
  /* Add a color to the cancel button */
  .cancelbtn {
    background-color: #ccc;
    color: black;
  }
  
  /* Add a color to the delete button */
  .deletebtn {
    background-color: #f44336;
  }
</style> 
{% endblock %}

{% block my_body %} 
    
<div class="col-md-6 offset-md-3">
    <span class="anchor" id="formDeleteAccount"></span>
    <hr class="mb-5">
    <div class="card card-outline-secondary">
        <div class="card-header">
            <h3 class="mb-0">Delete Account</h3>
        </div>
        <div class="card-body">
            <form action="#" method="post">
                <div class="form-group">
                    <label for="deleteaccount">Are you sure to delete the account?</label>
                </div>
                <br> 
                <div class="form-group">
                    <button type="button" class="cancelbtn" name="no">Cancel</button>
                    <button type="button" class="deletebtn" name="yes">Delete</button>
                </div>
            </form>
        </div>
    </div> 
{% if error == "not_deleted" %} 
    <label class = "error">The account couldn't be deleted. Please try again.</label>
{% endif %}  
{% if error == "deleted" %} 
    <label class = "error">The account was deleted successfully.</label>
{% endif %} 
      <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
{% endblock %}

Is everything correct so far ? :unsure:

But I am not really sure how I use at the .py file if the user has chosen the button "Cancel" or "Delete". Maybe something like

request.form["yes"]

? :unsure:

 

[mathmari]

I edited a little :

{% extends "base_page.html" %} 
{% block my_title %}Delete account{% endblock %} 
{% block my_head %} 
<style>
.cancelbtn, .deletebtn {
    float: left;
    width: 50%; 
    text-decoration: none;
  }
  
  .cancelbtn {
    background-color: #ccc;
    color: black;
  }
  
  .deletebtn {
    background-color: #f44336;
  } 
</style> 
{% endblock %}

{% block my_body %} 
    
<div class="col-md-6 offset-md-3">
    <span class="anchor" id="formDeleteAccount"></span>
    <hr class="mb-5">
    <div class="card card-outline-secondary">
        <div class="card-header">
            <h3 class="mb-0">Delete Account</h3>
        </div>
        <div class="card-body">
            <form action="#" method="delete">
                <p>Are you sure you want to delete your account?</p>
                 
                <div class="form-group">
                    <button type="button" class="cancelbtn" name="no"><a href="/users/user/">Cancel</a></button>
                    <button type="button" class="deletebtn" name="yes"><a href="/users/register/">Delete</a></button>
                </div>
            </form>
        </div>
    </div>       <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
{% endblock %}

:unsure: Is this way correct? To redirect it directly to an other endpoint? :unsure:

 

[I like Serena]

Yes, I have already written the endpoint for deleting the account.

I am asking about the card that I used in the template for changing the password, if I could use the same or a similar one for deleting the account in the respective template.

What do you mean by "card"? Do you mean the CSS stylesheet information? (Wondering)

I tried to write the following inside the template of deleting the account :
Is everything correct so far ?
But I am not really sure how I use at the .py file if the user has chosen the button "Cancel" or "Delete". Maybe something like

request.form["yes"]

?

I'd expect that Delete button to be of type submit.
And I'd expect there to be a password field. :unsure:
That is, I'm assuming we only get to see this card if the user already selected somewhere that they wanted to delete their account. Or am I misunderstanding. :unsure:

The Cancel button - if there is one - should then bring is back where we came from or something like that.

 

[mathmari]

What do you mean by "card"? Do you mean the CSS stylesheet information? (Wondering)

Yes :unsure:

I'd expect that Delete button to be of type submit.
And I'd expect there to be a password field. :unsure:
That is, I'm assuming we only get to see this card if the user already selected somewhere that they wanted to delete their account. Or am I misunderstanding. :unsure:

The Cancel button - if there is one - should then bring is back where we came from or something like that.

I changed the Delete button to be of type submit :

{% extends "base_page.html" %} 
{% block my_title %}Delete account{% endblock %} 
{% block my_head %} 
<style>
.cancelbtn, .deletebtn {
    float: left;
    width: 50%; 
    text-decoration: none;
  }
  
  .cancelbtn {
    background-color: #ccc;
    color: black;
  }
  
  .deletebtn {
    background-color: #f44336;
  } 
</style> 
{% endblock %}

{% block my_body %} 
    
<div class="col-md-6 offset-md-3">
    <span class="anchor" id="formDeleteAccount"></span>
    <hr class="mb-5">
    <div class="card card-outline-secondary">
        <div class="card-header">
            <h3 class="mb-0">Delete Account</h3>
        </div>
        <div class="card-body">
            <form action="#" method="post">
                <p>Are you sure you want to delete your account?</p>
                 
                <div class="form-group">
                    <button type="button" class="cancelbtn" name="no"><a href="/users/user/">Cancel</a></button>
                    <button type="submit" class="deletebtn" name="yes"><a href="/users/register/">Delete</a></button>
                </div>
            </form>
        </div>
    </div>       <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
{% endblock %}

So you mean that if we select "Delete" then the user should write the password and then account should be deleted ? :unsure:

 

[mathmari]

I think I saw what I did wrong and now it seems to work :unsure: :geek:

 

[mathmari]

It works now (Party)

Thank you very much for your help! (Star)

 

[I like Serena]

Yes :unsure:

Stylesheet information is usually centralized in a .css file. An html template then contains a <link> element that refers to it.

I changed the Delete button to be of type submit :

{% extends "base_page.html" %}
{% block my_title %}Delete account{% endblock %}
{% block my_head %}
<style>
.cancelbtn, .deletebtn {
    float: left;
    width: 50%;
    text-decoration: none;
  }
 
  .cancelbtn {
    background-color: #ccc;
    color: black;
  }
 
  .deletebtn {
    background-color: #f44336;
  }
</style>
{% endblock %}

{% block my_body %}
   
<div class="col-md-6 offset-md-3">
    <span class="anchor" id="formDeleteAccount"></span>
    <hr class="mb-5">
    <div class="card card-outline-secondary">
        <div class="card-header">
            <h3 class="mb-0">Delete Account</h3>
        </div>
        <div class="card-body">
            <form action="#" method="post">
                <p>Are you sure you want to delete your account?</p>
                
                <div class="form-group">
                    <button type="button" class="cancelbtn" name="no"><a href="/users/user/">Cancel</a></button>
                    <button type="submit" class="deletebtn" name="yes"><a href="/users/register/">Delete</a></button>
                </div>
            </form>
        </div>
    </div>      <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
{% endblock %}

So you mean that if we select "Delete" then the user should write the password and then account should be deleted ? :unsure:

I'd expect that the user should first type their password, and then a click of the delete button should delete the account. Optionally there might be a dialog to ask if they are really sure that is what they want do with yes (or delete) and cancel buttons.