@fluxo-dev/shell 0.0.8

package/src/lib/pages/login/account-confirmation.tsx

@@ -0,0 +1,86 @@
+import { Button, Grid, Stack, Text } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import {UserService} from "@fluxo-dev/api-client-base";
+
+export function AccountConfirmation() {
+
+    const [email, setEmail] = useState<string>();
+    const [token, setToken] = useState<string>();
+    const [linkIsValid, setLinkIsValid] = useState<boolean>(true);
+
+    const [recoveryResult, setRecoveryResult] = useState<{ success: boolean, errors: { code: string, description: string }[] } | undefined>();
+
+    const userService = new UserService();
+    let [searchParams] = useSearchParams();
+
+    useEffect(() => {
+
+        const currentEmail = searchParams.get('email');
+        const currentToken = searchParams.get('token');
+
+        if (!currentEmail || !currentToken) {
+            setLinkIsValid(false)
+        } else {
+            setEmail(currentEmail)
+            setToken(currentToken)
+        }
+
+
+    }, [searchParams]);
+
+    const onFormSubmitClickHandler = () => {
+        if (email && token) {
+            userService.confirmEmail({ email: email, token: token })
+                .then(async (res) => {
+                    setRecoveryResult(res);
+                })
+                .catch(_err => setRecoveryResult({ success: false, errors: [{ code: 'unkown', description: 'Errore sconosciuto' }] }));
+        }
+    }
+
+    return (
+        <Grid justify="center">
+            <Grid.Col span={3}>
+
+                {linkIsValid &&
+                    <Stack gap={16}>
+                        {(!recoveryResult) &&
+                            <Stack gap={16}>
+                                <h2 style={{ textAlign: 'center' }}>Conferma attivazione account</h2>
+                                <Text style={{ marginTop: 0, marginBottom: 32, textAlign: 'center' }}>{email}</Text>
+
+                                <Button onClick={onFormSubmitClickHandler}>Clicca qui per attivare il tuo account</Button>
+                            </Stack>
+                        }
+
+                        {recoveryResult?.success ?
+                            <div style={{ marginTop: 32 }}>
+                                <Stack gap={16} style={{ textAlign: 'center' }}>
+                                    <Text>Account attivato con successo</Text>
+                                    <Link to={'/identity/login'}>Effettua il login</Link>
+                                </Stack>
+                            </div> :
+                            <div style={{ textAlign: 'center', marginTop: 32 }}>
+                                {recoveryResult?.errors.map((err, index) => {
+                                    return <Text key={err.code + index} >{err.description}</Text>
+                                })}
+                            </div>
+                        }
+
+                    </Stack>
+                }
+
+                {!linkIsValid &&
+                    <Stack gap={16}>
+                        <Text>Link non valido</Text>
+                        <Link to={'/identity/login'} style={{ textAlign: 'center' }}>Effettua il login</Link>
+                    </Stack>
+                }
+
+            </Grid.Col>
+        </Grid>
+    )
+}
+
+export default AccountConfirmation;

package/src/lib/pages/login/change-password.tsx

@@ -0,0 +1,58 @@
+import { Button, Grid, Stack, TextInput, Text } from '@mantine/core';
+import { useState } from 'react';
+import {UserService} from "@fluxo-dev/api-client-base";
+
+export function ChangePassword() {
+
+    const [currentPassword, setCurrentPassword] = useState<string>();
+    const [newPassword, setNewPassword] = useState<string>();
+    const [confirmNewPassword, setConfirmNewPassword] = useState<string>();
+
+    const userService = new UserService();
+
+    const [recoveryResult, setRecoveryResult] = useState<{ success: boolean, errors: { code: string, description: string }[] } | undefined>();
+
+    const onFormSubmitClickHandler = () => {
+        if (currentPassword && newPassword && confirmNewPassword) {
+            userService.changePassword({ currentPassword: currentPassword, newPassword: newPassword })
+                .then(async (_res) => {
+                    setRecoveryResult(_res);
+                })
+                .catch(_err => {
+                    setRecoveryResult({ success: false, errors: [{ code: 'unkown', description: 'Errore sconosciuto' }] })
+                });
+        }
+    }
+
+    return (
+        <Grid justify="center">
+            <Grid.Col span={3}>
+
+                <Stack gap={16}>
+                    {(!recoveryResult || !recoveryResult.success) &&
+                        <Stack gap={16}>
+                            <h2>Cambio password</h2>
+                            <TextInput type={'password'} label={'Password attuale'} onChange={(e) => setCurrentPassword(e.target.value)} />
+                            <TextInput type={'password'} label={'Nuova password'} onChange={(e) => setNewPassword(e.target.value)} />
+                            <TextInput type={'password'} label={'Conferma nuova password'} onChange={(e) => setConfirmNewPassword(e.target.value)} />
+
+                            {recoveryResult?.errors.map((err) => {
+                                return <Text>{err.description}</Text>
+                            })}
+
+                            <Button onClick={onFormSubmitClickHandler} disabled={!(newPassword && (newPassword === confirmNewPassword)) || (currentPassword === newPassword)}>Cambia password</Button>
+                        </Stack>
+                    }
+
+                    {recoveryResult && recoveryResult.success &&
+                        <h2>Password modificata con successo</h2>
+                    }
+
+                </Stack>
+
+            </Grid.Col>
+        </Grid>
+    )
+}
+
+export default ChangePassword;

