2 files changed, 156 insertions, 0 deletions
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
new file mode 100644
index 000000000..cd9d2569a
--- /dev/null
+++ b/src/client/util/SettingsManager.scss
@@ -0,0 +1,73 @@
+@import "../views/globalCssVariables";
+
+.settings-interface {
+    display: flex;
+    flex-direction: column;
+
+    .settings-body {
+        display: flex;
+        flex-direction: row;
+
+        .settings-type {
+            display: flex;
+            flex-direction: column;
+            flex-basis: 30%;
+        }
+
+        .settings-content {
+            padding-left: 1em;
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+
+    .focus-span {
+        text-decoration: underline;
+    }
+p {
+    text-align: left;
+    padding: 0;
+    margin: 0 0 20px 0;
+}
+
+    h1 {
+        color: $dark-color;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 75%;
+    }
+
+    .close-button {
+        position: absolute;
+        right: 1em;
+        top: 1em;
+    }
+
+    .container {
+        display: block;
+        position: relative;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        font-size: 22px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        width: 700px;
+        min-width: 700px;
+        max-width: 700px;
+        text-align: left;
+        font-style: normal;
+        font-size: 15;
+        font-weight: normal;
+        padding: 0;
+
+        .padding {
+            padding: 0 0 0 20px;
+            color: black;
+        }
+
+
+
+    }
+}
+\ No newline at end of file
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
new file mode 100644
index 000000000..76f4bb964
--- /dev/null
+++ b/src/client/util/SettingsManager.tsx
@@ -0,0 +1,83 @@
+import { observable, runInAction, action } from "mobx";
+import * as React from "react";
+import MainViewModal from "../views/MainViewModal";
+import { observer } from "mobx-react";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import * as fa from '@fortawesome/free-solid-svg-icons';
+import { SelectionManager } from "./SelectionManager";
+import "./SettingsManager.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Identified } from "../Network";
+
+library.add(fa.faWindowClose);
+
+@observer
+export default class SettingsManager extends React.Component<{}> {
+    public static Instance: SettingsManager;
+    @observable private isOpen = false;
+    @observable private dialogueBoxOpacity = 1;
+    @observable private overlayOpacity = 0.4;
+    private curr_password_ref = React.createRef<HTMLInputElement>();
+
+    public open = action(() => {
+        SelectionManager.DeselectAll();
+        this.isOpen = true;
+    });
+
+    public close = action(() => {
+        this.isOpen = false;
+    });
+
+    constructor(props: {}) {
+        super(props);
+        SettingsManager.Instance = this;
+    }
+
+    private dispatchRequest = async () => {
+        const curr_pass = this.curr_password_ref.current!.value;
+        const { error: resultError, ...others } = await Identified.PostToServer('/internalResetPassword', { curr_pass });
+        if (resultError) {
+            // we failed
+            console.log(resultError);
+        }
+        console.log(others);
+        // do stuff with response
+    }
+
+    private get settingsInterface() {
+        return (
+            <div className={"settings-interface"}>
+                <div className="settings-heading">
+                    <h1>settings</h1>
+                    <div className={"close-button"} onClick={this.close}>
+                        <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+                    </div>
+                </div>
+                <div className="settings-body">
+                    <div className="settings-type">
+                        <p>changeable settings</p>
+                        <p>static data</p>
+                    </div>
+                    <div className="settings-content">
+                        <input ref={this.curr_password_ref}></input>
+                        this changes with what you select!
+                    </div>
+                </div>
+
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <MainViewModal
+                contents={this.settingsInterface}
+                isDisplayed={this.isOpen}
+                interactive={true}
+                dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+                overlayDisplayedOpacity={this.overlayOpacity}
+            />
+        );
+    }
+
+}
+\ No newline at end of file