feat: add elevation dialog to protected actions

Author: jmattheis

ui/src/ElevateStore.ts

@@ -0,0 +1,102 @@
+import axios from 'axios';
+import {action, observable, runInAction} from 'mobx';
+import * as config from './config';
+import {SnackReporter} from './snack/SnackManager';
+import {CurrentUser} from './CurrentUser';
+
+export class ElevateStore {
+    @observable accessor elevated = false;
+    @observable accessor oidcElevatePending = false;
+    private oidcPollIntervalId: number | undefined = undefined;
+    private oidcPopup: Window | null = null;
+
+    public constructor(
+        private readonly snack: SnackReporter,
+        private readonly currentUser: CurrentUser
+    ) {}
+
+    @action
+    public refreshElevated = (): number => {
+        const elevatedUntil = this.currentUser.user.elevatedUntil;
+        if (!elevatedUntil) {
+            this.elevated = false;
+            return 0;
+        }
+        const ms = new Date(elevatedUntil).getTime() - 30_000 - Date.now();
+        if (ms <= 0) {
+            this.elevated = false;
+            return 0;
+        }
+        this.elevated = true;
+        return ms;
+    };
+
+    public localElevate = async (password: string, durationSeconds: number): Promise<void> => {
+        await axios.create().request({
+            url: config.get('url') + 'client:elevate',
+            method: 'POST',
+            data: {id: this.currentUser.user.clientId, durationSeconds},
+            headers: {
+                Authorization: 'Basic ' + btoa(this.currentUser.user.name + ':' + password),
+            },
+        });
+        await this.currentUser.tryAuthenticate();
+        this.cleanupOidcElevate();
+    };
+
+    public oidcElevate = (durationSeconds: number): void => {
+        // prevent double execution
+        if (this.oidcElevatePending) return;
+
+        const url =
+            config.get('url') +
+            'auth/oidc/elevate?id=' +
+            this.currentUser.user.clientId +
+            '&durationSeconds=' +
+            durationSeconds;
+
+        this.oidcPopup = window.open(url, 'gotify-oidc-elevate', 'width=600,height=700');
+        if (!this.oidcPopup) {
+            this.snack('Popup was blocked. Please allow popups for this site and try again.');
+            return;
+        }
+
+        runInAction(() => (this.oidcElevatePending = true));
+
+        this.oidcPollIntervalId = window.setInterval(this.checkOidcPopup, 500);
+    };
+
+    private checkOidcPopup = async () => {
+        if (this.oidcPopup && !this.oidcPopup.closed) {
+            // waiting for the popup to close.
+            return;
+        }
+
+        window.clearInterval(this.oidcPollIntervalId);
+        this.oidcPollIntervalId = undefined;
+
+        try {
+            await this.currentUser.tryAuthenticate();
+        } catch {
+            // errors handled in tryAuthenticate
+        }
+
+        if (!this.elevated) {
+            this.snack('OIDC elevation was not completed.');
+        }
+        this.cleanupOidcElevate();
+    };
+
+    public cleanupOidcElevate = () => {
+        window.clearInterval(this.oidcPollIntervalId);
+        this.oidcPollIntervalId = undefined;
+
+        if (this.oidcPopup && !this.oidcPopup.closed) {
+            this.oidcPopup.close();
+        }
+        this.oidcPopup = null;
+        runInAction(() => {
+            this.oidcElevatePending = false;
+        });
+    };
+}

ui/src/application/Applications.tsx