package/src/lib/pages/login/forgot-password.tsx

@@ -0,0 +1,53 @@
+import { Button, Grid, Stack, Text, TextInput } from '@mantine/core';
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import {UserService} from "@fluxo-dev/api-client-base";
+
+export function ForgotPassword() {
+
+    const [email, setEmail] = useState<string>();
+    const [errorMessage, setErrorMessage] = useState<string | undefined>();
+    const [successMessage, setSuccessMessage] = useState<string | undefined>();
+
+    const navigateTo = useNavigate();
+    const userService = new UserService();
+
+    const onFormSubmitClickHandler = () => {
+        if (email) {
+            userService.forgotPassword(email)
+                .then((_res) => setSuccessMessage("Richiesta inviata correttamente. Apri la tua casella e-mail."))
+                .catch(_err => setErrorMessage("Errore durante il login"));
+        }
+    }
+
+    return (
+        <Grid justify="center">
+            <Grid.Col span={3}>
+                {!successMessage &&
+                    <div>
+                        <h2>Hai dimenticato la password?</h2>
+                        <Stack gap={16}>
+                            <TextInput onChange={(e) => setEmail(e.target.value)} placeholder={'Il tuo indirizzo e-mail'} label={'Inserisci il tuo indirizzo e-mail per recuperarla.'} />
+                            <Button onClick={onFormSubmitClickHandler} disabled={!email}>Recupera</Button>
+                            <Link to={'/auth/login'} style={{ textAlign: 'center' }}>Effettua il login</Link>
+
+                            {errorMessage &&
+                                <Text>{errorMessage}</Text>
+                            }
+
+                        </Stack>
+                    </div>
+                }
+
+                {successMessage &&
+                    <Stack gap={16}>
+                        <Text style={{ textAlign: 'center', width: '100%', display: 'block' }}>{successMessage}</Text>
+                        <Link to={'/auth/login'} style={{ textAlign: 'center' }}>Effettua il login</Link>
+                    </Stack>
+                }
+            </Grid.Col>
+        </Grid>
+    )
+}
+
+export default ForgotPassword;

package/src/lib/pages/login/login-page.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { FluxoClientSys } from "@fluxo-dev/api-client-base";
+import { useForm } from '@mantine/form';
+import { TextInput, Button, PasswordInput, Grid, Stack } from "@mantine/core";
+import { useNavigate } from 'react-router-dom';
+
+function LoginPage() {
+
+  const { loading, error } = useSelector((state: any) => state.user)
+  const navigateTo = useNavigate();
+
+  const form = useForm({
+    initialValues: {
+      username: '',
+      password: '',
+    },
+
+    validate: {
+      username: (value) => (value?.length < 1 ? 'Username obbligatorio' : null),
+      password: (value) => (value?.length < 1 ? 'Password obbligatoria' : null),
+    },
+  });
+
+  const loginHandler = (values: any) => {
+    FluxoClientSys.Instance.auth.login(values.username, values.password);
+  }
+
+  return (
+    <Grid justify="center">
+      <Grid.Col span={3}>
+        <h1>Login Page</h1>
+        <form onSubmit={form.onSubmit(
+          (values, event) => {
+            loginHandler(values);
+          }
+        )}>
+          <TextInput
+            withAsterisk
+            label="Nome utente"
+            placeholder="utente@azienda.com"
+            {...form.getInputProps('username')}
+          />
+          <PasswordInput
+            withAsterisk
+            label="Password"
+            placeholder="Inserisci la password..."
+            {...form.getInputProps('password')}
+          />
+
+          <Stack gap={5} mt="md">
+            <Stack align="flex-end">
+              <Button size="compact-XXX" variant="subtle" onClick={() => navigateTo('/auth/forgot-password')}>
+                Password Dimenticata?
+              </Button>
+            </Stack>
+            <Button loading={loading} type="submit">Accedi</Button>
+          </Stack>
+
+        </form>
+        {error &&
+          <p>Errore</p>
+        }
+
+      </Grid.Col>
+    </Grid>
+  )
+}
+
+export default LoginPage;

