diff --git a/packages/core/src/components/OAuthRequestDialog/LoginRequestListItem.tsx b/packages/core/src/components/OAuthRequestDialog/LoginRequestListItem.tsx new file mode 100644 index 0000000000..56d69aa814 --- /dev/null +++ b/packages/core/src/components/OAuthRequestDialog/LoginRequestListItem.tsx @@ -0,0 +1,81 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + ListItem, + ListItemAvatar, + ListItemText, + makeStyles, + Typography, + Theme, +} from '@material-ui/core'; +import React, { FC, useState } from 'react'; +import { AuthRequest } from '../../api'; + +const useItemStyles = makeStyles((theme) => ({ + root: { + paddingLeft: theme.spacing(3), + }, +})); + +type RowProps = { + request: AuthRequest; + busy: boolean; + setBusy: (busy: boolean) => void; +}; + +const LoginRequestListItem: FC = ({ request, busy, setBusy }) => { + const classes = useItemStyles(); + const [error, setError] = useState(); + + const handleContinue = async () => { + setBusy(true); + try { + await request.triggerAuth(); + } catch (e) { + setError(e); + } finally { + setBusy(false); + } + }; + + const IconComponent = request.info.icon; + + return ( + + + + + + {error.message || 'An unspecified error occurred'} + + ) + } + /> + + ); +}; + +export default LoginRequestListItem; diff --git a/packages/core/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx b/packages/core/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx new file mode 100644 index 0000000000..2a105fe5e3 --- /dev/null +++ b/packages/core/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx @@ -0,0 +1,88 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + Dialog, + DialogActions, + DialogContent, + DialogTitle, + List, + makeStyles, + Theme, + Button, +} from '@material-ui/core'; +import React, { FC, useMemo, useState } from 'react'; +import { useObservable } from 'react-use'; +import LoginRequestListItem from './LoginRequestListItem'; +import { useApi, oauthRequestApiRef } from '../../api'; + +const useStyles = makeStyles((theme) => ({ + dialog: { + paddingTop: theme.spacing(1), + }, + title: { + minWidth: 0, + }, + contentList: { + padding: 0, + }, +})); + +type OAuthRequestDialogProps = {}; + +export const OAuthRequestDialog: FC = () => { + const classes = useStyles(); + const [busy, setBusy] = useState(false); + const oauthRequestApi = useApi(oauthRequestApiRef); + const requests = useObservable( + useMemo(() => oauthRequestApi.handleAuthRequests(), [oauthRequestApi]), + [], + ); + + const handleRejectAll = () => { + requests.forEach((request) => request.reject()); + }; + + return ( + + + Login Required + + + + + {requests.map((request) => ( + + ))} + + + + + + + + ); +}; diff --git a/packages/core/src/components/OAuthRequestDialog/index.ts b/packages/core/src/components/OAuthRequestDialog/index.ts new file mode 100644 index 0000000000..45f87ece1d --- /dev/null +++ b/packages/core/src/components/OAuthRequestDialog/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { OAuthRequestDialog } from './OAuthRequestDialog'; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index e817ada9c9..1bd35f67c3 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -33,6 +33,7 @@ export { default as HorizontalProgress } from './components/ProgressBars/Horizon export { default as CopyTextButton } from './components/CopyTextButton'; export { default as Progress } from './components/Progress'; export * from './components/SimpleStepper'; +export { OAuthRequestDialog } from './components/OAuthRequestDialog'; export { AlphaLabel, BetaLabel } from './components/Lifecycle'; export { default as SupportButton } from './components/SupportButton'; export { default as Table, SubvalueCell } from './components/Table';