@nu-art/user-account-frontend 0.400.5

package/account-editor/Component_AccountEditor.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { accountTypes } from '@nu-art/user-account-shared';
+import { _className, Button, ComponentSync, Grid, LL_H_C, LL_V_L, ModuleFE_Thunderstorm, ModuleFE_Toaster, performAction, SimpleListAdapter, TS_DropDown, TS_Input, TS_PropRenderer } from '@nu-art/thunderstorm-frontend/index';
+import { capitalizeFirstLetter, DateTimeFormat_yyyyMMDDTHHmmss, JwtTools, Year } from '@nu-art/ts-common';
+import './Component_AccountEditor.scss';
+import { TS_Icons } from '@nu-art/ts-styles';
+import { ModuleFE_Account } from '../_entity.js';
+export class Component_AccountEditor extends ComponentSync {
+    deriveStateFromProps(nextProps, state) {
+        state.sessions = [];
+        state.isPreview = !!nextProps.isPreview;
+        state.user = nextProps.user;
+        const accountId = nextProps.user?._id;
+        if (accountId)
+            ModuleFE_Account._v1.getSessions({ _id: accountId }).execute(async (response) => {
+                const sessions = await Promise.all(response.sessions.map(async (session) => {
+                    const sessionJWT = await JwtTools.decode(session.sessionIdJwt);
+                    return {
+                        ...sessionJWT,
+                        _id: session._id,
+                        label: session.label,
+                        deviceId: session.deviceId,
+                        sessionIdJwt: session.sessionIdJwt,
+                    };
+                }));
+                this.setState({ sessions });
+            });
+        return state;
+    }
+    addAccount = async () => {
+        return performAction(async () => {
+            const account = await ModuleFE_Account._v1.createAccount({
+                password: this.state.password,
+                type: this.state.type,
+                email: this.state.email,
+                passwordCheck: this.state.password
+            }).executeSync();
+            this.props.onComplete?.(account._id);
+            this.setState({
+                email: undefined,
+                password: undefined,
+                passwordCheck: undefined,
+                type: undefined
+            });
+        }, {
+            type: 'notification',
+            notificationLabels: {
+                inProgress: 'Creating Account',
+                success: 'Account Created',
+                failed: 'Failed Creating Account'
+            }
+        });
+    };
+    canCreate = () => {
+        const baseConditions = !!(this.state.email && this.state.type);
+        let extraConditions = true;
+        if (this.state.type === 'user')
+            extraConditions = !!this.state.password;
+        return baseConditions && extraConditions;
+    };
+    renderDropdown = () => {
+        if (this.state.isPreview)
+            return _jsx(TS_PropRenderer.Vertical, { label: 'User Type', children: _jsx("div", { children: capitalizeFirstLetter(this.state.user?.type ? this.state.user.type : '') }) });
+        return _jsx(TS_PropRenderer.Vertical, { label: 'User Type', children: _jsx(TS_DropDown, { placeholder: 'account type', selected: this.state.type, adapter: SimpleListAdapter([...accountTypes], i => _jsx("div", { className: 'node-data', children: _jsx("span", { children: i.item }) })), onSelected: (type) => {
+                    type === 'service' ? this.setState({
+                        type,
+                        password: undefined
+                    }) : this.setState({ type });
+                } }) });
+    };
+    renderInputs = () => {
+        if (this.state.isPreview)
+            return _jsxs(LL_H_C, { className: 'inputs-row', children: [_jsx(TS_PropRenderer.Vertical, { label: 'Email', children: _jsx("div", { children: this.state.user?.email }) }), this.state.user?.type !== 'service' && _jsx(TS_PropRenderer.Vertical, { label: 'Need To Set Password', children: _jsx("div", { children: this.state.user?._newPasswordRequired ? 'Yes' : 'No' }) })] });
+        return _jsxs(LL_H_C, { className: 'inputs-row', children: [_jsx(TS_PropRenderer.Vertical, { label: 'Email', children: _jsx(TS_Input, { type: 'text', placeholder: 'Email', value: this.state.email, onBlur: (email) => this.setState({ email }) }) }), _jsx(TS_PropRenderer.Vertical, { disabled: !(this.state.type === 'user'), label: 'Temporary Password', children: _jsx(TS_Input, { disabled: !(this.state.type === 'user'), type: 'password', value: this.state.password, placeholder: 'Temporary Password', onBlur: (password) => this.setState({ password }) }) })] });
+    };
+    renderSubmitButton = () => {
+        if (this.state.isPreview)
+            return '';
+        const disabled = !this.canCreate();
+        const className = _className(disabled && 'disabled');
+        return _jsx(Button, { variant: 'primary', className: className, disabled: disabled, onClick: this.addAccount, children: "Add Account" });
+    };
+    renderGenToken = () => {
+        if (!this.state.isPreview || this.state.user?.type !== 'service')
+            return;
+        const options = [
+            { label: '1 Year', ttl: 1 * Year },
+            { label: '2 Year', ttl: 2 * Year },
+            { label: '3 Year', ttl: 3 * Year },
+            { label: '5 Year', ttl: 5 * Year },
+            { label: '10 Year', ttl: 10 * Year },
+        ];
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Generate New Token', children: _jsxs(LL_H_C, { className: 'gen-token-row', children: [_jsx(TS_PropRenderer.Vertical, { label: 'TTL', children: _jsx(TS_DropDown, { placeholder: 'Select Session TTL', selected: options.find(option => option.ttl === this.state.tokenTTL), adapter: SimpleListAdapter(options, item => _jsx(_Fragment, { children: item.item.label })), onSelected: option => this.setState({ tokenTTL: option.ttl }) }) }), _jsx(TS_PropRenderer.Vertical, { label: 'Label (Optional)', children: _jsx(TS_Input, { type: "text", value: this.state.tokenLabel, onBlur: tokenLabel => this.setState({ tokenLabel }) }) }), _jsx(Button, { variant: 'primary', onClick: async () => {
+                            try {
+                                const token = await ModuleFE_Account._v1.createToken({
+                                    accountId: this.state.user._id,
+                                    ttl: this.state.tokenTTL,
+                                    label: this.state.tokenLabel
+                                })
+                                    .executeSync();
+                                await ModuleFE_Thunderstorm.copyToClipboard(token.token);
+                                ModuleFE_Toaster.toastSuccess('Token copied to clipboard');
+                                this.reDeriveState();
+                            }
+                            catch (e) {
+                                ModuleFE_Toaster.toastError(e.message);
+                                this.logError(e);
+                            }
+                        }, children: "Generate Token" })] }) });
+    };
+    renderSessionGrid = () => {
+        if (!this.state.sessions.length)
+            return '';
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Sessions', children: _jsxs(Grid, { children: [_jsx("div", { className: 'grid-title', children: "Label" }), _jsx("div", { className: 'grid-title', children: "Created At" }), _jsx("div", { className: 'grid-title', children: "Expiry Date" }), _jsx("div", { className: 'grid-title', children: "Device Id" }), _jsx("div", { className: 'grid-title' }), this.state.sessions.map(session => {
+                        try {
+                            const createdAt = DateTimeFormat_yyyyMMDDTHHmmss.format(session.iat * 1000);
+                            const validTill = DateTimeFormat_yyyyMMDDTHHmmss.format(session.exp * 1000);
+                            return _jsxs(React.Fragment, { children: [_jsx(LL_H_C, { className: 'grid-cell', children: session.label ?? 'No Label' }), _jsx(LL_H_C, { className: 'grid-cell', children: `${createdAt}` }), _jsx(LL_H_C, { className: 'grid-cell', children: `${validTill}` }), _jsx(LL_H_C, { className: 'grid-cell', children: session.deviceId }), _jsx(TS_Icons.copy.component, { onClick: () => ModuleFE_Thunderstorm.copyToClipboard(session.sessionIdJwt) })] }, session._id);
+                        }
+                        catch (e) {
+                            return '';
+                        }
+                    })] }) });
+    };
+    renderDescription = () => {
+        if (!this.state.user?.description)
+            return '';
+        return _jsx(TS_PropRenderer.Vertical, { label: 'description', children: this.state.user.description });
+    };
+    render() {
+        return _jsxs(LL_V_L, { className: 'account-editor', children: [_jsxs(LL_V_L, { className: 'editor-section', children: [this.renderDropdown(), this.renderInputs(), this.renderSubmitButton(), this.renderDescription()] }), _jsxs(LL_V_L, { className: 'editor-section', children: [this.renderSessionGrid(), this.renderGenToken()] })] });
+    }
+}

