more lint cleanup

1 files changed, 187 insertions, 136 deletions

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index f983c29b7..8347844f7 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -1,3 +1,5 @@
+/* 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, reaction, runInAction } from 'mobx';
@@ -17,8 +19,8 @@ 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 } from './SnappingManager';
+import { undoable } from './UndoManager';
 
 export enum ColorScheme {
     Dark = 'Dark',
@@ -38,24 +40,104 @@ 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 _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';
+    @observable private _activeTab = 'Accounts';
+    @observable private _isOpen = false;
 
     @observable public propertiesWidth: number = 0;
 
+    private googleAuthorize = action(() => GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true));
+
+    public closeMgr = action(() => {
+        this._isOpen = false;
+    });
+    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);
@@ -73,26 +155,9 @@ export class SettingsManager extends React.Component<{}> {
         );
         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!'));
-        }
-    };
+    public get LastPressedBtn() { return this._lastPressedSidebarBtn; } // prettier-ignore
+    public set LastPressedBtn(state:Doc|undefined) { this._lastPressedSidebarBtn = state; } // prettier-ignore
 
     @computed public static get userColor() {
         return StrCast(Doc.UserDoc().userColor);
@@ -106,60 +171,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 ClientUtils.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);
@@ -227,7 +238,9 @@ export class SettingsManager extends React.Component<{}> {
                     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}
@@ -236,8 +249,10 @@ export class SettingsManager extends React.Component<{}> {
                     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'])}
+                    onClick={() => {
+                        Doc.UserDoc().documentLinksButton_fullMenu = !Doc.UserDoc().documentLinksButton_fullMenu;
+                    }}
+                    toggleStatus={BoolCast(Doc.UserDoc().documentLinksButton_fullMenu)}
                     size={Size.XSMALL}
                     color={SettingsManager.userColor}
                 />
@@ -245,7 +260,9 @@ export class SettingsManager extends React.Component<{}> {
                     formLabel="Show Button Labels"
                     formLabelPlacement="right"
                     toggleType={ToggleType.SWITCH}
-                    onClick={e => (FontIconBox.ShowIconLabels = !FontIconBox.ShowIconLabels)}
+                    onClick={() => {
+                        FontIconBox.ShowIconLabels = !FontIconBox.ShowIconLabels;
+                    }}
                     toggleStatus={FontIconBox.ShowIconLabels}
                     size={Size.XSMALL}
                     color={SettingsManager.userColor}
@@ -254,7 +271,9 @@ export class SettingsManager extends React.Component<{}> {
                     formLabel="Recognize Ink Gestures"
                     formLabelPlacement="right"
                     toggleType={ToggleType.SWITCH}
-                    onClick={e => (GestureOverlay.RecognizeGestures = !GestureOverlay.RecognizeGestures)}
+                    onClick={() => {
+                        GestureOverlay.RecognizeGestures = !GestureOverlay.RecognizeGestures;
+                    }}
                     toggleStatus={GestureOverlay.RecognizeGestures}
                     size={Size.XSMALL}
                     color={SettingsManager.userColor}
@@ -263,7 +282,9 @@ export class SettingsManager extends React.Component<{}> {
                     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}
@@ -272,7 +293,9 @@ export class SettingsManager extends React.Component<{}> {
                     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}
@@ -281,7 +304,9 @@ export class SettingsManager extends React.Component<{}> {
                     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}
@@ -296,7 +321,9 @@ export class SettingsManager extends React.Component<{}> {
                         step={2}
                         type={Type.TERT}
                         unit="px"
-                        setNumber={val => console.log('GOT: ' + (Doc.UserDoc().headerHeight = val))}
+                        setNumber={val => {
+                            Doc.UserDoc().headerHeight = val;
+                        }}
                     />
                 </Group>
             </div>
@@ -320,7 +347,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">
@@ -338,19 +364,19 @@ export class SettingsManager extends React.Component<{}> {
                                 type={Type.PRIM}
                                 number={NumCast(Doc.UserDoc().fontSize, Number(StrCast(Doc.UserDoc().fontSize).replace('px', '')))}
                                 unit="px"
-                                setNumber={val => (Doc.UserDoc().fontSize = val + '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)}
@@ -367,28 +393,13 @@ 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>}
+                {!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>
@@ -418,10 +429,6 @@ export class SettingsManager extends React.Component<{}> {
         );
     }
 
-    setFreeformScrollMode = (mode: string) => {
-        Doc.UserDoc().freeformScrollMode = mode;
-    };
-
     @computed get modesContent() {
         return (
             <div className="tab-content modes-content">
@@ -430,7 +437,7 @@ export class SettingsManager extends React.Component<{}> {
                     <div className="tab-column-content">
                         <Dropdown
                             formLabel="Mode"
-                            closeOnSelect={true}
+                            closeOnSelect
                             items={[
                                 {
                                     text: 'Novice',
@@ -454,7 +461,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
@@ -462,7 +469,7 @@ export class SettingsManager extends React.Component<{}> {
                     <div className="tab-column-content">
                         <Dropdown
                             formLabel="Scroll Mode"
-                            closeOnSelect={true}
+                            closeOnSelect
                             items={[
                                 {
                                     text: 'Scroll to Pan',
@@ -493,10 +500,28 @@ export class SettingsManager extends React.Component<{}> {
                             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>
@@ -518,7 +543,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}
@@ -527,7 +552,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>
                             );
@@ -544,12 +571,12 @@ export class SettingsManager extends React.Component<{}> {
                 </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>
                     ))}
@@ -558,13 +585,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) }}
             />
         );