Halfway done with email, not fully working yet.

3 files changed, 46 insertions, 63 deletions

diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx
index 87fa39fe..c2db7ee6 100644
--- a/ui/src/components/login.tsx
+++ b/ui/src/components/login.tsx
@@ -6,6 +6,7 @@ import {
   RegisterForm,
   LoginResponse,
   UserOperation,
+  PasswordResetForm,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { msgOp } from '../utils';
@@ -112,6 +113,12 @@ export class Login extends Component<any, State> {
                 class="form-control"
                 required
               />
+              <div
+                onClick={linkEvent(this, this.handlePasswordReset)}
+                class="pointer d-inline-block float-right text-muted small font-weight-bold"
+              >
+                <T i18nKey="forgot_password">#</T>
+              </div>
             </div>
           </div>
           <div class="form-group row">
@@ -279,6 +286,13 @@ export class Login extends Component<any, State> {
     i.setState(i.state);
   }
 
+  handlePasswordReset(i: Login) {
+    let resetForm: PasswordResetForm = {
+      email: i.state.loginForm.username_or_email,
+    };
+    WebSocketService.Instance.passwordReset(resetForm);
+  }
+
   parseMessage(msg: any) {
     let op: UserOperation = msgOp(msg);
     if (msg.error) {
@@ -299,6 +313,8 @@ export class Login extends Component<any, State> {
         let res: LoginResponse = msg;
         UserService.Instance.login(res);
         this.props.history.push('/communities');
+      } else if (op == UserOperation.PasswordReset) {
+        alert(i18n.t('reset_password_mail_sent'));
       }
     }
   }
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index 151559df..306dc74f 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -21,7 +21,6 @@ import { T } from 'inferno-i18next';
 interface NavbarState {
   isLoggedIn: boolean;
   expanded: boolean;
-  expandUserDropdown: boolean;
   replies: Array<Comment>;
   mentions: Array<Comment>;
   fetchCount: number;
@@ -39,14 +38,12 @@ export class Navbar extends Component<any, NavbarState> {
     replies: [],
     mentions: [],
     expanded: false,
-    expandUserDropdown: false,
     siteName: undefined,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
     this.state = this.emptyState;
-    this.handleOverviewClick = this.handleOverviewClick.bind(this);
 
     this.keepFetchingUnreads();
 
@@ -137,50 +134,25 @@ export class Navbar extends Component<any, NavbarState> {
           <ul class="navbar-nav ml-auto mr-2">
             {this.state.isLoggedIn ? (
               <>
-                {
-                  <li className="nav-item">
-                    <Link class="nav-link" to="/inbox">
-                      <svg class="icon">
-                        <use xlinkHref="#icon-mail"></use>
-                      </svg>
-                      {this.state.unreadCount > 0 && (
-                        <span class="ml-1 badge badge-light">
-                          {this.state.unreadCount}
-                        </span>
-                      )}
-                    </Link>
-                  </li>
-                }
-                <li
-                  className={`nav-item dropdown ${this.state
-                    .expandUserDropdown && 'show'}`}
-                >
-                  <a
-                    class="pointer nav-link dropdown-toggle"
-                    onClick={linkEvent(this, this.expandUserDropdown)}
-                    role="button"
+                <li className="nav-item">
+                  <Link class="nav-link" to="/inbox">
+                    <svg class="icon">
+                      <use xlinkHref="#icon-mail"></use>
+                    </svg>
+                    {this.state.unreadCount > 0 && (
+                      <span class="ml-1 badge badge-light">
+                        {this.state.unreadCount}
+                      </span>
+                    )}
+                  </Link>
+                </li>
+                <li className="nav-item">
+                  <Link
+                    class="nav-link"
+                    to={`/u/${UserService.Instance.user.username}`}
                   >
                     {UserService.Instance.user.username}
-                  </a>
-                  <div
-                    className={`dropdown-menu dropdown-menu-right ${this.state
-                      .expandUserDropdown && 'show'}`}
-                  >
-                    <a
-                      role="button"
-                      class="dropdown-item pointer"
-                      onClick={linkEvent(this, this.handleOverviewClick)}
-                    >
-                      <T i18nKey="overview">#</T>
-                    </a>
-                    <a
-                      role="button"
-                      class="dropdown-item pointer"
-                      onClick={linkEvent(this, this.handleLogoutClick)}
-                    >
-                      <T i18nKey="logout">#</T>
-                    </a>
-                  </div>
+                  </Link>
                 </li>
               </>
             ) : (
@@ -194,24 +166,6 @@ export class Navbar extends Component<any, NavbarState> {
     );
   }
 
-  expandUserDropdown(i: Navbar) {
-    i.state.expandUserDropdown = !i.state.expandUserDropdown;
-    i.setState(i.state);
-  }
-
-  handleLogoutClick(i: Navbar) {
-    i.state.expandUserDropdown = false;
-    UserService.Instance.logout();
-    i.context.router.history.push('/');
-  }
-
-  handleOverviewClick(i: Navbar) {
-    i.state.expandUserDropdown = false;
-    i.setState(i.state);
-    let userPage = `/u/${UserService.Instance.user.username}`;
-    i.context.router.history.push(userPage);
-  }
-
   expandNavbar(i: Navbar) {
     i.state.expanded = !i.state.expanded;
     i.setState(i.state);
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 3006afc4..361ce633 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -376,6 +376,14 @@ export class User extends Component<any, UserState> {
                 </tr>
               </table>
             </div>
+            {this.isCurrentUser && (
+              <button
+                class="btn btn-block btn-secondary mt-3"
+                onClick={linkEvent(this, this.handleLogoutClick)}
+              >
+                <T i18nKey="logout">#</T>
+              </button>
+            )}
           </div>
         </div>
       </div>
@@ -693,6 +701,11 @@ export class User extends Component<any, UserState> {
     i.setState(i.state);
   }
 
+  handleLogoutClick(i: User) {
+    UserService.Instance.logout();
+    i.context.router.history.push('/');
+  }
+
   handleDeleteAccount(i: User, event: any) {
     event.preventDefault();
     i.state.deleteAccountLoading = true;