password reset live

2 files changed, 63 insertions, 21 deletions

diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 0d637868b..228625182 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -1,17 +1,45 @@
 @import "../views/globalCssVariables";
 
+.dialogue-box {
+    background-color: whitesmoke !important;
+    color: grey;
+
+    button {
+        background: $lighter-alt-accent;
+        outline: none;
+        border-radius: 5px;
+        border: 0px;
+        color: #fcfbf7;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 75%;
+        padding: 10px;
+        transition: transform 0.2s;
+        margin: 2px;
+    }
+}
+
 .settings-interface {
     display: flex;
     flex-direction: column;
 
+    input {
+        border-radius: 5px;
+        border: none;
+        padding: 4px 4px 4px 10px;
+        margin: 2px;
+    }
+
     .settings-body {
         display: flex;
         flex-direction: row;
 
+
         .settings-type {
             display: flex;
             flex-direction: column;
             flex-basis: 30%;
+
         }
 
         .settings-content {
@@ -20,6 +48,10 @@
             flex-direction: column;
             justify-content: space-between;
 
+            button {
+                background: $darker-alt-accent;
+            }
+
             input {
                 min-width: 100%;
             }
@@ -40,7 +72,7 @@
         color: $dark-color;
         text-transform: uppercase;
         letter-spacing: 2px;
-        font-size: 75%;
+        font-size: 120%;
     }
 
     .close-button {
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index ee2d9ff21..0fcb80a3f 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -7,7 +7,7 @@ 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";
+import { Networking } from "../Network";
 
 library.add(fa.faWindowClose);
 
@@ -36,21 +36,31 @@ export default class SettingsManager extends React.Component<{}> {
     }
 
     private dispatchRequest = async () => {
-        const curr_pass = this.curr_password_ref.current!.value;
-        const new_pass = this.new_password_ref.current!.value;
-        const new_confirm = this.new_confirm_ref.current!.value;
-        console.log('ready!');
-        // const { error, hello } = await Identified.PostToServer('/internalResetPassword', { curr_pass, new_pass, new_confirm });
-        const resp = await Identified.PostToServer('/internalResetPassword', { curr_pass, new_pass, new_confirm });
-        console.log('set!');
-        console.log('response', resp);
-        console.log('hm', resp.hm);
-        if (resp.error) {
-            // we failed
-            console.log(resp.error);
+        const curr_pass = this.curr_password_ref.current?.value;
+        const new_pass = this.new_password_ref.current?.value;
+        const new_confirm = this.new_confirm_ref.current?.value;
+
+        if (!(curr_pass && new_pass && new_confirm)) {
+            alert("Hey we're missing some fields!");
+            return;
+        }
+
+        const passwordBundle = {
+            curr_pass,
+            new_pass,
+            new_confirm
+        };
+        const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
+        if (error) {
+            alert("Uh oh! " + error);
+            return;
         }
-        console.log('go!');
-        // do stuff with response
+
+        alert("Password successfully updated!");
+    }
+
+    onClick = (event: any) => {
+        console.log(event);
     }
 
     private get settingsInterface() {
@@ -64,13 +74,13 @@ export default class SettingsManager extends React.Component<{}> {
                 </div>
                 <div className="settings-body">
                     <div className="settings-type">
-                        <p>changeable settings</p>
-                        <p>static data</p>
+                        <button onClick={this.onClick} value="settings">settings</button>
+                        <button onClick={this.onClick} value="data">data</button>
                     </div>
                     <div className="settings-content">
-                        <input ref={this.curr_password_ref} />
-                        <input ref={this.new_password_ref} />
-                        <input ref={this.new_confirm_ref} />
+                        <input placeholder="current password" ref={this.curr_password_ref} />
+                        <input placeholder="new password" ref={this.new_password_ref} />
+                        <input placeholder="confirm new password" ref={this.new_confirm_ref} />
                         <button onClick={this.dispatchRequest}>submit</button>
                         this changes with what you select!
                     </div>