frontend/i18n: change email-address-setting to an FC component, add a bit more translations; translate a bit of Chat

Author: haraldschilly

src/packages/frontend/account/settings/email-address-setting.tsx

@@ -3,18 +3,27 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Component, Rendered, ReactDOM } from "../../app-framework";
-import { alert_message } from "../../alerts";
-import { log } from "../../user-tracking";
-import { ErrorDisplay, LabeledRow, Saving } from "../../components";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { alert_message } from "@cocalc/frontend/alerts";
 import {
   Button,
   ButtonToolbar,
-  Well,
-  FormGroup,
   FormControl,
-} from "../../antd-bootstrap";
-import { webapp_client } from "../../webapp-client";
+  FormGroup,
+  Well,
+} from "@cocalc/frontend/antd-bootstrap";
+import {
+  ReactDOM,
+  Rendered,
+  useRef,
+  useState,
+} from "@cocalc/frontend/app-framework";
+import { ErrorDisplay, LabeledRow, Saving } from "@cocalc/frontend/components";
+import { labels } from "@cocalc/frontend/i18n";
+import { log } from "@cocalc/frontend/user-tracking";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { COLORS } from "@cocalc/util/theme";
 
 interface Props {
   account_id: string;
@@ -24,77 +33,59 @@ interface Props {
   verify_emails?: boolean;
 }
 
-interface State {
-  state: "view" | "edit" | "saving"; // view --> edit --> saving --> view or edit
-  password: string;
-  email_address: string; // The new email address
-  error: string;
-}
+export const EmailAddressSetting = (props: Readonly<Props>) => {
+  const intl = useIntl();
 
-export class EmailAddressSetting extends Component<Props, State> {
-  constructor(props, state) {
-    super(props, state);
-    this.state = { state: "view", password: "", email_address: "", error: "" };
-  }
+  const emailRef = useRef<FormControl>(null);
+  const passwordRef = useRef<FormControl>(null);
+
+  const [state, setState] = useState<"view" | "edit" | "saving">("view");
+  const [password, setPassword] = useState<string>("");
+  const [email_address, set_email_address] = useState<string>("");
+  const [error, setError] = useState<string>("");
 
-  private start_editing(): void {
-    this.setState({
-      state: "edit",
-      email_address:
-        this.props.email_address != null ? this.props.email_address : "",
-      error: "",
-      password: "",
-    });
+  function start_editing(): void {
+    setState("edit");
+    set_email_address(props.email_address != null ? props.email_address : "");
+    setError("");
+    setPassword("");
   }
 
-  private cancel_editing(): void {
-    this.setState({
-      state: "view",
-      password: "",
-    }); // more secure...
+  function cancel_editing(): void {
+    setState("view");
+    setPassword("");
   }
 
-  private async save_editing(): Promise<void> {
-    if (this.state.password.length < 6) {
-      this.setState({
-        state: "edit",
-        error: "Password must be at least 6 characters long.",
-      });
+  async function save_editing(): Promise<void> {
+    if (password.length < 6) {
+      setState("edit");
+      setError("Password must be at least 6 characters long.");
       return;
     }
-    this.setState({
-      state: "saving",
-    });
+    setState("saving");
     try {
-      await webapp_client.account_client.change_email(
-        this.state.email_address,
-        this.state.password
-      );
+      await webapp_client.account_client.change_email(email_address, password);
     } catch (error) {
-      this.setState({
-        state: "edit",
-        error: `Error -- ${error}`,
-      });
+      setState("edit");
+      setError(`Error -- ${error}`);
       return;
     }
-    if (this.props.is_anonymous) {
+    if (props.is_anonymous) {
       log("email_sign_up", { source: "anonymous_account" });
     }
-    this.setState({
-      state: "view",
-      error: "",
-      password: "",
-    });
+    setState("view");
+    setError("");
+    setPassword("");
     // if email verification is enabled, send out a token
     // in any case, send a welcome email to an anonymous user, possibly
     // including an email verification link
-    if (!(this.props.verify_emails || this.props.is_anonymous)) {
+    if (!(props.verify_emails || props.is_anonymous)) {
       return;
     }
     try {
       // anonymouse users will get the "welcome" email
       await webapp_client.account_client.send_verification_email(
-        !this.props.is_anonymous
+        !props.is_anonymous,
       );
     } catch (error) {
       const err_msg = `Problem sending welcome email: ${error}`;
@@ -103,141 +94,150 @@ export class EmailAddressSetting extends Component<Props, State> {
     }
   }
 
-  private is_submittable(): boolean {
-    return !!(
-      this.state.password !== "" &&
-      this.state.email_address !== this.props.email_address
-    );
+  function is_submittable(): boolean {
+    return !!(password !== "" && email_address !== props.email_address);
   }
 
-  private render_change_button(): Rendered {
+  function render_change_button(): Rendered {
     return (
       <Button
-        disabled={!this.is_submittable()}
-        onClick={this.save_editing.bind(this)}
+        disabled={!is_submittable()}
+        onClick={save_editing}
         bsStyle="success"
       >
-        {this.button_label()}
+        {button_label()}
       </Button>
     );
   }
 
-  private render_error(): Rendered {
-    if (this.state.error) {
+  function render_error(): Rendered {
+    if (error) {
       return (
         <ErrorDisplay
-          error={this.state.error}
-          onClose={() => this.setState({ error: "" })}
+          error={error}
+          onClose={() => setError("")}
           style={{ marginTop: "15px" }}
         />
       );
     }
   }
 
-  private render_edit(): Rendered {
-    const password_label = this.props.email_address
-      ? "Current password"
-      : "Choose a password";
+  function render_edit(): Rendered {
+    const password_label = intl.formatMessage(
+      {
+        id: "account.settings.email_address.password_label",
+        defaultMessage:
+          "{have_email, select, true {Current password} other {Choose a password}}",
+      },
+      {
+        have_email: !!props.email_address,
+      },
+    );
     return (
       <Well style={{ marginTop: "3ex" }}>
         <FormGroup>
-          New email address
+          <FormattedMessage
+            id="account.settings.email_address.new_email_address_label"
+            defaultMessage="New email address"
+          />
           <FormControl
             autoFocus
             type="email_address"
-            ref="email_address"
-            value={this.state.email_address}
+            ref={emailRef}
+            value={email_address}
             placeholder="[email protected]"
-            onChange={() =>
-              this.setState({
-                email_address: ReactDOM.findDOMNode(this.refs.email_address)
-                  .value,
-              })
-            }
+            onChange={() => {
+              const em = ReactDOM.findDOMNode(emailRef.current)?.value;
+              set_email_address(em);
+            }}
             maxLength={254}
           />
         </FormGroup>
         {password_label}
         <form
           onSubmit={(e) => {
             e.preventDefault();
-            if (this.is_submittable()) {
-              return this.save_editing();
+            if (is_submittable()) {
+              return save_editing();
             }
           }}
         >
           <FormGroup>
             <FormControl
               type="password"
-              ref="password"
-              value={this.state.password}
+              ref={passwordRef}
+              value={password}
               placeholder={password_label}
               onChange={() => {
-                const password = ReactDOM.findDOMNode(
-                  this.refs.password
-                )?.value;
-                if (password != null) {
-                  this.setState({
-                    password,
-                  });
+                const pw = ReactDOM.findDOMNode(passwordRef.current)?.value;
+                if (pw != null) {
+                  setPassword(pw);
                 }
               }}
             />
           </FormGroup>
         </form>
         <ButtonToolbar>
-          {this.render_change_button()}
-          <Button onClick={this.cancel_editing.bind(this)}>Cancel</Button>
+          {render_change_button()}
+          <Button onClick={cancel_editing}>Cancel</Button>
         </ButtonToolbar>
-        {this.render_error()}
-        {this.render_saving()}
+        {render_error()}
+        {render_saving()}
       </Well>
     );
   }
 
-  private render_saving(): Rendered {
-    if (this.state.state === "saving") {
+  function render_saving(): Rendered {
+    if (state === "saving") {
       return <Saving />;
     }
   }
 
-  private button_label(): string {
-    if (this.props.is_anonymous) {
-      return "Sign up using an email address and password";
-    } else if (this.props.email_address) {
-      return "Change email address";
-    } else {
-      return "Set email address and password";
-    }
-  }
-
-  public render(): Rendered {
-    const label = this.props.is_anonymous ? (
-      <h5 style={{ color: "#666" }}>
-        Sign up using an email address and password
-      </h5>
-    ) : (
-      "Email address"
-    );
-    return (
-      <LabeledRow
-        label={label}
-        style={this.props.disabled ? { color: "#666" } : undefined}
-      >
-        <div>
-          {this.props.email_address}
-          {this.state.state === "view" ? (
-            <Button
-              disabled={this.props.disabled}
-              className="pull-right"
-              onClick={this.start_editing.bind(this)}
-            >
-              {this.button_label()}...
-            </Button>
-          ) : undefined}
-        </div>
-        {this.state.state !== "view" ? this.render_edit() : undefined}
-      </LabeledRow>
+  function button_label(): string {
+    return intl.formatMessage(
+      {
+        id: "account.settings.email_address.button_label",
+        defaultMessage: `{type, select,
+      anonymous {Sign up using an email address and password}
+      have_email {Change email address}
+      other {Set email address and password}}`,
+      },
+      {
+        type: props.is_anonymous
+          ? "anonymous"
+          : props.email_address
+          ? "have_email"
+          : "",
+      },
     );
   }
-}
+
+  const label = props.is_anonymous ? (
+    <h5 style={{ color: COLORS.GRAY_M }}>
+      Sign up using an email address and password
+    </h5>
+  ) : (
+    intl.formatMessage(labels.email_address)
+  );
+
+  return (
+    <LabeledRow
+      label={label}
+      style={props.disabled ? { color: COLORS.GRAY_M } : undefined}
+    >
+      <div>
+        {props.email_address}
+        {state === "view" ? (
+          <Button
+            disabled={props.disabled}
+            className="pull-right"
+            onClick={start_editing}
+          >
+            {button_label()}...
+          </Button>
+        ) : undefined}
+      </div>
+      {state !== "view" ? render_edit() : undefined}
+    </LabeledRow>
+  );
+};