From 4ef2dcdc040419ca1237bafda95fc06c154717d8 Mon Sep 17 00:00:00 2001 From: Nuwan Date: Thu, 11 Nov 2021 16:54:00 +0530 Subject: [PATCH] fix issues related to user login and logout --- .../auth/basic/JKAuthBasicRoutes.js | 31 ++++++++ jam-ui/src/components/auth/basic/Login.js | 13 +++- .../dashboard/JKDashboardLoadingIndicator.js | 14 ---- .../components/dashboard/JKDashboardMain.js | 72 +++++++++++-------- .../components/navbar/JKCurrentUserAvatar.js | 2 +- .../components/navbar/JKProfileDropdown.js | 10 +-- .../JKFriendRequestNotification.js | 2 +- .../components/notification/JKNotification.js | 6 +- .../notification/JKTextMessageNotification.js | 2 +- jam-ui/src/components/page/JKNotifications.js | 2 +- .../src/components/profile/JKMessageModal.js | 7 ++ jam-ui/src/context/UserAuth.js | 9 +-- jam-ui/src/helpers/privateRoute.js | 3 +- jam-ui/src/helpers/protectedRoute.js | 17 ----- jam-ui/src/i18n/config.js | 8 ++- jam-ui/src/i18n/locales/en/auth.json | 4 ++ jam-ui/src/i18n/locales/es/auth.json | 4 ++ jam-ui/src/layouts/AuthBasicLayout.js | 5 +- jam-ui/src/layouts/JKAuthBasicLayout.js | 25 +++++++ jam-ui/src/layouts/JKLayout.js | 2 +- jam-ui/src/services/auth.js | 9 +-- web/config/routes.rb | 2 +- 22 files changed, 156 insertions(+), 93 deletions(-) create mode 100644 jam-ui/src/components/auth/basic/JKAuthBasicRoutes.js delete mode 100644 jam-ui/src/components/dashboard/JKDashboardLoadingIndicator.js delete mode 100644 jam-ui/src/helpers/protectedRoute.js create mode 100644 jam-ui/src/i18n/locales/en/auth.json create mode 100644 jam-ui/src/i18n/locales/es/auth.json create mode 100644 jam-ui/src/layouts/JKAuthBasicLayout.js diff --git a/jam-ui/src/components/auth/basic/JKAuthBasicRoutes.js b/jam-ui/src/components/auth/basic/JKAuthBasicRoutes.js new file mode 100644 index 000000000..ce7240122 --- /dev/null +++ b/jam-ui/src/components/auth/basic/JKAuthBasicRoutes.js @@ -0,0 +1,31 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Redirect, Route, Switch, withRouter } from 'react-router-dom'; +import Login from './Login'; +// import Start from './Start'; +// import Logout from './Logout'; +// import Registration from './Registration'; +// import ForgetPassword from './ForgetPassword'; +// import PasswordReset from './PasswordReset'; +// import ConfirmMail from './ConfirmMail'; +// import LockScreen from './LockScreen'; + +const AuthBasicRoutes = ({ match: { url } }) => ( + + + {/* + + + + + + */} + + {/*Redirect*/} + + +); + +AuthBasicRoutes.propTypes = { match: PropTypes.object.isRequired }; + +export default withRouter(AuthBasicRoutes); diff --git a/jam-ui/src/components/auth/basic/Login.js b/jam-ui/src/components/auth/basic/Login.js index 3fcf6bc27..7794b41d5 100644 --- a/jam-ui/src/components/auth/basic/Login.js +++ b/jam-ui/src/components/auth/basic/Login.js @@ -2,18 +2,25 @@ import React, { Fragment } from 'react'; import { Col, Row } from 'reactstrap'; import { Link } from 'react-router-dom'; import LoginForm from '../LoginForm'; +import { useTranslation } from "react-i18next"; + +//const {t} = useTranslation(); const Login = () => ( + +
Sign in
- {/* +

- or create an account + or {' '} + {/* create an account */} + Sign up

