Merge pull request #8585 from sagemathinc/clarify-pw-req-8582

next/server: improve password policy

Author: williamstein

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

@@ -3,15 +3,17 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { FormattedMessage, useIntl } from "react-intl";
-import { alert_message } from "@cocalc/frontend/alerts";
 import { Button, Card, Input, Space } from "antd";
 import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { alert_message } from "@cocalc/frontend/alerts";
 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";
+import { MIN_PASSWORD_LENGTH } from "@cocalc/util/auth";
 
 interface Props {
   email_address?: string;
@@ -47,9 +49,11 @@ export const EmailAddressSetting = ({
   }
 
   async function save_editing(): Promise<void> {
-    if (password.length < 6) {
+    if (password.length < MIN_PASSWORD_LENGTH) {
       setState("edit");
-      setError("Password must be at least 6 characters long.");
+      setError(
+        `Password must be at least ${MIN_PASSWORD_LENGTH} characters long.`,
+      );
       return;
     }
     setState("saving");

src/packages/frontend/account/settings/password-setting.tsx

@@ -22,6 +22,7 @@ import {
 import { appBasePath } from "@cocalc/frontend/customize/app-base-path";
 import { labels } from "@cocalc/frontend/i18n";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { MIN_PASSWORD_LENGTH } from "@cocalc/util/auth";
 
 interface State {
   state: "view" | "edit" | "saving"; // view --> edit --> saving --> view
@@ -67,15 +68,16 @@ export const PasswordSetting: React.FC = () => {
       if (!is_mounted.current) return;
     } catch (err) {
       if (!is_mounted.current) return;
-      set_state("edit"), set_error(`Error changing password -- ${err}`);
+      set_state("edit");
+      set_error(`Error changing password -- ${err}`);
       return;
     }
     reset();
   }
 
   function is_submittable(): boolean {
     return !!(
-      new_password.length >= 6 &&
+      new_password.length >= MIN_PASSWORD_LENGTH &&
       new_password &&
       new_password !== old_password
     );
@@ -138,7 +140,9 @@ export const PasswordSetting: React.FC = () => {
             />
           </Form.Item>
           New password
-          {new_password.length < 6 ? " (at least 6 characters)" : undefined}
+          {new_password.length < MIN_PASSWORD_LENGTH
+            ? ` (at least ${MIN_PASSWORD_LENGTH} characters)`
+            : undefined}
           {new_password.length >= 6 && new_password == old_password
             ? " (different than old password)"
             : undefined}

src/packages/next/components/account/config/account/api.tsx

@@ -12,6 +12,7 @@ import useAPI from "lib/hooks/api";
 import register from "../register";
 import { Paragraph, Text } from "components/misc";
 import ApiKeys from "@cocalc/frontend/components/api-keys";
+import { MIN_PASSWORD_LENGTH } from "@cocalc/util/auth";
 
 register({
   path: "account/api",
@@ -96,14 +97,14 @@ register({
               placeholder="Enter your password..."
               onChange={(e) => setPassword(e.target.value)}
               onPressEnter={() => {
-                if (password.length >= 6) {
+                if (password.length >= MIN_PASSWORD_LENGTH) {
                   submitPassword(password);
                 }
               }}
             />
             <Button
               style={{ marginLeft: "15px" }}
-              disabled={password.length < 6}
+              disabled={password.length < MIN_PASSWORD_LENGTH}
               onClick={() => submitPassword(password)}
             >
               Show Older Legacy API Key

src/packages/next/components/account/config/account/email.tsx

@@ -7,16 +7,17 @@ import { Alert, Button, Input, Space } from "antd";
 import { useEffect, useMemo, useState, type JSX } from "react";
 
 import { Icon } from "@cocalc/frontend/components/icon";
+import { MIN_PASSWORD_LENGTH } from "@cocalc/util/auth";
 import { is_valid_email_address as isValidEmailAddress } from "@cocalc/util/misc";
 import { Paragraph, Text, Title } from "components/misc";
 import SaveButton from "components/misc/save-button";
 import Timestamp from "components/misc/timestamp";
 import Loading from "components/share/loading";
 import apiPost from "lib/api/post";
+import { useCustomize } from "lib/customize";
 import useAPI from "lib/hooks/api";
 import useDatabase from "lib/hooks/database";
 import register from "../register";
-import { useCustomize } from "lib/customize";
 
 interface Data {
   email_address?: string;
@@ -107,7 +108,7 @@ export function ChangeEmailAddress(props: Props) {
           />
           <SaveButton
             disabled={
-              password.length < 6 ||
+              password.length < MIN_PASSWORD_LENGTH ||
               !isValidEmailAddress(edited.email_address ?? "") ||
               lastSuccess == password + (edited.email_address ?? "")
             }
@@ -121,7 +122,7 @@ export function ChangeEmailAddress(props: Props) {
               });
               setLastSuccess(password + email_address);
             }}
-            isValid={() => password.length >= 6}
+            isValid={() => password.length >= MIN_PASSWORD_LENGTH}
           />
           {lastSuccess == password + edited.email_address && (
             <Alert

src/packages/next/components/account/config/account/password.tsx

@@ -6,7 +6,8 @@
 import { Alert, Button, Input, Space } from "antd";
 import { useState } from "react";
 
-import { Title, Text, Paragraph } from "components/misc";
+import { MIN_PASSWORD_LENGTH } from "@cocalc/util/auth";
+import { Paragraph, Text, Title } from "components/misc";
 import A from "components/misc/A";
 import Loading from "components/share/loading";
 import apiPost from "lib/api/post";
@@ -76,14 +77,14 @@ register({
             }}
             onPressEnter={resetPassword}
           />
-          (at least 6 characters)
+          (at least {MIN_PASSWORD_LENGTH} characters)
         </Paragraph>
         <Button
           type="primary"
           disabled={
             (changed && changed == newPassword) ||
             changing ||
-            newPassword.length < 6 ||
+            newPassword.length < MIN_PASSWORD_LENGTH ||
             newPassword == currentPassword
           }
           onClick={resetPassword}

src/packages/next/components/account/config/anonymous/upgrade.tsx

@@ -8,6 +8,7 @@ import { delay } from "awaiting";
 import { CSSProperties, useState } from "react";
 
 import { Icon } from "@cocalc/frontend/components/icon";
+import { MIN_PASSWORD_LENGTH } from "@cocalc/util/auth";
 import { is_valid_email_address as isValidEmailAddress } from "@cocalc/util/misc";
 import { TermsCheckbox } from "components/auth/sign-up";
 import SSO from "components/auth/sso";
@@ -100,7 +101,9 @@ function EmailPassword() {
         {/* change height of button to match input boxes */}
         <Button
           type="primary"
-          disabled={success || !email_address || password.length < 6}
+          disabled={
+            success || !email_address || password.length < MIN_PASSWORD_LENGTH
+          }
           style={{ height: "35px" }}
           onClick={setEmailAndPassword}
         >
@@ -111,8 +114,8 @@ function EmailPassword() {
           ) : email_address.length > 0 &&
             !isValidEmailAddress(email_address) ? (
             "Enter valid email"
-          ) : password.length > 0 && password.length < 6 ? (
-            "At least 6 characters"
+          ) : password.length > 0 && password.length < MIN_PASSWORD_LENGTH ? (
+            `At least ${MIN_PASSWORD_LENGTH} characters`
           ) : (
             <>
               <Icon name="check" style={{ marginRight: "5px" }} /> Save