diff --git a/src/translations/en.js b/src/translations/en.js index fc2886e..07b47ed 100644 --- a/src/translations/en.js +++ b/src/translations/en.js @@ -70,6 +70,7 @@ module.exports = { // Settings Page settings_title: "Settings", + settings_saved_notification: "Saved", // General Settings settings_general_title: "General", diff --git a/src/ui/pages/Settings/GeneralSettings.tsx b/src/ui/pages/Settings/GeneralSettings.tsx index c8573e0..58d765b 100644 --- a/src/ui/pages/Settings/GeneralSettings.tsx +++ b/src/ui/pages/Settings/GeneralSettings.tsx @@ -4,6 +4,7 @@ import { InputWithTitle } from "../../elements/InputWithTitle"; import i18next from "i18next"; // @ts-ignore +import { settingsSavedNotification } from "./Settings"; import translations from "../../../translations/index.mjs"; const Themes = [ @@ -29,6 +30,7 @@ export class GeneralSettings extends Component { onChange={() => { const newTheme = this.themeSelectRef.current.value; this.props.settings.theme = newTheme; + settingsSavedNotification(); }} > {Themes.map((theme) => { @@ -51,6 +53,7 @@ export class GeneralSettings extends Component { onChange={() => { // TODO: check for api health to see if is valid api url. this.props.settings.apiURL = this.vaultURLInputRef.current.value; + settingsSavedNotification(); }} /> @@ -66,6 +69,7 @@ export class GeneralSettings extends Component { const t = await i18next.changeLanguage(language); this.props.settings.pageDirection = t("language_direction"); window.location.reload(); + settingsSavedNotification(); }} > {Object.getOwnPropertyNames(translations).map((languageID) => ( @@ -83,6 +87,7 @@ export class GeneralSettings extends Component { onChange={() => { this.props.settings.pageDirection = this.pageDirectionRef.current.value; document.documentElement.dir = this.props.settings.pageDirection; + settingsSavedNotification(); }} > {[ diff --git a/src/ui/pages/Settings/KeyValueEditorSettings.tsx b/src/ui/pages/Settings/KeyValueEditorSettings.tsx index 3d65e70..8dde414 100644 --- a/src/ui/pages/Settings/KeyValueEditorSettings.tsx +++ b/src/ui/pages/Settings/KeyValueEditorSettings.tsx @@ -2,6 +2,7 @@ import { Component, createRef } from "preact"; import { DefaultPageProps } from "../../../types/DefaultPageProps"; import { InputWithTitle } from "../../elements/InputWithTitle"; import { SupportedEditorLanguages } from "../Secrets/KeyValue/KeyValueEdit"; +import { settingsSavedNotification } from "./Settings"; import i18next from "i18next"; export class KeyValueEditorSettings extends Component { @@ -19,6 +20,7 @@ export class KeyValueEditorSettings extends Component { class="uk-select uk-form-width-medium" onChange={() => { this.props.settings.kvEditorDefaultLanguage = this.syntaxSelectRef.current.value; + settingsSavedNotification(); }} > {SupportedEditorLanguages.map((lang) => { @@ -42,6 +44,7 @@ export class KeyValueEditorSettings extends Component { const value = this.indentInputRef.current.value; const indent = parseInt(value); this.props.settings.kvEditorIndent = indent; + settingsSavedNotification(); }} /> diff --git a/src/ui/pages/Settings/Settings.tsx b/src/ui/pages/Settings/Settings.tsx index f04e62d..b3146fb 100644 --- a/src/ui/pages/Settings/Settings.tsx +++ b/src/ui/pages/Settings/Settings.tsx @@ -4,8 +4,16 @@ import { GeneralSettings } from "./GeneralSettings"; import { Grid, GridSizes } from "../../elements/Grid"; import { KeyValueEditorSettings } from "./KeyValueEditorSettings"; import { PageTitle } from "../../elements/PageTitle"; +import UIkit from "uikit"; import i18next from "i18next"; +export function settingsSavedNotification() { + UIkit.notification(i18next.t("settings_saved_notification"), { + status: "success", + timeout: 1000, + }); +} + export class Settings extends Component { render() { return (