如何在 Heroku 上的 Flask 应用程序中使用 JS 下载文件的条件？

Question

I want to have a condition where when a user clicks a link to download a file it will ask for a password after which the file can be downloaded(if it is right). I am pretty basic in JS and I want to try this for my Flask app deployed at Heroku. I just don't know how to implement it.

So this is what I have come up with so far:

<main class="page projects-page">
        <section class="portfolio-block projects-cards">
            <div class="container">
                <div class="heading">
                    <h2>Test download</h2>
                </div>
                <div class="row">
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0"></div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0"><a href="#"></a>
                            <div class="card-body">
                                <h6><a href="#">To download the file enter the SECRET_KEY</a></h6><input type="password"></div>
                        </div><button class="btn btn-primary d-block float-none" type="submit" style="width: 349.984px;">DOWNLOAD&nbsp;</button></div>
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0"></div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0"><a href="#"></a>
                            <div class="card-body"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
</main>

This is the part of the code where the user types the password and if correct the file should be downloaded. Can this be done with a simple JS function where the password field and button are enclosed in a form element and compared or should I use another method?

Answer 1

So, when a link is clicked you can generate a modal asking for the password, when the password is entered and submitted, you send both the password and which link is being requested to the API and it initiates the download if the link is correct.

Here's a simple modal:

<div class="modal-container" id="modal">
<div class="modal">
<button class="close-btn" id="close"></button>
<div class="modal-header">
<h3>Password needed to access file </h3>
<div class="modal-content">
<form class="modal-form">
<div>
<label for="password">Password</label>
<input
type="password"
id="password"
placeholder="Enter Password"
class="form-input"
/>
</div>
<input type="submit" value="Submit" class="submit-btn" />
</form>
</div>
</div>
</div>
</div>

now you can add an event listener on the link items so that when the link is clicked, this modal appears and the user is prompted to enter a password. I handle the modal appearing and disappearing in css, you can see my css at

https://github.com/Daniel-Wh/BurgerAndModal

I'm assuming that you already have experience with event listeners and making API calls since it sounds like someone can click a link and download something from your app.

Without seeing your code, there's not much else I can say. Good luck out there