@@ -179,6 +179,7 @@ const Applications = observer(() => {
                     text={'Delete ' + toDeleteApp.name + '?'}
                     fClose={() => setToDeleteApp(undefined)}
                     fOnSubmit={() => appStore.remove(toDeleteApp.id)}
+                    requireElevated
                 />
             )}
             {toDeleteImage != null && (

ui/src/client/Clients.tsx

@@ -87,6 +87,7 @@ const Clients = observer(() => {
                     text={'Delete ' + toDeleteClient.name + '?'}
                     fClose={() => setToDeleteClient(undefined)}
                     fOnSubmit={() => clientStore.remove(toDeleteClient.id)}
+                    requireElevated
                 />
             )}
         </DefaultPage>

ui/src/common/ConfirmDialog.tsx

@@ -5,42 +5,60 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import React from 'react';
+import {observer} from 'mobx-react-lite';
+import {useStores} from '../stores';
+import ElevationForm from './ElevationForm';
 
 interface IProps {
     title: string;
     text: string;
     fClose: VoidFunction;
     fOnSubmit: VoidFunction;
+    requireElevated?: boolean;
 }
 
-export default function ConfirmDialog({title, text, fClose, fOnSubmit}: IProps) {
+const ConfirmDialog = observer(({title, text, fClose, fOnSubmit, requireElevated}: IProps) => {
+    const {elevateStore} = useStores();
+
+    const needsElevation = requireElevated && !elevateStore.elevated;
+
     const submitAndClose = () => {
         fOnSubmit();
         fClose();
     };
+
+    const handleClose = () => {
+        elevateStore.cleanupOidcElevate();
+        fClose();
+    };
+
     return (
         <Dialog
             open={true}
-            onClose={fClose}
+            onClose={handleClose}
             aria-labelledby="form-dialog-title"
             className="confirm-dialog">
             <DialogTitle id="form-dialog-title">{title}</DialogTitle>
             <DialogContent>
-                <DialogContentText>{text}</DialogContentText>
+                {needsElevation ? <ElevationForm /> : <DialogContentText>{text}</DialogContentText>}
             </DialogContent>
             <DialogActions>
-                <Button onClick={fClose} className="cancel">
-                    No
-                </Button>
-                <Button
-                    onClick={submitAndClose}
-                    autoFocus
-                    color="primary"
-                    variant="contained"
-                    className="confirm">
-                    Yes
+                <Button onClick={handleClose} className="cancel">
+                    Cancel
                 </Button>
+                {!needsElevation && (
+                    <Button
+                        onClick={submitAndClose}
+                        autoFocus
+                        color="primary"
+                        variant="contained"
+                        className="confirm">
+                        Yes
+                    </Button>
+                )}
             </DialogActions>
         </Dialog>
     );
-}
+});
+
+export default ConfirmDialog;

ui/src/common/ElevationForm.tsx

@@ -0,0 +1,95 @@
+import React, {useState} from 'react';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import {observer} from 'mobx-react-lite';
+import {useStores} from '../stores';
+import * as config from '../config';
+import CircularProgress from '@mui/material/CircularProgress';
+import {Box, Divider} from '@mui/material';
+
+const ElevateDuration = 60 * 60;
+
+const ElevationForm = observer(() => {
+    const {elevateStore} = useStores();
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+
+    const oidcEnabled = config.get('oidc');
+    const oidcPending = elevateStore.oidcElevatePending;
+
+    const handleLocalElevate = async () => {
+        try {
+            await elevateStore.localElevate(password, ElevateDuration);
+        } catch {
+            setError('Elevation failed. Check your password.');
+        }
+    };
+
+    if (oidcPending) {
+        return (
+            <Box sx={{textAlign: 'center', my: 2}}>
+                <CircularProgress sx={{mb: 2}} />
+                <Typography sx={{mb: 1}}>Waiting for OIDC sign-in...</Typography>
+                <Typography variant="body2" color="textSecondary" sx={{mb: 1}}>
+                    Complete sign-in in the new tab, then close it to continue.
+                </Typography>
+                <Button
+                    variant="outlined"
+                    fullWidth
+                    onClick={() => elevateStore.cleanupOidcElevate()}>
+                    Cancel OIDC Login
+                </Button>
+            </Box>
+        );
+    }
+
+    return (
+        <>
+            <Typography>This action requires re-authentication.</Typography>
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    handleLocalElevate();
+                }}>
+                <TextField
+                    autoFocus
+                    margin="dense"
+                    type="password"
+                    label="Password"
+                    value={password}
+                    onChange={(e) => {
+                        setPassword(e.target.value);
+                        setError('');
+                    }}
+                    fullWidth
+                    error={!!error}
+                    helperText={error}
+                />
+                <Button
+                    type="submit"
+                    disabled={password.length === 0}
+                    color="primary"
+                    variant="contained"
+                    fullWidth>
+                    Elevate with Password
+                </Button>
+            </form>
+
+            {oidcEnabled && (
+                <>
+                    <Divider sx={{my: 2}}>or</Divider>
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        fullWidth
+                        onClick={() => elevateStore.oidcElevate(ElevateDuration)}>
+                        Elevate via OIDC
+                    </Button>
+                </>
+            )}
+        </>
+    );
+});
+
+export default ElevationForm;

ui/src/common/SettingsDialog.tsx

@@ -8,53 +8,65 @@ import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import {observer} from 'mobx-react-lite';
 import {useStores} from '../stores';
+import ElevationForm from './ElevationForm';
 
 interface IProps {
     fClose: VoidFunction;
 }
 
 const SettingsDialog = observer(({fClose}: IProps) => {
     const [pass, setPass] = useState('');
-    const {currentUser} = useStores();
+    const {currentUser, elevateStore} = useStores();
 
-    const submitAndClose = async () => {
+    const handleClose = () => {
+        elevateStore.cleanupOidcElevate();
+        fClose();
+    };
+
+    const submitAndClose = () => {
         currentUser.changePassword(pass);
         fClose();
     };
 
     return (
         <Dialog
             open={true}
-            onClose={fClose}
+            onClose={handleClose}
             aria-labelledby="form-dialog-title"
             id="changepw-dialog">
             <DialogTitle id="form-dialog-title">Change Password</DialogTitle>
             <DialogContent>
-                <TextField
-                    className="newpass"
-                    autoFocus
-                    margin="dense"
-                    type="password"
-                    label="New Password *"
-                    value={pass}
-                    onChange={(e) => setPass(e.target.value)}
-                    fullWidth
-                />
+                {elevateStore.elevated ? (
+                    <TextField
+                        className="newpass"
+                        autoFocus
+                        margin="dense"
+                        type="password"
+                        label="New Password *"
+                        value={pass}
+                        onChange={(e) => setPass(e.target.value)}
+                        fullWidth
+                    />
+                ) : (
+                    <ElevationForm />
+                )}
             </DialogContent>
             <DialogActions>
-                <Button onClick={fClose}>Cancel</Button>
-                <Tooltip title={pass.length !== 0 ? '' : 'Password is required'}>
-                    <div>
-                        <Button
-                            className="change"
-                            disabled={pass.length === 0}
-                            onClick={submitAndClose}
-                            color="primary"
-                            variant="contained">
-                            Change
-                        </Button>
-                    </div>
-                </Tooltip>
+                <Button onClick={handleClose}>Cancel</Button>
+                {elevateStore.elevated && (
+                    <Tooltip title={pass.length !== 0 ? '' : 'Password is required'}>
+                        <div>
+                            <Button
+                                className="change"
+                                disabled={pass.length === 0}
+                                onClick={submitAndClose}
+                                color="primary"
+                                variant="contained">
+                                Change
+                            </Button>
+                        </div>
+                    </Tooltip>
+                )}
             </DialogActions>
         </Dialog>
     );