spacecruft
/
Farmbot-Web-App
1
0
Fork 0
Code Issues Pull Requests Releases Activity

[UNSTABLE] Works, some parts of app need updated

pull/903/head
Rick Carlino 2018-07-02 14:03:37 -05:00
parent f1861367f4
commit e6013b1112
9 changed files with 50 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
webpack/account/components/change_password.tsx
View File

@ -1,7 +1,6 @@
import * as React from "react";
import { t } from "i18next";
import {
BlurableInput,
Widget,
WidgetHeader,
WidgetBody,
@ -14,6 +13,7 @@ import { prettyPrintApiErrors, equals, trim } from "../../util";
import { success, error } from "farmbot-toastr/dist";
import { Content } from "../../constants";
import { uniq } from "lodash";
import { BlurablePassword } from "../../ui/blurable_password";
interface PasswordForm {
new_password: string;
@ -95,30 +95,21 @@ export class ChangePassword extends React.Component<{}, ChangePWState> {
<label>
{t("Old Password")}
</label>
<BlurableInput
allowEmpty={true}
<BlurablePassword
onCommit={this.set("password")}
name="password"
value={this.state.form.password}
type="password" />
name="password" />
<label>
{t("New Password")}
</label>
<BlurableInput
allowEmpty={true}
<BlurablePassword
onCommit={this.set("new_password")}
name="new_password"
value={this.state.form.new_password}
type="password" />
name="new_password" />
<label>
{t("Confirm New Password")}
</label>
<BlurableInput
allowEmpty={true}
<BlurablePassword
onCommit={this.set("new_password_confirmation")}
name={"new_password_confirmation"}
value={this.state.form.new_password_confirmation}
type="password" />
name={"new_password_confirmation"} />
</form>
</WidgetBody>
</Widget>;

11
webpack/account/components/delete_account.tsx
View File

@ -1,7 +1,6 @@
import * as React from "react";
import { t } from "i18next";
import {
BlurableInput,
Widget,
WidgetHeader,
WidgetBody,
@ -10,6 +9,7 @@ import {
} from "../../ui/index";
import { DeleteAccountProps, DeleteAccountState } from "../interfaces";
import { Content } from "../../constants";
import { BlurablePassword } from "../../ui/blurable_password";
export class DeleteAccount extends
React.Component<DeleteAccountProps, DeleteAccountState> {
@ -37,13 +37,8 @@ export class DeleteAccount extends
</label>
</Col>
<Col xs={8}>
<BlurableInput
onCommit={(e) => {
this.setState({ password: e.currentTarget.value });
}}
allowEmpty={true}
value={this.state.password}
type="password" />
<BlurablePassword
onCommit={(e) => { this.setState({ password: e.currentTarget.value }); }} />
</Col>
<Col xs={4}>
<button

8
webpack/devices/components/fbos_settings/change_ownership_form.tsx
View File

@ -7,6 +7,7 @@ import { transferOwnership } from "../../transfer_ownership/transfer_ownership";
import { API } from "../../../api";
import { NonsecureContentWarning } from "./nonsecure_content_warning";
import { Content } from "../../../constants";
import { BlurablePassword } from "../../../ui/blurable_password";
interface ChangeOwnershipFormState {
email: string;
@ -53,12 +54,9 @@ export class ChangeOwnershipForm
</label>
</Col>
<Col xs={8}>
<BlurableInput
allowEmpty={true}
<BlurablePassword
onCommit={e => this.setState({ password: e.currentTarget.value })}
name="password"
value={this.state.password}
type="password" />
name="password" />
</Col>
</Row>
<Row>

2
webpack/front_page/__tests__/login_test.tsx
View File

@ -7,8 +7,6 @@ describe("<Login/>", () => {
const p: LoginProps = {
/** Attributes */
email: undefined,
loginPassword: undefined,
/** Callbacks */
onToggleForgotPassword: jest.fn(),
onSubmit: jest.fn(),

15
webpack/front_page/create_account.tsx
View File

@ -1,5 +1,13 @@
import * as React from "react";
import { WidgetBody, Col, Widget, WidgetHeader, Row, BlurableInput } from "../ui/index";
import {
WidgetBody,
Col,
Widget,
WidgetHeader,
Row,
BlurableInput,
BIProps
} from "../ui/index";
import { t } from "i18next";
import { resendEmail } from "./resend_verification";
import { success, error } from "farmbot-toastr";
@ -24,10 +32,7 @@ interface CreateAccountProps {
set: KeySetter;
}
type FieldType =
| "email"
| "password"
| "text";
type FieldType = BIProps["type"];
interface FormFieldProps {
label: string;

1
webpack/front_page/front_page.tsx
View File

@ -170,7 +170,6 @@ export class FrontPage extends React.Component<{}, Partial<FrontPageState>> {
const props: LoginProps = {
email: this.state.email || "",
onEmailChange: setField("email", this.handleFormUpdate),
loginPassword: this.state.loginPassword || "",
onLoginPasswordChange: setField("loginPassword", this.handleFormUpdate),
onToggleForgotPassword: this.toggleForgotPassword,
onSubmit: this.submitLogin,

8
webpack/front_page/login.tsx
View File

@ -8,12 +8,11 @@ import {
Row,
} from "../ui/index";
import { t } from "i18next";
import { BlurablePassword } from "../ui/blurable_password";
export interface LoginProps {
/** Attributes */
email: string | undefined;
loginPassword: string | undefined;
/** Callbacks */
onToggleForgotPassword(): void;
onSubmit(e: React.FormEvent<HTMLFormElement>): void;
@ -36,7 +35,6 @@ export class Login extends React.Component<LoginProps, {}> {
render() {
const {
email,
loginPassword,
onEmailChange,
onSubmit,
onLoginPasswordChange,
@ -70,9 +68,7 @@ export class Login extends React.Component<LoginProps, {}> {
<label>
{t("Password")}
</label>
<BlurableInput
type="password"
value={loginPassword || ""}
<BlurablePassword
name="login_password"
onCommit={onLoginPasswordChange} />
<a className="forgot-password" onClick={onToggleForgotPassword} >

12
webpack/ui/blurable_input.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react";
import { equals } from "../util";
interface BIProps {
export interface BIProps {
value: string | number;
onCommit(e: React.SyntheticEvent<HTMLInputElement>): void;
min?: number;
@ -10,7 +10,6 @@ interface BIProps {
| "text"
| "number"
| "email"
| "password"
| "time"
| "date"
| "hidden";
@ -34,18 +33,11 @@ export class BlurableInput extends React.Component<BIProps, Partial<BIState>> {
state: BIState = { buffer: "", isEditing: false };
/** Prevent DOM snooping on `el.value`. Should not matter because we use
* CSP, but doesn't hurt to have extra security. */
relevantField = (): "value" | "defaultValue" => {
return this.props.type === "password" ? "defaultValue" : "value";
}
/** Called on blur. */
maybeCommit = (e: React.SyntheticEvent<HTMLInputElement>) => {
const shouldPassToParent = this.state.buffer || (this.props.allowEmpty);
shouldPassToParent && this.props.onCommit(e);
this.setState({ isEditing: false, buffer: "" });
const isPw = (this.props.type === "password");
isPw && e.currentTarget.setAttribute("value", "");
}
focus = () => {
@ -61,7 +53,7 @@ export class BlurableInput extends React.Component<BIProps, Partial<BIState>> {
const value = this.state.isEditing ?
this.state.buffer : this.props.value;
return {
[this.relevantField()]: value,
value,
hidden: !!this.props.hidden,
onFocus: this.focus,
onChange: this.updateBuffer,

23
webpack/ui/blurable_password.tsx 100644
View File

@ -0,0 +1,23 @@
import * as React from "react";
interface BPProps {
onCommit(e: React.SyntheticEvent<HTMLInputElement>): void;
name?: string;
}
interface BPState {
value: string;
}
export class BlurablePassword extends React.Component<BPProps, BPState> {
constructor(props: BPProps) {
super(props);
this.state = { value: "" };
}
render() {
return <input
type="password"
onBlur={(e) => this.props.onCommit(e)}
onChange={(e) => this.setState({ value: e.target.value })} />;
}
}