1
0
Fork 0

move settings into own files

This commit is contained in:
ChaotiCryptidz 2022-01-23 18:41:31 +00:00
parent 17d8e896d8
commit 548d5caa8a
17 changed files with 347 additions and 271 deletions

View file

@ -6,8 +6,8 @@ import { Margin } from "../../../elements/Margin";
import { SecretTitleElement } from "../SecretTitleElement";
import { kvListURL, kvViewURL } from "../../pageLinks";
import { route } from "preact-router";
import i18next from "i18next";
import { splitKVPath } from "./kvPathUtils";
import i18next from "i18next";
export class KeyValueDelete extends Component<DefaultPageProps> {
errorMessageRef = createRef<ErrorMessage>();

View file

@ -13,9 +13,9 @@ import {
parseData,
toPrismCode,
} from "../../../../utils/dataInterchange";
import { combineKVPath, splitKVPath } from "./kvPathUtils";
import { sortedObjectMap } from "../../../../utils";
import i18next from "i18next";
import { combineKVPath, splitKVPath } from "./kvPathUtils";
export type KVEditProps = DefaultPageProps & {
baseMount: string;
@ -83,7 +83,7 @@ export class KVEditor extends Component<KVEditProps, KVEditState> {
}
try {
const combined = combineKVPath(this.props.secretPath, this.props.secretItem)
const combined = combineKVPath(this.props.secretPath, this.props.secretItem);
await this.props.api.createOrUpdateSecret(
this.props.baseMount,
combined.secretPath,

View file

@ -12,8 +12,8 @@ import { SupportedLanguages, dumpData, toPrismCode } from "../../../../utils/dat
import { kvDeleteURL, kvEditURL, kvVersionsURL } from "../../pageLinks";
import { sendErrorNotification } from "../../../elements/ErrorMessage";
import { sortedObjectMap } from "../../../../utils";
import i18next from "i18next";
import { splitKVPath } from "./kvPathUtils";
import i18next from "i18next";
type KVSecretViewDataProps = DefaultPageProps & { data: Map<string, unknown> };

View file

@ -3,7 +3,6 @@ type CombinedPaths = {
secretItem: string;
};
export function combineKVPath(secretPath: string[], path: string): CombinedPaths {
if (path.includes("/")) {
const split = path.split("/");

View file

@ -0,0 +1,21 @@
import { Component } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { LanguageSetting } from "./LanguageSetting";
import { PageDirectionSetting } from "./PageDirectionSetting";
import { ThemeSetting } from "./ThemeSetting";
import { VaultURLSetting } from "./VaultURLSetting";
import i18next from "i18next";
export class GeneralSettings extends Component<DefaultPageProps> {
render() {
return (
<div>
<h4>{i18next.t("settings_general_title")}</h4>
<ThemeSetting {...this.props} />
<VaultURLSetting {...this.props} />
<LanguageSetting {...this.props} />
<PageDirectionSetting {...this.props} />
</div>
);
}
}

View file

@ -0,0 +1,44 @@
import { Component, createRef } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { InputWithTitle } from "../../../elements/InputWithTitle";
import { Select, SelectOption } from "../../../elements/forms/Select";
import { getTranslationCompletePercentage } from "../../../../utils/translationUtils";
import { settingsSavedNotification } from "../Settings";
import i18next from "i18next";
import translations from "../../../../translations/index.mjs";
export class LanguageSetting extends Component<DefaultPageProps> {
languageSelectRef = createRef<HTMLSelectElement>();
render() {
return (
<InputWithTitle title={i18next.t("settings_general_language")}>
<Select
selectRef={this.languageSelectRef}
onChange={async () => {
const language = this.languageSelectRef.current.value;
this.props.settings.language = language;
const t = await i18next.changeLanguage(language);
this.props.settings.pageDirection = t("language_direction");
window.location.reload();
settingsSavedNotification();
}}
>
{Object.getOwnPropertyNames(translations).map((languageID) => {
const languageName = i18next.getFixedT(languageID, null)("language_name");
const languageCompletionPercent = getTranslationCompletePercentage(languageID);
const name = `${languageName} (${languageCompletionPercent})`;
return (
<SelectOption
name={name}
value={languageID}
selected={this.props.settings.language == languageID}
/>
);
})}
</Select>
</InputWithTitle>
);
}
}

View file

@ -0,0 +1,38 @@
import { Component, createRef } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { InputWithTitle } from "../../../elements/InputWithTitle";
import { Select, SelectOption } from "../../../elements/forms/Select";
import { settingsSavedNotification } from "../Settings";
import i18next from "i18next";
export class PageDirectionSetting extends Component<DefaultPageProps> {
pageDirectionRef = createRef<HTMLSelectElement>();
render() {
return (
<InputWithTitle title={i18next.t("settings_general_page_direction")}>
<Select
selectRef={this.pageDirectionRef}
onChange={() => {
this.props.settings.pageDirection = this.pageDirectionRef.current.value;
document.documentElement.dir = this.props.settings.pageDirection;
settingsSavedNotification();
}}
>
{[
{ name: "ltr", readable: i18next.t("settings_general_page_direction_ltr") },
{ name: "rtl", readable: i18next.t("settings_general_page_direction_rtl") },
].map((direction) => {
return (
<SelectOption
name={direction.readable}
value={direction.name}
selected={this.props.settings.pageDirection == direction.name}
/>
);
})}
</Select>
</InputWithTitle>
);
}
}

View file

@ -0,0 +1,40 @@
import { Component, createRef } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { InputWithTitle } from "../../../elements/InputWithTitle";
import { Select, SelectOption } from "../../../elements/forms/Select";
import { settingsSavedNotification } from "../Settings";
import i18next from "i18next";
const Themes = [
{ name: "dark", readable: "Dark" },
{ name: "light", readable: "Light" },
];
export class ThemeSetting extends Component<DefaultPageProps> {
themeSelectRef = createRef<HTMLSelectElement>();
render() {
return (
<InputWithTitle title={i18next.t("settings_general_theme")}>
<Select
selectRef={this.themeSelectRef}
onChange={() => {
const newTheme = this.themeSelectRef.current.value;
this.props.settings.theme = newTheme;
settingsSavedNotification();
}}
>
{Themes.map((theme) => {
return (
<SelectOption
name={theme.readable}
value={theme.name}
selected={this.props.settings.theme == theme.name}
/>
);
})}
</Select>
</InputWithTitle>
);
}
}

View file

@ -0,0 +1,25 @@
import { Component, createRef } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { InputWithTitle } from "../../../elements/InputWithTitle";
import { TextInput } from "../../../elements/forms/TextInput";
import { settingsSavedNotification } from "../Settings";
import i18next from "i18next";
export class VaultURLSetting extends Component<DefaultPageProps> {
vaultURLInputRef = createRef<HTMLInputElement>();
render() {
return (
<InputWithTitle title={i18next.t("settings_general_vault_url")}>
<TextInput
value={this.props.settings.apiURL}
onChange={() => {
// TODO: check for api health to see if is valid api url.
this.props.settings.apiURL = this.vaultURLInputRef.current.value;
settingsSavedNotification();
}}
/>
</InputWithTitle>
);
}
}

View file

@ -1,115 +0,0 @@
import { Component, createRef } from "preact";
import { DefaultPageProps } from "../../../types/DefaultPageProps";
import { InputWithTitle } from "../../elements/InputWithTitle";
import i18next from "i18next";
// @ts-ignore
import { Select, SelectOption } from "../../elements/forms/Select";
import { TextInput } from "../../elements/forms/TextInput";
import { getTranslationCompletePercentage } from "../../../utils/translationUtils";
import { settingsSavedNotification } from "./Settings";
import translations from "../../../translations/index.mjs";
const Themes = [
{ name: "dark", readable: "Dark" },
{ name: "light", readable: "Light" },
];
export class GeneralSettings extends Component<DefaultPageProps> {
themeSelectRef = createRef<HTMLSelectElement>();
vaultURLInputRef = createRef<HTMLInputElement>();
pageDirectionRef = createRef<HTMLSelectElement>();
languageSelectRef = createRef<HTMLSelectElement>();
render() {
return (
<div>
<h4>{i18next.t("settings_general_title")}</h4>
<InputWithTitle title={i18next.t("settings_general_theme")}>
<Select
selectRef={this.themeSelectRef}
onChange={() => {
const newTheme = this.themeSelectRef.current.value;
this.props.settings.theme = newTheme;
settingsSavedNotification();
}}
>
{Themes.map((theme) => {
return (
<SelectOption
name={theme.readable}
value={theme.name}
selected={this.props.settings.theme == theme.name}
/>
);
})}
</Select>
</InputWithTitle>
<InputWithTitle title={i18next.t("settings_general_vault_url")}>
<TextInput
value={this.props.settings.apiURL}
onChange={() => {
// TODO: check for api health to see if is valid api url.
this.props.settings.apiURL = this.vaultURLInputRef.current.value;
settingsSavedNotification();
}}
/>
</InputWithTitle>
<InputWithTitle title={i18next.t("settings_general_language")}>
<Select
selectRef={this.languageSelectRef}
onChange={async () => {
const language = this.languageSelectRef.current.value;
this.props.settings.language = language;
const t = await i18next.changeLanguage(language);
this.props.settings.pageDirection = t("language_direction");
window.location.reload();
settingsSavedNotification();
}}
>
{Object.getOwnPropertyNames(translations).map((languageID) => {
const languageName = i18next.getFixedT(languageID, null)("language_name");
const languageCompletionPercent = getTranslationCompletePercentage(languageID);
const name = `${languageName} (${languageCompletionPercent})`;
return (
<SelectOption
name={name}
value={languageID}
selected={this.props.settings.language == languageID}
/>
);
})}
</Select>
</InputWithTitle>
<InputWithTitle title={i18next.t("settings_general_page_direction")}>
<Select
selectRef={this.pageDirectionRef}
onChange={() => {
this.props.settings.pageDirection = this.pageDirectionRef.current.value;
document.documentElement.dir = this.props.settings.pageDirection;
settingsSavedNotification();
}}
>
{[
{ name: "ltr", readable: i18next.t("settings_general_page_direction_ltr") },
{ name: "rtl", readable: i18next.t("settings_general_page_direction_rtl") },
].map((direction) => {
return (
<SelectOption
name={direction.readable}
value={direction.name}
selected={this.props.settings.pageDirection == direction.name}
/>
);
})}
</Select>
</InputWithTitle>
</div>
);
}
}

View file

@ -0,0 +1,54 @@
import { Component, createRef } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { InputWithTitle } from "../../../elements/InputWithTitle";
import { NumberInput } from "../../../elements/forms/NumberInput";
import { Select, SelectOption } from "../../../elements/forms/Select";
import { SupportedLanguages } from "../../../../utils/dataInterchange";
import { settingsSavedNotification } from "../Settings";
import i18next from "i18next";
export class KeyValueEditorSettings extends Component<DefaultPageProps> {
editorSyntaxSelectRef = createRef<HTMLSelectElement>();
editorIndentInputRef = createRef<HTMLInputElement>();
render() {
return (
<div>
{/* KV Editor Language */}
<InputWithTitle title={i18next.t("settings_kv_default_editor_language")}>
<Select
selectRef={this.editorSyntaxSelectRef}
onChange={() => {
this.props.settings.kvEditorDefaultLanguage =
this.editorSyntaxSelectRef.current.value;
settingsSavedNotification();
}}
>
{SupportedLanguages.map((lang) => {
return (
<SelectOption
name={lang.readable}
value={lang.name}
selected={this.props.settings.kvEditorDefaultLanguage == lang.name}
/>
);
})}
</Select>
</InputWithTitle>
{/* KV Editor Indent */}
<InputWithTitle title={i18next.t("settings_kv_editor_indent")}>
<NumberInput
inputRef={this.editorIndentInputRef}
value={String(this.props.settings.kvEditorIndent).toString()}
onChange={() => {
const value = this.editorIndentInputRef.current.value;
const indent = parseInt(value);
this.props.settings.kvEditorIndent = indent;
settingsSavedNotification();
}}
/>
</InputWithTitle>
</div>
);
}
}

View file

@ -0,0 +1,51 @@
import { Checkbox } from "../../../elements/forms/Checkbox";
import { Component, createRef } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { InputWithTitle } from "../../../elements/InputWithTitle";
import { KeyValueEditorSettings } from "./KeyValueEditorSettings";
import { KeyValueViewSettings } from "./KeyValueViewSettings";
import { TextInput } from "../../../elements/forms/TextInput";
import { settingsSavedNotification } from "../Settings";
import i18next from "i18next";
export class KeyValueSettings extends Component<DefaultPageProps> {
codeModeToggleRef = createRef<HTMLInputElement>();
hideKeysRef = createRef<HTMLInputElement>();
render() {
return (
<div>
<h4>{i18next.t("settings_kv_title")}</h4>
<KeyValueViewSettings {...this.props} />
<KeyValueEditorSettings {...this.props} />
{/* Always view in code mode */}
<InputWithTitle title={i18next.t("settings_kv_always_view_in_code_mode")}>
<Checkbox
checkboxRef={this.codeModeToggleRef}
checked={this.props.settings.kvAlwaysCodeView}
onChange={() => {
const value = this.codeModeToggleRef.current.checked;
this.props.settings.kvAlwaysCodeView = value;
settingsSavedNotification();
}}
/>
</InputWithTitle>
{/* hide values on keys */}
<InputWithTitle title={i18next.t("settings_kv_hide_values")}>
<TextInput
inputRef={this.hideKeysRef}
value={this.props.settings.kvHideKeyValues.join(",")}
onChange={() => {
const value = this.hideKeysRef.current.value;
this.props.settings.kvHideKeyValues = value;
settingsSavedNotification();
}}
/>
</InputWithTitle>
</div>
);
}
}

View file

@ -0,0 +1,53 @@
import { Component, createRef } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { InputWithTitle } from "../../../elements/InputWithTitle";
import { NumberInput } from "../../../elements/forms/NumberInput";
import { Select, SelectOption } from "../../../elements/forms/Select";
import { SupportedLanguages } from "../../../../utils/dataInterchange";
import { settingsSavedNotification } from "../Settings";
import i18next from "i18next";
export class KeyValueViewSettings extends Component<DefaultPageProps> {
viewSyntaxSelectRef = createRef<HTMLSelectElement>();
viewIndentInputRef = createRef<HTMLInputElement>();
render() {
return (
<div>
{/* KV View Language */}
<InputWithTitle title={i18next.t("settings_kv_default_view_language")}>
<Select
selectRef={this.viewSyntaxSelectRef}
onChange={() => {
this.props.settings.kvViewDefaultLanguage = this.viewSyntaxSelectRef.current.value;
settingsSavedNotification();
}}
>
{SupportedLanguages.map((lang) => {
return (
<SelectOption
name={lang.readable}
value={lang.name}
selected={this.props.settings.kvViewDefaultLanguage == lang.name}
/>
);
})}
</Select>
</InputWithTitle>
{/* KV View Indent */}
<InputWithTitle title={i18next.t("settings_kv_view_indent")}>
<NumberInput
inputRef={this.viewIndentInputRef}
value={String(this.props.settings.kvViewIndent).toString()}
onChange={() => {
const value = this.viewIndentInputRef.current.value;
const indent = parseInt(value);
this.props.settings.kvViewIndent = indent;
settingsSavedNotification();
}}
/>
</InputWithTitle>
</div>
);
}
}

View file

@ -1,143 +0,0 @@
import { Checkbox } from "../../elements/forms/Checkbox";
import { Component, createRef } from "preact";
import { DefaultPageProps } from "../../../types/DefaultPageProps";
import { InputWithTitle } from "../../elements/InputWithTitle";
import { NumberInput } from "../../elements/forms/NumberInput";
import { Select, SelectOption } from "../../elements/forms/Select";
import { SupportedLanguages } from "../../../utils/dataInterchange";
import { TextInput } from "../../elements/forms/TextInput";
import { settingsSavedNotification } from "./Settings";
import i18next from "i18next";
export class KeyValueViewSettings extends Component<DefaultPageProps> {
viewSyntaxSelectRef = createRef<HTMLSelectElement>();
viewIndentInputRef = createRef<HTMLInputElement>();
render() {
return (
<div>
{/* KV View Language */}
<InputWithTitle title={i18next.t("settings_kv_default_view_language")}>
<Select
selectRef={this.viewSyntaxSelectRef}
onChange={() => {
this.props.settings.kvViewDefaultLanguage = this.viewSyntaxSelectRef.current.value;
settingsSavedNotification();
}}
>
{SupportedLanguages.map((lang) => {
return (
<SelectOption
name={lang.readable}
value={lang.name}
selected={this.props.settings.kvViewDefaultLanguage == lang.name}
/>
);
})}
</Select>
</InputWithTitle>
{/* KV View Indent */}
<InputWithTitle title={i18next.t("settings_kv_view_indent")}>
<NumberInput
inputRef={this.viewIndentInputRef}
value={String(this.props.settings.kvViewIndent).toString()}
onChange={() => {
const value = this.viewIndentInputRef.current.value;
const indent = parseInt(value);
this.props.settings.kvViewIndent = indent;
settingsSavedNotification();
}}
/>
</InputWithTitle>
</div>
);
}
}
export class KeyValueEditorSettings extends Component<DefaultPageProps> {
editorSyntaxSelectRef = createRef<HTMLSelectElement>();
editorIndentInputRef = createRef<HTMLInputElement>();
render() {
return (
<div>
{/* KV Editor Language */}
<InputWithTitle title={i18next.t("settings_kv_default_editor_language")}>
<Select
selectRef={this.editorSyntaxSelectRef}
onChange={() => {
this.props.settings.kvEditorDefaultLanguage =
this.editorSyntaxSelectRef.current.value;
settingsSavedNotification();
}}
>
{SupportedLanguages.map((lang) => {
return (
<SelectOption
name={lang.readable}
value={lang.name}
selected={this.props.settings.kvEditorDefaultLanguage == lang.name}
/>
);
})}
</Select>
</InputWithTitle>
{/* KV Editor Indent */}
<InputWithTitle title={i18next.t("settings_kv_editor_indent")}>
<NumberInput
inputRef={this.editorIndentInputRef}
value={String(this.props.settings.kvEditorIndent).toString()}
onChange={() => {
const value = this.editorIndentInputRef.current.value;
const indent = parseInt(value);
this.props.settings.kvEditorIndent = indent;
settingsSavedNotification();
}}
/>
</InputWithTitle>
</div>
);
}
}
export class KeyValueSettings extends Component<DefaultPageProps> {
codeModeToggleRef = createRef<HTMLInputElement>();
hideKeysRef = createRef<HTMLInputElement>();
render() {
return (
<div>
<h4>{i18next.t("settings_kv_title")}</h4>
<KeyValueViewSettings {...this.props} />
<KeyValueEditorSettings {...this.props} />
{/* Always view in code mode */}
<InputWithTitle title={i18next.t("settings_kv_always_view_in_code_mode")}>
<Checkbox
checkboxRef={this.codeModeToggleRef}
checked={this.props.settings.kvAlwaysCodeView}
onChange={() => {
const value = this.codeModeToggleRef.current.checked;
this.props.settings.kvAlwaysCodeView = value;
settingsSavedNotification();
}}
/>
</InputWithTitle>
{/* hide values on keys */}
<InputWithTitle title={i18next.t("settings_kv_hide_values")}>
<TextInput
inputRef={this.hideKeysRef}
value={this.props.settings.kvHideKeyValues.join(",")}
onChange={() => {
const value = this.hideKeysRef.current.value;
this.props.settings.kvHideKeyValues = value;
settingsSavedNotification();
}}
/>
</InputWithTitle>
</div>
);
}
}

View file

@ -1,8 +1,8 @@
import { Component } from "preact";
import { DefaultPageProps } from "../../../types/DefaultPageProps";
import { GeneralSettings } from "./GeneralSettings";
import { GeneralSettings } from "./General/GeneralSettings";
import { Grid, GridSizes } from "../../elements/Grid";
import { KeyValueSettings } from "./KeyValueSettings";
import { KeyValueSettings } from "./KeyValue/KeyValueSettings";
import { PageTitle } from "../../elements/PageTitle";
import UIkit from "uikit";
import i18next from "i18next";
@ -23,6 +23,7 @@ export class Settings extends Component<DefaultPageProps> {
<GeneralSettings {...this.props} />
<KeyValueSettings {...this.props} />
</Grid>
<div></div>
</>
);
}

View file

@ -25,15 +25,21 @@ export function kvDeleteURL(
secret: string,
version = "null",
): string {
return kvRemoveEndSlash(`/secrets/kv/delete/${secret}/${version}/${baseMount}/${kvJoinSecretPath(secretPath)}`);
return kvRemoveEndSlash(
`/secrets/kv/delete/${secret}/${version}/${baseMount}/${kvJoinSecretPath(secretPath)}`,
);
}
export function kvEditURL(baseMount: string, secretPath: string[], secret: string): string {
return kvRemoveEndSlash(`/secrets/kv/edit/${secret}/${baseMount}/${kvJoinSecretPath(secretPath)}`);
return kvRemoveEndSlash(
`/secrets/kv/edit/${secret}/${baseMount}/${kvJoinSecretPath(secretPath)}`,
);
}
export function kvVersionsURL(baseMount: string, secretPath: string[], secret: string): string {
return kvRemoveEndSlash(`/secrets/kv/versions/${secret}/${baseMount}/${kvJoinSecretPath(secretPath)}`);
return kvRemoveEndSlash(
`/secrets/kv/versions/${secret}/${baseMount}/${kvJoinSecretPath(secretPath)}`,
);
}
export function kvViewURL(
@ -42,7 +48,9 @@ export function kvViewURL(
secret: string,
version = "null",
): string {
return kvRemoveEndSlash(`/secrets/kv/view/${secret}/${version}/${baseMount}/${kvJoinSecretPath(secretPath)}`);
return kvRemoveEndSlash(
`/secrets/kv/view/${secret}/${version}/${baseMount}/${kvJoinSecretPath(secretPath)}`,
);
}
export function kvListURL(baseMount: string, secretPath: string[]): string {