Implement register UI

pradoslaw · Oct 24, 2024 · 3015bca · 3015bca
1 parent 3246916
commit 3015bca
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 42 deletions.
diff --git a/v3/src/Controller.php b/v3/src/Controller.php
@@ -1,31 +1,31 @@
 <?php
 namespace V3;
 
+use V3\Feature\Register\Register;
+use V3\Feature\Register\RegisterError;
+
 class Controller
 {
     public function setupEndpoints(): void
     {
         Peripheral::addGetRoute('/v3/register', function () {
-            if (Peripheral::httpRequestQuery('secret') !== 'v3') {
-                abort(404);
-            }
-
-            return Peripheral::renderTwig('view', [
-                'stylesheetUrl' => Peripheral::resourceUrl('css/v3.css'),
-                'logoUrl'       => '/img/v3/logo.svg',
+            return Web\Register::registerView([
+                RegisterError::UsernameTaken,
+                RegisterError::EmailTaken,
+                RegisterError::PasswordNotSecure,
+                RegisterError::PasswordNotRepeated,
+                RegisterError::TermsNotAccepted,
             ]);
         });
-
-        Peripheral::addPostRoute('/v3/createAccount', function () {
-            $requestModel = new RequestModel(
+        Peripheral::addPostRoute('/v3/register', function () {
+            $register = new Register(new Peripheral());
+            return Web\Register::registerView($register->register(
                 Peripheral::httpRequestField('registerLogin'),
                 Peripheral::httpRequestField('registerPassword'),
+                Peripheral::httpRequestField('registerPasswordRepeat'),
                 Peripheral::httpRequestField('registerEmail'),
-            );
-
-            return Peripheral::renderTwig('view', [
-                'stylesheetUrl' => Peripheral::resourceUrl('css/v3.css'),
-            ]);
+                Peripheral::httpRequestField('registerTermsAccepted'),
+            ));
         });
     }
 }
diff --git a/v3/src/Feature/Register/Register.php b/v3/src/Feature/Register/Register.php
@@ -0,0 +1,42 @@
+<?php
+namespace V3\Feature\Register;
+
+readonly class Register
+{
+    public function __construct(private RegisterGate $gate)
+    {
+    }
+
+    /**
+     * @return RegisterError[]
+     */
+    public function register(
+        string $login,
+        string $password,
+        string $passwordRepeat,
+        string $email,
+        bool   $termsAccepted,
+    ): array
+    {
+        $errors = [];
+        if (!$this->gate->isUsernameAvailable($login)) {
+            $errors[] = RegisterError::UsernameTaken;
+        }
+        if (!$this->gate->isEmailAvailable($password)) {
+            $errors[] = RegisterError::EmailTaken;
+        }
+        if (\mb_strLen($password) < 3) {
+            $errors[] = RegisterError::PasswordNotSecure;
+        }
+        if ($password !== $passwordRepeat) {
+            $errors[] = RegisterError::PasswordNotRepeated;
+        }
+        if (!$termsAccepted) {
+            $errors[] = RegisterError::TermsNotAccepted;
+        }
+        if (empty($errors)) {
+            $this->gate->createUserAndLogin($login, $email, $password);
+        }
+        return $errors;
+    }
+}
diff --git a/v3/src/Feature/Register/RegisterError.php b/v3/src/Feature/Register/RegisterError.php
@@ -0,0 +1,11 @@
+<?php
+namespace V3\Feature\Register;
+
+enum RegisterError
+{
+    case UsernameTaken;
+    case EmailTaken;
+    case PasswordNotSecure;
+    case PasswordNotRepeated;
+    case TermsNotAccepted;
+}
diff --git a/v3/src/Feature/Register/RegisterGate.php b/v3/src/Feature/Register/RegisterGate.php
@@ -0,0 +1,11 @@
+<?php
+namespace V3\Feature\Register;
+
+interface RegisterGate
+{
+    public function isUsernameAvailable(string $login): bool;
+
+    public function isEmailAvailable(string $password): bool;
+
+    public function createUserAndLogin(string $login, string $email, string $password): void;
+}
diff --git a/v3/src/Peripheral.php b/v3/src/Peripheral.php
@@ -1,10 +1,13 @@
 <?php
 namespace V3;
 
+use Coyote\User;
 use Illuminate\Support\Facades\Request;
 use Illuminate\Support\Facades\Route;
+use TwigBridge;
+use V3\Feature\Register\RegisterGate;
 
-class Peripheral
+class Peripheral implements RegisterGate
 {
     public static function addGetRoute(string $string, callable $handler): void
     {
@@ -18,6 +21,9 @@ public static function addPostRoute(string $string, callable $handler): void
 
     public static function renderTwig(string $templateName, array $data): string
     {
+        /** @var TwigBridge\Bridge $twig */
+        $twig = app('twig');
+        $twig->enableStrictVariables();
         return view("v3.$templateName", $data)->render();
     }
 
@@ -39,4 +45,18 @@ public static function httpRequestQuery(string $string): ?string
     {
         return Request::query($string);
     }
+
+    public function isUsernameAvailable(string $login): bool
+    {
+        return !User::query()->where('name', '=', $login)->exists();
+    }
+
+    public function isEmailAvailable(string $password): bool
+    {
+        return !User::query()->where('email', '=', $password)->exists();
+    }
+
+    public function createUserAndLogin(string $login, string $email, string $password): void
+    {
+    }
 }
diff --git a/v3/src/Web/Register.php b/v3/src/Web/Register.php
@@ -0,0 +1,22 @@
+<?php
+namespace V3\Web;
+
+use V3\Feature\Register\RegisterError;
+use V3\Peripheral;
+
+class Register
+{
+    public static function registerView(array $errors): string
+    {
+        return Peripheral::renderTwig('view', [
+            'stylesheetUrl'                    => Peripheral::resourceUrl('css/v3.css'),
+            'logoUrl'                          => '/img/v3/logo.svg',
+            'postSubmitUrl'                    => '/v3/register',
+            'registerErrorUsernameTaken'       => \in_array(RegisterError::UsernameTaken, $errors),
+            'registerErrorEmailTaken'          => \in_array(RegisterError::EmailTaken, $errors),
+            'registerErrorPasswordNotSecure'   => \in_array(RegisterError::PasswordNotSecure, $errors),
+            'registerErrorPasswordNotRepeated' => \in_array(RegisterError::PasswordNotRepeated, $errors),
+            'registerErrorTermsNotAccepted'    => \in_array(RegisterError::TermsNotAccepted, $errors),
+        ]);
+    }
+}
diff --git a/v3/src/Web/view/v3/style.scss b/v3/src/Web/view/v3/style.scss
@@ -13,6 +13,15 @@ $color-neutral-0: #ffffff;
 
 $color-red-500: #f43f5e;
 
+@mixin input-text {
+  input:not([type]),
+  input[type=text],
+  input[type=password],
+  {
+    @content
+  }
+}
+
 .card {
   width: 424px;
   padding: 24px;
@@ -92,29 +101,39 @@ $color-red-500: #f43f5e;
     @include box.mb(1);
   }
 
-  input {
-    &:not([type]),
-    &[type=text],
-    &[type=password],
-    {
-      width: 100%;
-      border: 1px solid $color-neutral-100;
-      @include box.padding(2.5);
-      @include box.marginY(1);
-      @include box.rounded;
-    }
-  }
-
-  .error-message {
-    color: $color-red-500;
-    font-size: 12px;
+  @include input-text {
+    width: 100%;
+    border: 1px solid $color-neutral-100;
+    @include box.padding(2.5);
+    @include box.marginY(1);
+    @include box.rounded;
   }
 
   small p {
     color: $color-neutral-600;
     font-size: 12px;
     @include box.marginY(1);
   }
+
+  .error-message {
+    display: none;
+  }
+
+  &.input-group-error {
+    .error-message {
+      display: block;
+      color: $color-red-500;
+      font-size: 12px;
+    }
+
+    label {
+      color: $color-red-500;
+    }
+
+    @include input-text {
+      border: 1px solid $color-red-500;
+    }
+  }
 }
 
 .input-group-checkbox {

diff --git a/v3/src/Web/view/v3/view.twig b/v3/src/Web/view/v3/view.twig
@@ -4,19 +4,17 @@
   <link href="//fonts.googleapis.com/css?family=Inter:400,500,700" rel="stylesheet" type="text/css">
 </head>
 <body class="presence-layout">
-
 <div class="flex justify-center align-center h-100">
-  <div>
+  <form action="{{ postSubmitUrl }}" method="POST">
     <div class="card">
       <img class="card-logo" src="{{ logoUrl }}"/>
       <p class="card-heading">
         Dołącz do największej społeczności programistycznej w Polsce
       </p>
 
-      <div class="input-group">
+      <div class="input-group {{ registerErrorUsernameTaken ? 'input-group-error' }}">
         <label>Nazwa użytkownika</label>
         <input placeholder="Twoja nazwa">
-
         <p class="error-message">
           Konto o podanej nazwie użytkownika już istnieje
         </p>
@@ -30,25 +28,34 @@
     <div class="card">
       <img class="card-logo" src="{{ logoUrl }}"/>
 
-      <div class="input-group">
+      <div class="input-group {{ registerErrorPasswordNotSecure ? 'input-group-error' }}">
         <label>Hasło</label>
         <input type="password" placeholder="Stwórz hasło">
+        <p class="error-message">
+          Podane hasło nie jest wystarczająco bezpieczne.
+        </p>
         <small>
           <p>
             Hasło powinno zawierać conajmniej 8 znaków, w tym przynajmniej jedną wielką literę, cyfrę oraz znak specjalny.
           </p>
         </small>
       </div>
-      <div class="input-group">
+      <div class="input-group {{ registerErrorPasswordNotRepeated ? 'input-group-error' }}">
         <label>Powtórz hasło</label>
-        <input type="password" placeholder="Stwórz hasło">
+        <input type="password" placeholder="Powtórz hasło">
+        <p class="error-message">
+          Podane hasłą nie pasują do siebie.
+        </p>
       </div>
-      <div class="input-group">
+      <div class="input-group {{ registerErrorEmailTaken ? 'input-group-error' }}">
         <label>Adres e-mail</label>
         <input placeholder="Twój adres e-mail">
+        <p class="error-message">
+          Ten adres e-mail jest już przypisany do konta.
+        </p>
       </div>
       <div class="narrow-section">
-        <div class="input-group input-group-checkbox">
+        <div class="input-group input-group-checkbox {{ registerErrorTermsNotAccepted ? 'input-group-error' }}">
           <label>
             <input type="checkbox">
             Akceptuję regulamin oraz politykę prywatności.
@@ -74,7 +81,7 @@
         Utwórz konto
       </button>
     </div>
-  </div>
+  </form>
 </div>
 </body>
 </html>