aboutsummaryrefslogtreecommitdiff
path: root/src/client/util/SettingsManager.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util/SettingsManager.tsx')
-rw-r--r--src/client/util/SettingsManager.tsx419
1 files changed, 230 insertions, 189 deletions
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 682704770..d3c10f9f4 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -1,23 +1,24 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Button, ColorPicker, Dropdown, DropdownType, EditableText, Group, NumberDropdown, Size, Toggle, ToggleType, Type } from 'browndash-components';
-import { action, computed, makeObservable, observable, runInAction } from 'mobx';
+import { action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { BsGoogle } from 'react-icons/bs';
import { FaFillDrip, FaPalette } from 'react-icons/fa';
-import { Utils, addStyleSheet, addStyleSheetRule } from '../../Utils';
-import { Doc, Opt } from '../../fields/Doc';
+import { ClientUtils, addStyleSheet, addStyleSheetRule } from '../../ClientUtils';
+import { Doc } from '../../fields/Doc';
import { DashVersion } from '../../fields/DocSymbols';
import { BoolCast, Cast, NumCast, StrCast } from '../../fields/Types';
import { DocServer } from '../DocServer';
import { Networking } from '../Network';
import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
-import { GestureOverlay } from '../views/GestureOverlay';
import { MainViewModal } from '../views/MainViewModal';
-import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox';
import { GroupManager } from './GroupManager';
import './SettingsManager.scss';
-import { undoBatch } from './UndoManager';
+import { SnappingManager, freeformScrollMode } from './SnappingManager';
+import { undoable } from './UndoManager';
export enum ColorScheme {
Dark = 'Dark',
@@ -27,60 +28,124 @@ export enum ColorScheme {
Cupcake = 'Cupcake',
}
-export enum freeformScrollMode {
- Pan = 'pan',
- Zoom = 'zoom',
-}
-
@observer
export class SettingsManager extends React.Component<{}> {
+ // eslint-disable-next-line no-use-before-define
public static Instance: SettingsManager;
static _settingsStyle = addStyleSheet();
- @observable public isOpen = false;
- @observable private passwordResultText = '';
- @observable private playgroundMode = false;
+ @observable private _passwordResultText = '';
+ @observable private _playgroundMode = false;
+
+ @observable private _curr_password = '';
+ @observable private _new_password = '';
+ @observable private _new_confirm = '';
+ @observable private _activeTab = 'Accounts';
+ @observable private _isOpen = false;
- @observable private curr_password = '';
- @observable private new_password = '';
- @observable private new_confirm = '';
- @observable private _lastPressedSidebarBtn: Opt<Doc> = undefined; // bcz: this is a hack to handle highlighting buttons in the leftpanel menu .. need to find a cleaner approach
- @observable activeTab = 'Accounts';
+ private googleAuthorize = action(() => GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true));
- @observable public propertiesWidth: number = 0;
+ public closeMgr = action(() => {
+ this._isOpen = false;
+ });
+ // eslint-disable-next-line react/no-unused-class-component-methods
+ public openMgr = action(() => {
+ this._isOpen = true;
+ });
+
+ private matchSystem = undoable(() => {
+ if (Doc.UserDoc().userThemeSystem) {
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) this.changeColorScheme(ColorScheme.Dark);
+ if (window.matchMedia('(prefers-color-scheme: light)').matches) this.changeColorScheme(ColorScheme.Light);
+ }
+ }, 'match system theme');
+ private setFreeformScrollMode = undoable((mode: string) => {
+ Doc.UserDoc().freeformScrollMode = mode;
+ }, 'set scroll mode');
+ private selectUserMode = undoable((mode: string) => {
+ Doc.noviceMode = mode === 'Novice';
+ }, 'change user mode');
+ private changeFontFamily = undoable((font: string) => {
+ Doc.UserDoc().fontFamily = font;
+ }, 'change font family');
+ private switchUserBackgroundColor = undoable((color: string) => {
+ Doc.UserDoc().userBackgroundColor = color;
+ addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: `${color} !important` });
+ }, 'change background color');
+ private switchUserColor = undoable((color: string) => {
+ Doc.UserDoc().userColor = color;
+ }, 'change user color');
+ switchUserVariantColor = undoable((color: string) => {
+ Doc.UserDoc().userVariantColor = color;
+ }, 'change variant color');
+ userThemeSystemToggle = undoable(() => {
+ Doc.UserDoc().userThemeSystem = !Doc.UserDoc().userThemeSystem;
+ this.matchSystem();
+ }, 'change theme color');
+ playgroundModeToggle = undoable(
+ action(() => {
+ this._playgroundMode = !this._playgroundMode;
+ if (this._playgroundMode) {
+ DocServer.Control.makeReadOnly();
+ addStyleSheetRule(SettingsManager._settingsStyle, 'topbar-inner-container', { background: 'red !important' });
+ } else ClientUtils.CurrentUserEmail() !== 'guest' && DocServer.Control.makeEditable();
+ }),
+ 'set playgorund mode'
+ );
+ changeColorScheme = undoable(
+ action((scheme: string) => {
+ Doc.UserDoc().userTheme = scheme;
+ switch (scheme) {
+ case ColorScheme.Light:
+ this.switchUserColor('#323232');
+ this.switchUserBackgroundColor('#DFDFDF');
+ this.switchUserVariantColor('#BDDDF5');
+ break;
+ case ColorScheme.Dark:
+ this.switchUserColor('#DFDFDF');
+ this.switchUserBackgroundColor('#323232');
+ this.switchUserVariantColor('#4476F7');
+ break;
+ case ColorScheme.CoolBlue:
+ this.switchUserColor('#ADEAFF');
+ this.switchUserBackgroundColor('#060A15');
+ this.switchUserVariantColor('#3C51FF');
+ break;
+ case ColorScheme.Cupcake:
+ this.switchUserColor('#3BC7FF');
+ this.switchUserBackgroundColor('#fffdf7');
+ this.switchUserVariantColor('#FFD7F3');
+ break;
+ case ColorScheme.Custom:
+ break;
+ default:
+ }
+ }),
+ 'change color scheme'
+ );
constructor(props: {}) {
super(props);
makeObservable(this);
SettingsManager.Instance = this;
this.matchSystem();
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if (Doc.UserDoc().userThemeSystem) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) this.changeColorScheme(ColorScheme.Dark);
if (window.matchMedia('(prefers-color-scheme: light)').matches) this.changeColorScheme(ColorScheme.Light);
}
// undefined means ColorScheme.Light until all CSS is updated with values for each color scheme (e.g., see MainView.scss, DocumentDecorations.scss)
});
+ reaction(
+ () => [SettingsManager.userBackgroundColor, SettingsManager.userColor, SettingsManager.userVariantColor],
+ ([back, user, variant]) => {
+ SnappingManager.userBackgroundColor = back;
+ SnappingManager.userVariantColor = variant;
+ SnappingManager.userColor = user;
+ },
+ { fireImmediately: true }
+ );
+ SnappingManager.SettingsStyle = SettingsManager._settingsStyle;
}
- matchSystem = () => {
- if (Doc.UserDoc().userThemeSystem) {
- if (window.matchMedia('(prefers-color-scheme: dark)').matches) this.changeColorScheme(ColorScheme.Dark);
- if (window.matchMedia('(prefers-color-scheme: light)').matches) this.changeColorScheme(ColorScheme.Light);
- }
- };
-
- public close = action(() => (this.isOpen = false));
- public open = action(() => (this.isOpen = true));
-
- private googleAuthorize = action(() => GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true));
- private changePassword = async () => {
- if (!(this.curr_password && this.new_password && this.new_confirm)) {
- runInAction(() => (this.passwordResultText = "Error: Hey, we're missing some fields!"));
- } else {
- const passwordBundle = { curr_pass: this.curr_password, new_pass: this.new_password, new_confirm: this.new_confirm };
- const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
- runInAction(() => (this.passwordResultText = error ? 'Error: ' + error[0].msg + '...' : 'Password successfully updated!'));
- }
- };
@computed public static get userColor() {
return StrCast(Doc.UserDoc().userColor);
@@ -94,60 +159,6 @@ export class SettingsManager extends React.Component<{}> {
return StrCast(Doc.UserDoc().userBackgroundColor);
}
- public get LastPressedBtn() { return this._lastPressedSidebarBtn; } // prettier-ignore
- public SetLastPressedBtn = (state?:Doc) => runInAction(() => (this._lastPressedSidebarBtn = state)); // prettier-ignore
-
- @undoBatch selectUserMode = action((mode: string) => (Doc.noviceMode = mode === 'Novice'));
- @undoBatch changelayout_showTitle = action((e: React.ChangeEvent) => (Doc.UserDoc().layout_showTitle = (e.currentTarget as any).value ? 'title' : undefined));
- @undoBatch changeFontFamily = action((font: string) => (Doc.UserDoc().fontFamily = font));
- @undoBatch changeFontSize = action((val: number) => (Doc.UserDoc().fontSize = val));
- @undoBatch switchUserBackgroundColor = action((color: string) => {
- Doc.UserDoc().userBackgroundColor = color;
- addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: `${color} !important` });
- });
- @undoBatch switchUserColor = action((color: string) => (Doc.UserDoc().userColor = color));
- @undoBatch switchUserVariantColor = action((color: string) => (Doc.UserDoc().userVariantColor = color));
- @undoBatch userThemeSystemToggle = action(() => {
- Doc.UserDoc().userThemeSystem = !Doc.UserDoc().userThemeSystem;
- this.matchSystem();
- });
- @undoBatch playgroundModeToggle = action(() => {
- this.playgroundMode = !this.playgroundMode;
- if (this.playgroundMode) {
- DocServer.Control.makeReadOnly();
- addStyleSheetRule(SettingsManager._settingsStyle, 'topbar-inner-container', { background: 'red !important' });
- } else Doc.CurrentUserEmail !== 'guest' && DocServer.Control.makeEditable();
- });
-
- @undoBatch
- changeColorScheme = action((scheme: string) => {
- Doc.UserDoc().userTheme = scheme;
- switch (scheme) {
- case ColorScheme.Light:
- this.switchUserColor('#323232');
- this.switchUserBackgroundColor('#DFDFDF');
- this.switchUserVariantColor('#BDDDF5');
- break;
- case ColorScheme.Dark:
- this.switchUserColor('#DFDFDF');
- this.switchUserBackgroundColor('#323232');
- this.switchUserVariantColor('#4476F7');
- break;
- case ColorScheme.CoolBlue:
- this.switchUserColor('#ADEAFF');
- this.switchUserBackgroundColor('#060A15');
- this.switchUserVariantColor('#3C51FF');
- break;
- case ColorScheme.Cupcake:
- this.switchUserColor('#3BC7FF');
- this.switchUserBackgroundColor('#fffdf7');
- this.switchUserVariantColor('#FFD7F3');
- break;
- case ColorScheme.Custom:
- break;
- }
- });
-
@computed get colorsContent() {
const schemeMap = Array.from(Object.keys(ColorScheme));
const userTheme = StrCast(Doc.UserDoc().userTheme);
@@ -176,7 +187,7 @@ export class SettingsManager extends React.Component<{}> {
{userTheme === ColorScheme.Custom && (
<Group formLabel="Custom Theme">
<ColorPicker
- tooltip={'User Color'} //
+ tooltip="User Color" //
color={SettingsManager.userColor}
type={Type.SEC}
icon={<FaFillDrip />}
@@ -185,7 +196,7 @@ export class SettingsManager extends React.Component<{}> {
setFinalColor={this.switchUserColor}
/>
<ColorPicker
- tooltip={'User Background Color'}
+ tooltip="User Background Color"
color={SettingsManager.userColor}
type={Type.SEC}
icon={<FaPalette />}
@@ -194,7 +205,7 @@ export class SettingsManager extends React.Component<{}> {
setFinalColor={this.switchUserBackgroundColor}
/>
<ColorPicker
- tooltip={'User Variant Color'}
+ tooltip="User Variant Color"
color={SettingsManager.userColor}
type={Type.SEC}
icon={<FaPalette />}
@@ -212,79 +223,84 @@ export class SettingsManager extends React.Component<{}> {
return (
<div className="prefs-content">
<Toggle
- formLabel={'Show document header'}
- formLabelPlacement={'right'}
+ formLabel="Show document header"
+ formLabelPlacement="right"
toggleType={ToggleType.SWITCH}
- onClick={e => (Doc.UserDoc().layout_showTitle = Doc.UserDoc().layout_showTitle ? undefined : 'author_date')}
+ onClick={() => {
+ Doc.UserDoc().layout_showTitle = Doc.UserDoc().layout_showTitle ? undefined : 'author_date';
+ }}
toggleStatus={Doc.UserDoc().layout_showTitle !== undefined}
size={Size.XSMALL}
color={SettingsManager.userColor}
/>
<Toggle
- formLabel={'Show Full Toolbar'}
- formLabelPlacement={'right'}
- toggleType={ToggleType.SWITCH}
- onClick={e => (Doc.UserDoc()['documentLinksButton-fullMenu'] = !Doc.UserDoc()['documentLinksButton-fullMenu'])}
- toggleStatus={BoolCast(Doc.UserDoc()['documentLinksButton-fullMenu'])}
- size={Size.XSMALL}
- color={SettingsManager.userColor}
- />
- <Toggle
- formLabel={'Show Button Labels'}
- formLabelPlacement={'right'}
+ formLabel="Show Full Toolbar"
+ formLabelPlacement="right"
toggleType={ToggleType.SWITCH}
- onClick={e => (FontIconBox.ShowIconLabels = !FontIconBox.ShowIconLabels)}
- toggleStatus={FontIconBox.ShowIconLabels}
+ onClick={() => {
+ Doc.UserDoc().documentLinksButton_fullMenu = !Doc.UserDoc().documentLinksButton_fullMenu;
+ }}
+ toggleStatus={BoolCast(Doc.UserDoc().documentLinksButton_fullMenu)}
size={Size.XSMALL}
color={SettingsManager.userColor}
/>
<Toggle
- formLabel={'Recognize Ink Gestures'}
- formLabelPlacement={'right'}
+ formLabel="Recognize Ink Gestures"
+ formLabelPlacement="right"
toggleType={ToggleType.SWITCH}
- onClick={e => (GestureOverlay.RecognizeGestures = !GestureOverlay.RecognizeGestures)}
- toggleStatus={GestureOverlay.RecognizeGestures}
+ onClick={() => {
+ Doc.UserDoc().recognizeGestures = !Doc.UserDoc().recognizeGestures;
+ }}
+ toggleStatus={BoolCast(Doc.UserDoc().recognizeGestures)}
size={Size.XSMALL}
color={SettingsManager.userColor}
/>
<Toggle
- formLabel={'Hide Labels In Ink Shapes'}
- formLabelPlacement={'right'}
+ formLabel="Hide Labels In Ink Shapes"
+ formLabelPlacement="right"
toggleType={ToggleType.SWITCH}
- onClick={e => (Doc.UserDoc().activeInkHideTextLabels = !Doc.UserDoc().activeInkHideTextLabels)}
+ onClick={() => {
+ Doc.UserDoc().activeInkHideTextLabels = !Doc.UserDoc().activeInkHideTextLabels;
+ }}
toggleStatus={BoolCast(Doc.UserDoc().activeInkHideTextLabels)}
size={Size.XSMALL}
color={SettingsManager.userColor}
/>
<Toggle
- formLabel={'Open Ink Docs in Lightbox'}
- formLabelPlacement={'right'}
+ formLabel="Open Ink Docs in Lightbox"
+ formLabelPlacement="right"
toggleType={ToggleType.SWITCH}
- onClick={e => (Doc.UserDoc().openInkInLightbox = !Doc.UserDoc().openInkInLightbox)}
+ onClick={() => {
+ Doc.UserDoc().openInkInLightbox = !Doc.UserDoc().openInkInLightbox;
+ }}
toggleStatus={BoolCast(Doc.UserDoc().openInkInLightbox)}
size={Size.XSMALL}
color={SettingsManager.userColor}
/>
- <Toggle
- formLabel={'Show Link Lines'}
- formLabelPlacement={'right'}
+ {/* <Toggle
+ formLabel="Show Link Lines"
+ formLabelPlacement="right"
toggleType={ToggleType.SWITCH}
- onClick={e => (Doc.UserDoc().showLinkLines = !Doc.UserDoc().showLinkLines)}
+ onClick={() => {
+ Doc.UserDoc().showLinkLines = !Doc.UserDoc().showLinkLines;
+ }}
toggleStatus={BoolCast(Doc.UserDoc().showLinkLines)}
size={Size.XSMALL}
color={SettingsManager.userColor}
- />
+ /> */}
<Group formLabel="Title Height">
<NumberDropdown
number={NumCast(Doc.UserDoc().headerHeight, 30)}
color={SettingsManager.userColor}
- numberDropdownType={'slider'}
+ numberDropdownType="slider"
min={6}
max={60}
step={2}
type={Type.TERT}
- unit={'px'}
- setNumber={val => console.log('GOT: ' + (Doc.UserDoc().headerHeight = val))}
+ unit="px"
+ setNumber={val => {
+ Doc.UserDoc().headerHeight = val;
+ }}
/>
</Group>
</div>
@@ -308,7 +324,6 @@ export class SettingsManager extends React.Component<{}> {
@computed get textContent() {
const fontFamilies = ['Times New Roman', 'Arial', 'Georgia', 'Comic Sans MS', 'Tahoma', 'Impact', 'Crimson Text', 'Roboto'];
- const fontSizes = ['7px', '8px', '9px', '10px', '12px', '14px', '16px', '18px', '20px', '24px', '32px', '48px', '72px'];
return (
<div className="tab-content appearances-content">
@@ -316,7 +331,7 @@ export class SettingsManager extends React.Component<{}> {
<div className="tab-column-title">Text</div>
<div className="tab-column-content">
{/* <NumberInput/> */}
- <Group formLabel={'Default Font'}>
+ <Group formLabel="Default Font">
<NumberDropdown
color={SettingsManager.userColor}
numberDropdownType="slider"
@@ -325,20 +340,20 @@ export class SettingsManager extends React.Component<{}> {
step={2}
type={Type.PRIM}
number={NumCast(Doc.UserDoc().fontSize, Number(StrCast(Doc.UserDoc().fontSize).replace('px', '')))}
- unit={'px'}
- setNumber={val => (Doc.UserDoc().fontSize = val + 'px')}
+ unit="px"
+ setNumber={val => {
+ Doc.UserDoc().fontSize = val + 'px';
+ }}
/>
<Dropdown
- items={fontFamilies.map(val => {
- return {
- text: val,
- val: val,
- style: {
- fontFamily: val,
- },
- };
- })}
- closeOnSelect={true}
+ items={fontFamilies.map(val => ({
+ text: val,
+ val: val,
+ style: {
+ fontFamily: val,
+ },
+ }))}
+ closeOnSelect
dropdownType={DropdownType.SELECT}
type={Type.TERT}
selectedVal={StrCast(Doc.UserDoc().fontFamily)}
@@ -355,30 +370,15 @@ export class SettingsManager extends React.Component<{}> {
);
}
- @action
- changeVal = (value: string, pass: string) => {
- switch (pass) {
- case 'curr':
- this.curr_password = value;
- break;
- case 'new':
- this.new_password = value;
- break;
- case 'conf':
- this.new_confirm = value;
- break;
- }
- };
-
@computed get passwordContent() {
return (
<div className="password-content">
- <EditableText placeholder="Current password" type={Type.SEC} color={SettingsManager.userColor} val={''} setVal={val => this.changeVal(val as string, 'curr')} fillWidth password />
- <EditableText placeholder="New password" type={Type.SEC} color={SettingsManager.userColor} val={''} setVal={val => this.changeVal(val as string, 'new')} fillWidth password />
- <EditableText placeholder="Confirm new password" type={Type.SEC} color={SettingsManager.userColor} val={''} setVal={val => this.changeVal(val as string, 'conf')} fillWidth password />
- {!this.passwordResultText ? null : <div className={`${this.passwordResultText.startsWith('Error') ? 'error' : 'success'}-text`}>{this.passwordResultText}</div>}
- <Button type={Type.SEC} text={'Forgot Password'} color={SettingsManager.userColor} />
- <Button type={Type.TERT} text={'Submit'} onClick={this.changePassword} color={SettingsManager.userColor} />
+ <EditableText placeholder="Current password" type={Type.SEC} color={SettingsManager.userColor} val="" setVal={val => this.changeVal(val as string, 'curr')} fillWidth password />
+ <EditableText placeholder="New password" type={Type.SEC} color={SettingsManager.userColor} val="" setVal={val => this.changeVal(val as string, 'new')} fillWidth password />
+ <EditableText placeholder="Confirm new password" type={Type.SEC} color={SettingsManager.userColor} val="" setVal={val => this.changeVal(val as string, 'conf')} fillWidth password />
+ {!this._passwordResultText ? null : <div className={`${this._passwordResultText.startsWith('Error') ? 'error' : 'success'}-text`}>{this._passwordResultText}</div>}
+ <Button type={Type.SEC} text="Forgot Password" color={SettingsManager.userColor} />
+ <Button type={Type.TERT} text="Submit" onClick={this.changePassword} color={SettingsManager.userColor} />
</div>
);
}
@@ -386,7 +386,7 @@ export class SettingsManager extends React.Component<{}> {
@computed get accountOthersContent() {
return (
<div className="account-others-content">
- <Button type={Type.TERT} text={'Connect to Google'} iconPlacement="left" icon={<BsGoogle />} onClick={() => this.googleAuthorize()} />
+ <Button type={Type.TERT} text="Connect to Google" iconPlacement="left" icon={<BsGoogle />} onClick={() => this.googleAuthorize()} />
</div>
);
}
@@ -406,10 +406,6 @@ export class SettingsManager extends React.Component<{}> {
);
}
- setFreeformScrollMode = (mode: string) => {
- Doc.UserDoc().freeformScrollMode = mode;
- };
-
@computed get modesContent() {
return (
<div className="tab-content modes-content">
@@ -417,8 +413,8 @@ export class SettingsManager extends React.Component<{}> {
<div className="tab-column-title">Modes</div>
<div className="tab-column-content">
<Dropdown
- formLabel={'Mode'}
- closeOnSelect={true}
+ formLabel="Mode"
+ closeOnSelect
items={[
{
text: 'Novice',
@@ -442,7 +438,7 @@ export class SettingsManager extends React.Component<{}> {
color={SettingsManager.userColor}
fillWidth
/>
- <Toggle formLabel={'Playground Mode'} toggleType={ToggleType.SWITCH} toggleStatus={this.playgroundMode} onClick={this.playgroundModeToggle} color={SettingsManager.userColor} />
+ <Toggle formLabel="Playground Mode" toggleType={ToggleType.SWITCH} toggleStatus={this._playgroundMode} onClick={this.playgroundModeToggle} color={SettingsManager.userColor} />
</div>
<div className="tab-column-title" style={{ marginTop: 20, marginBottom: 10 }}>
Freeform Navigation
@@ -450,7 +446,7 @@ export class SettingsManager extends React.Component<{}> {
<div className="tab-column-content">
<Dropdown
formLabel="Scroll Mode"
- closeOnSelect={true}
+ closeOnSelect
items={[
{
text: 'Scroll to Pan',
@@ -475,15 +471,34 @@ export class SettingsManager extends React.Component<{}> {
<div className="tab-column">
<div className="tab-column-title">Permissions</div>
<div className="tab-column-content">
- <Button text={'Manage Groups'} type={Type.TERT} onClick={() => GroupManager.Instance?.open()} color={SettingsManager.userColor} />
+ <Button text="Manage Groups" type={Type.TERT} onClick={() => GroupManager.Instance?.open()} color={SettingsManager.userColor} />
<Toggle
toggleType={ToggleType.SWITCH}
- formLabel={'Default access private'}
+ formLabel="Default access private"
color={SettingsManager.userColor}
toggleStatus={BoolCast(Doc.defaultAclPrivate)}
- onClick={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))}
+ onClick={action(() => {
+ Doc.defaultAclPrivate = !Doc.defaultAclPrivate;
+ })}
+ />
+ <Toggle
+ toggleType={ToggleType.SWITCH}
+ formLabel="Enable Sharing UI"
+ color={SettingsManager.userColor}
+ toggleStatus={BoolCast(Doc.IsSharingEnabled)}
+ onClick={action(() => {
+ Doc.IsSharingEnabled = !Doc.IsSharingEnabled;
+ })}
+ />
+ <Toggle
+ toggleType={ToggleType.SWITCH}
+ formLabel="Disable Info UI"
+ color={SettingsManager.userColor}
+ toggleStatus={BoolCast(Doc.IsInfoUIDisabled)}
+ onClick={action(() => {
+ Doc.IsInfoUIDisabled = !Doc.IsInfoUIDisabled;
+ })}
/>
- <Toggle toggleType={ToggleType.SWITCH} formLabel={'Enable Sharing UI'} color={SettingsManager.userColor} toggleStatus={BoolCast(Doc.IsSharingEnabled)} onClick={action(() => (Doc.IsSharingEnabled = !Doc.IsSharingEnabled))} />
</div>
</div>
</div>
@@ -505,7 +520,7 @@ export class SettingsManager extends React.Component<{}> {
<div className="settings-panel" style={{ background: SettingsManager.userColor }}>
<div className="settings-tabs">
{tabs.map(tab => {
- const isActive = this.activeTab === tab.title;
+ const isActive = this._activeTab === tab.title;
return (
<div
key={tab.title}
@@ -514,7 +529,9 @@ export class SettingsManager extends React.Component<{}> {
color: isActive ? SettingsManager.userColor : SettingsManager.userBackgroundColor,
}}
className={'tab-control ' + (isActive ? 'active' : 'inactive')}
- onClick={action(() => (this.activeTab = tab.title))}>
+ onClick={action(() => {
+ this._activeTab = tab.title;
+ })}>
{tab.title}
</div>
);
@@ -524,19 +541,19 @@ export class SettingsManager extends React.Component<{}> {
<div className="settings-user">
<div style={{ color: SettingsManager.userBackgroundColor }}>{DashVersion}</div>
<div className="settings-username" style={{ color: SettingsManager.userBackgroundColor }}>
- {Doc.CurrentUserEmail}
+ {ClientUtils.CurrentUserEmail()}
</div>
- <Button text={Doc.GuestDashboard ? 'Exit' : 'Log Out'} type={Type.TERT} color={SettingsManager.userVariantColor} onClick={() => window.location.assign(Utils.prepend('/logout'))} />
+ <Button text={Doc.GuestDashboard ? 'Exit' : 'Log Out'} type={Type.TERT} color={SettingsManager.userVariantColor} onClick={() => window.location.assign(ClientUtils.prepend('/logout'))} />
</div>
</div>
<div className="close-button">
- <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={this.close} color={SettingsManager.userColor} />
+ <Button icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={this.closeMgr} color={SettingsManager.userColor} />
</div>
<div className="settings-content" style={{ color: SettingsManager.userColor, background: SettingsManager.userBackgroundColor }}>
{tabs.map(tab => (
- <div key={tab.title} className={'tab-section ' + (this.activeTab === tab.title ? 'active' : 'inactive')}>
+ <div key={tab.title} className={'tab-section ' + (this._activeTab === tab.title ? 'active' : 'inactive')}>
{tab.ele}
</div>
))}
@@ -545,13 +562,37 @@ export class SettingsManager extends React.Component<{}> {
);
}
+ private changePassword = async () => {
+ if (!(this._curr_password && this._new_password && this._new_confirm)) {
+ runInAction(() => {
+ this._passwordResultText = "Error: Hey, we're missing some fields!";
+ });
+ } else {
+ const passwordBundle = { curr_pass: this._curr_password, new_pass: this._new_password, new_confirm: this._new_confirm };
+ const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
+ runInAction(() => {
+ this._passwordResultText = error ? 'Error: ' + error[0].msg + '...' : 'Password successfully updated!';
+ });
+ }
+ };
+
+ @action
+ changeVal = (value: string, pass: string) => {
+ switch (pass) {
+ case 'curr': this._curr_password = value; break;
+ case 'new': this._new_password = value; break;
+ case 'conf': this._new_confirm = value; break;
+ default:
+ } // prettier-ignore
+ };
+
render() {
return (
<MainViewModal
contents={this.settingsInterface}
- isDisplayed={this.isOpen}
- interactive={true}
- closeOnExternalClick={this.close}
+ isDisplayed={this._isOpen}
+ interactive
+ closeOnExternalClick={this.closeMgr}
dialogueBoxStyle={{ width: 'fit-content', height: '300px', background: Cast(Doc.UserDoc().userColor, 'string', null) }}
/>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 21:56:20 +0000