ti-link-shortener/templates/profile.j2

{% extends "bootstrap/base.html" %}
{% block title %}Technical Incompetence Link Shortener{% endblock %}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
{% endblock %}

{% block navbar %}
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
    <div class="navbar-brand">Technical Incompetence Link Shortener</div>
    <form class="form-inline ml-auto">
        {# <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="darkSwitch" />
            <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
        </div>
        <div class="navbar-text" style="margin-right: 20px; ">{{ user['userName'] }}</div> #}
        <a class="btn btn-primary" href="/logout" role="button">Logout</a>
    </form>
</nav>
{% endblock %}

{% block content %}
<div class="container" style="margin-top: 15px">
    <div id="success-alert" class="alert alert-success" role="alert" style="display: none;">
        This is a success alert—check it out!
    </div>
    <div id="error-alert" class="alert alert-danger" role="alert" style="display: none;">
        This is a danger alert—check it out!
    </div>
    <form>
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <label for="formGroupExampleInput4">URL</label>
                <input id="link-form" type="text" class="form-control" placeholder="https://example.com">
                <br>
                <button type="button" class="btn btn-primary" onclick="shortenUrl();">Shorten Link</button>
                <br>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
function shortenUrl() {
    url = $('#link-form').val();

    if (url.trim().length === 0) {
        showError('URL is required');
        return false;
    }

    $.ajax({
        url: '/shorten',
        method: 'POST',
        data: { "url": url },
        success: function(data) {
            if (data !== 'Error')
                showSuccess(data);
            else
                showError('URL cannot be empty');
        }
    });
}

function showError(error) {
    hideSuccess();
    $('#error-alert').text(error);
    $('#error-alert').show();
}

function showSuccess(message) {
    hideError();
    $('#success-alert').html(message);
    $('#success-alert').show();
}

function hideError(error) {
    $('#error-alert').hide();
}

function hideSuccess(error) {
    $('#success-alert').hide();
}
</script>
{% endblock %}