Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-18 20:59:44 +02:00
Code Issues Releases Activity

fix: OIDC finalization and refactoring

Browse source
This commit is contained in:
Maksim Eltyshev 2023-10-17 19:18:19 +02:00
parent c21e9cb60a
commit b9716c6e3a
70 changed files with 753 additions and 427 deletions
Download patch file Download diff file Expand all files Collapse all files

40
client/package-lock.json generated
View file

@ -19,6 +19,7 @@
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"node-sass": "^8.0.0",
"oidc-client-ts": "^2.3.0",
"photoswipe": "^5.3.3",
"prop-types": "^15.8.1",
"react": "^18.2.0",
@ -30,7 +31,6 @@
"react-i18next": "^12.0.0",
"react-input-mask": "^2.0.4",
"react-markdown": "^8.0.3",
"react-oidc-context": "^2.2.2",
"react-photoswipe-gallery": "^2.2.2",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.3",
@ -7193,8 +7193,7 @@
"node_modules/crypto-js": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
"integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==",
"peer": true
"integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
},
"node_modules/crypto-random-string": {
"version": "2.0.0",
@ -17043,10 +17042,9 @@
"integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
},
"node_modules/oidc-client-ts": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-2.2.4.tgz",
"integrity": "sha512-nOZwIomju+AmXObl5Oq5PjrES/qTt8bLsENJCIydVgi9TEWk7SCkOU6X3RNkY7yfySRM1OJJvDKdREZdmnDT2g==",
"peer": true,
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-2.3.0.tgz",
"integrity": "sha512-7RUKU+TJFQo+4X9R50IGJAIDF18uRBaFXyZn4VVCfwmwbSUhKcdDnw4zgeut3uEXkiD3NqURq+d88sDPxjf1FA==",
"dependencies": {
"crypto-js": "^4.1.1",
"jwt-decode": "^3.1.2"
@ -19296,18 +19294,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/react-oidc-context": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/react-oidc-context/-/react-oidc-context-2.2.2.tgz",
"integrity": "sha512-rke8goKuxxQhSAR11h8wVn56m7kEa1mcAfYDlIycsIgmbZOFzKA0Un0y0RodHZ/M/CG6u0JD1I8RKZHqRJjWnA==",
"engines": {
"node": ">=12.13.0"
},
"peerDependencies": {
"oidc-client-ts": "^2.2.1",
"react": ">=16.8.0"
}
},
"node_modules/react-onclickoutside": {
"version": "6.12.2",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
@ -28802,8 +28788,7 @@
"crypto-js": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
"integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==",
"peer": true
"integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
},
"crypto-random-string": {
"version": "2.0.0",
@ -35972,10 +35957,9 @@
"integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
},
"oidc-client-ts": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-2.2.4.tgz",
"integrity": "sha512-nOZwIomju+AmXObl5Oq5PjrES/qTt8bLsENJCIydVgi9TEWk7SCkOU6X3RNkY7yfySRM1OJJvDKdREZdmnDT2g==",
"peer": true,
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-2.3.0.tgz",
"integrity": "sha512-7RUKU+TJFQo+4X9R50IGJAIDF18uRBaFXyZn4VVCfwmwbSUhKcdDnw4zgeut3uEXkiD3NqURq+d88sDPxjf1FA==",
"requires": {
"crypto-js": "^4.1.1",
"jwt-decode": "^3.1.2"
@ -37419,12 +37403,6 @@
}
}
},
"react-oidc-context": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/react-oidc-context/-/react-oidc-context-2.2.2.tgz",
"integrity": "sha512-rke8goKuxxQhSAR11h8wVn56m7kEa1mcAfYDlIycsIgmbZOFzKA0Un0y0RodHZ/M/CG6u0JD1I8RKZHqRJjWnA==",
"requires": {}
},
"react-onclickoutside": {
"version": "6.12.2",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",

2
client/package.json
View file

@ -66,6 +66,7 @@
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"node-sass": "^8.0.0",
"oidc-client-ts": "^2.3.0",
"photoswipe": "^5.3.3",
"prop-types": "^15.8.1",
"react": "^18.2.0",
@ -77,7 +78,6 @@
"react-i18next": "^12.0.0",
"react-input-mask": "^2.0.4",
"react-markdown": "^8.0.3",
"react-oidc-context": "^2.2.2",
"react-photoswipe-gallery": "^2.2.2",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.3",

2
client/src/actions/core.js
View file

@ -1,6 +1,7 @@
import ActionTypes from '../constants/ActionTypes';
const initializeCore = (
config,
user,
board,
users,
@ -20,6 +21,7 @@ const initializeCore = (
) => ({
type: ActionTypes.CORE_INITIALIZE,
payload: {
config,
user,
board,
users,

28
client/src/actions/login.js
View file

@ -1,5 +1,12 @@
import ActionTypes from '../constants/ActionTypes';
const initializeLogin = (config) => ({
type: ActionTypes.LOGIN_INITIALIZE,
payload: {
config,
},
});
const authenticate = (data) => ({
type: ActionTypes.AUTHENTICATE,
payload: {
@ -21,12 +28,33 @@ authenticate.failure = (error) => ({
},
});
const authenticateWithOidc = () => ({
type: ActionTypes.WITH_OIDC_AUTHENTICATE,
payload: {},
});
authenticateWithOidc.success = (accessToken) => ({
type: ActionTypes.WITH_OIDC_AUTHENTICATE__SUCCESS,
payload: {
accessToken,
},
});
authenticateWithOidc.failure = (error) => ({
type: ActionTypes.WITH_OIDC_AUTHENTICATE__FAILURE,
payload: {
error,
},
});
const clearAuthenticateError = () => ({
type: ActionTypes.AUTHENTICATE_ERROR_CLEAR,
payload: {},
});
export default {
initializeLogin,
authenticate,
authenticateWithOidc,
clearAuthenticateError,
};

7
client/src/api/access-tokens.js
View file

@ -4,14 +4,15 @@ import socket from './socket';
/* Actions */
const createAccessToken = (data, headers) => http.post('/access-tokens', data, headers);
const exchangeOidcToken = (accessToken, headers) =>
http.post('/access-tokens/exchange', { token: accessToken }, headers);
const exchangeToAccessToken = (data, headers) =>
http.post('/access-tokens/exchange', data, headers);
const deleteCurrentAccessToken = (headers) =>
socket.delete('/access-tokens/me', undefined, headers);
export default {
createAccessToken,
exchangeToAccessToken,
deleteCurrentAccessToken,
exchangeOidcToken,
};

12
client/src/api/http.js
View file

@ -5,13 +5,15 @@ import Config from '../constants/Config';
const http = {};
// TODO: add all methods
['POST'].forEach((method) => {
['GET', 'POST'].forEach((method) => {
http[method.toLowerCase()] = (url, data, headers) => {
const formData = Object.keys(data).reduce((result, key) => {
result.append(key, data[key]);
const formData =
data &&
Object.keys(data).reduce((result, key) => {
result.append(key, data[key]);
return result;
}, new FormData());
return result;
}, new FormData());
return fetch(`${Config.SERVER_BASE_URL}/api${url}`, {
method,

2
client/src/api/index.js
View file

@ -1,5 +1,6 @@
import http from './http';
import socket from './socket';
import root from './root';
import accessTokens from './access-tokens';
import users from './users';
import projects from './projects';
@ -20,6 +21,7 @@ import notifications from './notifications';
export { http, socket };
export default {
...root,
...accessTokens,
...users,
...projects,

9
client/src/api/root.js Normal file
View file

@ -0,0 +1,9 @@
import http from './http';
/* Actions */
const getConfig = (headers) => http.get('/config', undefined, headers);
export default {
getConfig,
};

9
client/src/components/Header/Header.jsx
View file

@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import { Button, Icon, Menu } from 'semantic-ui-react';
import { useAuth } from 'react-oidc-context';
import { usePopup } from '../../lib/popup';
import Paths from '../../constants/Paths';
@ -30,7 +29,6 @@ const Header = React.memo(
onUserSettingsClick,
onLogout,
}) => {
const auth = useAuth();
const handleProjectSettingsClick = useCallback(() => {
if (canEditProject) {
onProjectSettingsClick();
@ -40,11 +38,6 @@ const Header = React.memo(
const NotificationsPopup = usePopup(NotificationsStep, POPUP_PROPS);
const UserPopup = usePopup(UserStep, POPUP_PROPS);
const onFullLogout = () => {
auth.signoutSilent();
onLogout();
};
return (
<div className={styles.wrapper}>
{!project && (
@ -95,7 +88,7 @@ const Header = React.memo(
<UserPopup
isLogouting={isLogouting}
onSettingsClick={onUserSettingsClick}
onLogout={onFullLogout}
onLogout={onLogout}
>
<Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
{user.name}

52
client/src/components/Login/Login.jsx
View file

@ -1,10 +1,9 @@
import isEmail from 'validator/lib/isEmail';
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { useAuth } from 'react-oidc-context';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import { Form, Grid, Header, Message } from 'semantic-ui-react';
import { Button, Form, Grid, Header, Message } from 'semantic-ui-react';
import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
import { Input } from '../../lib/custom-ui';
@ -29,6 +28,21 @@ const createMessage = (error) => {
type: 'error',
content: 'common.invalidPassword',
};
case 'Use single sign-on':
return {
type: 'error',
content: 'common.useSingleSignOn',
};
case 'Email already in use':
return {
type: 'error',
content: 'common.emailAlreadyInUse',
};
case 'Username already in use':
return {
type: 'error',
content: 'common.usernameAlreadyInUse',
};
case 'Failed to fetch':
return {
type: 'warning',
@ -48,8 +62,16 @@ const createMessage = (error) => {
};
const Login = React.memo(
({ defaultData, isSubmitting, error, onAuthenticate, onMessageDismiss }) => {
const auth = useAuth();
({
defaultData,
isSubmitting,
isSubmittingWithOidc,
error,
withOidc,
onAuthenticate,
onAuthenticateWithOidc,
onMessageDismiss,
}) => {
const [t] = useTranslation();
const wasSubmitting = usePrevious(isSubmitting);
@ -170,12 +192,19 @@ const Login = React.memo(
content={t('action.logIn')}
floated="right"
loading={isSubmitting}
disabled={isSubmitting}
disabled={isSubmitting || isSubmittingWithOidc}
/>
</Form>
<Form.Button type="button" onClick={() => auth.signinRedirect()}>
Log in with SSO
</Form.Button>
{withOidc && (
<Button
type="button"
loading={isSubmittingWithOidc}
disabled={isSubmitting || isSubmittingWithOidc}
onClick={onAuthenticateWithOidc}
>
{t('action.logInWithSSO')}
</Button>
)}
</div>
</div>
</Grid.Column>
@ -206,10 +235,15 @@ const Login = React.memo(
);
Login.propTypes = {
defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
/* eslint-disable react/forbid-prop-types */
defaultData: PropTypes.object.isRequired,
/* eslint-enable react/forbid-prop-types */
isSubmitting: PropTypes.bool.isRequired,
isSubmittingWithOidc: PropTypes.bool.isRequired,
error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
withOidc: PropTypes.bool.isRequired,
onAuthenticate: PropTypes.func.isRequired,
onAuthenticateWithOidc: PropTypes.func.isRequired,
onMessageDismiss: PropTypes.func.isRequired,
};

19
client/src/components/LoginWrapper.jsx Normal file
View file

@ -0,0 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Loader } from 'semantic-ui-react';
import LoginContainer from '../containers/LoginContainer';
const LoginWrapper = React.memo(({ isInitializing }) => {
if (isInitializing) {
return <Loader active size="massive" />;
}
return <LoginContainer />;
});
LoginWrapper.propTypes = {
isInitializing: PropTypes.bool.isRequired,
};
export default LoginWrapper;

19
client/src/components/OIDC/OidcLogin.jsx
View file

@ -1,19 +0,0 @@
import { useAuth } from 'react-oidc-context';
import PropTypes from 'prop-types';
import React from 'react';
let isLoggingIn = true;
const OidcLogin = React.memo(({ onAuthenticate }) => {
const auth = useAuth();
if (isLoggingIn && auth.user) {
isLoggingIn = false;
const { user } = auth;
onAuthenticate(user);
}
});
OidcLogin.propTypes = {
onAuthenticate: PropTypes.func.isRequired,
};
export default OidcLogin;

3
client/src/components/OIDC/index.js
View file

@ -1,3 +0,0 @@
import OidcLogin from './OidcLogin';
export default OidcLogin;

44
client/src/components/Root.jsx
View file

@ -1,12 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import { AuthProvider } from 'react-oidc-context';
import { Provider } from 'react-redux';
import { Route, Routes } from 'react-router-dom';
import { ReduxRouter } from '../lib/redux-router';
import Paths from '../constants/Paths';
import LoginContainer from '../containers/LoginContainer';
import LoginWrapperContainer from '../containers/LoginWrapperContainer';
import CoreContainer from '../containers/CoreContainer';
import NotFound from './NotFound';
@ -15,40 +14,29 @@ import 'photoswipe/dist/photoswipe.css';
import 'easymde/dist/easymde.min.css';
import '../lib/custom-ui/styles.css';
import '../styles.module.scss';
import OidcLoginContainer from '../containers/OidcLoginContainer';
function Root({ store, history, config }) {
function Root({ store, history }) {
return (
<AuthProvider
authority={config.authority}
client_id={config.clientId}
redirect_uri={config.redirectUri}
scope={config.scopes}
onSigninCallback={() => {
window.history.replaceState({}, document.title, window.location.pathname);
}}
>
<Provider store={store}>
<ReduxRouter history={history}>
<Routes>
<Route path={Paths.LOGIN} element={<LoginContainer />} />
<Route path={Paths.OIDC_LOGIN} element={<OidcLoginContainer />} />
<Route path={Paths.ROOT} element={<CoreContainer />} />
<Route path={Paths.PROJECTS} element={<CoreContainer />} />
<Route path={Paths.BOARDS} element={<CoreContainer />} />
<Route path={Paths.CARDS} element={<CoreContainer />} />
<Route path="*" element={<NotFound />} />
</Routes>
</ReduxRouter>
</Provider>
</AuthProvider>
<Provider store={store}>
<ReduxRouter history={history}>
<Routes>
<Route path={Paths.LOGIN} element={<LoginWrapperContainer />} />
<Route path={Paths.OIDC_CALLBACK} element={<LoginWrapperContainer />} />
<Route path={Paths.ROOT} element={<CoreContainer />} />
<Route path={Paths.PROJECTS} element={<CoreContainer />} />
<Route path={Paths.BOARDS} element={<CoreContainer />} />
<Route path={Paths.CARDS} element={<CoreContainer />} />
<Route path="*" element={<NotFound />} />
</Routes>
</ReduxRouter>
</Provider>
);
}
Root.propTypes = {
/* eslint-disable react/forbid-prop-types */
store: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
config: PropTypes.object.isRequired,
/* eslint-enable react/forbid-prop-types */
};

4
client/src/components/UserSettingsModal/UserSettingsModal.jsx
View file

@ -16,8 +16,8 @@ const UserSettingsModal = React.memo(
phone,
organization,
language,
isLocked,
subscribeToOwnCards,
isLocked,
isAvatarUpdating,
usernameUpdateForm,
emailUpdateForm,
@ -106,8 +106,8 @@ UserSettingsModal.propTypes = {
phone: PropTypes.string,
organization: PropTypes.string,
language: PropTypes.string,
isLocked: PropTypes.bool.isRequired,
subscribeToOwnCards: PropTypes.bool.isRequired,
isLocked: PropTypes.bool.isRequired,
isAvatarUpdating: PropTypes.bool.isRequired,
/* eslint-disable react/forbid-prop-types */
usernameUpdateForm: PropTypes.object.isRequired,

12
client/src/components/UsersModal/Item/ActionsStep.jsx
View file

@ -153,13 +153,15 @@ const ActionsStep = React.memo(
context: 'title',
})}
</Menu.Item>
<Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
{t('action.deleteUser', {
context: 'title',
})}
</Menu.Item>
</>
)}
{!user.isLockedAdmin && (
<Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
{t('action.deleteUser', {
context: 'title',
})}
</Menu.Item>
)}
</Menu>
</Popup.Content>
</>

5
client/src/components/UsersModal/Item/Item.jsx
View file

@ -18,6 +18,7 @@ const Item = React.memo(
phone,
isAdmin,
isLocked,
isLockedAdmin,
emailUpdateForm,
passwordUpdateForm,
usernameUpdateForm,
@ -47,7 +48,7 @@ const Item = React.memo(
<Table.Cell>{username || '-'}</Table.Cell>
<Table.Cell>{email}</Table.Cell>
<Table.Cell>
<Radio toggle checked={isAdmin} disabled={isLocked} onChange={handleIsAdminChange} />
<Radio toggle checked={isAdmin} disabled={isLockedAdmin} onChange={handleIsAdminChange} />
</Table.Cell>
<Table.Cell textAlign="right">
<ActionsPopup
@ -59,6 +60,7 @@ const Item = React.memo(
phone,
isAdmin,
isLocked,
isLockedAdmin,
emailUpdateForm,
passwordUpdateForm,
usernameUpdateForm,
@ -91,6 +93,7 @@ Item.propTypes = {
phone: PropTypes.string,
isAdmin: PropTypes.bool.isRequired,
isLocked: PropTypes.bool.isRequired,
isLockedAdmin: PropTypes.bool.isRequired,
/* eslint-disable react/forbid-prop-types */
emailUpdateForm: PropTypes.object.isRequired,
passwordUpdateForm: PropTypes.object.isRequired,

1
client/src/components/UsersModal/UsersModal.jsx
View file

@ -111,6 +111,7 @@ const UsersModal = React.memo(
phone={item.phone}
isAdmin={item.isAdmin}
isLocked={item.isLocked}
isLockedAdmin={item.isLockedAdmin}
emailUpdateForm={item.emailUpdateForm}
passwordUpdateForm={item.passwordUpdateForm}
usernameUpdateForm={item.usernameUpdateForm}

4
client/src/constants/ActionTypes.js
View file

@ -12,9 +12,13 @@ export default {
/* Login */
LOGIN_INITIALIZE: 'LOGIN_INITIALIZE',
AUTHENTICATE: 'AUTHENTICATE',
AUTHENTICATE__SUCCESS: 'AUTHENTICATE__SUCCESS',
AUTHENTICATE__FAILURE: 'AUTHENTICATE__FAILURE',
WITH_OIDC_AUTHENTICATE: 'WITH_OIDC_AUTHENTICATE',
WITH_OIDC_AUTHENTICATE__SUCCESS: 'WITH_OIDC_AUTHENTICATE__SUCCESS',
WITH_OIDC_AUTHENTICATE__FAILURE: 'WITH_OIDC_AUTHENTICATE__FAILURE',
AUTHENTICATE_ERROR_CLEAR: 'AUTHENTICATE_ERROR_CLEAR',
/* Core */

2
client/src/constants/EntryActionTypes.js
View file

@ -11,11 +11,11 @@ export default {
/* Login */
AUTHENTICATE: `${PREFIX}/AUTHENTICATE`,
WITH_OIDC_AUTHENTICATE: `${PREFIX}/WITH_OIDC_AUTHENTICATE`,
AUTHENTICATE_ERROR_CLEAR: `${PREFIX}/AUTHENTICATE_ERROR_CLEAR`,
/* Core */
CORE_INITIALIZE: `${PREFIX}/CORE_INITIALIZE`,
LOGOUT: `${PREFIX}/LOGOUT`,
/* Modals */

4
client/src/constants/Paths.js
View file

@ -2,7 +2,7 @@ import Config from './Config';
const ROOT = `${Config.BASE_PATH}/`;
const LOGIN = `${Config.BASE_PATH}/login`;
const OIDC_LOGIN = `${Config.BASE_PATH}/oidclogin`;
const OIDC_CALLBACK = `${Config.BASE_PATH}/oidc-callback`;
const PROJECTS = `${Config.BASE_PATH}/projects/:id`;
const BOARDS = `${Config.BASE_PATH}/boards/:id`;
const CARDS = `${Config.BASE_PATH}/cards/:id`;
@ -10,8 +10,8 @@ const CARDS = `${Config.BASE_PATH}/cards/:id`;
export default {
ROOT,
LOGIN,
OIDC_CALLBACK,
PROJECTS,
BOARDS,
CARDS,
OIDC_LOGIN,
};

4
client/src/containers/CoreContainer.js
View file

@ -4,18 +4,18 @@ import selectors from '../selectors';
import Core from '../components/Core';
const mapStateToProps = (state) => {
const isCoreInitializing = selectors.selectIsCoreInitializing(state);
const isInitializing = selectors.selectIsInitializing(state);
const isSocketDisconnected = selectors.selectIsSocketDisconnected(state);
const currentModal = selectors.selectCurrentModal(state);
const currentProject = selectors.selectCurrentProject(state);
const currentBoard = selectors.selectCurrentBoard(state);
return {
isInitializing,
isSocketDisconnected,
currentModal,
currentProject,
currentBoard,
isInitializing: isCoreInitializing,
};
};

28
client/src/containers/LoginContainer.js
View file

@ -1,23 +1,33 @@
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import selectors from '../selectors';
import entryActions from '../entry-actions';
import Login from '../components/Login';
const mapStateToProps = ({
ui: {
authenticateForm: { data: defaultData, isSubmitting, error },
},
}) => ({
defaultData,
isSubmitting,
error,
});
const mapStateToProps = (state) => {
const oidcConfig = selectors.selectOidcConfig(state);
const {
ui: {
authenticateForm: { data: defaultData, isSubmitting, isSubmittingWithOidc, error },
},
} = state;
return {
defaultData,
isSubmitting,
isSubmittingWithOidc,
error,
withOidc: !!oidcConfig,
};
};
const mapDispatchToProps = (dispatch) =>
bindActionCreators(
{
onAuthenticate: entryActions.authenticate,
onAuthenticateWithOidc: entryActions.authenticateWithOidc,
onMessageDismiss: entryActions.clearAuthenticateError,
},
dispatch,

14
client/src/containers/LoginWrapperContainer.js Normal file
View file

@ -0,0 +1,14 @@
import { connect } from 'react-redux';
import selectors from '../selectors';
import LoginWrapper from '../components/LoginWrapper';
const mapStateToProps = (state) => {
const isInitializing = selectors.selectIsInitializing(state);
return {
isInitializing,
};
};
export default connect(mapStateToProps)(LoginWrapper);

26
client/src/containers/OidcLoginContainer.js
View file

@ -1,26 +0,0 @@
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import entryActions from '../entry-actions';
import OidcLogin from '../components/OIDC';
const mapStateToProps = ({
ui: {
authenticateForm: { data: defaultData, isSubmitting, error },
},
}) => ({
defaultData,
isSubmitting,
error,
});
const mapDispatchToProps = (dispatch) =>
bindActionCreators(
{
onAuthenticate: entryActions.authenticate,
onMessageDismiss: entryActions.clearAuthenticateError,
},
dispatch,
);
export default connect(mapStateToProps, mapDispatchToProps)(OidcLogin);

4
client/src/containers/UserSettingsModalContainer.js
View file

@ -14,8 +14,8 @@ const mapStateToProps = (state) => {
phone,
organization,
language,
isLocked,
subscribeToOwnCards,
isLocked,
isAvatarUpdating,
emailUpdateForm,
passwordUpdateForm,
@ -30,8 +30,8 @@ const mapStateToProps = (state) => {
phone,
organization,
language,
isLocked,
subscribeToOwnCards,
isLocked,
isAvatarUpdating,
emailUpdateForm,
passwordUpdateForm,

6
client/src/entry-actions/core.js
View file

@ -1,16 +1,10 @@
import EntryActionTypes from '../constants/EntryActionTypes';
const initializeCore = () => ({
type: EntryActionTypes.CORE_INITIALIZE,
payload: {},
});
const logout = () => ({
type: EntryActionTypes.LOGOUT,
payload: {},
});
export default {
initializeCore,
logout,
};

6
client/src/entry-actions/login.js
View file

@ -7,6 +7,11 @@ const authenticate = (data) => ({
},
});
const authenticateWithOidc = () => ({
type: EntryActionTypes.WITH_OIDC_AUTHENTICATE,
payload: {},
});
const clearAuthenticateError = () => ({
type: EntryActionTypes.AUTHENTICATE_ERROR_CLEAR,
payload: {},
@ -14,5 +19,6 @@ const clearAuthenticateError = () => ({
export default {
authenticate,
authenticateWithOidc,
clearAuthenticateError,
};

10
client/src/index.js
View file

@ -1,15 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import Config from './constants/Config';
import store from './store';
import history from './history';
import Root from './components/Root';
import './i18n';
fetch(`${Config.SERVER_BASE_URL}/api/appconfig`).then((response) => {
response.json().then((config) => {
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Root, { store, history, config }));
});
});
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Root, { store, history }));

2
client/src/locales/en/login.js
View file

@ -11,10 +11,12 @@ export default {
projectManagement: 'Project management',
serverConnectionFailed: 'Server connection failed',
unknownError: 'Unknown error, try again later',
useSingleSignOn: 'Use single sign-on',
},
action: {
logIn: 'Log in',
logInWithSSO: 'Log in with SSO',
},
},
};

11
client/src/models/User.js
View file

@ -43,16 +43,13 @@ export default class extends BaseModel {
organization: attr(),
language: attr(),
subscribeToOwnCards: attr(),
isAdmin: attr(),
isLocked: attr(),
isLockedAdmin: attr(),
deletedAt: attr(),
createdAt: attr({
getDefault: () => new Date(),
}),
deletedAt: attr(),
isAdmin: attr({
getDefault: () => false,
}),
isLocked: attr({
getDefault: () => false,
}),
isAvatarUpdating: attr({
getDefault: () => false,
}),

1
client/src/reducers/auth.js
View file

@ -10,6 +10,7 @@ const initialState = {
export default (state = initialState, { type, payload }) => {
switch (type) {
case ActionTypes.AUTHENTICATE__SUCCESS:
case ActionTypes.WITH_OIDC_AUTHENTICATE__SUCCESS:
return {
...state,
accessToken: payload.accessToken,

6
client/src/reducers/core.js
View file

@ -4,7 +4,6 @@ import ActionTypes from '../constants/ActionTypes';
import ModalTypes from '../constants/ModalTypes';
const initialState = {
isInitializing: true,
isLogouting: false,
currentModal: null,
};
@ -18,11 +17,6 @@ export default (state = initialState, { type, payload }) => {
...state,
currentModal: null,
};
case ActionTypes.CORE_INITIALIZE:
return {
...state,
isInitializing: false,
};
case ActionTypes.LOGOUT__ACCESS_TOKEN_INVALIDATE:
return {
...state,

2
client/src/reducers/index.js
View file

@ -3,6 +3,7 @@ import { combineReducers } from 'redux';
import router from './router';
import socket from './socket';
import orm from './orm';
import root from './root';
import auth from './auth';
import core from './core';
import ui from './ui';
@ -11,6 +12,7 @@ export default combineReducers({
router,
socket,
orm,
root,
auth,
core,
ui,

34
client/src/reducers/root.js Normal file
View file

@ -0,0 +1,34 @@
import ActionTypes from '../constants/ActionTypes';
const initialState = {
isInitializing: true,
config: null,
};
// eslint-disable-next-line default-param-last
export default (state = initialState, { type, payload }) => {
switch (type) {
case ActionTypes.LOGIN_INITIALIZE:
return {
...state,
isInitializing: false,
config: payload.config,
};
case ActionTypes.AUTHENTICATE__SUCCESS:
case ActionTypes.WITH_OIDC_AUTHENTICATE__SUCCESS:
return {
...state,
isInitializing: true,
};
case ActionTypes.CORE_INITIALIZE:
return {
...state,
isInitializing: false,
...(payload.config && {
config: payload.config,
}),
};
default:
return state;
}
};

20
client/src/reducers/ui/authenticate-form.js
View file

@ -1,4 +1,7 @@
import { LOCATION_CHANGE_HANDLE } from '../../lib/redux-router';
import ActionTypes from '../../constants/ActionTypes';
import Paths from '../../constants/Paths';
const initialState = {
data: {
@ -6,12 +9,22 @@ const initialState = {
password: '',
},
isSubmitting: false,
isSubmittingWithOidc: false,
error: null,
};
// eslint-disable-next-line default-param-last
export default (state = initialState, { type, payload }) => {
switch (type) {
case LOCATION_CHANGE_HANDLE:
if (payload.location.pathname === Paths.OIDC_CALLBACK) {
return {
...state,
isSubmittingWithOidc: true,
};
}
return state;
case ActionTypes.AUTHENTICATE:
return {
...state,
@ -22,6 +35,7 @@ export default (state = initialState, { type, payload }) => {
isSubmitting: true,
};
case ActionTypes.AUTHENTICATE__SUCCESS:
case ActionTypes.WITH_OIDC_AUTHENTICATE__SUCCESS:
return initialState;
case ActionTypes.AUTHENTICATE__FAILURE:
return {
@ -29,6 +43,12 @@ export default (state = initialState, { type, payload }) => {
isSubmitting: false,
error: payload.error,
};
case ActionTypes.WITH_OIDC_AUTHENTICATE__FAILURE:
return {
...state,
isSubmittingWithOidc: false,
error: payload.error,
};
case ActionTypes.AUTHENTICATE_ERROR_CLEAR:
return {
...state,

22
client/src/sagas/core/services/core.js
View file

@ -1,13 +1,22 @@
import { call, put, take } from 'redux-saga/effects';
import { apply, call, put, select, take } from 'redux-saga/effects';
import request from '../request';
import requests from '../requests';
import selectors from '../../../selectors';
import actions from '../../../actions';
import api from '../../../api';
import i18n from '../../../i18n';
import { createOidcManager } from '../../../utils/oidc-manager';
import { removeAccessToken } from '../../../utils/access-token-storage';
export function* initializeCore() {
const currentConfig = yield select(selectors.selectConfig); // TODO: add boolean selector?
let config;
if (!currentConfig) {
({ item: config } = yield call(api.getConfig)); // TODO: handle error
}
const {
user,
board,
@ -32,6 +41,7 @@ export function* initializeCore() {
yield put(
actions.initializeCore(
config,
user,
board,
users,
@ -74,6 +84,16 @@ export function* logout(invalidateAccessToken = true) {
} catch (error) {} // eslint-disable-line no-empty
}
const oidcConfig = yield select(selectors.selectOidcConfig);
if (oidcConfig) {
const oidcManager = createOidcManager(oidcConfig);
try {
yield apply(oidcManager, oidcManager.logout);
} catch (error) {} // eslint-disable-line no-empty
}
yield put(actions.logout());
yield take();
}

7
client/src/sagas/core/services/router.js
View file

@ -33,15 +33,16 @@ export function* handleLocationChange() {
switch (pathsMatch.pattern.path) {
case Paths.LOGIN:
case Paths.OIDC_CALLBACK:
yield call(goToRoot);
break;
return;
default:
}
const isCoreInitializing = yield select(selectors.selectIsCoreInitializing);
const isInitializing = yield select(selectors.selectIsInitializing);
if (isCoreInitializing) {
if (isInitializing) {
yield take(ActionTypes.CORE_INITIALIZE);
}

5
client/src/sagas/core/watchers/core.js
View file

@ -4,8 +4,5 @@ import services from '../services';
import EntryActionTypes from '../../../constants/EntryActionTypes';
export default function* coreWatchers() {
yield all([
takeEvery(EntryActionTypes.CORE_INITIALIZE, () => services.initializeCore()),
takeEvery(EntryActionTypes.LOGOUT, () => services.logout()),
]);
yield all([takeEvery(EntryActionTypes.LOGOUT, () => services.logout())]);
}

4
client/src/sagas/login/index.js
View file

@ -7,7 +7,9 @@ import ActionTypes from '../../constants/ActionTypes';
export default function* loginSaga() {
const watcherTasks = yield all(watchers.map((watcher) => fork(watcher)));
yield take(ActionTypes.AUTHENTICATE__SUCCESS);
yield fork(services.initializeLogin);
yield take([ActionTypes.AUTHENTICATE__SUCCESS, ActionTypes.WITH_OIDC_AUTHENTICATE__SUCCESS]);
yield cancel(watcherTasks);
yield call(services.goToRoot);

59
client/src/sagas/login/services/login.js
View file

@ -1,19 +1,25 @@
import { call, put } from 'redux-saga/effects';
import { apply, call, put, select } from 'redux-saga/effects';
import { replace } from '../../../lib/redux-router';
import selectors from '../../../selectors';
import actions from '../../../actions';
import api from '../../../api';
import { createOidcManager } from '../../../utils/oidc-manager';
import { setAccessToken } from '../../../utils/access-token-storage';
import Paths from '../../../constants/Paths';
export function* initializeLogin() {
const { item: config } = yield call(api.getConfig); // TODO: handle error
yield put(actions.initializeLogin(config));
}
export function* authenticate(data) {
yield put(actions.authenticate(data));
let accessToken = data.access_token;
let accessToken;
try {
if (accessToken) {
({ item: accessToken } = yield call(api.exchangeOidcToken, accessToken));
} else {
({ item: accessToken } = yield call(api.createAccessToken, data));
}
({ item: accessToken } = yield call(api.createAccessToken, data));
} catch (error) {
yield put(actions.authenticate.failure(error));
return;
@ -23,11 +29,50 @@ export function* authenticate(data) {
yield put(actions.authenticate.success(accessToken));
}
export function* authenticateWithOidc() {
const oidcConfig = yield select(selectors.selectOidcConfig);
const oidcManager = createOidcManager(oidcConfig);
yield apply(oidcManager, oidcManager.login);
}
export function* authenticateWithOidcCallback() {
const oidcConfig = yield select(selectors.selectOidcConfig);
const oidcManager = createOidcManager(oidcConfig);
let oidcToken;
try {
({ access_token: oidcToken } = yield apply(oidcManager, oidcManager.loginCallback));
} catch (error) {
yield put(actions.authenticateWithOidc.failure(error));
}
yield put(replace(Paths.LOGIN));
if (oidcToken) {
let accessToken;
try {
({ item: accessToken } = yield call(api.exchangeToAccessToken, {
token: oidcToken,
}));
} catch (error) {
yield put(actions.authenticateWithOidc.failure(error));
return;
}
yield call(setAccessToken, accessToken);
yield put(actions.authenticateWithOidc.success(accessToken));
}
}
export function* clearAuthenticateError() {
yield put(actions.clearAuthenticateError());
}
export default {
initializeLogin,
authenticate,
authenticateWithOidc,
authenticateWithOidcCallback,
clearAuthenticateError,
};

17
client/src/sagas/login/services/router.js
View file

@ -1,7 +1,9 @@
import { call, put, select } from 'redux-saga/effects';
import { call, put, select, take } from 'redux-saga/effects';
import { push } from '../../../lib/redux-router';
import { authenticateWithOidcCallback } from './login';
import selectors from '../../../selectors';
import ActionTypes from '../../../constants/ActionTypes';
import Paths from '../../../constants/Paths';
export function* goToLogin() {
@ -27,6 +29,19 @@ export function* handleLocationChange() {
yield call(goToLogin);
break;
case Paths.OIDC_CALLBACK: {
const isInitializing = yield select(selectors.selectIsInitializing);
if (isInitializing) {
yield take(ActionTypes.LOGIN_INITIALIZE);
}
// TODO: check if OIDC is enabled
yield call(authenticateWithOidcCallback);
break;
}
default:
}
}

1
client/src/sagas/login/watchers/login.js
View file

@ -8,6 +8,7 @@ export default function* loginWatchers() {
takeEvery(EntryActionTypes.AUTHENTICATE, ({ payload: { data } }) =>
services.authenticate(data),
),
takeEvery(EntryActionTypes.WITH_OIDC_AUTHENTICATE, () => services.authenticateWithOidc()),
takeEvery(EntryActionTypes.AUTHENTICATE_ERROR_CLEAR, () => services.clearAuthenticateError()),
]);
}

3
client/src/selectors/core.js
View file

@ -6,8 +6,6 @@ import Config from '../constants/Config';
export const selectAccessToken = ({ auth: { accessToken } }) => accessToken;
export const selectIsCoreInitializing = ({ core: { isInitializing } }) => isInitializing;
export const selectIsLogouting = ({ core: { isLogouting } }) => isLogouting;
const nextPosition = (items, index, excludedId) => {
@ -115,7 +113,6 @@ export const selectNextTaskPosition = createSelector(
export default {
selectAccessToken,
selectIsCoreInitializing,
selectIsLogouting,
selectNextBoardPosition,
selectNextLabelPosition,

2
client/src/selectors/index.js
View file

@ -1,5 +1,6 @@
import router from './router';
import socket from './socket';
import root from './root';
import core from './core';
import modals from './modals';
import users from './users';
@ -16,6 +17,7 @@ import attachments from './attachments';
export default {
...router,
...socket,
...root,
...core,
...modals,
...users,

11
client/src/selectors/root.js Normal file
View file

@ -0,0 +1,11 @@
export const selectIsInitializing = ({ root: { isInitializing } }) => isInitializing;
export const selectConfig = ({ root: { config } }) => config;
export const selectOidcConfig = (state) => selectConfig(state).oidc;
export default {
selectIsInitializing,
selectConfig,
selectOidcConfig,
};

27
client/src/utils/oidc-manager.js Normal file
View file

@ -0,0 +1,27 @@
import { UserManager } from 'oidc-client-ts';
export default class OidcManager {
constructor(config) {
this.userManager = new UserManager({
...config,
authority: config.issuer,
client_id: config.clientId,
redirect_uri: config.redirectUri,
scope: config.scopes,
});
}
login() {
return this.userManager.signinRedirect();
}
loginCallback() {
return this.userManager.signinRedirectCallback();
}
logout() {
return this.userManager.signoutSilent();
}
}
export const createOidcManager = (config) => new OidcManager(config);