Untitled

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Videos</title>

    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
          integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
          crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" th:href="@{/css/profile.css}"/>
</head>

<body>

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand custom" href="/">
        <img th:src="@{/images/logo.jpeg}" width="30" height="30" alt="" class="d-inline-block align-top">
        Obo-Link
    </a>
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="/profile">Profile</a>
        </li>
    </ul>
    <div class="justify-content-between">
        <button onclick="" id="logout" type="button" class="btn btn-outline-light">Logout</button>
    </div>
</nav>

<br/>

<div class="container">

    <h1> Profile </h1>

    <br/>


    <!--
    <form method="post" action="XX">
        <div class="form-row align-items-center">
            <div class="col-auto">
                <label th:if="${#fields.hasErrors('username')}" th:errors="*{username}" for="username" class="sr-only">Username : </label>
                <input type="text" th:field="*{firstName}" class="form-control mb-2" id="username"
                       placeholder="Username">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary mb-2">Update</button>
            </div>
        </div>
    </form>

    <form method="post" action="XX">
        <div class="form-row align-items-center">
            <div class="col-auto">
                <label th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}" for="firstName" class="sr-only">Firstname : </label>
                <input type="text" class="form-control mb-2" id="firstName" placeholder="First name">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary mb-2">Update</button>
            </div>
        </div>
    </form>

    <form method="post" action="XX">
        <div class="form-row align-items-center">
            <div class="col-auto">
                <label th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}" for="lastName" class="sr-only">Last name : </label>
                <input type="text" class="form-control mb-2" id="lastName" placeholder="Last name">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary mb-2">Update</button>
            </div>
        </div>
    </form>

    <form method="post" action="XX">
        <div class="form-row align-items-center">
            <div class="col-auto">
                <label th:if="${#fields.hasErrors('email')}" th:errors="*{email}" for="email" class="sr-only">Email : </label>
                <input type="email" class="form-control mb-2" id="email" placeholder="Email">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary mb-2">Update</button>
            </div>
        </div>
    </form>

    <form method="post" action="XX">
        <div class="form-row align-items-center">
            <div class="col-auto">
                <label th:if="${#fields.hasErrors('password')}" th:errors="*{password}" for="password" class="sr-only">Password : </label>
                <input type="password" class="form-control mb-2" id="password" placeholder="Password">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary mb-2">Update</button>
            </div>
        </div>
    </form>
    -->

    <div class="row">
        <div class="col-6 offset-3">
            <form autocomplete="off" th:object="${user}" th:action="@{/profile/update}"
                  method="post" class="form-horizontal"
                  role="form">
                <h2>Profile modification</h2>
                <div class="form-group">
                    <label th:if="${#fields.hasErrors('username')}" th:errors="*{username}"
                           class="validation-message"></label>
                    <input type="text" th:field="*{username}" placeholder="Username"
                           class="form-control"/>
                </div>
                <div class="form-group">
                    <label th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}"
                           class="validation-message"></label>
                    <input type="text" th:field="*{firstName}" placeholder="First Name"
                           class="form-control"/>
                </div>
                <div class="form-group">
                    <label th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}"
                           class="validation-message"></label>
                    <input type="text" th:field="*{lastName}"
                           placeholder="Last Name" class="form-control"/>
                </div>
                <div class="form-group">
                    <label th:if="${#fields.hasErrors('email')}" th:errors="*{email}"
                           class="validation-message"></label>
                    <input type="email" th:field="*{email}" placeholder="Email"
                           class="form-control"/>
                </div>
                <div class="form-group">
                    <label th:if="${#fields.hasErrors('password')}" th:errors="*{password}"
                           class="validation-message"></label>
                    <input type="password" th:field="*{password}" placeholder="Password"
                           class="form-control"/>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block">Update</button>
                </div>

                <span th:utext="${successMessage}"></span>
            </form>
        </div>
        <div class="col-6 offset-3">
            <br/>

            <h2> Unsubscribe </h2>

            <br/>

            <button onclick="" id="delete" type="button" class="btn btn-danger">Delete account</button>

        </div>


    </div>

    <br/>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
        integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
        integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
        crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.js"
        integrity="sha256-tcqPYPyxU+Fsv5sVdvnxLYJ7Jq9wWpi4twZbtZ0ubY8="
        crossorigin="anonymous"></script>

<script>
    document.getElementById("delete").onclick = function () {
        var r = confirm("Do you want to delete your account? This cannot be undone!");
        if (r === true) {
            location.href = "/profile/delete";
        }
    };

    document.getElementById("logout").onclick = function () {
        location.href = "/logout";
    };
</script>

</body>

</html>