<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="~{fragments/header :: header-css}"/>
</head>
<body>

<div th:replace="~{fragments/header :: header}"/>

<div class="container">

    <br/><br/>
    <fieldset>
        <legend th:text="#{register.title}">Please Sign Up</legend>
        <form class="form-horizontal" action="#" th:action="@{/register.mvc}" th:object="${userForm}"
              method='POST'>

            <div class="form-group" th:classappend="${#fields.hasErrors('username')}? 'has-error'">
                <label for="username" class="col-sm-2 control-label" th:text="#{username}">Username</label>
                <div class="col-sm-4">
                    <input autofocus="dummy_for_thymeleaf_parser" type="text" class="form-control"
                           th:field="*{username}"
                           id="username" placeholder="Username" name='username'/>
                </div>
                <span th:if="${#fields.hasErrors('username')}" th:errors="*{username}">Username error</span>
            </div>
            <div class="form-group" th:classappend="${#fields.hasErrors('password')}? 'has-error'">
                <label for="password" class="col-sm-2 control-label" th:text="#{password}">Password</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control" id="password" placeholder="Password"
                           name='password' th:value="*{password}"/>
                </div>
                <span th:if="${#fields.hasErrors('password')}" th:errors="*{password}">Password error</span>
            </div>
            <div class="form-group" th:classappend="${#fields.hasErrors('matchingPassword')}? 'has-error'">
                <label for="matchingPassword" class="col-sm-2 control-label" th:text="#{password.confirm}">Confirm
                    password</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control" id="matchingPassword" placeholder="Password"
                           name='matchingPassword' th:value="*{matchingPassword}"/>
                </div>
                <span th:if="${#fields.hasErrors('matchingPassword')}"
                      th:errors="*{matchingPassword}">Password error</span>

            </div>

            <div class="form-group" th:classappend="${#fields.hasErrors('agree')}? 'has-error'">
                <label class="col-sm-2 control-label">Terms of use</label>
                <div class="col-sm-6">
                    <div style="border: 1px solid #e5e5e5; height: 200px; overflow: auto; padding: 10px;">
                        <p>
                            While running this program your machine will be extremely
                            vulnerable to attack. You should disconnect from the Internet while using
                            this program. WebGoat's default configuration binds to localhost to minimize
                            the exposure.
                        </p>
                        <p>
                            This program is for educational purposes only. If you attempt
                            these techniques without authorization, you are very likely to get caught. If
                            you are caught engaging in unauthorized hacking, most companies will fire you.
                            Claiming that you were doing security research will not work as that is the
                            first thing that all hackers claim.
                        </p>
                    </div>
                </div>
            </div>

            <div class="form-group" th:classappend="${#fields.hasErrors('agree')}? 'has-error'">
                <div class="col-sm-6 col-sm-offset-2">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="agree" value="agree"/>Agree with the terms and
                            conditions
                        </label>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-6">
                    <button type="submit" class="btn btn-primary" th:text="#{sign.up}">Sign up</button>
                </div>
            </div>
        </form>
    </fieldset>

</div>
</body>
</html>
