src/templates/auth/register.html

   1 {% extends "../base.html" %}
   2
   3 {% block title %}{{ _("Register") }}{% end block %}
   4
   5 {% block content %}
   6         <!--<div class="row justify-content-center my-5">
   7                 <div class="col col-md-6">
   8                         <h4 class="mb-4">{{ _("Register A New Account") }}</h4>
   9
  10                         <p class="lead">
  11                                 {{ _("Become a part of our community by registering an account!") }}
  12                         </p>
  13
  14                         <form id="form-register" action="" method="POST">
  15                                 {% raw xsrf_form_html() %}
  16
  17                                 <input type="hidden" name="next" value="{{ next or "" }}">
  18
  19                                 <div class="mb-3">
  20                                         <div class="input-group">
  21                                                 <span class="input-group-text">@</span>
  22                                                 <input type="text" class="form-control form-control-lg"
  23                                                         name="uid" placeholder="{{ _("Username") }}" required autofocus
  24                                                         pattern="[a-z_][a-z0-9_-]{3,31}">
  25                                         </div>
  26                                         <div id="uid-invalid" class="invalid-feedback invalid-feedback-uid">
  27                                                 {{ _("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") }}
  28                                         </div>
  29                                         <div id="uid-taken" class="invalid-feedback invalid-feedback-uid">
  30                                                 {{ _("This username is not available") }}
  31                                         </div>
  32                                 </div>
  33
  34                                 <div class="row mb-3">
  35                                         <div class="col-12 col-sm-6">
  36                                                 <label class="form-label">{{ _("First Name") }}</label>
  37
  38                                                 <input type="text" class="form-control" name="first_name"
  39                                                         placeholder="{{ _("First Name") }}" required>
  40                                         </div>
  41
  42                                         <div class="col-12 col-sm-6">
  43                                                 <label class="form-label">{{ _("Last Name") }}</label>
  44
  45                                                 <input type="text" class="form-control" name="last_name"
  46                                                         placeholder="{{ _("Last Name") }}" required>
  47                                         </div>
  48                                 </div>
  49
  50                                 <div class="mb-3">
  51                                         <input type="email" class="form-control"
  52                                                 name="email" placeholder="{{ _("Email Address") }}" required>
  53                                         <div id="email-invalid" class="invalid-feedback invalid-feedback-email">
  54                                                 {{ _("This email address is invalid") }}
  55                                         </div>
  56                                         <div id="email-blacklisted" class="invalid-feedback invalid-feedback-email">
  57                                                 {{ _("This email address cannot be used") }}
  58                                         </div>
  59                                         <div id="email-taken" class="invalid-feedback invalid-feedback-email">
  60                                                 {{ _("This email address is already in use") }}
  61                                         </div>
  62                                 </div>
  63
  64                                 <div class="d-grid">
  65                                         <button type="submit" class="is-primary" disabled>
  66                                                 {{ _("Register") }}
  67                                         </button>
  68                                 </div>
  69                         </form>
  70                 </div>
  71         </div>-->
  72
  73         <section class="section">
  74                 <div class="container">
  75                         <div class="columns is-centered">
  76                                 <div class="column is-one-third">
  77                                         <h1 class="title is-1">
  78                                                 IPFire<span class="has-text-primary">_</span>
  79                                         </h1>
  80                                         <h4 class="subtitle is-4">{{ _("Register A New Account") }}</h4>
  81
  82                                         <div class="block">
  83                                                 <p class="is-size-5">
  84                                                         {{ _("Become a part of our community by registering an account!") }}
  85                                                 </p>
  86                                         </div>
  87
  88                                         <form id="form-register" action="" method="POST">
  89                                                 {% raw xsrf_form_html() %}
  90
  91                                                 <input type="hidden" name="next" value="{{ next or "" }}">
  92
  93                                                         <div class="block">
  94                                                                 <div class="field">
  95                                                                         <div class="field-body">
  96                                                                                 <div class="field">
  97                                                                                         <p class="control has-icons-left">
  98                                                                                                 <span class="icon is-small is-left">
  99                                                                                                         <i class="fas fa-at"></i>
 100                                                                                                 </span>
 101                                                                                                 <input class="input" type="text" placeholder="{{ _("Username") }}" required autofocus
 102                                                                                                         pattern="[a-z_][a-z0-9_-]{3,31}">
 103                                                                                         </p>
 104                                                                                 </div>
 105                                                                         </div>
 106                                                                 </div>
 107
 108                                                                         <div id="uid-invalid" class="invalid-feedback invalid-feedback-uid">
 109                                                                                 {{ _("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") }}
 110                                                                         </div>
 111                                                                         <div id="uid-taken" class="invalid-feedback invalid-feedback-uid">
 112                                                                                 {{ _("This username is not available") }}
 113                                                                         </div>
 114                                                         </div>
 115
 116                                                         <div class="block">
 117                                                                 <div class="field">
 118                                                                         <div class="field-body">
 119                                                                                 <div class="field">
 120                                                                                         <p class="control has-icons-left">
 121                                                                                                 <span class="icon is-small is-left">
 122                                                                                                         <i class="fas fa-person"></i>
 123                                                                                                 </span>
 124                                                                                                 <input class="input" type="text" name="first_name" placeholder="{{ _("First Name") }}" required autofocus>
 125                                                                                         </p>
 126                                                                                         <p class="control has-icons-left">
 127                                                                                                 <span class="icon is-small is-left">
 128                                                                                                         <i class="fas fa-person"></i>
 129                                                                                                 </span>
 130                                                                                                 <input class="input" type="text" name="last_name" placeholder="{{ _("Last Name") }}" required autofocus>
 131                                                                                         </p>
 132                                                                                 </div>
 133                                                                         </div>
 134                                                                 </div>
 135                                                         </div>
 136
 137                                                         <div class="block">
 138                                                                 <div class="field">
 139                                                                         <div class="field-body">
 140                                                                                 <div class="field">
 141                                                                                         <p class="control has-icons-left">
 142                                                                                                 <span class="icon is-small is-left">
 143                                                                                                         <i class="fas fa-envelope"></i>
 144                                                                                                 </span>
 145                                                                                                 <input class="input" type="email"
 146                                                                                                         name="email" placeholder="{{ _("Email Address") }}" required>
 147                                                                                                 <div id="email-invalid" class="invalid-feedback invalid-feedback-email">
 148                                                                                                         {{ _("This email address is invalid") }}
 149                                                                                                 </div>
 150                                                                                                 <div id="email-blacklisted" class="invalid-feedback invalid-feedback-email">
 151                                                                                                         {{ _("This email address cannot be used") }}
 152                                                                                                 </div>
 153                                                                                                 <div id="email-taken" class="invalid-feedback invalid-feedback-email">
 154                                                                                                         {{ _("This email address is already in use") }}
 155                                                                                                 </div>
 156                                                                                         </p>
 157                                                                                 </div>
 158                                                                         </div>
 159                                                                 </div>
 160                                                         </div>
 161
 162                                                         <div class="field">
 163                                                                 <div class="control">
 164                                                                         <button class="button is-primary is-medium is-fullwidth">
 165                                                                                 {{ _("Register") }}
 166                                                                         </button>
 167                                                                 </div>
 168                                                         </div>
 169                                                 </form>
 170                                         </div>
 171                                 </div>
 172                         </div>
 173                 </div>
 174         </section>
 175 {% end block %}
 176
 177 {% block javascript %}
 178         <script>
 179                 var form = $("#form-register");
 180                 var submit = form.find(":submit");
 181
 182                 // Store the valid status
 183                 var valid = {
 184                         uid: false,
 185                         email: false,
 186                 };
 187
 188                 var check_uid;
 189                 var check_email;
 190
 191                 form.find("input[name=uid]").on("keyup", function(e) {
 192                         if (check_uid)
 193                                 clearTimeout(check_uid);
 194
 195                         var uid = $(this);
 196
 197                         check_uid = setTimeout(function() {
 198                                 $.get("/api/check/uid", { uid : uid.val() },
 199                                         function(data) {
 200                                                 // Reset all classes
 201                                                 uid.removeClass("is-success is-danger");
 202                                                 valid.uid = false;
 203
 204                                                 // Hide all feedback
 205                                                 $(".invalid-feedback-uid").hide();
 206
 207                                                 switch (data.result) {
 208                                                         case "ok":
 209                                                                 uid.addClass("is-success");
 210                                                                 valid.uid = true;
 211                                                                 break;
 212
 213                                                         case "invalid":
 214                                                                 uid.addClass("is-danger");
 215                                                                 $("#uid-invalid").show();
 216                                                                 break;
 217
 218                                                         case "taken":
 219                                                                 uid.addClass("is-danger");
 220                                                                 $("#uid-taken").show();
 221                                                                 break;
 222                                                 }
 223
 224                                                 form.trigger("change");
 225                                         }
 226                                 );
 227                         }, 250);
 228                 });
 229
 230                 form.find("input[name=email]").on("keyup", function(e) {
 231                         if (check_email)
 232                                 clearTimeout(check_email);
 233
 234                         var email = $(this);
 235
 236                         check_email = setTimeout(function() {
 237                                 $.get("/api/check/email", { email : email.val() },
 238                                         function(data) {
 239                                                 // Reset all classes
 240                                                 email.removeClass("is-success is-danger");
 241                                                 valid.email = false;
 242
 243                                                 // Hide all feedback
 244                                                 $(".invalid-feedback-email").hide();
 245
 246                                                 switch (data.result) {
 247                                                         case "ok":
 248                                                                 email.addClass("is-success");
 249                                                                 valid.email = true;
 250                                                                 break;
 251
 252                                                         case "invalid":
 253                                                                 email.addClass("is-danger");
 254                                                                 $("#email-invalid").show();
 255                                                                 break;
 256
 257                                                         case "blacklisted":
 258                                                                 email.addClass("is-danger");
 259                                                                 $("#email-blacklisted").show();
 260                                                                 break;
 261
 262                                                         case "taken":
 263                                                                 email.addClass("is-danger");
 264                                                                 $("#email-taken").show();
 265                                                                 break;
 266                                                 }
 267
 268                                                 form.trigger("change");
 269                                         }
 270                                 );
 271                         }, 250);
 272                 });
 273
 274                 form.on("change", function() {
 275                         var disabled = false;
 276
 277                         $.each(valid, function(field, status) {
 278                                 if (!status) {
 279                                         disabled = true;
 280                                         return false;
 281                                 }
 282                         });
 283
 284                         submit.prop("disabled", disabled);
 285                 });
 286         </script>
 287 {% end block %}