[UNSTABLE] account page saving stuff

webpack/account/components/change_password.tsx

@@ -1,57 +1,67 @@
 import * as React from "react";
 import { t } from "i18next";
-import { BlurableInput, Widget, WidgetHeader, WidgetBody } from "../../ui";
+import * as _ from "lodash";
+import {
+  BlurableInput,
+  Widget,
+  WidgetHeader,
+  WidgetBody,
+  SaveBtn
+} from "../../ui";
 import { ChangePwPropTypes } from "../interfaces";
 
 export class ChangePassword extends React.Component<ChangePwPropTypes, {}> {
   render() {
-    let { set, save, password, new_password } = this.props;
+    let { set, save, password, new_password, user } = this.props;
     let npc = this.props.new_password_confirmation;
     let npcString = "new_password_confirmation";
-    return <Widget>
-      <WidgetHeader title="Change Password">
-        <button
-          onClick={save}
-          className="green fb-button"
-          type="button"
-        >
-          {t("SAVE")}
-        </button>
-      </WidgetHeader>
-      <WidgetBody>
-        <form>
-          <label>
-            {t("Old Password")}
-          </label>
-          <BlurableInput
-            allowEmpty={true}
-            onCommit={set}
-            name="password"
-            value={password || ""}
-            type="password"
+    let cleared = _.isEmpty(password) &&
+      _.isEmpty(new_password) && _.isEmpty(npc);
+    return (
+      <Widget>
+        <WidgetHeader title="Change Password">
+          <SaveBtn
+            onClick={save}
+            isDirty={user.dirty}
+            isSaving={user.saving}
+            isSaved={cleared}
           />
-          <label>
-            {t("New Password")}
-          </label>
-          <BlurableInput
-            allowEmpty={true}
-            onCommit={set}
-            name="new_password"
-            value={new_password || ""}
-            type="password"
-          />
-          <label>
-            {t("New Password")}
-          </label>
-          <BlurableInput
-            allowEmpty={true}
-            onCommit={set}
-            name={npcString}
-            value={npc || ""}
-            type="password"
-          />
-        </form>
-      </WidgetBody>
-    </Widget>;
+        </WidgetHeader>
+        <WidgetBody>
+          <form>
+            <label>
+              {t("Old Password")}
+            </label>
+            <BlurableInput
+              allowEmpty={true}
+              onCommit={set}
+              name="password"
+              value={password || ""}
+              type="password"
+            />
+            <label>
+              {t("New Password")}
+            </label>
+            <BlurableInput
+              allowEmpty={true}
+              onCommit={set}
+              name="new_password"
+              value={new_password || ""}
+              type="password"
+            />
+            <label>
+              {t("New Password")}
+            </label>
+            <BlurableInput
+              allowEmpty={true}
+              onCommit={set}
+              name={npcString}
+              value={npc || ""}
+              type="password"
+            />
+          </form>
+        </WidgetBody>
+      </Widget >
+    );
   }
 }

webpack/account/index.tsx

@@ -35,33 +35,42 @@ export class Account extends React.Component<Props, State> {
   }
 
   render() {
-    return <Page className="account">
-      <Col xs={12} sm={6} smOffset={3}>
-        <Row>
-          <Settings name={this.state.name || ""}
-            email={this.state.email || ""}
-            set={this.set}
-            save={() => this.props.saveUser(this.props.dispatch, this.state)} />
-        </Row>
-        <Row>
-          <ChangePassword
-            password={this.state.password || ""}
-            new_password={this.state.new_password || ""}
-            new_password_confirmation=
-            {this.state.new_password_confirmation || ""}
-            set={this.set}
-            save={this.savePassword} />
-        </Row>
-        <Row>
-          <DeleteAccount
-            deletion_confirmation=
-            {this.state.deletion_confirmation || ""}
-            set={this.set}
-            save={() => this
-            .props
-            .enactDeletion(this.props.dispatch, this.state.deletion_confirmation)} />
-        </Row>
-      </Col>
-    </Page>;
+    console.log(this.props.user)
+    return (
+      <Page className="account">
+        <Col xs={12} sm={6} smOffset={3}>
+          <Row>
+            <Settings
+              name={this.state.name || ""}
+              email={this.state.email || ""}
+              set={this.set}
+              save={() => this.props.saveUser(this.props.dispatch, this.state)}
+            />
+          </Row>
+          <Row>
+            <ChangePassword
+              password={this.state.password || ""}
+              new_password={this.state.new_password || ""}
+              new_password_confirmation=
+              {this.state.new_password_confirmation || ""}
+              set={this.set}
+              save={this.savePassword}
+              user={this.props.user}
+            />
+          </Row>
+          <Row>
+            <DeleteAccount
+              deletion_confirmation=
+              {this.state.deletion_confirmation || ""}
+              set={this.set}
+              save={() => this
+                .props
+                .enactDeletion(this.props.dispatch,
+                this.state.deletion_confirmation)}
+            />
+          </Row>
+        </Col>
+      </Page>
+    );
   }
 }

webpack/account/interfaces.ts

@@ -32,6 +32,7 @@ export interface DeleteAccountPropTypes {
 }
 
 export interface ChangePwPropTypes {
+  user: TaggedUser;
   password: string | undefined;
   new_password: string | undefined;
   new_password_confirmation: string | undefined;