allow user to validate an account

app.py

@@ -185,6 +185,23 @@ def delete_account():
     return redirect(url_for("user_accounts"))
 
 
+@app.route("/validateAccount", methods=["POST"])
+def validate_account():
+    base_url = app.config["BASE_URL"]
+    validate_url = f"{base_url}/validateAccount"
+    
+    # Forward the request to the backend API
+    credentials = base64.b64decode(session["auth_credentials"]).decode()
+    username, password = credentials.split(":", 1)
+    response = requests.post(
+        validate_url,
+        auth=requests.auth.HTTPBasicAuth(username, password),
+        json=request.get_json()
+    )
+    
+    return jsonify(response.json()), response.status_code
+
+
 @app.route("/get_stream_names", methods=["GET"])
 def stream_names():
     if not session.get("logged_in"):

templates/base.html

@@ -49,7 +49,7 @@
         <p>Version: {{ version }}</p>
     </footer>
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     {% block scripts %}{% endblock %}

templates/user_accounts.html

@@ -48,6 +48,10 @@
                     <td>{{ account.expiaryDate_rendered }}</td>
                     <td>{{ account.password }}</td>
                     <td>
+                        <button class="btn btn-info btn-validate" data-username="{{ account.username }}" data-password="{{ account.password }}" data-stream="{{ account.stream }}" style="margin-right: 5px;">
+                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
+                            <span class="button-text">Validate</span>
+                        </button>
                         <form action="/accounts/delete" method="POST" style="display:inline;">
                             <input type="hidden" name="stream" value="{{ account.stream }}">
                             <input type="hidden" name="username" value="{{ account.username }}">
@@ -89,5 +93,51 @@
                 ]
             });
         });
+
+        $('.btn-validate').on('click', function() {
+            var button = $(this);
+            var spinner = button.find('.spinner-border');
+            var buttonText = button.find('.button-text');
+            var username = button.data('username');
+            var password = button.data('password');
+            var stream = button.data('stream');
+
+            spinner.show();
+            buttonText.hide();
+            button.prop('disabled', true);
+
+            $.ajax({
+                url: '/validateAccount',
+                type: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify({
+                    username: username,
+                    password: password,
+                    stream: stream
+                }),
+                success: function(response) {
+                    spinner.hide();
+                    buttonText.show();
+                    button.prop('disabled', false);
+                    button.removeClass('btn-info').addClass('btn-success');
+                    buttonText.text('Valid');
+                    setTimeout(function() {
+                        button.removeClass('btn-success').addClass('btn-info');
+                        buttonText.text('Validate');
+                    }, 3000);
+                },
+                error: function(xhr, status, error) {
+                    spinner.hide();
+                    buttonText.show();
+                    button.prop('disabled', false);
+                    button.removeClass('btn-info').addClass('btn-danger');
+                    buttonText.text('Invalid');
+                    setTimeout(function() {
+                        button.removeClass('btn-danger').addClass('btn-info');
+                        buttonText.text('Validate');
+                    }, 3000);
+                }
+            });
+        });
     </script>
 {% endblock %}