applied new design to register.html

diff --git a/src/templates/auth/register.html b/src/templates/auth/register.html
index 86842060384af82921b88d83243e3fca9de913fb..a96868e75a90dd8827113c9f860bb9acff92f901 100644 (file)
--- a/src/templates/auth/register.html
+++ b/src/templates/auth/register.html
@@ -3,7 +3,7 @@
 {% block title %}{{ _("Register") }}{% end block %}
 
 {% block content %}
-       <div class="row justify-content-center my-5">
+       <!--<div class="row justify-content-center my-5">
                <div class="col col-md-6">
                        <h4 class="mb-4">{{ _("Register A New Account") }}</h4>
 
@@ -62,13 +62,91 @@
                                </div>
 
                                <div class="d-grid">
-                                       <button type="submit" class="btn btn-primary" disabled>
+                                       <button type="submit" class="is-primary" disabled>
                                                {{ _("Register") }}
                                        </button>
                                </div>
                        </form>
                </div>
-       </div>
+       </div>-->
+
+       <section class="section">
+               <div class="container">
+                       <div class="columns is-centered">
+                               <div class="column is-one-third">
+                                       <h1 class="title is-1">
+                                               IPFire<span class="has-text-primary">_</span>
+                                       </h1>
+                                       <h4 class="subtitle is-4">{{ _("Register A New Account") }}</h4>
+
+                                       <div class="block">
+                                               <p class="is-size-5">
+                                                       {{ _("Become a part of our community by registering an account!") }}
+                                               </p>
+                                       </div>
+
+                                       <form id="form-register" action="" method="POST">
+                                               {% raw xsrf_form_html() %}
+
+                                               <input type="hidden" name="next" value="{{ next or "" }}">
+
+                                                       <div class="block">
+                                                               <div class="field">
+                                                                       <div class="field-body">
+                                                                               <div class="field">
+                                                                                       <p class="control has-icons-left">
+                                                                                               <span class="icon is-small is-left">
+                                                                                                       <i class="fas fa-at"></i>
+                                                                                               </span>
+                                                                                               <input class="input" type="text" placeholder="{{ _("Username") }}" required autofocus
+                                                                                                       pattern="[a-z_][a-z0-9_-]{3,31}">
+                                                                                       </p>
+                                                                               </div>
+                                                                       </div>
+                                                               </div>
+
+                                                                       <div id="uid-invalid" class="invalid-feedback invalid-feedback-uid">
+                                                                               {{ _("Please choose a username in UNIX format with at least four characters, starting with a lowercase letter, followed by only lowercase letters, digits, dash and underscore") }}
+                                                                       </div>
+                                                                       <div id="uid-taken" class="invalid-feedback invalid-feedback-uid">
+                                                                               {{ _("This username is not available") }}
+                                                                       </div>
+                                                       </div>
+
+                                                       <div class="block">
+                                                               <div class="field">
+                                                                       <div class="field-body">
+                                                                               <div class="field">
+                                                                                       <p class="control has-icons-left">
+                                                                                               <span class="icon is-small is-left">
+                                                                                                       <i class="fas fa-person"></i>
+                                                                                               </span>
+                                                                                               <input class="input" type="text" name="first_name" placeholder="{{ _("First Name") }}" required autofocus>
+                                                                                       </p>
+                                                                                       <p class="control has-icons-left">
+                                                                                               <span class="icon is-small is-left">
+                                                                                                       <i class="fas fa-person"></i>
+                                                                                               </span>
+                                                                                               <input class="input" type="text" name="last_name" placeholder="{{ _("Last Name") }}" required autofocus>
+                                                                                       </p>
+                                                                               </div>
+                                                                       </div>
+                                                               </div>
+                                                       </div>
+
+                                                       <div class="field">
+                                                               <div class="control">
+                                                                       <button class="button is-primary is-medium is-fullwidth">
+                                                                               {{ _("Register") }}
+                                                                       </button>
+                                                               </div>
+                                                       </div>
+                                               </form>
+                                       </div>
+                               </div>
+                       </div>
+               </div>
+       </section>
 {% end block %}
 
 {% block javascript %}
@@ -92,10 +170,10 @@
                        var uid = $(this);
 
                        check_uid = setTimeout(function() {
-                               $.get("/api/check/uid", { uid : uid.val() },
+                               $.get("/api/check/uid", { uid : uid.val() },
                                        function(data) {
                                                // Reset all classes
-                                               uid.removeClass("is-valid is-invalid");
+                                               uid.removeClass("is-success is-danger");
                                                valid.uid = false;
 
                                                // Hide all feedback
@@ -103,17 +181,17 @@
 
                                                switch (data.result) {
                                                        case "ok":
-                                                               uid.addClass("is-valid");
+                                                               uid.addClass("is-success");
                                                                valid.uid = true;
                                                                break;
 
                                                        case "invalid":
-                                                               uid.addClass("is-invalid");
+                                                               uid.addClass("is-danger");
                                                                $("#uid-invalid").show();
                                                                break;
 
                                                        case "taken":
-                                                               uid.addClass("is-invalid");
+                                                               uid.addClass("is-danger");
                                                                $("#uid-taken").show();
                                                                break;
                                                }
@@ -134,7 +212,7 @@
                                $.get("/api/check/email", { email : email.val() },
                                        function(data) {
                                                // Reset all classes
-                                               email.removeClass("is-valid is-invalid");
+                                               email.removeClass("is-success is-danger");
                                                valid.email = false;
 
                                                // Hide all feedback
@@ -142,22 +220,22 @@
 
                                                switch (data.result) {
                                                        case "ok":
-                                                               email.addClass("is-valid");
+                                                               email.addClass("is-success");
                                                                valid.email = true;
                                                                break;
 
                                                        case "invalid":
-                                                               email.addClass("is-invalid");
+                                                               email.addClass("is-danger");
                                                                $("#email-invalid").show();
                                                                break;
 
                                                        case "blacklisted":
-                                                               email.addClass("is-invalid");
+                                                               email.addClass("is-danger");
                                                                $("#email-blacklisted").show();
                                                                break;
 
                                                        case "taken":
-                                                               email.addClass("is-invalid");
+                                                               email.addClass("is-danger");
                                                                $("#email-taken").show();
                                                                break;
                                                }
@@ -181,4 +259,4 @@
                        submit.prop("disabled", disabled);
                });
        </script>
-{% end block %}
+{% end block %}
\ No newline at end of file