@syngrisi/syngrisi 2.2.1

package/src/ui-app/auth/components/ChangePasswordForm.tsx

@@ -0,0 +1,216 @@
+import * as React from 'react';
+import {
+    PasswordInput,
+    Paper,
+    Title,
+    Container,
+    Button,
+    Text,
+    LoadingOverlay,
+} from '@mantine/core';
+import { useForm, UseFormReturnType } from '@mantine/form';
+import ky from 'ky';
+import { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useDocumentTitle } from '@mantine/hooks';
+import { log } from '../../shared/utils';
+import config from '../../config';
+import Bars from './change-password/Bars';
+import PasswordRequirement from './change-password/PasswordRequirement';
+import requirements from './change-password/requirements';
+
+export default function ChangePasswordForm() {
+    useDocumentTitle('Change Password Page');
+
+    const [searchParams] = useSearchParams();
+    const isFirstRun: boolean = !!searchParams.get('first_run');
+
+    let validatedRequirements: { key: string, id: string, label: string, meets: boolean }[];
+
+    interface Form {
+        newPasswordConfirmation: string;
+        newPassword: string;
+        currentPassword: string
+    }
+
+    const form: UseFormReturnType<Form> = useForm({
+        initialValues: {
+            currentPassword: '',
+            newPassword: '',
+            newPasswordConfirmation: '',
+        },
+
+        validate: {
+            currentPassword: (val) => {
+                if (isFirstRun) return null;
+                return val !== '' ? null : 'Old password is Empty';
+            },
+            // eslint-disable-next-line no-unused-vars
+            newPassword: (val) => {
+                if (validatedRequirements.some((x) => !x.meets)) {
+                    return 'The password doesn\'t meet the requirements';
+                }
+                return null;
+            },
+            newPasswordConfirmation: (val) => (val === form.values.newPassword
+                ? null
+                : 'New password and password confirmation must be match'),
+        },
+    });
+
+    const [errorMessage, setErrorMessage] = useState('');
+
+    const [loader, setLoader] = useState(false);
+
+    validatedRequirements = requirements.map((requirement) => (
+        {
+            key: requirement.id,
+            id: requirement.id,
+            label: requirement.label,
+            meets: requirement.re.test(form.values.newPassword),
+        }
+    ));
+
+    const checks = validatedRequirements.map((requirement) => (
+        <PasswordRequirement
+            key={requirement.id}
+            id={requirement.id}
+            label={requirement.label}
+            meets={requirement.meets}
+        />
+    ));
+
+    function handleNewPasswordFields(event: React.ChangeEvent<HTMLInputElement>, path: string) {
+        form.setFieldValue(path, event.currentTarget.value);
+    }
+
+    interface LoginFormData {
+        currentPassword: string,
+        newPassword: string,
+        newPasswordConfirmation: string,
+    }
+
+    // eslint-disable-next-line consistent-return
+    async function handleFormSubmissions(values: LoginFormData) {
+        try {
+            setErrorMessage('');
+            setLoader(true);
+            const url = isFirstRun ? `${config.baseUri}/v1/auth/change_first_run` : `${config.baseUri}/v1/auth/change`;
+            const resp = await ky(
+                url,
+                {
+                    throwHttpErrors: false,
+                    method: 'POST',
+                    credentials: 'include',
+                    body: JSON.stringify({
+                        currentPassword: isFirstRun ? '' : values.currentPassword,
+                        newPassword: values.newPassword,
+                        isFirstRun,
+                    }),
+                    headers: {
+                        'content-type': 'application/json',
+                    },
+                },
+            );
+            const result: { message: string } = await resp.json();
+            setLoader(false);
+
+            if (result.message === 'success') {
+                return window.location.assign('/auth/changeSuccess');
+            }
+            if (result.message) {
+                log.error(((typeof result) === 'object') ? JSON.stringify(result) : result.toString());
+                return setErrorMessage(result.message);
+            }
+            log.error(((typeof result) === 'object') ? JSON.stringify(result) : result.toString());
+            return setErrorMessage(result.message);
+        } catch (e: any) {
+            log.error(e.stack || e.toString());
+            setErrorMessage('Connection error');
+        } finally {
+            setLoader(false);
+        }
+    }
+
+    interface FormValues {
+        newPasswordConfirmation: string;
+        newPassword: string;
+        currentPassword: string
+    }
+
+    return (
+        <Container size={420} my={40}>
+
+            <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+                <form
+                    onSubmit={form.onSubmit(
+                        (values: FormValues) => handleFormSubmissions(values),
+                    )}
+                >
+                    <Title order={isFirstRun ? 3 : 2} id="title">
+                        {isFirstRun ? 'Change Password for default Administrator' : 'Change Password'}
+                    </Title>
+                    <PasswordInput
+                        label="Current Password"
+                        placeholder="Enter current password"
+                        id="current-password"
+                        value={isFirstRun ? '---------------' : form.values.currentPassword}
+                        onChange={(event) => form.setFieldValue('currentPassword', event.currentTarget.value)}
+                        error={form.errors.currentPassword && 'Invalid password'}
+                        disabled={isFirstRun || false}
+                        required
+                    />
+
+                    <PasswordInput
+                        // value={newPassword}
+                        // onChange={setNewPassword}
+                        value={form.values.newPassword}
+                        onChange={(event) => handleNewPasswordFields(event, 'newPassword')}
+                        placeholder="New Password"
+                        id="new-password"
+                        label="New Password"
+                        error={form.errors.newPassword}
+                        required
+                    />
+                    <PasswordInput
+                        value={form.values.newPasswordConfirmation}
+                        onChange={(event) => handleNewPasswordFields(event, 'newPasswordConfirmation')}
+                        placeholder="New Password"
+                        id="new-password-confirmation"
+                        label="New Password Confirmation"
+                        error={form.errors.newPasswordConfirmation}
+                        required
+                    />
+
+                    <Bars value={form.values.newPassword} />
+
+                    <PasswordRequirement
+                        label="Has at least 6 characters"
+                        id="include-six-chars"
+                        meets={form.values.newPassword.length > 5}
+                    />
+                    {checks}
+
+                    {errorMessage
+                    && <Text size="sm" color="red" mt="md" id="error-message" hidden={false}>{errorMessage}</Text>}
+
+                    <Button
+                        fullWidth
+                        id="change-password"
+                        mt="xl"
+                        color="green"
+                        type="submit"
+                    >
+                        Update password
+                    </Button>
+                    <LoadingOverlay
+                        visible={loader}
+                        transitionDuration={300}
+                        overlayBlur={1}
+                        loaderProps={{ color: 'green' }}
+                    />
+                </form>
+            </Paper>
+        </Container>
+    );
+}

