feat: add password validation

src/components/atoms/TextBox/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useCallback, useRef } from "react";
 
 import Flex from "@reearth/components/atoms/Flex";
+import Text from "@reearth/components/atoms/Text";
 import { styled, metrics } from "@reearth/theme";
 import fonts from "@reearth/theme/fonts";
 import { metricsSizes } from "@reearth/theme/metrics";
@@ -15,6 +16,7 @@ export type Props = {
   prefix?: string;
   suffix?: string;
   placeholder?: string;
+  message?: string;
   throttle?: boolean;
   throttleTimeout?: number;
   color?: string;
@@ -34,6 +36,7 @@ const TextBox: React.FC<Props> = ({
   prefix,
   suffix,
   placeholder,
+  message,
   throttle,
   throttleTimeout: throttleTimeout = 3000,
   color,
@@ -103,44 +106,47 @@ const TextBox: React.FC<Props> = ({
   }, [innerValue, onChange, throttle, throttleTimeout]);
 
   return (
-    <FormWrapper className={className} align="center">
-      {prefix && (
-        <FloatedText floatedTextColor={floatedTextColor} color={color}>
-          {prefix}
-        </FloatedText>
-      )}
-      {multiline ? (
-        <StyledTextarea
-          ref={textAreaRef}
-          value={innerValue ?? ""}
-          onChange={handleChangeTextArea}
-          onBlur={handleBlur}
-          color={color}
-          backgroundColor={backgroundColor}
-          disabled={disabled}
-          placeholder={placeholder}
-          rows={rows}
-        />
-      ) : (
-        <StyledInput
-          value={innerValue ?? ""}
-          onChange={handleChange}
-          onKeyPress={handleKeyPress}
-          onBlur={handleBlur}
-          color={color}
-          type={type}
-          backgroundColor={backgroundColor}
-          disabled={disabled}
-          placeholder={placeholder}
-          borderColor={borderColor}
-        />
-      )}
-      {suffix && (
-        <FloatedText floatedTextColor={floatedTextColor} color={color}>
-          {suffix}
-        </FloatedText>
-      )}
-    </FormWrapper>
+    <div className={className}>
+      <FormWrapper align="center">
+        {prefix && (
+          <FloatedText floatedTextColor={floatedTextColor} color={color}>
+            {prefix}
+          </FloatedText>
+        )}
+        {multiline ? (
+          <StyledTextarea
+            ref={textAreaRef}
+            value={innerValue ?? ""}
+            onChange={handleChangeTextArea}
+            onBlur={handleBlur}
+            color={color}
+            backgroundColor={backgroundColor}
+            disabled={disabled}
+            placeholder={placeholder}
+            rows={rows}
+          />
+        ) : (
+          <StyledInput
+            value={innerValue ?? ""}
+            onChange={handleChange}
+            onKeyPress={handleKeyPress}
+            onBlur={handleBlur}
+            color={color}
+            type={type}
+            backgroundColor={backgroundColor}
+            disabled={disabled}
+            placeholder={placeholder}
+            borderColor={borderColor}
+          />
+        )}
+        {suffix && (
+          <FloatedText floatedTextColor={floatedTextColor} color={color}>
+            {suffix}
+          </FloatedText>
+        )}
+      </FormWrapper>
+      {message && <StyledText size="xs">{message}</StyledText>}
+    </div>
   );
 };
 
@@ -194,4 +200,10 @@ const FloatedText = styled.span<InputProps>`
   user-select: none;
 `;
 
+const StyledText = styled(Text)`
+  margin-left: ${metricsSizes.m}px;
+  margin-top: ${metricsSizes["2xs"]}px;
+  font-style: italic;
+`;
+
 export default TextBox;

src/components/molecules/Common/ProjectMenu/index.tsx

@@ -46,12 +46,6 @@ const ProjectMenu: React.FC<Props> = ({ currentProject, teamId }) => {
                 text={intl.formatMessage({ defaultMessage: "Datasets" })}
               />
             </MenuListItem>
-            {/* <MenuListItem>
-              <MenuListItemLabel
-                linkTo={`/settings/project/${currentProject.id}/plugins`}
-                text={intl.formatMessage({ defaultMessage: "Plugins" })}
-              />
-            </MenuListItem> */}
             <Spacer />
             <MenuListItem>
               <MenuListItemLabel
@@ -60,17 +54,10 @@ const ProjectMenu: React.FC<Props> = ({ currentProject, teamId }) => {
               />
             </MenuListItem>
             <Spacer />
-            <MenuListItem>
-              <MenuListItemLabel
-                icon="dashboard"
-                linkTo={`/dashboard/${teamId}`}
-                text={intl.formatMessage({ defaultMessage: "Top page" })}
-              />
-            </MenuListItem>
             <MenuListItem>
               <MenuListItemLabel
                 icon="help"
-                linkTo="/projects"
+                onClick={() => window.open("http://docs.reearth.io")}
                 text={intl.formatMessage({ defaultMessage: "Help" })}
               />
             </MenuListItem>

src/components/molecules/Dashboard/QuickStart.tsx

@@ -48,7 +48,7 @@ const QuickStart: React.FC<Props> = ({
         <LongBannerButton
           align="center"
           justify="center"
-          onClick={() => window.location.assign("http://docs.reearth.io")}>
+          onClick={() => window.open("http://docs.reearth.io")}>
           <MapIcon icon="map" />
           <Text size="m" weight="bold" customColor>
             {intl.formatMessage({ defaultMessage: "User guide" })}

src/components/molecules/Dashboard/Workspace.tsx

@@ -71,6 +71,7 @@ const StyledLink = styled(Link)`
   padding: ${metricsSizes["2xs"]}px;
   border-radius: ${metricsSizes.xs}px;
   align-self: flex-end;
+  display: flex;
 
   &:hover {
     text-decoration: none;

src/components/molecules/Settings/Account/AccountSection/index.tsx

@@ -4,7 +4,9 @@ import { useIntl } from "react-intl";
 import Flex from "@reearth/components/atoms/Flex";
 import Icon from "@reearth/components/atoms/Icon";
 import Text from "@reearth/components/atoms/Text";
-import PasswordModal from "@reearth/components/molecules/Settings/Account/PasswordModal";
+import PasswordModal, {
+  PasswordPolicy,
+} from "@reearth/components/molecules/Settings/Account/PasswordModal";
 import Field from "@reearth/components/molecules/Settings/Field";
 import EditableItem from "@reearth/components/molecules/Settings/Project/EditableItem";
 import Section from "@reearth/components/molecules/Settings/Section";
@@ -17,6 +19,7 @@ export type Props = {
   appTheme?: string;
   lang?: string;
   hasPassword: boolean;
+  passwordPolicy?: PasswordPolicy;
   updatePassword?: (password: string, passwordConfirmation: string) => void;
   updateLanguage?: (lang: string) => void;
   updateTheme?: (theme: string) => void;
@@ -31,6 +34,7 @@ const ProfileSection: React.FC<Props> = ({
   email,
   appTheme,
   hasPassword,
+  passwordPolicy,
   updatePassword,
   updateLanguage,
   updateTheme,
@@ -103,6 +107,7 @@ const ProfileSection: React.FC<Props> = ({
       </Section>
       <PasswordModal
         hasPassword={hasPassword}
+        passwordPolicy={passwordPolicy}
         updatePassword={handleUpdatePassword}
         isVisible={isOpen}
         onClose={() => setIsOpen(false)}