@nu-art/user-account-frontend 0.400.5

package/ui/Component_GoogleSAMLLogin/Component_GoogleSAMLLogin.scss

@@ -0,0 +1,20 @@
+@use '@nu-art/ts-styles' as styles;
+
+.ts-account__saml-button {
+
+  &[data-variant="primary"] {
+    height: 40px;
+    width: 100%;
+    margin: 0;
+    gap: 16px;
+    border: 2px solid #006fab;
+    @include styles.mouse-interactive-background(transparent);
+    @include styles.mouse-interactive-border-color(styles.dark-blue(2), styles.dark-blue(1));
+
+    .ts-account__saml-button__icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+}

package/ui/Component_Login/Component_Login.d.ts

@@ -0,0 +1,23 @@
+import { Account_Login, AccountEmail, AccountPassword } from '@nu-art/user-account-shared';
+import './Component_Login.scss';
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+type State<T> = {
+    data: Partial<T>;
+    errorMessages?: string[];
+    blockedUntil?: number;
+    submitting: boolean;
+};
+type Props = {};
+export declare class Component_Login extends ComponentSync<Props, State<Account_Login['request']>> {
+    protected deriveStateFromProps(nextProps: Props, state: State<Account_Login['request']>): State<AccountEmail & {
+        deviceId: string;
+    } & AccountPassword>;
+    private loginDataValid;
+    private login;
+    private onValueChanged;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderErrorMessages;
+    private renderAccountBlockedTimer;
+    private errorRenderer;
+}
+export {};

package/ui/Component_Login/Component_Login.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * User secured registration and login management system..
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * 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 { _keys, exists, formatTimestamp } from '@nu-art/ts-common';
+import { ErrorType_LoginBlocked } from '@nu-art/user-account-shared';
+import './Component_Login.scss';
+import { Button, ComponentSync, LL_H_C, LL_V_C, ModuleFE_Toaster, TS_PropRenderer } from '@nu-art/thunderstorm-frontend/index';
+import { ModuleFE_Account, StorageKey_DeviceId } from '../../_entity.js';
+import { TS_InputV2 } from '@nu-art/thunderstorm-frontend/components/TS_V2_Input/index';
+import { Component_LoginBlocked } from '../Component_LoginBlocked/Component_LoginBlocked.js';
+const form = {
+    email: {
+        type: 'text',
+        hint: 'email',
+        label: 'Email',
+    },
+    password: {
+        type: 'password',
+        hint: '****',
+        label: 'Password',
+    }
+};
+export class Component_Login extends ComponentSync {
+    //######################### Life Cycle #########################
+    deriveStateFromProps(nextProps, state) {
+        state.data ??= {};
+        return state;
+    }
+    //######################### Logic #########################
+    loginDataValid = () => {
+        const data = this.state.data;
+        const errors = _keys(form).map(key => {
+            const field = form[key];
+            return data[key] ? undefined : `  * missing ${field.label}`;
+        }).filter(error => !!error);
+        if (errors.length > 0) {
+            ModuleFE_Toaster.toastError(`Wrong input:\n${errors.join('\n')}`);
+            return false;
+        }
+        return true;
+    };
+    login = async () => {
+        //Fail fast if already submitted login
+        if (this.state.submitting)
+            return;
+        //Fail fast if login is blocked
+        if (exists(this.state.blockedUntil))
+            return;
+        //Fail fast if login data is not valid
+        if (!this.loginDataValid())
+            return;
+        this.setState({ submitting: true, errorMessages: undefined }, async () => {
+            try {
+                await ModuleFE_Account._v1.login({ ...this.state.data, deviceId: StorageKey_DeviceId.get() })
+                    .executeSync();
+                this.setState({ submitting: false });
+            }
+            catch (err) {
+                if (err.errorResponse.error?.type === ErrorType_LoginBlocked) {
+                    const blockedUntil = err.errorResponse.error.data.blockedUntil;
+                    return this.setState({
+                        blockedUntil: blockedUntil,
+                        errorMessages: [`Login blocked until ${formatTimestamp('DD/MM/YYYY HH:mm', blockedUntil)}`],
+                    });
+                }
+                this.setState({ errorMessages: ['Email or password incorrect'], submitting: false });
+            }
+        });
+    };
+    onValueChanged = (value, id, isAccept = false) => {
+        const data = { ...this.state.data };
+        data[id] = value;
+        this.setState({ data, errorMessages: undefined }, () => {
+            if (isAccept)
+                this.login();
+        });
+    };
+    //######################### Render #########################
+    render() {
+        const data = this.state.data;
+        return _jsxs(LL_V_C, { className: "ts-account__authenticate", children: [_keys(form).map((key, i) => {
+                    const field = form[key];
+                    return _jsx(TS_PropRenderer.Vertical, { label: field.label, children: _jsx(TS_InputV2, { id: key, value: data[key], type: field.type, allowAccept: true, onChange: (value) => {
+                                this.onValueChanged(value, key);
+                            }, onAccept: (value) => {
+                                this.onValueChanged(value, key, true);
+                            } }) }, i);
+                }), _jsx(LL_H_C, { className: 'ts-account__error-container', children: this.errorRenderer() }), _jsx(Button, { variant: 'tertiary', className: `ts-account__action-button`, actionInProgress: this.state.submitting, disabled: exists(this.state.blockedUntil), onClick: this.login, children: "Login" })] });
+    }
+    renderErrorMessages = () => {
+        if (!this.state.errorMessages?.length)
+            return '';
+        return _jsx("ul", { className: 'ts-account__error-messages', children: this.state.errorMessages.map((message, i) => {
+                return _jsx("li", { children: message }, i);
+            }) });
+    };
+    renderAccountBlockedTimer = () => {
+        if (!exists(this.state.blockedUntil))
+            return;
+        return _jsx(Component_LoginBlocked, { hide: () => this.setState({ blockedUntil: undefined }), blockedUntil: this.state.blockedUntil });
+    };
+    errorRenderer = () => {
+        if (!this.state.errorMessages && !this.state.blockedUntil)
+            return;
+        if (this.state.blockedUntil)
+            return this.renderAccountBlockedTimer();
+        return this.renderErrorMessages();
+    };
+}

package/ui/Component_Login/Component_Login.scss

@@ -0,0 +1,66 @@
+/*!
+ * User secured registration and login management system..
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * 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.
+ */
+
+@use '@nu-art/ts-styles' as styles;
+
+.ts-account__authenticate {
+  margin-top: 6px;
+  width: 300px;
+
+  > input {
+    margin-block: 4px;
+  }
+
+  .ts-account__error-container {
+    justify-content: center;
+    align-items: center;
+    min-height: 22px;
+
+    .ts-account__error-messages {
+      margin-block: 0;
+    }
+  }
+
+  .ts-account__authenticate__password-rules {
+    border: 1px solid black;
+    border-radius: 10px;
+    width: 100%;
+    padding: 10px;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin-top: 10px;
+
+    .ts-account__authenticate__password-rule {
+      gap: 10px;
+      align-items: center;
+      color: styles.red(3);
+
+      .icon--wrapper {
+        @include styles.mouse-interactive-icon(styles.red(3));
+      }
+
+      &.valid {
+        color: styles.green(2);
+
+        .icon--wrapper {
+          @include styles.mouse-interactive-icon(styles.green(2));
+        }
+      }
+    }
+  }
+}

package/ui/Component_Login/index.d.ts

@@ -0,0 +1 @@
+export * from './Component_Login.js';

package/ui/Component_Login/index.js

@@ -0,0 +1,18 @@
+/*
+ * User secured registration and login management system..
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * 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 * from './Component_Login.js';

package/ui/Component_LoginBlocked/Component_LoginBlocked.d.ts

@@ -0,0 +1,19 @@
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+type Props = {
+    blockedUntil: number;
+    hide: VoidFunction;
+};
+type State = {
+    blockedUntil: number;
+    timeLeft: number;
+};
+export declare class Component_LoginBlocked extends ComponentSync<Props, State> {
+    private timerInterval;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private updateTimeLeft;
+    private renderBlockedTimer;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/ui/Component_LoginBlocked/Component_LoginBlocked.js

@@ -0,0 +1,35 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentSync, LL_H_C } from '@nu-art/thunderstorm-frontend/index';
+import { currentTimeMillis, Second } from '@nu-art/ts-common';
+export class Component_LoginBlocked extends ComponentSync {
+    timerInterval;
+    componentDidMount() {
+        this.timerInterval = setInterval(this.updateTimeLeft, Second);
+    }
+    componentWillUnmount() {
+        clearInterval(this.timerInterval);
+    }
+    deriveStateFromProps(nextProps, state) {
+        state.blockedUntil = nextProps.blockedUntil;
+        state.timeLeft = state.blockedUntil - currentTimeMillis();
+        return state;
+    }
+    updateTimeLeft = () => {
+        const newTimeLeft = this.state.blockedUntil - currentTimeMillis();
+        if (newTimeLeft <= 0) {
+            clearInterval(this.timerInterval);
+            return this.props.hide();
+        }
+        this.setState({ timeLeft: newTimeLeft });
+    };
+    renderBlockedTimer = () => {
+        const totalSeconds = Math.floor(this.state.timeLeft / 1000);
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = totalSeconds % 60;
+        const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
+        return `${minutes}:${formattedSeconds}`;
+    };
+    render() {
+        return _jsxs(LL_H_C, { className: 'login-blocked', children: ["Login blocked, try again in: ", this.renderBlockedTimer()] });
+    }
+}

package/ui/Component_LoginBlocked/Component_LoginBlocked.scss

@@ -0,0 +1,3 @@
+.login-blocked {
+
+}

package/ui/Component_Register.d.ts

@@ -0,0 +1,26 @@
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { PasswordAssertionConfig, PasswordFailureReport, Request_RegisterAccount } from '@nu-art/user-account-shared';
+type State<T> = {
+    data: Partial<T>;
+    errorMessages?: string[];
+    renderPasswordRules: boolean;
+    passwordFailureReport?: PasswordFailureReport;
+    passwordAssertionConfig?: PasswordAssertionConfig;
+    submitting: boolean;
+};
+type Props<T> = {
+    validate?: (data: Partial<T>) => string | undefined;
+    renderPasswordRules?: boolean;
+};
+export declare class Component_Register extends ComponentSync<Props<Request_RegisterAccount>, State<Request_RegisterAccount>> {
+    protected deriveStateFromProps(nextProps: Props<Request_RegisterAccount>, state: State<Request_RegisterAccount>): State<Request_RegisterAccount>;
+    private getPasswordRuleText;
+    private onValueChanged;
+    private defaultFormStateUpdateCallback;
+    private canSubmit;
+    private registerClicked;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderErrorMessages;
+    private renderPasswordRules;
+}
+export {};

package/ui/Component_Register.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * User secured registration and login management system..
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * 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 { _className, Button, ComponentSync, Grid, LL_H_C, LL_V_C, TS_PropRenderer } from '@nu-art/thunderstorm-frontend/index';
+import { _keys, addItemToArray, filterInstances } from '@nu-art/ts-common';
+import { assertPasswordRules, PasswordAssertionType_LowerCaseLetters, PasswordAssertionType_MaxLength, PasswordAssertionType_MinLength, PasswordAssertionType_Numbers, PasswordAssertionType_SpecialChars } from '@nu-art/user-account-shared';
+import { ModuleFE_Account, StorageKey_DeviceId } from '../_entity.js';
+import { TS_Icons } from '@nu-art/ts-styles';
+import { TS_InputV2 } from '@nu-art/thunderstorm-frontend/components/TS_V2_Input/index';
+const form = {
+    email: {
+        className: '',
+        type: 'text',
+        hint: 'email',
+        label: 'Email',
+    },
+    password: {
+        type: 'password',
+        hint: '****',
+        label: 'Password',
+    },
+    passwordCheck: {
+        type: 'password',
+        hint: '****',
+        label: 'Password Check',
+    },
+};
+export class Component_Register extends ComponentSync {
+    // ######################### Lifecycle #########################
+    deriveStateFromProps(nextProps, state) {
+        state.data ??= {};
+        state.renderPasswordRules = nextProps.renderPasswordRules ?? false;
+        if (state.renderPasswordRules) {
+            state.passwordAssertionConfig = ModuleFE_Account.getPasswordAssertionConfig();
+            state.passwordFailureReport = assertPasswordRules(state.data.password ?? '', state.passwordAssertionConfig);
+        }
+        return state;
+    }
+    // ######################### Logic #########################
+    getPasswordRuleText = (key) => {
+        const amount = this.state.passwordAssertionConfig?.[key];
+        switch (key) {
+            case PasswordAssertionType_LowerCaseLetters:
+                return `At least ${amount} lower case letters`;
+            case 'capital-letters':
+                return `At least ${amount} capital letters`;
+            case PasswordAssertionType_MaxLength:
+                return `No more than ${amount} characters`;
+            case PasswordAssertionType_MinLength:
+                return `At least ${amount} characters`;
+            case PasswordAssertionType_Numbers:
+                return `At least ${amount} numbers`;
+            case PasswordAssertionType_SpecialChars:
+                return `At least ${amount} special characters`;
+        }
+    };
+    onValueChanged = (value, id, onAccept = false) => {
+        const data = { ...this.state.data };
+        data[id] = value;
+        if (id !== 'password')
+            return this.setState({ data, errorMessages: undefined }, () => this.defaultFormStateUpdateCallback(onAccept));
+        const passwordFailureReport = assertPasswordRules(value, this.state.passwordAssertionConfig);
+        this.setState({
+            data,
+            errorMessages: undefined,
+            passwordFailureReport
+        }, () => this.defaultFormStateUpdateCallback(onAccept));
+    };
+    defaultFormStateUpdateCallback = (onAccept) => {
+        if (!onAccept)
+            return;
+        if (!this.canSubmit())
+            return;
+        this.setState({ submitting: true }, async () => {
+            await this.registerClicked();
+            this.setState({ submitting: false });
+        });
+    };
+    canSubmit = () => {
+        if (this.state.passwordFailureReport)
+            return;
+        const data = this.state.data;
+        const errors = filterInstances(_keys(form).map(key => {
+            const field = form[key];
+            return data[key] ? undefined : `missing ${field.label}`;
+        }));
+        const validateError = this.props.validate && this.props.validate(data);
+        if (validateError)
+            addItemToArray(errors, validateError);
+        if (errors.length > 0) {
+            this.setState({ errorMessages: errors });
+            return false;
+        }
+        return true;
+    };
+    registerClicked = async () => {
+        if (!this.canSubmit())
+            return;
+        try {
+            await ModuleFE_Account._v1.registerAccount({
+                ...this.state.data,
+                deviceId: StorageKey_DeviceId.get()
+            }).executeSync();
+        }
+        catch (_err) {
+            const err = _err;
+            this.setState({ errorMessages: [err.message] });
+        }
+    };
+    // ######################### Render #########################
+    render() {
+        const data = this.state.data;
+        return _jsxs(LL_V_C, { className: "ts-account__authenticate", children: [_keys(form).map((key, i) => {
+                    const field = form[key];
+                    return _jsxs(TS_PropRenderer.Vertical, { label: field.label, children: [_jsx(TS_InputV2, { id: key, value: data[key], type: field.type, allowAccept: true, onChange: (data) => this.onValueChanged(data, key), onAccept: (data) => this.onValueChanged(data, key, true) }), key === 'password' && this.renderPasswordRules()] }, i);
+                }), this.renderErrorMessages(), _jsx(Button, { onClick: this.registerClicked, actionInProgress: this.state.submitting, className: `clickable ts-account__action-button`, disabled: !!this.state.passwordFailureReport, children: "Register" })] });
+    }
+    renderErrorMessages = () => {
+        if (!this.state.errorMessages?.length)
+            return '';
+        return _jsx("ul", { className: 'ts-account__error-messages', children: this.state.errorMessages.map((message, i) => {
+                return _jsx("li", { children: message }, i);
+            }) });
+    };
+    renderPasswordRules = () => {
+        if (!this.state.renderPasswordRules || !this.state.data.password)
+            return;
+        const assertionKeys = _keys(this.state.passwordAssertionConfig ?? {});
+        if (!assertionKeys.length)
+            return;
+        return _jsx(Grid, { className: 'ts-account__authenticate__password-rules', children: assertionKeys.map(assertionKey => {
+                const isFulfilled = !this.state.passwordFailureReport?.[assertionKey];
+                const className = _className('ts-account__authenticate__password-rule', isFulfilled && 'valid');
+                return _jsxs(LL_H_C, { className: className, children: [isFulfilled ? _jsx(TS_Icons.v.component, {}) : _jsx(TS_Icons.x.component, {}), this.getPasswordRuleText(assertionKey)] });
+            }) });
+    };
+}

package/ui/PopUp_AccountMenu/PopUp_AccountMenu.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { ResolvableContent, TypedMap, UniqueId } from '@nu-art/ts-common';
+import { DB_Account } from '@nu-art/user-account-shared';
+import './PopUp_AccountMenu.scss';
+type ModalProps = {
+    modalPos?: {
+        x: number;
+        y: number;
+    };
+    offset?: {
+        x: number;
+        y: number;
+    };
+};
+type Props = {
+    accountId: UniqueId;
+    accountDisplayModifier?: (account: DB_Account) => string | undefined;
+    acronymComposer?: (accountId: UniqueId) => string | undefined;
+    menuActions?: ResolvableContent<PopUp_AccountMenu_Action>[];
+};
+type State = {
+    account?: DB_Account;
+    menuActions?: PopUp_AccountMenu_Action[];
+    pageKey?: string;
+    prevPageKey?: string;
+    pageMap: TypedMap<PopUp_AccountMenu_Action_ContentFunction>;
+};
+export type PopUp_AccountMenu_Action_ContentFunction = (account: DB_Account, leaveMenuTrigger: VoidFunction) => React.ReactNode;
+export type PopUp_AccountMenu_Action = {
+    label: string;
+    className?: string;
+    id?: string;
+} & ({
+    type: 'page';
+    pageKey: string;
+    content: PopUp_AccountMenu_Action_ContentFunction;
+} | {
+    type: 'action';
+    closePopUp?: boolean;
+    action: () => (Promise<void> | void);
+});
+export declare class PopUp_AccountMenu extends ComponentSync<Props, State> {
+    static show(e: React.MouseEvent, props: Props, modalProps?: ModalProps): void;
+    static Action_AppToolsButton: (url: string) => PopUp_AccountMenu_Action;
+    static Action_EditPassword: PopUp_AccountMenu_Action;
+    static defaultProps: Partial<Props>;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private closePopUp;
+    private logOut;
+    private onActionClick;
+    private closeCustomPage;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderNoAccount;
+    private renderAccount;
+    private renderSeparatorBar;
+    private renderHeader;
+    private renderBody;
+    private renderFooter;
+    private renderCustomPage;
+}
+export {};