add infos for registered and failed

Author: d0peCode

public/css/css/output.css

@@ -101,6 +101,10 @@ a {
     margin: 0 auto;
     display: flex;
     align-items: center; }
+    @media only screen and (max-width: 768px) {
+      .topbar__container {
+        width: 100%;
+        padding: 0 1rem; } }
   .topbar__buttons {
     display: flex;
     flex: 1;

public/css/scss/components/_topbar.scss

@@ -9,6 +9,11 @@
         margin: 0 auto;
         display: flex;
         align-items: center;
+
+        @media only screen and (max-width: 768px) {
+            width: 100%;
+            padding: 0 1rem;
+        }
     }
 
     &__buttons {

public/html/directives/modalRegister.html

@@ -1,25 +1,31 @@
 <div aria-label="dialog" class="modal__container">
     <div class="modal__header">
-        <h3 class="heading-tertiary">Zarejestruj</h3>
+        <h3 class="heading-tertiary">Register</h3>
     </div>
     <div class="modal__body">
-        <form id="registerForm" data-ng-submit="register()">
+        <form id="registerForm" data-ng-submit="register()" data-ng-if="!success">
             <div class="form-group">
                 <label for="email">E-Mail:</label>
-                <input type="email" placeholder="[email protected]" class="form-control" id="email" data-ng-model="email">
+                <input type="email" placeholder="[email protected]" class="form-control" id="email" data-ng-model="$parent.email">
             </div>
             <div class="form-group">
-                <label for="password">Hasło:</label>
-                <input type="password" placeholder="******" class="form-control" id="password" data-ng-model="password">
+                <label for="password">Password:</label>
+                <input type="password" placeholder="******" class="form-control" id="password" data-ng-model="$parent.password">
             </div>
             <div class="form-group">
-                <label for="password_confirm">Potwierdź hasło:</label>
-                <input type="password" placeholder="******" class="form-control" id="password_confirm" data-ng-model="passwordConf">
+                <label for="password_confirm">Repeat password:</label>
+                <input type="password" placeholder="******" class="form-control" id="password_confirm" data-ng-model="$parent.passwordConf">
             </div>
+            <p data-ng-if="$parent.errorConflict">Email already exists in our database. Go to login modal and recover your account.</p>
+            <p data-ng-if="$parent.errorPass">Email must contain "@" and password must contain at least 6 signs.</p>
         </form>
+        <div data-ng-if="success">
+            <p class="success">Successfully registered.</p>
+            <p class="help-block">Go to your email account to activate account.</p>
+        </div>
     </div>
     <div class="modal__footer">
-        <button type="submit" class="button" form="registerForm">Zarejestruj</button>
-        <button type="button" class="button" data-ng-click="hideModal()">Zamknij</button>
+        <button type="submit" class="button" form="registerForm">Register</button>
+        <button type="button" class="button" data-ng-click="hideModal()">Close</button>
     </div>
 </div>

public/js/directives/modalRegister.js

@@ -15,17 +15,25 @@
                 $scope.email = '';
                 $scope.password = '';
                 $scope.passwordConf = '';
+                $scope.success = false;
+                $scope.errorPass = false;
+                $scope.errorConflict = false;
+
                 $scope.hideModal = () => stateService.set('modalRegister', false);
                 $scope.register = async () => {
                     if($scope.password !== $scope.passwordConf) {
                         alert('Passwords are not equal!')
                     } else {
-                        const params = {
-                            email: $scope.email,
-                            password: $scope.password
-                        };
+                        const params = { email: $scope.email, password: $scope.password };
                         const response = await registerService.register(params);
-                        console.log(response);
+                        if(response && response.status === 201) {
+                            $scope.success = true;
+                        } else if(response && response.status === 409) {
+                            $scope.errorConflict = true;
+                        } else {
+                            $scope.errorPass = true;
+                        }
+                        $scope.$apply();
                     }
                 }
             }

public/js/services/registerService.js

@@ -15,8 +15,8 @@
                 method: 'POST',
                 data: params
             })
-            .then(response => { return response.data })
-            .catch(err => { console.log(err) })
+            .then(response => { return response })
+            .catch(err => { return err })
         };
     }
 })();