Merge pull request #819 from eciis/create-new-layout-of-reset-passwor…

…d-modal Create new layout of reset password modal
eciis · Feb 21, 2018 · 991ee2c · 991ee2c
2 parents 82ba096 + 7056552
commit 991ee2c
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 12 deletions.
diff --git a/frontend/auth/loginController.js b/frontend/auth/loginController.js
@@ -38,18 +38,13 @@
         };
 
         loginCtrl.resetPassword = function resetPassword(ev) {
-            var confirm = $mdDialog.prompt()
-                .title('Esqueceu sua senha?')
-                .textContent('Digite seu email e enviaremos um link para criar uma nova senha.')
-                .placeholder('Digite seu email')
-                .ariaLabel('Digite seu emai')
-                .targetEvent(ev)
-                .required(true)
-                .ok("Redefinir Senha")
-                .cancel("Cancelar");
-
-            $mdDialog.show(confirm).then(function(email) {
-                AuthService.resetPassword(email);
+            $mdDialog.show({
+                controller: "ResetPasswordController",
+                controllerAs: "resetCtrl",
+                templateUrl: '/app/auth/reset_password_dialog.html',
+                parent: angular.element(document.body),
+                targetEvent: ev,
+                clickOutsideToClose:true
             });
         };
 
@@ -75,4 +70,20 @@
             }
         })();
     });
+
+    app.controller('ResetPasswordController', function(AuthService, $mdDialog) {
+        var resetCtrl = this;
+
+        resetCtrl.email = '';
+        resetCtrl.showConfirmedRest = false;
+
+        resetCtrl.resetPassword = function resetPassword() {
+            AuthService.resetPassword(resetCtrl.email);
+            resetCtrl.showConfirmedRest = true;
+        };
+
+        resetCtrl.closeResetDialog = function closeResetDialog() {
+            $mdDialog.hide();
+        };
+    });
 })();
diff --git a/frontend/auth/reset_password_dialog.html b/frontend/auth/reset_password_dialog.html
@@ -0,0 +1,39 @@
+<md-dialog flex-gt-md="30" flex-xs="95" flex-sm="65" flex-md="40">
+    <md-dialog-content>
+        <div layout="column" layout-align="space-between">
+            <div layout="row" layout-align="center center">
+                <div layout="column" flex="90" layout-padding>
+                    <div layout="row" layout-align="center center">
+                        <img src="/app/images/logowithname.png" style="margin-bottom: 20px; width: 70%;"/>
+                    </div>
+                    <div ng-if="!resetCtrl.showConfirmedRest">
+                        <form name="resetPassword" ng-submit="resetCtrl.resetPassword()" layout="column">
+                            <b style="margin-bottom: 20px;">Redefinir sua senha</b>
+                            <md-input-container>
+                                <label>E-mail</label>
+                                <input type="email" name="email" ng-model="resetCtrl.email" required/>
+                                <div ng-messages="resetPassword.email.$error">
+                                    <div ng-message="required">Insira um email válido</div>
+                                </div>
+                            </md-input-container>
+                            <div layout="row" layout-align="end center" style="padding: 0;">
+                                <md-button class="md-raised" type="submit" md-colors="{background: 'default-teal-500'}">
+                                    <span>enviar</span>
+                                </md-button>
+                            </div>
+                        </form>
+                    </div>
+                    <div ng-if="resetCtrl.showConfirmedRest" layout="column">
+                        <p>Você receberá dentro de instantes no e-mail {{resetCtrl.email}} um link para redefinição da senha.</p>
+                        <div layout="row" layout-align="end center" style="padding: 0;">
+                            <md-button class="md-raised" ng-click="resetCtrl.closeResetDialog()" md-colors="{background: 'default-teal-500'}">
+                                <span>inicial</span>
+                            </md-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div style="height: 30px;" md-colors="{background: 'default-grey-300'}"></div>
+        </div>
+    </md-dialog-content>
+</md-dialog>