package/src/ui-app/auth/components/ChangePasswordSuccessForm.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import {
+    Paper,
+    Title,
+    Container,
+    Button,
+    Text,
+} from '@mantine/core';
+import { IconCircleCheck } from '@tabler/icons';
+import { useDocumentTitle } from '@mantine/hooks';
+
+export default function ChangePasswordSuccessForm() {
+    useDocumentTitle('Success');
+
+    return (
+        <Container size={420} my={40}>
+
+            <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+                <Text align="center" color="green"><IconCircleCheck size="6rem" /></Text>
+                <Title align="center">Success!</Title>
+                <Text align="center" size={16} mt="md">
+                    Your Password has been changed. Please use your new password to login!
+                </Text>
+                <Button
+                    fullWidth
+                    id="submit"
+                    mt="xl"
+                    color="green"
+                    type="submit"
+                    component="a"
+                    href="/auth/"
+                >
+                    Sign In
+                </Button>
+            </Paper>
+        </Container>
+    );
+}

package/src/ui-app/auth/components/LoginForm.tsx

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import {
+    TextInput,
+    PasswordInput,
+    Checkbox,
+    Paper,
+    Title,
+    Container,
+    Group,
+    Button,
+    Text,
+    LoadingOverlay,
+} from '@mantine/core';
+import { useSearchParams } from 'react-router-dom';
+import { useForm } from '@mantine/form';
+import ky from 'ky';
+import { useState } from 'react';
+import { useDocumentTitle } from '@mantine/hooks';
+import { log } from '../../shared/utils';
+import config from '../../config';
+
+export default function LoginForm() {
+    useDocumentTitle('Login Page');
+    const form = useForm({
+        initialValues: {
+            email: '',
+            password: '',
+            rememberMe: true,
+        },
+
+        validate: {
+            email: (val) => {
+                if ((val === 'Test') || (val === 'Administrator')) return null;
+                return (/^\S+@\S+$/.test(val) ? null : 'Invalid email');
+            },
+        },
+    });
+
+    const [errorMessage, setErrorMessage] = useState('');
+
+    // eslint-disable-next-line no-unused-vars
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [loader, setLoader] = useState(false);
+    const successRedirectUrl: string = searchParams.get('origin') || '/';
+
+    interface LoginFormData {
+        email: string,
+        password: string,
+        rememberMe: boolean,
+    }
+
+    // eslint-disable-next-line consistent-return
+    async function handleFormSubmissions(values: LoginFormData) {
+        try {
+            setErrorMessage('');
+            setLoader(true);
+            const resp = await ky(
+                `${config.baseUri}/v1/auth/login`,
+                {
+                    throwHttpErrors: false,
+                    method: 'POST',
+                    credentials: 'include',
+                    body: JSON.stringify({
+                        username: values.email,
+                        password: values.password,
+                        rememberMe: values.rememberMe,
+                    }),
+                    headers: {
+                        'content-type': 'application/json',
+                    },
+                },
+            );
+            const result: { message: string } = await resp.json();
+            setLoader(false);
+
+            if (result.message === 'success') {
+                return window.location.assign(successRedirectUrl);
+            }
+            if (result.message) {
+                log.error(((typeof result) === 'object') ? JSON.stringify(result) : result.toString());
+                return setErrorMessage(result.message);
+            }
+            log.error(((typeof result) === 'object') ? JSON.stringify(result) : result.toString());
+            setErrorMessage('Connection error');
+        } catch (e: any) {
+            log.error(e.stack || e.toString());
+            setErrorMessage('Connection error');
+        } finally {
+            setLoader(false);
+        }
+    }
+
+    return (
+        <Container size={420} my={40}>
+
+            <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+                <form
+                    onSubmit={form.onSubmit((values) => handleFormSubmissions(values))}
+                >
+                    <Title>Sign in</Title>
+                    <TextInput
+                        label="Email"
+                        id="email"
+                        placeholder="username@domain.com"
+                        value={form.values.email}
+                        onChange={(event) => form.setFieldValue('email', event.currentTarget.value)}
+                        error={form.errors.email && 'Invalid email'}
+                        required
+                    />
+                    <PasswordInput
+                        label="Password"
+                        id="password"
+                        placeholder="Your password"
+                        value={form.values.password}
+                        onChange={(event) => form.setFieldValue('password', event.currentTarget.value)}
+                        required
+                        mt="md"
+                    />
+
+                    <Group position="apart" mt="md">
+                        <Checkbox
+                            label="Remember me"
+                            onChange={(event) => form.setFieldValue('rememberMe', event.currentTarget.checked)}
+                        />
+                    </Group>
+                    {errorMessage
+                    && <Text size="sm" color="red" mt="md" id="error-message" hidden={false}>{errorMessage}</Text>}
+
+                    <Button
+                        fullWidth
+                        id="submit"
+                        mt="xl"
+                        color="green"
+                        type="submit"
+                    >
+                        Sign in
+                    </Button>
+                    <LoadingOverlay
+                        visible={loader}
+                        transitionDuration={300}
+                        overlayBlur={1}
+                        loaderProps={{ color: 'green' }}
+                    />
+                </form>
+            </Paper>
+        </Container>
+    );
+}