package/src/lib/pages/login/reset-password.tsx

@@ -0,0 +1,91 @@
+import { Button, Grid, Stack, Text, TextInput } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import {UserService} from "@fluxo-dev/api-client-base";
+
+export function ResetPassword() {
+
+    const [email, setEmail] = useState<string>();
+    const [token, setToken] = useState<string>();
+    const [linkIsValid, setLinkIsValid] = useState<boolean>(true);
+
+    const [newPassword, setNewPassword] = useState<string>();
+    const [confirmNewPassword, setConfirmNewPassword] = useState<string>();
+
+    const [recoveryResult, setRecoveryResult] = useState<{ success: boolean, errors: { code: string, description: string }[] } | undefined>();
+
+    const userService = new UserService();
+    let [searchParams] = useSearchParams();
+
+    useEffect(() => {
+        if (searchParams) {
+            const currentEmail = searchParams.get('email');
+            const currentToken = searchParams.get('token');
+
+            if (!currentEmail || !currentToken) {
+                setLinkIsValid(false)
+            } else {
+                setEmail(currentEmail)
+                setToken(currentToken)
+            }
+        } else {
+            setLinkIsValid(false)
+        }
+    }, [searchParams])
+
+    const onFormSubmitClickHandler = () => {
+        if (email && token && newPassword) {
+            userService.forgotPasswordConfirm({ email: email, token: token, password: newPassword })
+                .then((res) => {
+                    setRecoveryResult(res);
+                })
+                .catch(_err => setRecoveryResult({ success: false, errors: [{ code: 'unkown', description: 'Errore sconosciuto' }] }));
+        }
+    }
+
+    return (
+        <Grid justify="center">
+            <Grid.Col span={3}>
+                {linkIsValid &&
+                    <Stack gap={16}>
+                        {(!recoveryResult || !recoveryResult.success) &&
+                            <Stack gap={16}>
+                                <h2>Reset password</h2>
+                                <Text>{email}</Text>
+                                <TextInput type={'password'} label={'Nuova password'} onChange={(e) => setNewPassword(e.target.value)} />
+                                <TextInput type={'password'} label={'Conferma nuova password'} onChange={(e) => setConfirmNewPassword(e.target.value)} />
+
+                                {recoveryResult?.errors.map((err) => {
+                                    return <Text>{err.description}</Text>
+                                })}
+
+                                <Button onClick={onFormSubmitClickHandler} disabled={!(newPassword && (newPassword === confirmNewPassword))}>Effettua il reset</Button>
+                                <Link to={'/auth/login'} style={{ textAlign: 'center' }}>Non vuoi effettuare il reset? Effettua il login</Link>
+                            </Stack>
+                        }
+
+                        {recoveryResult?.success &&
+                            <div style={{ marginTop: 32 }}>
+                                <Stack gap={16}>
+                                    <Text style={{ textAlign: 'center', width: '100%', display: 'block' }}>{'Reset effettuato con successo'}</Text>
+                                    <Link to={'/auth/login'} style={{ textAlign: 'center' }}>Effettua il login</Link>
+                                </Stack>
+                            </div>
+                        }
+
+                    </Stack>
+                }
+
+                {!linkIsValid &&
+                    <Stack gap={16}>
+                        <Text>Link non valido</Text>
+                        <Link to={'/auth/login'} style={{ textAlign: 'center' }}>Effettua il login</Link>
+                    </Stack>
+                }
+
+            </Grid.Col>
+        </Grid>
+    )
+}
+
+export default ResetPassword;

package/src/lib/pages/settings/apps/add-jit-app.tsx

