Merge pull request #147 from Want100Cookies/feature/retard

Feature/retard
Want100Cookies · Jan 25, 2018 · 487125e · 487125e
2 parents 056c9b7 + eadc90d
commit 487125e
Show file tree

Hide file tree

Showing 17 changed files with 235 additions and 27 deletions.
diff --git a/src/main/resources/public/app/js/app.js b/src/main/resources/public/app/js/app.js
@@ -102,6 +102,16 @@ app.config(function ($stateProvider) {
             url: '/registered',
             templateUrl: '/app/pages/registered.html',
         })
+        .state('retard', {
+            url: '/retard',
+            templateUrl: '/app/pages/retard.html',
+            controller: 'RetardCtrl'
+        })
+        .state('reset', {
+            url: '/reset?token',
+            templateUrl: '/app/pages/reset.html',
+            controller: 'ResetCtrl'
+        })
         .state('verify', {
             url: '/verify?email&token',
             templateUrl: '/app/pages/verify.html',

diff --git a/src/main/resources/public/app/js/login.js b/src/main/resources/public/app/js/login.js
@@ -10,7 +10,10 @@ app.controller('LoginCtrl', function (API, $scope, $state) {
         }
     }
     $scope.changeLogin = () => {
-        $state.transitionTo('register')
+        $state.transitionTo('register');
+    }
+    $scope.changeForgotPassword = () => {
+        $state.transitionTo('retard');
     }
     $scope.login = (username, password) => {
         API.auth({user: {username, password}}).then((resp) => {
@@ -19,4 +22,4 @@ app.controller('LoginCtrl', function (API, $scope, $state) {
             $scope.valid = "Invalid credentials.";
         });
     }
-});
+});
diff --git a/src/main/resources/public/app/js/reset.js b/src/main/resources/public/app/js/reset.js
@@ -0,0 +1,39 @@
+app.controller('ResetCtrl', function (RetardService, $state, $stateParams, $timeout) {
+
+    this.submit = () => {
+        this.loading = true;
+        this.error = false;
+        this.success = false;
+        RetardService.setNewPassword({
+            email: this.email,
+            password: this.password,
+            token: $stateParams.token
+        }).then((resp) => {
+            this.loading = false;
+            this.success = true;
+            $timeout(() => {
+                $state.transitionTo('login');
+            }, 3000);
+        }).catch((error) => {
+            this.loading = false;
+            this.error = true;
+        });
+    }
+
+    this.showLoading = () => {
+        return this.loading;
+    }
+
+    this.showForm = () => {
+        return !this.loading && !this.success;
+    }
+
+    this.showSuccess = () => {
+        return this.success;
+    }
+
+    this.showError = () => {
+        return this.error;
+    }
+
+});
diff --git a/src/main/resources/public/app/js/retard.js b/src/main/resources/public/app/js/retard.js
@@ -0,0 +1,38 @@
+app.controller('RetardCtrl', function (RetardService, $state) {
+
+    this.changeLogin = () => {
+        $state.transitionTo('login');
+    }
+
+    this.submit = () => {
+        this.loading = true;
+        this.error = false;
+        this.success = false;
+        RetardService.requestForgot({
+            email: this.email
+        }).then((resp) => {
+            this.loading = false;
+            this.success = true;
+        }).catch((error) => {
+            this.loading = false;
+            this.error = true;
+        });
+    }
+
+    this.showLoading = () => {
+        return this.loading;
+    }
+
+    this.showForm = () => {
+        return !this.loading && !this.success;
+    }
+
+    this.showSuccess = () => {
+        return this.success;
+    }
+
+    this.showError = () => {
+        return this.error;
+    }
+
+});
diff --git a/src/main/resources/public/app/js/verify.js b/src/main/resources/public/app/js/verify.js
@@ -14,8 +14,8 @@ app.controller('VerifyCtrl', function (VerifyService, $scope, $state, $statePara
             $scope.isLoading = false;
             $scope.isFinished = true;
             $timeout(() => {
-                $state.transitionTo('login')
-                }, 3000);
+                $state.transitionTo('login');
+            }, 3000);
         }).catch((error) => {
             $scope.error = "verification failed."
             $scope.isLoading = false;

diff --git a/src/main/resources/public/app/pages/login.html b/src/main/resources/public/app/pages/login.html
@@ -15,7 +15,7 @@ <h2>
                         <label> Email</label>
                         <input type="email" name="email" ng-model="vm.formData.email" required />
                         <div ng-messages="Form.email.$error" role="alert" multiple="">
-                            <div class="my-message" ng-message="required">You must supply a email.</div>
+                            <div class="my-message" ng-message="required">You must supply an email.</div>
                         </div>
                     </md-input-container>
                     <md-input-container class="md-block">
@@ -25,6 +25,7 @@ <h2>
                             <div class="my-message" ng-message="required">You must supply a password.</div>
                             <div class="error">{{valid}}</div>
                         </div>
+                        <span class="forgot-password" ng-click="changeForgotPassword()">Forgot password?</span>
                     </md-input-container>
                     <div layout="layout">
                         <md-button type="submit" class="md-raised md-primary pull-right formPage" ng-disabled="!Form.$valid" ng-click="vm.submit()"
@@ -35,5 +36,4 @@ <h2>
             </md-card-content>
         </md-card>
     </div>
-
 </body>
diff --git a/src/main/resources/public/app/pages/register.html b/src/main/resources/public/app/pages/register.html
@@ -15,7 +15,7 @@ <h2>
                         <label> Email</label>
                         <input type="email" name="email" ng-model="form.email" required />
                         <div ng-messages="RegisterForm.email.$error" role="alert" multiple="">
-                            <div class="my-message" ng-message="required">You must supply a email.</div>
+                            <div class="my-message" ng-message="required">You must supply an email.</div>
                         </div>
                     </md-input-container>
                     <md-input-container class="md-block">

diff --git a/src/main/resources/public/app/pages/registered.html b/src/main/resources/public/app/pages/registered.html
@@ -1,4 +1,5 @@
 <div flex-xs="" flex-gt-xs="50" style="margin: 0 auto;">
+    <h1 class="md-display-2" style="text-align: center;">Grade Master</h1>
     <md-card>
         <md-toolbar id="override-login-toolbar">
             <div class="md-toolbar-tools">

diff --git a/src/main/resources/public/app/pages/reset.html b/src/main/resources/public/app/pages/reset.html
@@ -0,0 +1,47 @@
+<div flex-xs="" flex-gt-xs="50" style="margin: 0 auto;" ng-controller="ResetCtrl as ctrl">
+    <h1 class="md-display-2" style="text-align: center;">Grade Master</h1>
+    <md-card>
+        <md-toolbar id="override-login-toolbar">
+            <div class="md-toolbar-tools">
+                <h2>
+                    <span>Reset password</span>
+                </h2>
+            </div>
+        </md-toolbar>
+        <md-card-content>
+            <p ng-if="ctrl.showLoading()">One moment please...</p>
+            <p ng-if="ctrl.showSuccess()">Your password has been changed. You will be redirected shortly...</p>
+            <p ng-if="ctrl.showError()">Seems like something went wrong. Check your details or try again later.</p>
+            <form name="Form" ng-if="ctrl.showForm()">
+                <md-input-container class="md-block">
+                    <label> Email</label>
+                    <input type="email" name="email" ng-model="ctrl.email" required />
+                    <div ng-messages="Form.email.$error" role="alert" multiple="">
+                        <div class="my-message" ng-message="required">You must supply an email.</div>
+                    </div>
+                </md-input-container>
+                <md-input-container class="md-block">
+                    <label>Password</label>
+                    <input type="password" name="password" ng-model="ctrl.password" required password-verify="{{ctrl.confirmPassword}}" />
+                    <div ng-messages="Form.password.$error" role="alert" multiple="">
+                        <div class="my-message" ng-message="required">You must supply a password.</div>
+                        <div class="my-message" ng-message="passwordVerify">No match</div>
+                    </div>
+                </md-input-container>
+                <md-input-container class="md-block">
+                    <label>Confirm Password</label>
+                    <input type="password" name="confirmPassword" ng-model="ctrl.confirmPassword" required password-verify="{{ctrl.password}}" />
+                    <div ng-messages="Form.confirmPassword.$error" role="alert" multiple="">
+                        <div class="my-message" ng-message="required">You must supply a password.</div>
+                        <div class="my-message" ng-message="passwordVerify">No match</div>
+                        <div class="error">{{error}}</div>
+                    </div>
+                </md-input-container>
+                <div layout="layout">
+                    <md-button type="submit" class="md-raised md-primary pull-right formPage" ng-disabled="!Form.$valid" ng-click="ctrl.submit()"
+                        id="override-login-button">&nbsp Reset password &nbsp</md-button>
+                </div>
+            </form>
+        </md-card-content>
+    </md-card>
+</div>
diff --git a/src/main/resources/public/app/pages/retard.html b/src/main/resources/public/app/pages/retard.html
@@ -0,0 +1,31 @@
+<div flex-xs="" flex-gt-xs="50" style="margin: 0 auto;" ng-controller="RetardCtrl as ctrl">
+    <h1 class="md-display-2" style="text-align: center;">Grade Master</h1>
+    <md-card>
+        <md-toolbar id="override-login-toolbar">
+            <div class="md-toolbar-tools">
+                <h2>
+                    <span>Forgot password</span>
+                </h2>
+            </div>
+        </md-toolbar>
+        <md-card-content>
+            <p ng-if="ctrl.showLoading()">One moment please...</p>
+            <p ng-if="ctrl.showSuccess()">Request sent. Please check your mailbox.</p>
+            <p ng-if="ctrl.showError()">Seems like something went wrong. Check your details or try again later.</p>
+            <form name="Form" ng-if="ctrl.showForm()">
+                <md-input-container class="md-block">
+                    <label> Email</label>
+                    <input type="email" name="email" ng-model="ctrl.email" required />
+                    <div ng-messages="Form.email.$error" role="alert" multiple="">
+                        <div class="my-message" ng-message="required">You must supply an email.</div>
+                    </div>
+                </md-input-container>
+                <div layout="layout">
+                    <md-button type="submit" class="md-raised md-primary pull-right formPage" ng-disabled="!Form.$valid" ng-click="ctrl.submit()"
+                        id="override-login-button">&nbsp Send request &nbsp</md-button>
+                    <md-button class="pull-right formPage" ng-click="ctrl.changeLogin()" id="override-register-button">&nbsp Oh wait I member &nbsp</md-button>
+                </div>
+            </form>
+        </md-card-content>
+    </md-card>
+</div>
diff --git a/src/main/resources/public/app/pages/verify.html b/src/main/resources/public/app/pages/verify.html
@@ -2,6 +2,7 @@
     <md-progress-circular class="spinner" md-mode="indeterminate" ng-show="isLoading"></md-progress-circular>
 </div>
 <div flex-xs="" flex-gt-xs="50" style="margin: 0 auto;">
+    <h1 class="md-display-2" style="text-align: center;">Grade Master</h1>
     <md-card ng-show="isFinished">
         <md-toolbar id="override-login-toolbar">
             <div class="md-toolbar-tools">
@@ -16,17 +17,16 @@ <h2>
         </md-content>
     </md-card>
     <md-card ng-show="isError">
-            <md-toolbar id="override-login-toolbar">
-                <div class="md-toolbar-tools">
-                    <h2>
-                        <span class="md-headline">An error has occured!</span>
-                    </h2>
-                </div>
-            </md-toolbar>
-            <md-content style="height: 75px;">
-                <div class="md-body-2" style="text-align: center; margin-top: 20px;">Somehow we weren't able to verify your email. Please try again later.</br>
-                </div>
-            </md-content>
-        </md-card>
-</div>
-
+        <md-toolbar id="override-login-toolbar">
+            <div class="md-toolbar-tools">
+                <h2>
+                    <span class="md-headline">An error has occured!</span>
+                </h2>
+            </div>
+        </md-toolbar>
+        <md-content style="height: 75px;">
+            <div class="md-body-2" style="text-align: center; margin-top: 20px;">Somehow we weren't able to verify your email. Please try again later.</br>
+            </div>
+        </md-content>
+    </md-card>
+</div>
diff --git a/src/main/resources/public/app/services/api.service.js b/src/main/resources/public/app/services/api.service.js
@@ -17,6 +17,13 @@ app.factory('API', function ($cookies, $http, $httpParamSerializer) {
     /**
      * DEFAULT REQUESTS
      */
+    // Request for unauthorized requests
+    this.getUnAuthRequest = () => {
+        return {
+            url: `${BASE_URL}/${API}/`
+        }
+    };
+    // Request with autorization
     this.getRequest = () => {
         return {
             url: `${BASE_URL}/${API}/`,
@@ -25,6 +32,7 @@ app.factory('API', function ($cookies, $http, $httpParamSerializer) {
             }
         }
     };
+    // OAuth request
     this.getAuthRequest = () => {
         return {
             url: `${BASE_URL}/oauth/token`,

diff --git a/src/main/resources/public/app/services/register.service.js b/src/main/resources/public/app/services/register.service.js
@@ -3,7 +3,8 @@ app.factory('RegisterService', function (API) {
     this.register = (data) => {
         return API.post({
             path: `users`,
-            data
+            data,
+            req: Object.assign({}, API.getUnAuthRequest())
         });
     };
 

diff --git a/src/main/resources/public/app/services/retard.service.js b/src/main/resources/public/app/services/retard.service.js
@@ -0,0 +1,20 @@
+app.factory('RetardService', function (API) {
+
+    this.requestForgot = (data) => {
+        return API.post({
+            path: `auth/retard`,
+            data,
+            req: Object.assign({}, API.getUnAuthRequest())
+        });
+    };
+
+    this.setNewPassword = (data) => {
+        return API.patch({
+            path: `auth/retard`,
+            data,
+            req: Object.assign({}, API.getUnAuthRequest())
+        });
+    };
+
+    return this;
+});
diff --git a/src/main/resources/public/app/services/verify.service.js b/src/main/resources/public/app/services/verify.service.js
@@ -3,7 +3,8 @@ app.factory('VerifyService', function (API) {
     this.verify = (data) => {
         return API.patch({
             path: `auth/verify`,
-            data
+            data,
+            req: Object.assign({}, API.getUnAuthRequest())
         });
     };
 

diff --git a/src/main/resources/public/app/styles/app.css b/src/main/resources/public/app/styles/app.css
@@ -45,6 +45,12 @@ a {
     margin-top: 15px;
 }
 
+.forgot-password {
+    cursor: pointer;
+    color: #3F3F3F;
+    font-size: 10pt;
+}
+
 .spinnerContainer {
     width: 100%;
     height: 100%;