Fix routing issues. Fix panel layout.

website/src/Auth/ResetPassword.js

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Box, Text, Image, Column, Row, BoundInput, BoundButton } from 'ui'
+import { Logout } from '.'
 import { MessageModal, WaitModal } from '../Modal'
 import { api } from 'src/API'
 import { FormBinder } from 'react-form-binder'
@@ -32,7 +33,39 @@ export class ResetPassword extends Component {
     this.state = {
       binder: new FormBinder({}, ResetPassword.bindings),
       messageModal: null,
-      waitModal: null
+      waitModal: null,
+      tokenConfirmed: false,
+    }
+  }
+
+  componentDidMount(props) {
+    if (this.state.tokenConfirmed) {
+      return
+    }
+
+    const passwordToken = new URLSearchParams(decodeURIComponent(window.location.search)).get('password-token')
+
+    this.setState({ waitModal: { message: 'Confirming password reset...' } })
+    if (passwordToken) {
+      api.confirmResetPassword(passwordToken).then((response) => {
+        this.setState({ waitModal: null })
+        if (response && response.valid) {
+          this.setState({ tokenConfirmed: true })
+        } else {
+          this.props.history.replace('/')
+        }
+      }).catch((err) => {
+        this.setState({
+          waitModal: null,
+          messageModal: {
+            icon: 'hand',
+            message: `We were unable to confirm you requested a password reset. Please request another reset email.`,
+            detail: err.message
+          }
+        })
+      })
+    } else {
+      this.props.history.replace('/')
     }
   }
 
@@ -54,8 +87,9 @@ export class ResetPassword extends Component {
         waitModal: null,
         messageModal: {
           icon: 'hand',
-          title: 'There was a problem changing your password',
+          message: 'There was a problem changing your password. Please request another reset email.',
           detail: err.message,
+          noRetry: true,
         }
       })
     })
@@ -63,12 +97,20 @@ export class ResetPassword extends Component {
 
   @autobind
   handleMessageModalDismiss() {
-    this.setState({ messageModal: null })
+    if (this.state.messageModal.noRetry) {
+      this.props.history.replace('/login')
+    } else {
+      this.setState({ messageModal: null })
+    }
   }
 
   render() {
     const { messageModal, waitModal, binder } = this.state
 
+    if (api.loggedInUser) {
+      return <Logout redirect={`${window.location.pathname}${window.location.search}`} />
+    }
+
     return (
       <Fragment>
         <Column.Item grow />
@@ -132,8 +174,8 @@ export class ResetPassword extends Component {
           <MessageModal
             open={!!messageModal}
             icon={messageModal ? messageModal.icon : ''}
-            title={messageModal ? messageModal.title : ''}
             message={messageModal ? messageModal.message : ''}
+            detail={messageModal ? messageModal.title : ''}
             onDismiss={this.handleMessageModalDismiss} />
 
           <WaitModal active={!!waitModal}