Merge pull request #2618 from mattermost/MM-40430-redirect-login

MM-40430 - Redirect user if already logged in

webapp/cypress/integration/loginActions.ts

@@ -56,10 +56,12 @@ describe('Login actions', () => {
         cy.get('button').contains('Change password').click()
         cy.get('.succeeded').click()
         workspaceIsAvailable()
+        logoutUser()
 
         // Can log in user with new password
         cy.log('**Can log in user with new password**')
         loginUser(newPassword).then(() => resetPassword(newPassword))
+        logoutUser()
 
         // Can't register second user without invite link
         cy.log('**Can\'t register second user without invite link**')
@@ -82,10 +84,7 @@ describe('Login actions', () => {
         cy.get('.Button').contains('Copied').should('exist')
 
         cy.get('a.shareUrl').invoke('attr', 'href').then((inviteLink) => {
-            // Log out existing user
+            logoutUser()
-            cy.log('**Log out existing user**')
-            cy.get('.Sidebar .SidebarUserMenu').click()
-            cy.get('.menu-name').contains('Log out').click()
 
             // Register a new user
             cy.log('**Register new user**')
@@ -112,6 +111,13 @@ describe('Login actions', () => {
         return workspaceIsAvailable()
     }
 
+    const logoutUser = () => {
+        cy.log('**Log out existing user**')
+        cy.get('.SidebarUserMenu').click()
+        cy.get('.menu-name').contains('Log out').click()
+        cy.location('pathname').should('eq', '/login')
+    }
+
     const resetPassword = (oldPassword: string) => {
         cy.apiGetMe().then((userId) => cy.apiChangePassword(userId, oldPassword, password))
     }

webapp/src/components/sidebar/sidebarUserMenu.tsx

@@ -11,8 +11,8 @@ import {IUser} from '../../user'
 import FocalboardLogoIcon from '../../widgets/icons/focalboard_logo'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
-import {getMe} from '../../store/users'
+import {getMe, setMe} from '../../store/users'
-import {useAppSelector} from '../../store/hooks'
+import {useAppSelector, useAppDispatch} from '../../store/hooks'
 import {Utils} from '../../utils'
 
 import ModalWrapper from '../modalWrapper'
@@ -26,6 +26,7 @@ import './sidebarUserMenu.scss'
 declare let window: IAppWindow
 
 const SidebarUserMenu = () => {
+    const dispatch = useAppDispatch()
     const history = useHistory()
     const [showRegistrationLinkDialog, setShowRegistrationLinkDialog] = useState(false)
     const user = useAppSelector<IUser|null>(getMe)
@@ -60,6 +61,7 @@ const SidebarUserMenu = () => {
                                 name={intl.formatMessage({id: 'Sidebar.logout', defaultMessage: 'Log out'})}
                                 onClick={async () => {
                                     await octoClient.logout()
+                                    dispatch(setMe(null))
                                     history.push('/login')
                                 }}
                             />

webapp/src/pages/loginPage.tsx

@@ -1,12 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React, {useState} from 'react'
-
+import {Link, Redirect, useLocation, useHistory} from 'react-router-dom'
-import {Link, useLocation, useHistory} from 'react-router-dom'
 import {FormattedMessage} from 'react-intl'
 
-import {useAppDispatch} from '../store/hooks'
+import {useAppDispatch, useAppSelector} from '../store/hooks'
-import {fetchMe} from '../store/users'
+import {fetchMe, getLoggedIn} from '../store/users'
 
 import Button from '../widgets/buttons/button'
 import client from '../octoClient'
@@ -17,6 +16,7 @@ const LoginPage = () => {
     const [password, setPassword] = useState('')
     const [errorMessage, setErrorMessage] = useState('')
     const dispatch = useAppDispatch()
+    const loggedIn = useAppSelector<boolean|null>(getLoggedIn)
     const queryParams = new URLSearchParams(useLocation().search)
     const history = useHistory()
 
@@ -34,6 +34,10 @@ const LoginPage = () => {
         }
     }
 
+    if (loggedIn) {
+        return <Redirect to={'/'}/>
+    }
+
     return (
         <div className='LoginPage'>
             <form

webapp/src/pages/registerPage.tsx

@@ -1,11 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React, {useState} from 'react'
-import {useHistory, Link} from 'react-router-dom'
+import {useHistory, Link, Redirect} from 'react-router-dom'
 import {FormattedMessage} from 'react-intl'
 
-import {useAppDispatch} from '../store/hooks'
+import {useAppDispatch, useAppSelector} from '../store/hooks'
-import {fetchMe} from '../store/users'
+import {fetchMe, getLoggedIn} from '../store/users'
 
 import Button from '../widgets/buttons/button'
 import client from '../octoClient'
@@ -18,6 +18,7 @@ const RegisterPage = () => {
     const [errorMessage, setErrorMessage] = useState('')
     const history = useHistory()
     const dispatch = useAppDispatch()
+    const loggedIn = useAppSelector<boolean|null>(getLoggedIn)
 
     const handleRegister = async (): Promise<void> => {
         const queryString = new URLSearchParams(window.location.search)
@@ -37,6 +38,10 @@ const RegisterPage = () => {
         }
     }
 
+    if (loggedIn) {
+        return <Redirect to={'/'}/>
+    }
+
     return (
         <div className='RegisterPage'>
             <form

webapp/src/store/users.ts

@@ -44,8 +44,9 @@ const usersSlice = createSlice({
     name: 'users',
     initialState,
     reducers: {
-        setMe: (state, action: PayloadAction<IUser>) => {
+        setMe: (state, action: PayloadAction<IUser|null>) => {
             state.me = action.payload
+            state.loggedIn = Boolean(state.me)
         },
         setBoardUsers: (state, action: PayloadAction<IUser[]>) => {
             state.boardUsers = action.payload.reduce((acc: {[key: string]: IUser}, user: IUser) => {