merged with new master

1 files changed, 230 insertions, 190 deletions

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 8594a1c92..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,16 +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))} />
-                        <Toggle toggleType={ToggleType.SWITCH} formLabel="Disable Info UI" color={SettingsManager.userColor} toggleStatus={BoolCast(Doc.IsInfoUIDisabled)} onClick={action(() => (Doc.IsInfoUIDisabled = !Doc.IsInfoUIDisabled))} />
                     </div>
                 </div>
             </div>
@@ -506,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}
@@ -515,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>
                             );
@@ -525,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>
                     ))}
@@ -546,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) }}
             />
         );