package/src/ui-app/auth/components/LogoutForm.tsx

@@ -0,0 +1,89 @@
+import { useQuery } from '@tanstack/react-query';
+import { useDocumentTitle } from '@mantine/hooks';
+
+import ky from 'ky';
+import {
+    Button, Container, LoadingOverlay, Paper, Text, Title,
+} from '@mantine/core';
+import { IconCircleCheck, IconCircleX } from '@tabler/icons';
+import * as React from 'react';
+import { useEffect } from 'react';
+import { log } from '../../shared/utils';
+import config from '../../config';
+
+function LogoutForm() {
+    interface Query {
+        isLoading: boolean,
+        isError: boolean,
+        data: any,
+        error: any
+    }
+
+    useDocumentTitle('Logout page');
+    // const { classes } = useStyle();
+    useEffect(
+        () => {
+            ky(`${config.baseUri}/v1/auth/logout`);
+        },
+        [],
+    );
+
+    const logoutInfo: Query = useQuery(
+        ['logout'],
+        () => ky(`${config.baseUri}/v1/auth/logout`).then((res) => res.json()),
+        {
+            refetchOnWindowFocus: false,
+        },
+    );
+    const userInfo: Query = useQuery(
+        ['current_user', logoutInfo],
+        () => ky(`${config.baseUri}/v1/users/current`).then((res) => res.json()),
+        {
+            refetchOnWindowFocus: false,
+        },
+    );
+
+    if (userInfo.isError) {
+        log.error(userInfo.error);
+    }
+    const success = !userInfo.isLoading && Object.keys(userInfo.data).length === 0;
+
+    return (
+        <Container size={420} my={40}>
+
+            <LoadingOverlay
+                visible={userInfo.isLoading}
+                transitionDuration={300}
+                overlayBlur={1}
+                loaderProps={{ color: 'green' }}
+            />
+
+            <Paper withBorder shadow="md" p={30} mt={30} radius="md" hidden={userInfo.isLoading}>
+                {
+                    success
+                        ? <Text align="center" color="green"><IconCircleCheck size="6rem" /></Text>
+                        : <Text align="center" color="red"><IconCircleX size="6rem" /></Text>
+                }
+                <Title align="center">{success ? 'Success!' : 'Failed'}</Title>
+                <Text align="center" size={16} mt="md">
+                    {success
+                        ? 'You have been successfully logged out. Click Sign In to login again.'
+                        : 'Something went wrong'}
+                </Text>
+                <Button
+                    fullWidth
+                    id="submit"
+                    mt="xl"
+                    color="green"
+                    type="submit"
+                    component="a"
+                    href="/auth/"
+                >
+                    Sign In
+                </Button>
+            </Paper>
+        </Container>
+    );
+}
+
+export default LogoutForm;

