Tela de cadastro preliminar

app/static/app/css/register-new-account.css

@@ -0,0 +1,138 @@
+* {
+  min-width: 0;
+}
+
+label {
+  font-size: 14px;
+}
+
+p {
+  font-family: "Montserrat Regular";
+  font-size: 13px;
+  color: #333;
+}
+
+footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.white-canvas {
+  width: 400px;
+  height: 800px;
+  background-color: rgba(255, 255, 255, 0.85);
+}
+
+#main-logo {
+  width: 150px;
+  height: auto;
+  padding: 20px;
+}
+
+.top-buffer {
+  margin-top: 60px;
+}
+
+.rounded-corners {
+  border-radius: 25px;
+}
+
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 20px;
+  gap: 10px;
+}
+
+form input {
+  width: 100%;
+  border: none;
+  padding: 15px;
+}
+
+form p {
+  text-align: center;
+}
+
+form button {
+  width: 100%;
+  background-color: #009f31;
+  border: none;
+  padding: 15px;
+  color: white;
+  font-weight: bold;
+}
+
+form button:hover {
+  background-color: #017424;
+}
+
+.login-button,
+.login-button:hover,
+.login-button:focus {
+  color: #464749;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.5s;
+}
+
+.login-button:hover {
+  transform: scale(0.95);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  width: 100%;
+}
+
+#confirmation-message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+#confirmation-message h1 {
+  margin: 50px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 30px;
+  color: #009f31;
+}
+
+#confirmation-message p {
+  margin-bottom: 100px;
+  text-align: center;
+  color: #464749;
+  font-weight: bold;
+}
+
+.invalid {
+  border: 3px solid red;
+}
+
+@media screen and (max-width: 410px) {
+  .white-canvas {
+    width: 90%;
+  }
+  #confirmation-message h1 {
+    font-size: 20px;
+    margin: 50px 0;
+  }
+}
+
+/*# sourceMappingURL=register-new-account.css.map */

app/static/app/css/register-new-account.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["register-new-account.scss"],"names":[],"mappings":"AAKA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA,SA9DqB;;;AAiEvB;EACE;;;AAGF;EACE;EACA,kBA1EM;EA2EN;EACA,SAzEqB;EA0ErB;EACA;;;AAGF;EACE,kBAjFa;;;AAoFf;AAAA;AAAA;EAGE,OAtFK;EAuFL;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA,OAtHM;;;AAyHR;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;IACA","file":"register-new-account.css"}

app/static/app/css/register-new-account.scss

@@ -0,0 +1,142 @@
+$green: #009f31;
+$green-darker: #017424;
+$gray: #464749;
+$button-input-padding: 15px;
+
+* {
+  min-width: 0;
+}
+
+label {
+  font-size: 14px;
+}
+
+p {
+  font-family: "Montserrat Regular";
+  font-size: 13px;
+  color: #333;
+}
+
+footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.white-canvas {
+  width: 400px;
+  height: 800px;
+  background-color: rgba(255, 255, 255, 0.85);
+}
+
+#main-logo {
+  width: 150px;
+  height: auto;
+  padding: 20px;
+}
+
+.top-buffer {
+  margin-top: 60px;
+}
+
+.rounded-corners {
+  border-radius: 25px;
+}
+
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 20px;
+  gap: 10px;
+}
+
+form input {
+  width: 100%;
+  border: none;
+  padding: $button-input-padding;
+}
+
+form p {
+  text-align: center;
+}
+
+form button {
+  width: 100%;
+  background-color: $green;
+  border: none;
+  padding: $button-input-padding;
+  color: white;
+  font-weight: bold;
+}
+
+form button:hover {
+  background-color: $green-darker;
+}
+
+.login-button,
+.login-button:hover,
+.login-button:focus {
+  color: $gray;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.5s;
+}
+
+.login-button:hover {
+  transform: scale(0.95);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  width: 100%;
+}
+
+#confirmation-message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+#confirmation-message h1 {
+  margin: 50px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 30px;
+  color: $green;
+}
+
+#confirmation-message p {
+  margin-bottom: 100px;
+  text-align: center;
+  color: #464749;
+  font-weight: bold;
+}
+
+.invalid {
+  border: 3px solid red;
+}
+
+@media screen and (max-width: 410px) {
+  .white-canvas {
+    width: 90%;
+  }
+
+  #confirmation-message h1 {
+    font-size: 20px;
+    margin: 50px 0;
+  }
+}