@@ -0,0 +1,79 @@
+import {Button, Group, Stack, TextInput} from "@mantine/core";
+import React from "react";
+import {AppJitManager} from "../../../services/app-jit-manager";
+import {FluxoFrontendAppConfiguration} from "@fluxo-dev/api-client-base";
+
+export interface AddJitAppProps {
+  onCanceled: () => void;
+  onAdded: () => void;
+}
+export function AddJitApp(props: AddJitAppProps) {
+
+  const [url, setUrl] = React.useState<string>('');
+  const [rootRoute, setRootRoute] = React.useState<string>('');
+
+  const [fluxoAppConfiguration, setFluxoAppConfiguration] = React.useState<FluxoFrontendAppConfiguration | undefined>(undefined);
+
+  const [verifyStatus, setVerifyStatus] = React.useState<'idle' | 'verified' | 'error'>('idle');
+
+  const verifyUrl = () => {
+
+    setVerifyStatus('idle');
+
+    fetch(`${url}/fluxo-fe-app-configuration.json`)
+      .then((response) => {
+        response.json()
+          .then((json) => {
+            setFluxoAppConfiguration(json);
+            setVerifyStatus('verified');
+          });
+      })
+      .catch((error) => {
+        setVerifyStatus('error');
+      });
+  }
+
+  const addApp = () => {
+    const manager = new AppJitManager();
+
+    if(!fluxoAppConfiguration) {
+      return;
+    }
+
+    manager.addAppConfiguration(fluxoAppConfiguration, url, rootRoute);
+    props.onAdded();
+  }
+
+  return (
+    <Stack>
+      <form>
+        <Stack>
+          <TextInput
+            label={'Root route'}
+            placeholder={'root-route'}
+            value={rootRoute}
+            onChange={(e) => setRootRoute(e.currentTarget.value)}
+          />
+          <TextInput
+            label={'Url'}
+            placeholder={'http://localhost:1234'}
+            value={url}
+            onChange={(e) => setUrl(e.currentTarget.value)}
+          />
+          {fluxoAppConfiguration &&
+            <>
+              <p>{fluxoAppConfiguration.name}</p>
+            </>
+          }
+        </Stack>
+      </form>
+      <Group align={'end'} justify={'right'}>
+        <Button variant={'subtle'} onClick={props.onCanceled}>Annulla</Button>
+        {verifyStatus === 'idle' || verifyStatus === 'error' ?
+          <Button disabled={!rootRoute || !url} onClick={verifyUrl} type={'submit'}>Verifica</Button> :
+          <Button onClick={addApp} type={'submit'}>Aggiungi</Button>
+        }
+      </Group>
+    </Stack>
+  )
+}

package/src/lib/pages/settings/apps/app-item.tsx