package/src/ui-app/auth/components/ToggleThemeButton.tsx

@@ -0,0 +1,41 @@
+import { Group, Switch, useMantineTheme } from '@mantine/core';
+import { IconSun, IconMoonStars } from '@tabler/icons';
+
+import React, { ReactElement } from 'react';
+
+function ToggleThemeButton({ colorScheme, toggleColorScheme }: any): ReactElement {
+    const dark = colorScheme === 'dark';
+    const theme = useMantineTheme();
+
+    return (
+        <Group
+            mr={28}
+            position="right"
+            title={`Switch to ${dark ? 'light' : 'dark'} theme`}
+        >
+            <Switch
+                data-test="theme-button"
+                size="md"
+                styles={
+                    () => (
+                        {
+                            track: {
+                                backgroundColor: theme.colors.gray[8],
+                                borderColor: theme.colors.gray[8],
+                            },
+                        }
+                    )
+                }
+                color="gray.8"
+                checked={colorScheme === 'light'}
+                onChange={() => {
+                    toggleColorScheme();
+                }}
+                onLabel={<IconSun size={16} stroke={2.5} color={theme.colors.yellow[4]} />}
+                offLabel={<IconMoonStars size={16} stroke={2.5} color={theme.colors.blue[6]} />}
+            />
+        </Group>
+    );
+}
+
+export default ToggleThemeButton;