app/templates/app/registration/new_account.html

@@ -0,0 +1,72 @@
+{% extends 'registration/registration_base.html' %}
+{% load static %}
+
+{% block registration_header %}
+<link rel="stylesheet" type="text/css" href="{% static 'app/css/register-new-account.css' %}">
+{% endblock %}
+
+{% block registration_content %}
+<div id="new-account">
+  <form id="register-form" action="#" method="POST">
+    <div class="field">
+      <label for="nome">Nome Completo *</label>
+      <input type="text" id="nome" class="rounded-corners" />
+    </div>
+    <div class="field">
+      <label for="email">E-mail *</label>
+      <input type="email" id="email" class="rounded-corners" />
+    </div>
+    <div class="field">
+      <label for="senha">Senha *</label>
+      <input type="password" name="senha" id="senha" class="rounded-corners" />
+    </div>
+    <div class="field">
+      <label for="repetir-senha">Repetir Senha *</label>
+      <input
+        type="password"
+        name="repetir-senha"
+        id="repetir-senha"
+        class="rounded-corners"
+      />
+    </div>
+    <p>
+      Minimo de 8 caracteres, contendo um número, uma letra maiúscula e uma
+      letra minúscula.
+    </p>
+    <button type="submit" class="rounded-corners">Cadastrar</button>
+    <a href="{% url 'login' %}" class="login-button">Já tenho conta</a>
+  </form>
+  <div id="confirmation-message" style="display: none">
+    <h1>Cadastro foi realizado com sucesso!</h1>
+    <p>A equipe liberará o acesso em breve.</p>
+  </div>
+</div>
+
+<script>
+  $(function () {
+    $("#register-form").addEventListener("submit", function (event) {
+      event.preventDefault();
+      if (validateForm()) {
+        $("#register-form").style.display = "none";
+        $("#confirmation-message").style.display = "block";
+      }
+    });
+
+    function validateForm() {
+      var nome = document.getElementById("nome").value;
+      var email = document.getElementById("email").value;
+      var senha = document.getElementById("senha").value;
+      var repetirSenha = document.getElementById("repetir-senha").value;
+
+      if (nome === "" || email === "" || senha === "" || repetirSenha === "") {
+        window.alert("Preencha todos os campos!");
+        return false;
+      } else if (senha != repetirSenha) {
+        window.alert("As senhas devem ser iguais!");
+        return false;
+      }
+      return true;
+    }
+  });
+</script>
+{% endblock %}

app/urls.py

@@ -23,6 +23,7 @@ urlpatterns = [
     url(r'^$', app_views.index, name='index'),
     url(r'^welcome/$', app_views.welcome, name='welcome'),
     url(r'^dashboard/$', app_views.dashboard, name='dashboard'),
+    url(r'^register/$', app_views.registration, name="new_account_registration"),
     url(r'^map/project/(?P<project_pk>[^/.]+)/task/(?P<task_pk>[^/.]+)/$', app_views.map, name='map'),
     url(r'^map/project/(?P<project_pk>[^/.]+)/$', app_views.map, name='map'),
     url(r'^3d/project/(?P<project_pk>[^/.]+)/task/(?P<task_pk>[^/.]+)/$', app_views.model_display, name='model_display'),

app/views/app.py

@@ -151,6 +151,9 @@ def welcome(request):
                       'firstuserform': fuf
                   })
 
+def registration(request):
+    return render(request, 'app/registration/new_account.html')
+
 
 def handler404(request, exception):
     return render(request, '404.html', status=404)