@@ -0,0 +1,157 @@
+import {AppState, AppType, FluxoApp, FluxoClientSys} from "@fluxo-dev/api-client-base";
+import {ActionIcon, Badge, Button, Group, Image, Menu, Modal, Stack, Text} from "@mantine/core";
+import React from "react";
+import {IconArrowUp, IconCircleOff, IconDotsVertical, IconTrash} from '@tabler/icons-react';
+import moment from "moment";
+import {ConfirmModal} from "@fluxo-dev/ui-components";
+import {showNotification} from "@mantine/notifications";
+import {InstallOrUpgradeApp} from "./install-or-upgrade-app";
+
+export interface AppItemProps {
+  app: FluxoApp;
+  onUninstall?: (app: FluxoApp) => void;
+  onDeactivate?: (app: FluxoApp) => void;
+  onActivate?: (app: FluxoApp) => void;
+  onUpgrade?: (app: FluxoApp) => void;
+  pluginEndpoint: string;
+}
+export function AppItem(props: AppItemProps) {
+
+  const [showDeleteModal, setShowDeleteModal] = React.useState(false);
+  const [showDeactivateModal, setShowDeactivateModale] = React.useState(false);
+  const [showActivateModal, setShowActivateModal] = React.useState(false);
+  const [showUpgradeAppModal, setShowUpgradeAppModal] = React.useState(false);
+
+  const disable = () => {
+    FluxoClientSys.Instance.apps.deactivateApp(props.app.id).then(() => {
+      showNotification({
+        title: 'Operazione completata',
+        message: `L'applicazione (${props.app.name} - ${props.app.version}) è stata disattivata con successo`,
+        color: 'green',
+      })
+      props.onDeactivate?.(props.app);
+    }).catch((err) => {
+      showNotification({
+        title: 'Operazione fallita',
+        message: `L'applicazione (${props.app.name} - ${props.app.version}) non è stata disattivata: ${err.message}`,
+        color: 'red',
+      })
+    })
+  }
+
+  const enable = () => {
+    FluxoClientSys.Instance.apps.activateApp(props.app.id).then(() => {
+      showNotification({
+        title: 'Operazione completata',
+        message: `L'applicazione (${props.app.name} - ${props.app.version}) è stata attivata con successo`,
+        color: 'green',
+      })
+      props.onActivate?.(props.app);
+    }).catch((err) => {
+      showNotification({
+        title: 'Operazione fallita',
+        message: `L'applicazione (${props.app.name} - ${props.app.version}) non è stata attivata: ${err.message}`,
+        color: 'red',
+      })
+    })
+  }
+
+  const uninstall = () => {
+    FluxoClientSys.Instance.apps.uninstallApp(props.app.id).then(() => {
+      showNotification({
+        title: 'Operazione completata',
+        message: `L'applicazione (${props.app.name} - ${props.app.version}) è stata disinstallata con successo`,
+        color: 'green',
+      })
+      props.onUninstall?.(props.app);
+    }).catch((err) => {
+      showNotification({
+        title: 'Operazione fallita',
+        message: `L'applicazione (${props.app.name} - ${props.app.version}) non è stata disinstallata: ${err.message}`,
+        color: 'red',
+      })
+    })
+  }
+
+  return (
+    <Group justify='space-between' style={{ border: '1px solid #dedede', padding: 15 }}>
+      <Group>
+        <Image src={`${props.pluginEndpoint}/${props.app.scope}/${props.app.name}/favicon.ico`} width={48} height={48} />
+        <Stack gap={0}>
+          <span>{props.app.description} <small>({props.app.version})</small></span>
+          <small>{props.app.name} - <b>{props.app.author}</b></small>
+        </Stack>
+      </Group>
+      <Group>
+
+        {props.app.state === AppState.Active ? <Badge color="green">Attivo</Badge> : <Badge color="red">Disattivo</Badge>}
+        <Badge color={props.app.type === AppType.Frontend ? 'orange' : 'violet'}>{props.app.type === AppType.Frontend ? 'Frontend' : 'Backend'}</Badge>
+        <Badge color={'gray'}>{moment(props.app.installationDate).format("DD/MM/yyyy")}</Badge>
+
+        <Menu shadow="md" width={200}>
+          <Menu.Target>
+            <ActionIcon><IconDotsVertical size={18} /></ActionIcon>
+          </Menu.Target>
+
+          <Menu.Dropdown>
+            <Menu.Item leftSection={<IconCircleOff size={14} />} onClick={props.app.state == AppState.Active ? disable : enable}>
+              {props.app.state == AppState.Active ? 'Disattiva' : 'Attiva'}
+            </Menu.Item>
+            <Menu.Item onClick={() => setShowUpgradeAppModal(true)} leftSection={<IconArrowUp color={'green'} size={14} />}>Aggiorna</Menu.Item>
+            <Menu.Divider />
+            <Menu.Item color={'red'} onClick={() => setShowDeleteModal(true)} leftSection={<IconTrash color={'red'} size={14} />}>Disinstalla</Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </Group>
+
+      <ConfirmModal
+        title={'Disinstalla app'}
+        open={showDeleteModal}
+        onButtonCancelClick={() => setShowDeleteModal(false)}
+        onButtonConfirmClick={() => {
+          setShowDeleteModal(false);
+          uninstall();
+        }}
+        messageText={'Sei sicuro di voler disinstallare l\'applicazione?'}
+      />
+
+      <ConfirmModal
+        title={'Attiva app'}
+        open={showActivateModal}
+        onButtonCancelClick={() => setShowActivateModal(false)}
+        onButtonConfirmClick={() => {
+          setShowActivateModal(false);
+          enable();
+        }}
+        messageText={'Sei sicuro di voler attivare l\'applicazione?'}
+      />
+
+      <ConfirmModal
+        title={'Attiva app'}
+        open={showDeactivateModal}
+        onButtonCancelClick={() => setShowDeactivateModale(false)}
+        onButtonConfirmClick={() => {
+          setShowDeactivateModale(false);
+          disable();
+        }}
+        messageText={'Sei sicuro di voler attivare l\'applicazione?'}
+      />
+
+      {
+        <Modal centered title={'Aggiornamento app'} opened={showUpgradeAppModal} onClose={() => setShowUpgradeAppModal(false)}>
+          <Stack>
+            <Text>Procedura di aggiornamento dell'app {props.app.name}</Text>
+            <InstallOrUpgradeApp mode={'upgrade'} appIdToUpgrade={props.app.id} onInstall={() => {
+              setShowUpgradeAppModal(false);
+              props.onUpgrade?.(props.app);
+            }} />
+            <Group justify={'right'}>
+              <Button onClick={() => setShowUpgradeAppModal(false)}>Annulla</Button>
+            </Group>
+          </Stack>
+        </Modal>
+      }
+
+    </Group>
+  )
+}