- */} + diff --git a/jam-ui/src/components/dashboard/JKDashboardLoadingIndicator.js b/jam-ui/src/components/dashboard/JKDashboardLoadingIndicator.js deleted file mode 100644 index 3133f792a..000000000 --- a/jam-ui/src/components/dashboard/JKDashboardLoadingIndicator.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -function JKDashboardLoadingIndicator() { - const {t} = useTranslation(); - - return ( -
- {t('loading', {ns: 'common'})}... -
- ) -} - -export default JKDashboardLoadingIndicator diff --git a/jam-ui/src/components/dashboard/JKDashboardMain.js b/jam-ui/src/components/dashboard/JKDashboardMain.js index 845b62010..3992ec880 100644 --- a/jam-ui/src/components/dashboard/JKDashboardMain.js +++ b/jam-ui/src/components/dashboard/JKDashboardMain.js @@ -10,10 +10,12 @@ import AppContext from '../../context/Context'; import { getPageName } from '../../helpers/utils'; import useScript from '../../hooks/useScript'; -import { useDispatch } from "react-redux"; -import { addMessage } from "../../store/features/textMessagesSlice" +import { useDispatch } from 'react-redux'; +import { addMessage } from '../../store/features/textMessagesSlice'; import { add as addNotification } from '../../store/features/notificationSlice'; +import { useAuth } from '../../context/UserAuth'; + import Home from './JKHomePage'; import loadable from '@loadable/component'; @@ -23,11 +25,13 @@ function JKDashboard() { const { isFluid, isVertical, navbarStyle } = useContext(AppContext); const isKanban = getPageName('kanban'); + const { isAuthenticated, currentUser, setCurrentUser, logout } = useAuth(); + useEffect(() => { DashboardRoutes.preload(); }, []); - const dispatch = useDispatch() + const dispatch = useDispatch(); const initJKScripts = () => { const app = window.JK.JamKazam(); @@ -52,7 +56,7 @@ function JKDashboard() { registerTextMessageCallback(); registerFriendRequest(); registerFriendRequestAccepted(); - } + }; const registerTextMessageCallback = () => { window.JK.JamServer.registerMessageCallback(window.JK.MessageType.TEXT_MESSAGE, function(header, payload) { @@ -67,29 +71,32 @@ function JKDashboard() { receiverName: window.currentUser.first_name, createdAt: payload.created_at, sent: true - } - - dispatch(addMessage(msg)) + }; + + dispatch(addMessage(msg)); handleNotification(payload, header.type); }); - } + }; const registerFriendRequest = () => { window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST, function(header, payload) { console.log('registerFriendRequest payload', payload); console.log('registerFriendRequest header', header); handleNotification(payload, header.type); - }) - } + }); + }; const registerFriendRequestAccepted = () => { - window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST_ACCEPTED, function(header, payload) { + window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST_ACCEPTED, function( + header, + payload + ) { console.log('registerFriendRequestAccepted payload', payload); console.log('registerFriendRequestAccepted header', header); handleNotification(payload, header.type); - }) - } + }); + }; const handleNotification = (payload, type) => { const notification = { @@ -105,32 +112,39 @@ function JKDashboard() { name: payload.sender_name }, created_at: payload.created_at - } + }; try { - dispatch(addNotification(notification)); + dispatch(addNotification(notification)); } catch (error) { console.log(error); } - - } + }; useScript(`${process.env.REACT_APP_LEGACY_BASE_URL}/client_scripts`, initJKScripts); return ( -
- {isVertical && } - -
- - - - - - {!isKanban &&
} + <> + {isAuthenticated ? ( +
+ {isVertical && } + +
+ + + + + + {!isKanban &&
} +
+ {/* */}
- {/* */} -
+ ) : ( + + + + )} + ); } diff --git a/jam-ui/src/components/navbar/JKCurrentUserAvatar.js b/jam-ui/src/components/navbar/JKCurrentUserAvatar.js index 06b388a34..740676b97 100644 --- a/jam-ui/src/components/navbar/JKCurrentUserAvatar.js +++ b/jam-ui/src/components/navbar/JKCurrentUserAvatar.js @@ -1,5 +1,5 @@ import React, {useEffect} from "react"; -import { useAuth } from '../../context/AuthContext'; +import { useAuth } from '../../context/UserAuth'; import avatar from "../../assets/img/team/avatar.png"; const JKCurrentUserAvatar = () => { diff --git a/jam-ui/src/components/navbar/JKProfileDropdown.js b/jam-ui/src/components/navbar/JKProfileDropdown.js index d31ee0c8e..dc6994461 100644 --- a/jam-ui/src/components/navbar/JKProfileDropdown.js +++ b/jam-ui/src/components/navbar/JKProfileDropdown.js @@ -4,13 +4,14 @@ import { DropdownItem, DropdownMenu, DropdownToggle, Dropdown } from 'reactstrap import { useAuth } from '../../context/UserAuth'; import JKProfileAvatar from '../profile/JKProfileAvatar'; import { useCookies } from 'react-cookie'; +import { useHistory } from "react-router-dom"; const ProfileDropdown = () => { const [dropdownOpen, setDropdownOpen] = useState(false); const toggle = () => setDropdownOpen(prevState => !prevState); - const { currentUser, setCurrentUser, logout } = useAuth(); - + const { isAuthenticated, currentUser, setCurrentUser, logout } = useAuth(); const [cookies, setCookie, removeCookie] = useCookies(['remember_token']); + const history = useHistory(); const handleLogout = async (event) => { event.preventDefault(); @@ -18,12 +19,13 @@ const ProfileDropdown = () => { domain: `.${process.env.REACT_APP_ORIGIN}` }); setCurrentUser(null); - logout() + await logout() + history.push('/') }; return ( <> - {currentUser && + {isAuthenticated && { deleteNotification(); } diff --git a/jam-ui/src/components/notification/JKTextMessageNotification.js b/jam-ui/src/components/notification/JKTextMessageNotification.js index 466f6b59d..99bb1ef85 100644 --- a/jam-ui/src/components/notification/JKTextMessageNotification.js +++ b/jam-ui/src/components/notification/JKTextMessageNotification.js @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { useAuth } from '../../context/AuthContext'; +import { useAuth } from '../../context/UserAuth'; import { useDispatch, useSelector } from 'react-redux'; import { fetchPerson, add as addPerson } from '../../store/features/peopleSlice'; import JKMessageButton from '../profile/JKMessageButton'; diff --git a/jam-ui/src/components/page/JKNotifications.js b/jam-ui/src/components/page/JKNotifications.js index 59591f8b7..97926a436 100644 --- a/jam-ui/src/components/page/JKNotifications.js +++ b/jam-ui/src/components/page/JKNotifications.js @@ -7,7 +7,7 @@ import { isIterableArray } from '../../helpers/utils'; import { fetchNotifications } from '../../store/features/notificationSlice'; import { useDispatch, useSelector } from 'react-redux'; -import { useAuth } from '../../context/AuthContext'; +import { useAuth } from '../../context/UserAuth'; const JKNotifications = () => { const { currentUser } = useAuth(); diff --git a/jam-ui/src/components/profile/JKMessageModal.js b/jam-ui/src/components/profile/JKMessageModal.js index 8f955d9c7..dffbc2b41 100644 --- a/jam-ui/src/components/profile/JKMessageModal.js +++ b/jam-ui/src/components/profile/JKMessageModal.js @@ -7,6 +7,7 @@ import { useAuth } from '../../context/UserAuth'; import { useDispatch, useSelector } from 'react-redux'; import { fetchMessagesByReceiverId, postNewMessage } from '../../store/features/textMessagesSlice'; import { isIterableArray } from '../../helpers/utils'; +import PropTypes from 'prop-types'; const JKMessageModal = props => { const { show, setShow, user } = props; @@ -200,4 +201,10 @@ const JKMessageModal = props => { ); }; +JKMessageModal.propTypes = { + user: PropTypes.object.isRequired, + show: PropTypes.bool.isRequired, + setShow: PropTypes.func.isRequired +}; + export default JKMessageModal; diff --git a/jam-ui/src/context/UserAuth.js b/jam-ui/src/context/UserAuth.js index 76feedc4d..47e2b42cb 100644 --- a/jam-ui/src/context/UserAuth.js +++ b/jam-ui/src/context/UserAuth.js @@ -12,16 +12,17 @@ export default function UserAuth({ children, path }) { const [isLoading, setIsLoading] = useState(true); useEffect(() => { - console.log('checking auth........', path); + //console.log('checking auth for', path); checkAuth(); }, [path]); - const checkAuth = () => + const checkAuth = () => checkIsAuthenticated() + .then(resp => resp.json()) .then((user) => { - setIsAuthenticated(true) - setCurrentUser(user) window.currentUser = user; + setCurrentUser(user) + setIsAuthenticated(true) }) .catch(() => { setIsAuthenticated(false) diff --git a/jam-ui/src/helpers/privateRoute.js b/jam-ui/src/helpers/privateRoute.js index 4a329340a..6b00f2271 100644 --- a/jam-ui/src/helpers/privateRoute.js +++ b/jam-ui/src/helpers/privateRoute.js @@ -3,6 +3,7 @@ import { Route, Redirect } from 'react-router-dom'; import PropTypes from 'prop-types'; import { UserAuthContext } from '../context/UserAuth'; //import Loading from '../../views/Loading/Loading'; +//import Loader from '../components/common/Loader'; const PrivateRoute = ({ component: Component, ...otherProps }) => { const { isAuthenticated, isLoading } = useContext(UserAuthContext); @@ -18,7 +19,7 @@ const PrivateRoute = ({ component: Component, ...otherProps }) => { ) ) : ( - // + // loading... ) } diff --git a/jam-ui/src/helpers/protectedRoute.js b/jam-ui/src/helpers/protectedRoute.js deleted file mode 100644 index af0bbc71a..000000000 --- a/jam-ui/src/helpers/protectedRoute.js +++ /dev/null @@ -1,17 +0,0 @@ -import { useAuth } from "../context/AuthContext"; -import { Route, Redirect } from "react-router-dom"; - -const ProtectedRoute = ({component: Component, ...rest}) => { - const {currentUser} = useAuth(); - return ( - // Show the component only when the user is logged in - // Otherwise, redirect the user to /login page - ( - currentUser ? - - : - )} /> - ); -}; - -export default ProtectedRoute; \ No newline at end of file diff --git a/jam-ui/src/i18n/config.js b/jam-ui/src/i18n/config.js index 68aba7b1a..51dfe5611 100644 --- a/jam-ui/src/i18n/config.js +++ b/jam-ui/src/i18n/config.js @@ -4,10 +4,12 @@ import { initReactI18next } from "react-i18next"; import commonTranslationsEN from './locales/en/common.json' import homeTranslationsEN from './locales/en/home.json' import peopleTranslationsEN from './locales/en/people.json' +import authTranslationsEN from './locales/en/auth.json' import commonTranslationsES from './locales/es/common.json' import homeTranslationsES from './locales/es/home.json' import peopleTranslationsES from './locales/es/people.json' +import authTranslationsES from './locales/es/auth.json' i18n.use(initReactI18next).init({ fallbackLng: 'en', @@ -17,13 +19,15 @@ i18n.use(initReactI18next).init({ //translations: require('./locales/en/translations.json') common: commonTranslationsEN, home: homeTranslationsEN, - people: peopleTranslationsEN + people: peopleTranslationsEN, + auth: authTranslationsEN }, es: { //translations: require('./locales/es/translations.json') common: commonTranslationsES, home: homeTranslationsES, - people: peopleTranslationsES + people: peopleTranslationsES, + auth: authTranslationsES } }, //ns: ['translations'], diff --git a/jam-ui/src/i18n/locales/en/auth.json b/jam-ui/src/i18n/locales/en/auth.json new file mode 100644 index 000000000..ca1b4d816 --- /dev/null +++ b/jam-ui/src/i18n/locales/en/auth.json @@ -0,0 +1,4 @@ +{ + "signup": "Sign up", + "signin": "Sign in" +} \ No newline at end of file diff --git a/jam-ui/src/i18n/locales/es/auth.json b/jam-ui/src/i18n/locales/es/auth.json new file mode 100644 index 000000000..ca1b4d816 --- /dev/null +++ b/jam-ui/src/i18n/locales/es/auth.json @@ -0,0 +1,4 @@ +{ + "signup": "Sign up", + "signin": "Sign in" +} \ No newline at end of file diff --git a/jam-ui/src/layouts/AuthBasicLayout.js b/jam-ui/src/layouts/AuthBasicLayout.js index 647beb0b6..ea76f28cd 100644 --- a/jam-ui/src/layouts/AuthBasicLayout.js +++ b/jam-ui/src/layouts/AuthBasicLayout.js @@ -3,18 +3,15 @@ import { Card, CardBody, Col, Row } from 'reactstrap'; import Logo from '../components/navbar/Logo'; import Section from '../components/common/Section'; import AuthBasicRoutes from '../components/auth/basic/AuthBasicRoutes'; -import UserAuth from '../context/UserAuth'; -const AuthBasicLayout = ({location}) => ( +const AuthBasicLayout = () => (
- - diff --git a/jam-ui/src/layouts/JKAuthBasicLayout.js b/jam-ui/src/layouts/JKAuthBasicLayout.js new file mode 100644 index 000000000..ac1122a4c --- /dev/null +++ b/jam-ui/src/layouts/JKAuthBasicLayout.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { Card, CardBody, Col, Row } from 'reactstrap'; +import Logo from '../components/navbar/Logo'; +import Section from '../components/common/Section'; +import AuthBasicRoutes from '../components/auth/basic/JKAuthBasicRoutes'; +import UserAuth from '../context/UserAuth'; + +const AuthBasicLayout = ({location}) => ( +
+ + + + + + + + + + + + +
+); + +export default AuthBasicLayout; diff --git a/jam-ui/src/layouts/JKLayout.js b/jam-ui/src/layouts/JKLayout.js index c9539edfe..ea237c675 100644 --- a/jam-ui/src/layouts/JKLayout.js +++ b/jam-ui/src/layouts/JKLayout.js @@ -8,7 +8,7 @@ import ErrorLayout from './ErrorLayout'; import BuildMeta from "./JKBuildMeta"; import loadable from '@loadable/component'; -const AuthBasicLayout = loadable(() => import('./AuthBasicLayout')); +const AuthBasicLayout = loadable(() => import('./JKAuthBasicLayout')); const Layout = () => { useEffect(() => { diff --git a/jam-ui/src/services/auth.js b/jam-ui/src/services/auth.js index 9cee11f4b..3d496ef21 100644 --- a/jam-ui/src/services/auth.js +++ b/jam-ui/src/services/auth.js @@ -3,11 +3,6 @@ import apiFetch from "../helpers/apiFetch"; import { reject } from 'lodash'; export const checkIsAuthenticated = () => { - // return new Promise((resolve, reject) => { - // getCurrentUser() - // .then((resp) => resolve(resp.json())) - // .catch((err) => reject(err)) - // }); return new Promise((resolve, reject) => { apiFetch('/me') .then(response => resolve(response)) @@ -30,7 +25,9 @@ export const authLogin = (credentials) => { export const authLogout = () => { return new Promise((resolve, reject) => { - apiFetch('/auths/logout') + apiFetch('/auths/logout', { + method: 'DELETE' + }) .then((response) => resolve(response)) .catch((error) => reject(error)) }) diff --git a/web/config/routes.rb b/web/config/routes.rb index 6b1f615f7..a61245f4c 100644 --- a/web/config/routes.rb +++ b/web/config/routes.rb @@ -252,7 +252,7 @@ Rails.application.routes.draw do scope '/api' do post '/auths/login' => 'api_auths#login' - post '/auths/logout' => 'api_auths#logout' + delete '/auths/logout' => 'api_auths#logout' # live streams match '/live_streams' => 'api_live_streams#index', :via => :get