package/src/ui-app/auth/components/change-password/Bars.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable react/no-array-index-key */
+import { Group, Progress } from '@mantine/core';
+import * as React from 'react';
+import requirements from './requirements';
+
+export default function Bars({ value }: { value: string }) {
+    function getStrength(password: string): number {
+        let multiplier = password.length > 5 ? 0 : 1;
+
+        requirements.forEach((requirement) => {
+            if (!requirement.re.test(password)) {
+                multiplier += 1;
+            }
+        });
+
+        return Math.max(100 - (100 / (requirements.length + 1)) * multiplier, 0);
+    }
+
+    const strength = getStrength(value);
+
+    const bars = Array(4)
+        .fill(0)
+        .map((_, index) => (
+            <Progress
+                styles={{ bar: { transitionDuration: '0ms' } }}
+                value={
+                    (value.length > 0 && index === 0)
+                        ? 100
+                        : strength >= ((index + 1) / 4) * 100 ? 100 : 0
+                }
+                color={
+                    strength > 80
+                        ? 'teal'
+                        : (strength > 50 ? 'yellow' : 'red')
+                }
+                key={index}
+                size={4}
+            />
+        ));
+    return (
+        <Group spacing={5} grow mt="xs" mb="md">
+            {bars}
+        </Group>
+    );
+}

package/src/ui-app/auth/components/change-password/PasswordRequirement.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Box, Text, Center } from '@mantine/core';
+import { IconCheck, IconX } from '@tabler/icons';
+
+export default function PasswordRequirement({ meets, label, id }: { meets: boolean; label: string, id: string }) {
+    return (
+        <Text color={meets ? 'teal' : 'red'} mt={5} size="sm" id={id}>
+            <Center inline>
+                {meets ? <IconCheck size={14} stroke={1.5} /> : <IconX size={14} stroke={1.5} />}
+                <Box ml={7}>{label}</Box>
+            </Center>
+        </Text>
+    );
+}

package/src/ui-app/auth/components/change-password/requirements.tsx

@@ -0,0 +1,6 @@
+export default [
+    { re: /[0-9]/, label: 'Includes number', id: 'include-numbers' },
+    { re: /[a-z]/, label: 'Includes lowercase letter', id: 'include-lowercase' },
+    { re: /[A-Z]/, label: 'Includes uppercase letter', id: 'include-uppercase' },
+    { re: /[$&+,:;=?@#|'<>.^*()%!-]/, label: 'Includes special symbol', id: 'include-special' },
+];

package/src/ui-app/auth/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en" style="height: 100%">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="../asserts/css/styles.css">
+    <link rel="icon" href="../asserts/images/favicon.svg">
+    <title>Syngrisi</title>
+</head>
+<div></div>
+<body>
+<div id="root" style="position: relative; overflow-y: scroll; height: 100%"></div>
+<script type="module" src="./main.tsx"></script>
+</body>
+</html>

package/src/ui-app/auth/main.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <React.StrictMode>
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
+    </React.StrictMode>,
+);

package/src/ui-app/auth/routes.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import LogoutForm from './components/LogoutForm';
+import ChangePasswordForm from './components/ChangePasswordForm';
+import LoginForm from './components/LoginForm';
+import ChangePasswordSuccessForm from './components/ChangePasswordSuccessForm';
+
+const routesItems = [
+    {
+        path: '/auth/logout',
+        element: <LogoutForm />,
+    },
+    {
+        path: '/auth/change',
+        element: <ChangePasswordForm />,
+    },
+    {
+        path: '/auth/changeSuccess',
+        element: <ChangePasswordSuccessForm />,
+    },
+    {
+        path: '/auth/',
+        element: <LoginForm />,
+    },
+];
+
+export default routesItems;

package/src/ui-app/config.ts

@@ -0,0 +1,15 @@
+/* eslint-disable import/no-relative-packages */
+import ky from 'ky';
+import * as devices from '../server/data/devices.json';
+
+// @ts-ignore
+const baseUrl: any = import.meta.env.VITE_SYNGRISI_BASED_URL || '';
+// @ts-ignore
+const indexRoute: any = import.meta.env.VITE_INDEX_ROUTE || '/';
+
+export default {
+    baseUri: baseUrl,
+    devices: devices.default,
+    customDevicesProm: ky(`${baseUrl}/static/data/custom_devices.json`).json(),
+    indexRoute,
+};