package/account-editor/Component_AccountEditor.scss

@@ -0,0 +1,139 @@
+@use '@nu-art/ts-styles' as styles;
+
+.account-editor {
+  padding: 14px;
+  min-width: 70%;
+  min-height: 40%;
+  background: white;
+  border-radius: 4px;
+  gap: 30px;
+
+  .editor-section {
+    gap: 15px;
+  }
+
+  .gen-token-row {
+    align-items: flex-end;
+    width: 100%;
+    gap: 5%;
+
+    .ts-dropdown {
+      max-width: 100%;
+    }
+
+    .ts-prop-renderer {
+      max-width: 33%;
+    }
+  }
+
+  .inputs-row {
+    gap: 10px;
+    width: 100%;
+  }
+
+  .ts-input {
+    padding: 2px 10px 2px 10px;
+    border-radius: 4px;
+    max-width: 100%;
+    background: none;
+    border: 1px solid #e3e9f2;
+
+    &::placeholder {
+      font-style: normal;
+    }
+  }
+
+  .ts-dropdown {
+    max-width: 300px;
+
+    .ts-dropdown__items-container {
+      margin: 0;
+    }
+
+    .ts-dropdown__header {
+      background: none;
+      border-radius: 4px;
+      border: 1px solid #e3e9f2;
+      padding: 2px 10px 2px 10px;
+      text-align: center;
+
+      .ts-dropdown__placeholder {
+        font-style: normal;
+        padding: 0;
+      }
+    }
+
+    .ts-dropdown__items-container {
+      border: none;
+    }
+
+
+    .ts-tree {
+      .ts-tree__children-container {
+        .ts-tree__node {
+          background: none;
+          padding: 4px;
+          cursor: pointer;
+          border: 1px solid #e3e9f2;
+
+          &:hover {
+            background: rgb(210, 219, 234);
+          }
+        }
+      }
+    }
+  }
+
+  .ts-prop-renderer {
+    .ts-grid {
+      grid-template-columns: repeat(5, max-content);
+      column-gap: 15px;
+      row-gap: 10px;
+
+      .grid-title {
+        font-size: 15px;
+        color: #004a72;
+      }
+
+      .grid-cell {
+        font-size: 14px;
+        color: #333333;
+        justify-content: center;
+      }
+
+      .icon--wrapper {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .ts-busy-button {
+    background: white;
+    font-size: 12px;
+    border-radius: 5px;
+    min-width: 20%;
+    color: inherit;
+    padding: 2px 10px 2px 10px;
+    height: 40px;
+    font-weight: 400;
+    border: 1px #e3e9f2 solid;
+    margin-inline: 0;
+    transition: all 500ms;
+
+    &:hover {
+      background: #6C87B0FF;
+      color: white;
+    }
+
+    &.disabled {
+      background: styles.gray(7);
+      color: styles.gray(4);
+      cursor: not-allowed;
+
+      &:hover {
+        background: styles.gray(7);
+        color: styles.gray(4);
+      }
+    }
+  }
+}

package/consts.d.ts

@@ -0,0 +1 @@
+export declare const RendererKey_AccountMenu_SubHeader = "account-menu_sub-header";

package/consts.js

@@ -0,0 +1 @@
+export const RendererKey_AccountMenu_SubHeader = 'account-menu_sub-header';

package/index.d.ts

@@ -0,0 +1,9 @@
+export * from './_entity.js';
+export * from './module-pack.js';
+export * from './_entity/account/ModuleFE_Account.js';
+export * from './ui/Component_Login/Component_Login.js';
+export * from './ui/Component_Register.js';
+export * from './ui/Component_GoogleSAMLLogin/Component_GoogleSAMLLogin.js';
+export * from './ui/Component_ChangePassword/Component_ChangePassword.js';
+export * from './ui/Component_AccountThumbnail/Component_AccountThumbnail.js';
+export * from './ui/PopUp_AccountMenu/PopUp_AccountMenu.js';

package/index.js

@@ -0,0 +1,26 @@
+/*
+ * 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 './_entity.js';
+export * from './module-pack.js';
+export * from './_entity/account/ModuleFE_Account.js';
+export * from './ui/Component_Login/Component_Login.js';
+export * from './ui/Component_Register.js';
+export * from './ui/Component_GoogleSAMLLogin/Component_GoogleSAMLLogin.js';
+export * from './ui/Component_ChangePassword/Component_ChangePassword.js';
+export * from './ui/Component_AccountThumbnail/Component_AccountThumbnail.js';
+export * from './ui/PopUp_AccountMenu/PopUp_AccountMenu.js';

package/module-pack.d.ts

@@ -0,0 +1,2 @@
+import { Module } from '@nu-art/ts-common';
+export declare const ModulePackFE_Accounts: Module[];

package/module-pack.js

@@ -0,0 +1,21 @@
+/*
+ * 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 { ModulePackFE_AccountDB } from './_entity.js';
+export const ModulePackFE_Accounts = [
+    ...ModulePackFE_AccountDB,
+];

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@nu-art/user-account-frontend",
+  "version": "0.400.5",
+  "description": "User Account Frontend",
+  "keywords": [
+    "TacB0sS",
+    "create account",
+    "express",
+    "infra",
+    "login",
+    "nu-art",
+    "saml",
+    "thunderstorm",
+    "typescript",
+    "user-account"
+  ],
+  "homepage": "https://github.com/nu-art-js/user-account",
+  "bugs": {
+    "url": "https://github.com/nu-art-js/user-account/issues"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:nu-art-js/user-account.git"
+  },
+  "license": "Apache-2.0",
+  "author": "TacB0sS",
+  "scripts": {
+    "build": "tsc",
+    "run-tests": "firebase emulators:exec \"npm run test\"",
+    "test": "ts-mocha -w -p src/test/tsconfig.json --timeout 0 --inspect=8107 --watch-files 'src/test/**/*.test.ts' src/test/**/*.test.ts"
+  },
+  "dependencies": {
+    "@nu-art/user-account-shared": "0.400.5",
+    "@nu-art/firebase-frontend": "0.400.5",
+    "@nu-art/firebase-shared": "0.400.5",
+    "@nu-art/slack-frontend": "0.400.5",
+    "@nu-art/slack-shared": "0.400.5",
+    "@nu-art/thunderstorm-frontend": "0.400.5",
+    "@nu-art/thunderstorm-shared": "0.400.5",
+    "@nu-art/ts-common": "0.400.5",
+    "@nu-art/ts-styles": "0.400.5",
+    "express": "^4.18.2",
+    "firebase": "^11.9.0",
+    "firebase-admin": "13.4.0",
+    "firebase-functions": "6.3.2",
+    "moment": "^2.29.4",
+    "pako": "^2.1.0",
+    "react": "^18.0.0",
+    "request": "^2.88.0",
+    "saml2-js": "^4.0.1",
+    "xmlbuilder": "^15.1.1"
+  },
+  "devDependencies": {
+    "@nu-art/google-services-backend": "0.400.5",
+    "@types/react": "^18.0.0",
+    "@types/express": "^4.17.17",
+    "@types/history": "^4.7.2",
+    "@types/request": "^2.48.1",
+    "@types/saml2-js": "^1.6.8",
+    "@types/pako": "^2.0.0",
+    "@types/jsonwebtoken": "^9.0.6"
+  },
+  "unitConfig": {
+    "type": "typescript-lib"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./*.js"
+    }
+  }
+}

package/ui/Component_AccountThumbnail/Component_AccountThumbnail.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ModuleFE_BaseApi } from '@nu-art/thunderstorm-frontend/index';
+import { ResolvableContent, UniqueId } from '@nu-art/ts-common';
+import { DB_Account } from '@nu-art/user-account-shared';
+import './Component_AccountThumbnail.scss';
+type Props = {
+    accountId: ResolvableContent<UniqueId>;
+    onClick?: (e: React.MouseEvent, account: DB_Account) => void;
+    acronymComposer?: (accountId: UniqueId) => string | undefined;
+};
+export declare const Component_AccountThumbnail: (props: Props & {
+    modulesToAwait?: ModuleFE_BaseApi<any>[];
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Component_AccountThumbnail/Component_AccountThumbnail.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { _className, AwaitModules, ComponentSync, TS_ErrorBoundary, TS_Loader } from '@nu-art/thunderstorm-frontend/index';
+import { cloneObj, filterDuplicates, MUSTNeverHappenException, resolveContent } from '@nu-art/ts-common';
+import { ModuleFE_Account } from '../../_entity/account/index.js';
+import { TS_Icons } from '@nu-art/ts-styles';
+import './Component_AccountThumbnail.scss';
+export const Component_AccountThumbnail = (props) => {
+    const { modulesToAwait, ...rest } = props;
+    const modules = [...(modulesToAwait ?? []), ModuleFE_Account];
+    return _jsx(AwaitModules, { modules: filterDuplicates(modules), customLoader: () => _jsx(TS_Loader, { className: 'user-thumbnail__loader' }), children: _jsx(Component_AccountThumbnail_Impl, { ...rest }) });
+};
+class Component_AccountThumbnail_Impl extends ComponentSync {
+    // ######################### Lifecycle #########################
+    shouldReDeriveState() {
+        return true;
+    }
+    __onAccountsUpdated = (...params) => {
+        this.reDeriveState();
+    };
+    deriveStateFromProps(nextProps, state) {
+        const accountId = resolveContent(nextProps.accountId);
+        state.account = ModuleFE_Account.cache.unique(accountId);
+        if (!state.account)
+            throw new MUSTNeverHappenException(`Could not find account for id ${accountId}`);
+        state.acronym = this.generateThumbnailAcronym(state.account);
+        return state;
+    }
+    // ######################### Logic #########################
+    generateThumbnailAcronym(account) {
+        const accountAcronym = account.displayName ? account.displayName.substring(0, 2).toUpperCase() : account.email.substring(0, 2).toUpperCase();
+        if (!this.props.acronymComposer)
+            return accountAcronym;
+        return this.props.acronymComposer(account._id) ?? accountAcronym;
+    }
+    onClick = (e) => {
+        if (!this.props.onClick || !this.state.account)
+            return;
+        this.props.onClick(e, cloneObj(this.state.account));
+    };
+    // ######################### Render #########################
+    render() {
+        const className = _className('user-thumbnail', this.props.onClick && 'clickable');
+        return _jsx(TS_ErrorBoundary, { children: _jsxs("div", { className: className, onClick: this.onClick, children: [this.renderContent(), this.renderImageUploadOverlay()] }) });
+    }
+    renderContent = () => {
+        if (this.state.account?.thumbnail)
+            return this.renderUserImage();
+        return _jsx("div", { className: 'user-thumbnail__acronym', children: this.state.acronym });
+    };
+    renderUserImage = () => {
+        const src = `data:image/jpeg;base64,${this.state.account.thumbnail}`;
+        return _jsx("img", { src: src, alt: 'user-image', className: 'user-thumbnail__image' });
+    };
+    renderImageUploadOverlay = () => {
+        if (this.props.onClick !== ModuleFE_Account.uploadAccountThumbnail)
+            return;
+        return _jsx("div", { className: 'user-thumbnail__upload-image-overlay', children: _jsx(TS_Icons.addImage.component, {}) });
+    };
+}

package/ui/Component_AccountThumbnail/Component_AccountThumbnail.scss

@@ -0,0 +1,66 @@
+@use '@nu-art/ts-styles' as tsStyles;
+
+.user-thumbnail {
+  width: 26px;
+  height: 26px;
+  position: relative;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 1px solid #1d496f;
+  background: white;
+
+  .user-thumbnail__acronym {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font: {
+      size: 14px;
+      weight: bold;
+    }
+    text-transform: uppercase;
+    color: #1d496f;
+  }
+
+  .user-thumbnail__image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .user-thumbnail__upload-image-overlay {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #0008;
+    opacity: 0;
+    transition: opacity 200ms linear;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .icon--wrapper {
+      width: 50%;
+      height: 50%;
+
+      @include tsStyles.color-svg(white);
+    }
+  }
+
+  &.clickable {
+    cursor: pointer;
+  }
+
+  &:hover {
+    .user-thumbnail__upload-image-overlay {
+      opacity: 1;
+    }
+  }
+}
+
+.user-thumbnail__loader {
+  width: 26px;
+  height: 26px;
+}

package/ui/Component_ChangePassword/Component_ChangePassword.d.ts

@@ -0,0 +1,17 @@
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+type Props = {
+    postSubmitAction?: () => void;
+};
+type State = {
+    shouldGiveCurrentPassword: boolean;
+    currentPassword?: string;
+    newPassword?: string;
+    newPasswordCheck?: string;
+};
+export declare class Component_ChangePassword extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: any, state: State): State;
+    private submitNewPassword;
+    private renderCurrentPassword;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/ui/Component_ChangePassword/Component_ChangePassword.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ComponentSync, LL_V_L, TS_Input, TS_PropRenderer } from '@nu-art/thunderstorm-frontend/index';
+import { ThisShouldNotHappenException } from '@nu-art/ts-common';
+import { ModuleFE_Account, SessionKeyFE_Account } from '../../_entity.js';
+export class Component_ChangePassword extends ComponentSync {
+    // ######################## Life Cycle ########################
+    deriveStateFromProps(nextProps, state) {
+        const account = SessionKeyFE_Account.get();
+        if (!account)
+            throw new ThisShouldNotHappenException('Rendering a change password component without user logged in');
+        state.shouldGiveCurrentPassword = account.hasPassword;
+        return state;
+    }
+    // ######################## Logic ########################
+    submitNewPassword = async () => {
+        if (!this.state.newPassword || !this.state.newPasswordCheck) {
+            this.logError('No password or password check');
+            return;
+        }
+        try {
+            if (!this.state.shouldGiveCurrentPassword)
+                await ModuleFE_Account._v1.setPassword({
+                    password: this.state.newPassword,
+                    passwordCheck: this.state.newPasswordCheck,
+                }).executeSync();
+            else {
+                if (!this.state.currentPassword) {
+                    this.logError('No current password given');
+                    return;
+                }
+                await ModuleFE_Account._v1.changePassword({
+                    oldPassword: this.state.currentPassword,
+                    password: this.state.newPassword,
+                    passwordCheck: this.state.newPasswordCheck,
+                }).executeSync();
+            }
+            this.props.postSubmitAction?.();
+        }
+        catch (e) {
+            this.logError(e);
+        }
+    };
+    // ######################## Render ########################
+    renderCurrentPassword = () => {
+        if (!this.state.shouldGiveCurrentPassword)
+            return '';
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Current Password', children: _jsx(TS_Input, { type: 'password', value: this.state.currentPassword, onChange: val => this.setState({ currentPassword: val }) }) });
+    };
+    render() {
+        return _jsxs(LL_V_L, { className: 'ts-account__change-password', children: [this.renderCurrentPassword(), _jsx(TS_PropRenderer.Vertical, { label: 'New Password', children: _jsx(TS_Input, { type: 'password', value: this.state.newPassword, onChange: val => this.setState({ newPassword: val }) }) }), _jsx(TS_PropRenderer.Vertical, { label: 'New Password Check', children: _jsx(TS_Input, { type: 'password', value: this.state.newPasswordCheck, onChange: val => this.setState({ newPasswordCheck: val }) }) }), _jsx(Button, { variant: 'primary', onClick: this.submitNewPassword, children: "Submit" })] });
+    }
+}

package/ui/Component_GoogleSAMLLogin/Component_GoogleSAMLLogin.d.ts

@@ -0,0 +1,6 @@
+import './Component_GoogleSAMLLogin.scss';
+type Props = {
+    text?: string;
+};
+export declare const Component_GoogleSAMLLogin: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Component_GoogleSAMLLogin/Component_GoogleSAMLLogin.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@nu-art/thunderstorm-frontend/index';
+import { TS_Icons } from '@nu-art/ts-styles';
+import './Component_GoogleSAMLLogin.scss';
+import { ModuleFE_Account, StorageKey_DeviceId } from '../../_entity.js';
+import { MUSTNeverHappenException } from '@nu-art/ts-common';
+export const Component_GoogleSAMLLogin = (props) => {
+    const onClick = async () => {
+        const url = ModuleFE_Account.composeSAMLUrl();
+        const deviceId = StorageKey_DeviceId.get();
+        if (!deviceId)
+            throw new MUSTNeverHappenException('Missing deviceId, how did this happen?');
+        await ModuleFE_Account._v1.loginSaml({ redirectUrl: url, deviceId }).executeSync();
+    };
+    return _jsxs(Button, { variant: 'primary', className: 'ts-account__saml-button', onClick: onClick, children: [props.text ?? 'Login With Google', _jsx(TS_Icons.google.component, { className: 'ts-account__saml-button__icon' })] });
+};