From cc68d4a9a991dd44b908bb9bec066ab42309dfd2 Mon Sep 17 00:00:00 2001 From: tcsola Date: Thu, 26 Sep 2024 10:32:17 +0900 Subject: [PATCH 01/22] feat: add account page to change password --- .../AccountAndWorkSpaceSetting/hooks.ts | 34 +++ .../AccountAndWorkSpaceSetting/index.tsx | 138 ++++++++++++ .../AccountSetting/PasswordModal/index.tsx | 211 ++++++++++++++++++ .../innerPages/AccountSetting/index.tsx | 101 +++++++++ .../innerPages/common.tsx | 79 +++++++ .../Dashboard/LeftSidePanel/profile.tsx | 8 + .../features/Navbar/LeftSection/index.tsx | 13 +- .../components/IconButton/index.tsx | 29 ++- .../reearth-ui/components/TextInput/index.tsx | 5 +- .../beta/pages/AccountSettingsPage/index.tsx | 16 +- web/src/services/api/meApi.ts | 74 +++++- web/src/services/routing/index.tsx | 5 + 12 files changed, 690 insertions(+), 23 deletions(-) create mode 100644 web/src/beta/features/AccountAndWorkSpaceSetting/hooks.ts create mode 100644 web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx create mode 100644 web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx create mode 100644 web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx create mode 100644 web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/common.tsx diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/hooks.ts b/web/src/beta/features/AccountAndWorkSpaceSetting/hooks.ts new file mode 100644 index 000000000..e3b3298f9 --- /dev/null +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/hooks.ts @@ -0,0 +1,34 @@ +import { useMeFetcher } from "@reearth/services/api"; +import { useCallback } from "react"; + +export type UpdatePasswordType = { + password: string; + passwordConfirmation: string; +}; + +export default () => { + const { useMeQuery, useUpdatePassword, useDeleteUser } = useMeFetcher(); + + const passwordPolicy = window.REEARTH_CONFIG?.passwordPolicy; + + const { me: data } = useMeQuery(); + + const handleUpdateUserPassword = useCallback( + async ({ password, passwordConfirmation }: UpdatePasswordType) => { + await useUpdatePassword({ password, passwordConfirmation }); + }, + [useUpdatePassword] + ); + + const handleDeleteUser = useCallback(async () => { + const userId = data.id; + if (userId) await useDeleteUser({ userId }); + }, [data.id, useDeleteUser]); + + return { + meData: data, + passwordPolicy, + handleUpdateUserPassword, + handleDeleteUser + }; +}; diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx new file mode 100644 index 000000000..e94259bbb --- /dev/null +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx @@ -0,0 +1,138 @@ +import { + DEFAULT_SIDEBAR_WIDTH, + SidebarMenuItem, + SidebarSection, + SidebarVersion, + SidebarWrapper +} from "@reearth/beta/ui/components/Sidebar"; +import { useT } from "@reearth/services/i18n"; +import { styled } from "@reearth/services/theme"; +import { FC, useMemo } from "react"; + +import Navbar from "../Navbar"; + +import useHook from "./hooks"; +import AccountSetting from "./innerPages/AccountSetting"; + +type Props = { + sceneId?: string; + projectId?: string; + workspaceId?: string; + tab: string; +}; + +export const accountSettingTabs = [ + { id: "account", text: "Account", icon: "user" }, + { id: "workspace", text: "Workspace", icon: "users" }, + { id: "members", text: "Members", icon: "usersFour" } +] as const; + +const AccountAndWorkSpaceSetting: FC = ({ tab }) => { + const t = useT(); + const tabs = useMemo( + () => + accountSettingTabs.map((tab) => ({ + id: tab.id, + icon: tab.icon, + text: t(tab.text), + path: `/settings/${tab.id}` + })), + [t] + ); + const { meData, passwordPolicy, handleUpdateUserPassword } = useHook(); + console.log(meData); + const { name, email } = meData; + + return ( + + + + + + + {tabs?.map((t) => ( + + ))} + + + + + + {tab === "account" && ( + + )} + + + + ); +}; + +const Wrapper = styled("div")(({ theme }) => ({ + display: "flex", + flexDirection: "column", + height: "100%", + width: "100%", + color: theme.content.main, + backgroundColor: theme.bg[0], + ["*"]: { + boxSizing: "border-box" + }, + ["* ::-webkit-scrollbar"]: { + width: "8px" + }, + ["* ::-webkit-scrollbar-track"]: { + background: theme.relative.darker, + borderRadius: "10px" + }, + ["* ::-webkit-scrollbar-thumb"]: { + background: theme.relative.light, + borderRadius: "4px" + }, + ["* ::-webkit-scrollbar-thumb:hover"]: { + background: theme.relative.lighter + } +})); + +const MainSection = styled("div")(() => ({ + display: "flex", + flex: 1, + overflow: "auto", + position: "relative" +})); + +const LeftSidePanel = styled("div")(({ theme }) => ({ + width: DEFAULT_SIDEBAR_WIDTH, + height: "100%", + backgroundColor: theme.bg[1], + display: "flex", + padding: `${theme.spacing.large}px 0`, + boxSizing: "border-box" +})); + +const Content = styled("div")(({ theme }) => ({ + position: "relative", + display: "flex", + flexDirection: "column", + width: "100%", + height: "100%", + alignItems: "center", + overflow: "auto", + padding: `${theme.spacing.super}px` +})); + +export default AccountAndWorkSpaceSetting; diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx new file mode 100644 index 000000000..14f3802b6 --- /dev/null +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx @@ -0,0 +1,211 @@ +import { Flex } from "@aws-amplify/ui-react"; +import { + Modal, + Button, + ModalPanel, + Typography, + TextInput, + Icon +} from "@reearth/beta/lib/reearth-ui"; +import { metricsSizes } from "@reearth/beta/utils/metrics"; +import { useT } from "@reearth/services/i18n"; +import { styled } from "@reearth/services/theme"; +import React, { useState, useCallback, useEffect } from "react"; + +export type PasswordPolicy = { + tooShort?: RegExp; + tooLong?: RegExp; + whitespace?: RegExp; + lowSecurity?: RegExp; + medSecurity?: RegExp; + highSecurity?: RegExp; +}; + +type Props = { + className?: string; + project?: { + id: string; + name: string; + isArchived: boolean; + }; + workspace?: { + id: string; + name: string; + }; + isVisible: boolean; + archiveProject?: (archived: boolean) => void; + onClose?: () => void; + passwordPolicy?: PasswordPolicy; + updatePassword?: ({ + password, + passwordConfirmation + }: { + password: string; + passwordConfirmation: string; + }) => void; +}; + +const PasswordModal: React.FC = ({ + isVisible, + onClose, + passwordPolicy, + updatePassword +}) => { + const t = useT(); + + const [password, setPassword] = useState(""); + const [regexMessage, setRegexMessage] = useState(); + const [passwordConfirmation, setPasswordConfirmation] = useState(); + const [disabled, setDisabled] = useState(true); + + const handlePasswordChange = useCallback( + (password: string | undefined) => { + setPassword(password ?? ""); + switch (true) { + case passwordPolicy?.whitespace?.test(password ?? ""): + setRegexMessage(t("No whitespace is allowed.")); + break; + case passwordPolicy?.tooShort?.test(password ?? ""): + setRegexMessage(t("Too short.")); + break; + case passwordPolicy?.tooLong?.test(password ?? ""): + setRegexMessage(t("That is terribly long.")); + break; + case passwordPolicy?.highSecurity?.test(password ?? ""): + setRegexMessage(t("That password is great!")); + break; + case passwordPolicy?.medSecurity?.test(password ?? ""): + setRegexMessage(t("That password is better.")); + break; + case passwordPolicy?.lowSecurity?.test(password ?? ""): + setRegexMessage(t("That password is okay.")); + break; + default: + setRegexMessage(t("That password confuses me, but might be okay.")); + break; + } + }, + [t, password] // eslint-disable-line react-hooks/exhaustive-deps + ); + + const handleClose = useCallback(() => { + setPassword(""); + setPasswordConfirmation(""); + onClose?.(); + }, [onClose]); + + const handleSave = useCallback(() => { + if (password === passwordConfirmation) { + updatePassword?.({ password, passwordConfirmation }); + handleClose(); + } + }, [updatePassword, handleClose, password, passwordConfirmation]); + + useEffect(() => { + if ( + password !== passwordConfirmation || + (passwordPolicy?.highSecurity && + !passwordPolicy.highSecurity.test(password)) || + passwordPolicy?.tooShort?.test(password) || + passwordPolicy?.tooLong?.test(password) + ) { + setDisabled(true); + } else { + setDisabled(false); + } + }, [password, passwordConfirmation, passwordPolicy]); + + const isMatchPassword = + password !== passwordConfirmation && passwordConfirmation; + + return ( + + + ]} + > + +
+ + + {t( + `In order to protect your account, make sure your password is unique and strong.` + )} + + + + + {t("New password")} + + + {password ? ( + + {regexMessage} + + ) : undefined} + + + + {t("New password (for confirmation)")} + + + {isMatchPassword ? ( + + + + + "repeatPassword" Passwords need to match. + + ) : undefined} + +
+ + + + ); +}; + +const ModalContentWrapper = styled("div")(({ theme }) => ({ + display: "flex", + flexDirection: "column", + gap: theme.spacing.large, + padding: theme.spacing.large, + background: theme.bg[1] +})); + +const SubText = styled.div` + margin: ${({ theme }) => `${theme.spacing.large}px auto`}; +`; + +const PasswordField = styled(Flex)` + height: 50px; + transition: all 0.2s; + &:has(p ~ p) { + height: 68px; + } +`; + +const PasswordMessage = styled(Typography)` + margin-top: ${metricsSizes["s"]}px; + font-style: italic; + display: flex; +`; + +export default PasswordModal; diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx new file mode 100644 index 000000000..d0c409237 --- /dev/null +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx @@ -0,0 +1,101 @@ +import { + Collapse, + TextInput, + Typography, + IconButton +} from "@reearth/beta/lib/reearth-ui"; +import { InputField } from "@reearth/beta/ui/fields"; +import { PasswordPolicy } from "@reearth/services/config/passwordPolicy"; +import { useT } from "@reearth/services/i18n"; +import { styled } from "@reearth/services/theme"; +import { FC, useState } from "react"; + +import { UpdatePasswordType } from "../../hooks"; +import { InnerPage, SettingsWrapper, SettingsFields } from "../common"; + +import PasswordModal from "./PasswordModal"; + +type Props = { + imformationData: { name?: string; email?: string }; + passwordPolicy?: PasswordPolicy; + onUpdateUserPassword: ({ + password, + passwordConfirmation + }: UpdatePasswordType) => Promise; +}; + +const AccountSetting: FC = ({ + passwordPolicy, + onUpdateUserPassword, + imformationData +}) => { + const t = useT(); + const [onPasswordModalClose, setPasswordModalOnClose] = + useState(true); + + return ( + + + + + + + + + {t("Password")} + + + { + setPasswordModalOnClose(!onPasswordModalClose); + }} + size="medium" + hasBorder={true} + /> + + + + + + + setPasswordModalOnClose(!onPasswordModalClose)} + updatePassword={onUpdateUserPassword} + /> + + ); +}; +export default AccountSetting; + +const PasswordWrapper = styled("div")(() => ({ + display: "flex", + flexDirection: "column", + width: "100%" +})); + +const PasswordInputWrapper = styled("div")(({ theme }) => ({ + display: "flex", + gap: theme.spacing.smallest, + alignItems: "center" +})); diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/common.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/common.tsx new file mode 100644 index 000000000..c08ab6222 --- /dev/null +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/common.tsx @@ -0,0 +1,79 @@ +import { Collapse, Typography } from "@reearth/beta/lib/reearth-ui"; +import { useT } from "@reearth/services/i18n"; +import { styled } from "@reearth/services/theme"; + +export const InnerPage = styled("div")<{ + wide?: boolean; + transparent?: boolean; +}>(({ wide, transparent, theme }) => ({ + boxSizing: "border-box", + display: "flex", + width: "100%", + maxWidth: wide ? 950 : 750, + backgroundColor: transparent ? "none" : theme.bg[1], + borderRadius: theme.radius.normal +})); + +export const InnerSidebar = styled("div")(({ theme }) => ({ + display: "flex", + flexDirection: "column", + width: 213, + borderRight: `1px solid ${theme.outline.weaker}`, + padding: `${theme.spacing.normal}px 0` +})); + +export const SettingsWrapper = styled("div")(({ theme }) => ({ + display: "flex", + flexDirection: "column", + width: "100%", + flex: 1, + ["> div:not(:last-child)"]: { + borderBottom: `1px solid ${theme.outline.weaker}` + } +})); + +export const SettingsFields = styled("div")(({ theme }) => ({ + display: "flex", + flexDirection: "column", + gap: theme.spacing.largest +})); + +export const SettingsRow = styled("div")(({ theme }) => ({ + display: "flex", + justifyContent: "space-between", + flexDirection: "row", + gap: theme.spacing.largest +})); + +export const SettingsRowItem = styled("div")(() => ({ + width: "100%" +})); + +export const Thumbnail = styled("div")<{ src?: string }>(({ src, theme }) => ({ + width: "100%", + paddingBottom: "52.3%", + fontSize: 0, + background: src + ? `url(${src}) center/contain no-repeat` + : theme.relative.dark, + borderRadius: theme.radius.small +})); + +export const ButtonWrapper = styled("div")(({ theme }) => ({ + display: "flex", + justifyContent: "flex-end", + gap: theme.spacing.small +})); + +export const ArchivedSettingNotice: React.FC = () => { + const t = useT(); + return ( + + + {t( + "Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings." + )} + + + ); +}; diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx index d79e87c96..680b71089 100644 --- a/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx +++ b/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx @@ -8,6 +8,7 @@ import { useT } from "@reearth/services/i18n"; import { styled, useTheme } from "@reearth/services/theme"; import { ProjectType } from "@reearth/types"; import { FC } from "react"; +import { useNavigate } from "react-router-dom"; import { Workspace } from "../type"; @@ -37,6 +38,7 @@ export const Profile: FC = ({ }) => { const t = useT(); const theme = useTheme(); + const navigate = useNavigate(); const popupMenu: PopupMenuItem[] = [ { @@ -56,6 +58,12 @@ export const Profile: FC = ({ }; }) }, + { + id: "accountSettings", + title: t("Account Settings"), + icon: "user", + onClick: () => navigate("/settings/account") + }, { id: "signOut", title: t("Log Out"), diff --git a/web/src/beta/features/Navbar/LeftSection/index.tsx b/web/src/beta/features/Navbar/LeftSection/index.tsx index 5b8339501..fddfd3522 100644 --- a/web/src/beta/features/Navbar/LeftSection/index.tsx +++ b/web/src/beta/features/Navbar/LeftSection/index.tsx @@ -1,10 +1,11 @@ import { IconButton, PopupMenu, - PopupMenuItem + PopupMenuItem, + Typography } from "@reearth/beta/lib/reearth-ui"; import { useT } from "@reearth/services/i18n"; -import { styled } from "@reearth/services/theme"; +import { styled, useTheme } from "@reearth/services/theme"; import { useMemo } from "react"; import { Link } from "react-router-dom"; @@ -32,6 +33,7 @@ const LeftSection: React.FC = ({ onWorkspaceChange }) => { const t = useT(); + const theme = useTheme(); const menuItems: PopupMenuItem[] = useMemo( () => [ @@ -55,6 +57,13 @@ const LeftSection: React.FC = ({ return ( + {page !== "editor" && ( + + + {t("Visualizer")} + + + )} void; @@ -24,7 +25,8 @@ export const IconButton: FC = ({ className, iconRotate, stopPropagationOnClick, - onClick + onClick, + hasBorder }) => { const handleClick = useCallback( (e: MouseEvent) => { @@ -44,6 +46,7 @@ export const IconButton: FC = ({ active={active} iconRotate={iconRotate} onClick={handleClick} + hasBorder={hasBorder} > @@ -51,32 +54,38 @@ export const IconButton: FC = ({ }; const StyledButton = styled("button")<{ - size: "normal" | "small" | "smallest" | "large"; + size: "normal" | "small" | "smallest" | "medium" | "large"; appearance: "primary" | "secondary" | "dangerous" | "simple"; active?: boolean; iconRotate?: string; -}>(({ appearance, size, active, iconRotate, theme }) => ({ + hasBorder?: boolean; +}>(({ appearance, size, active, iconRotate, theme, hasBorder }) => ({ display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", + border: hasBorder ? `1px solid ${theme.outline.weak}` : "none", flexShrink: 0, width: size === "smallest" ? "16px" : size === "small" ? "20px" - : size === "large" - ? "36px" - : "24px", + : size === "medium" + ? "28px" + : size === "large" + ? "36px" + : "24px", height: size === "smallest" ? "16px" : size === "small" ? "20px" - : size === "large" - ? "36px" - : "24px", + : size === "medium" + ? "28px" + : size === "large" + ? "36px" + : "24px", borderRadius: size === "small" ? `${theme.radius.small}px` : `${theme.radius.normal}px`, color: active diff --git a/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx b/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx index 383ea58c4..63bc29965 100644 --- a/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx +++ b/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx @@ -23,6 +23,7 @@ export type TextInputProps = { onChange?: (text: string) => void; onBlur?: (text: string) => void; onKeyDown?: (e: KeyboardEvent) => void; + type?: string; }; export const TextInput: FC = ({ @@ -38,7 +39,8 @@ export const TextInput: FC = ({ autoFocus, onChange, onBlur, - onKeyDown + onKeyDown, + type }) => { const [currentValue, setCurrentValue] = useState(value ?? ""); const [isFocused, setIsFocused] = useState(false); @@ -90,6 +92,7 @@ export const TextInput: FC = ({ appearance={appearance} autoFocus={autoFocus} onKeyDown={onKeyDown} + type={type} /> {actions && {actions}} diff --git a/web/src/beta/pages/AccountSettingsPage/index.tsx b/web/src/beta/pages/AccountSettingsPage/index.tsx index 330e41b85..800aa666d 100644 --- a/web/src/beta/pages/AccountSettingsPage/index.tsx +++ b/web/src/beta/pages/AccountSettingsPage/index.tsx @@ -1,12 +1,14 @@ -import { Typography } from "@reearth/beta/lib/reearth-ui"; +import AccountAndWorkSpaceSetting from "@reearth/beta/features/AccountAndWorkSpaceSetting"; import { FC } from "react"; -export type Props = { - path?: string; -}; +import Page from "../Page"; -const AccountPage: FC = () => ( - Account page +const AccountSettingPage: FC = () => ( + ( + + )} + /> ); -export default AccountPage; +export default AccountSettingPage; diff --git a/web/src/services/api/meApi.ts b/web/src/services/api/meApi.ts index 0a84a07b9..e1ecaf6b2 100644 --- a/web/src/services/api/meApi.ts +++ b/web/src/services/api/meApi.ts @@ -1,8 +1,18 @@ -import { useQuery } from "@apollo/client"; -import { GET_ME } from "@reearth/services/gql/queries/user"; +import { useMutation, useQuery } from "@apollo/client"; +import { + GET_ME, + DELETE_ME, + UPDATE_ME +} from "@reearth/services/gql/queries/user"; import { useCallback } from "react"; +import { useT } from "../i18n"; +import { useNotification } from "../state"; + export default () => { + const t = useT(); + const [, setNotification] = useNotification(); + const useMeQuery = useCallback((options?: { skip?: boolean }) => { const { data, ...rest } = useQuery(GET_ME, { ...options }); return { @@ -11,7 +21,65 @@ export default () => { }; }, []); + const [updateMeMutation] = useMutation(UPDATE_ME); + const useUpdatePassword = useCallback( + async ({ + password, + passwordConfirmation + }: { + password: string; + passwordConfirmation: string; + }) => { + const { data, errors } = await updateMeMutation({ + variables: { + password, + passwordConfirmation + } + }); + + if (errors || !data?.updateMe) { + console.log("GraphQL: Failed to update password", errors); + setNotification({ + type: "error", + text: t("Failed to update user password.") + }); + return { status: "error" }; + } + setNotification({ + type: "success", + text: t("Successfully updated user password!") + }); + return { data: data?.updateMe, status: "success" }; + }, + [setNotification, t, updateMeMutation] + ); + + const [deleteMeMutation] = useMutation(DELETE_ME); + const useDeleteUser = useCallback( + async ({ userId }: { userId: string }) => { + const { data, errors } = await deleteMeMutation({ + variables: { userId } + }); + if (errors || !data?.deleteMe) { + console.log("GraphQL: Failed to delete users", errors); + setNotification({ + type: "error", + text: t("Failed to delete user.") + }); + return { status: "error" }; + } + setNotification({ + type: "success", + text: t("Successfully delete user!") + }); + return { data: data.deleteMe, status: "success" }; + }, + [deleteMeMutation, setNotification, t] + ); + return { - useMeQuery + useMeQuery, + useUpdatePassword, + useDeleteUser }; }; diff --git a/web/src/services/routing/index.tsx b/web/src/services/routing/index.tsx index 3061903a3..4f2661bf0 100644 --- a/web/src/services/routing/index.tsx +++ b/web/src/services/routing/index.tsx @@ -1,3 +1,4 @@ +import AccountSettingPage from "@reearth/beta/pages/AccountSettingsPage"; import RootPage from "@reearth/beta/pages/RootPage"; import { styled } from "@reearth/services/theme"; import { lazy } from "react"; @@ -34,6 +35,10 @@ export const AppRoutes = () => { path: "settings/project/:projectId/:tab?/:subId?", element: }, + { + path: "settings/account", + element: + }, { path: "graphql", element: From 5efe7618cda0302a09bdedf08b0a5c9e10e3c324 Mon Sep 17 00:00:00 2001 From: tcsola Date: Thu, 26 Sep 2024 13:01:05 +0900 Subject: [PATCH 02/22] refactor: add try catch to hook --- .../features/AccountAndWorkSpaceSetting/hooks.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/hooks.ts b/web/src/beta/features/AccountAndWorkSpaceSetting/hooks.ts index e3b3298f9..6312bf943 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/hooks.ts +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/hooks.ts @@ -15,14 +15,22 @@ export default () => { const handleUpdateUserPassword = useCallback( async ({ password, passwordConfirmation }: UpdatePasswordType) => { - await useUpdatePassword({ password, passwordConfirmation }); + try { + await useUpdatePassword({ password, passwordConfirmation }); + } catch (error) { + console.error("Failed to update password:", error); + } }, [useUpdatePassword] ); const handleDeleteUser = useCallback(async () => { - const userId = data.id; - if (userId) await useDeleteUser({ userId }); + try { + const userId = data.id; + if (userId) await useDeleteUser({ userId }); + } catch (error) { + console.error("Failed to delete user:", error); + } }, [data.id, useDeleteUser]); return { From 8bed2a3df723482d9b60a1822c911898207a3538 Mon Sep 17 00:00:00 2001 From: tcsola Date: Thu, 26 Sep 2024 13:09:28 +0900 Subject: [PATCH 03/22] refactor: inputField value refactor --- .../innerPages/AccountSetting/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx index d0c409237..0f9d0d7e8 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx @@ -40,15 +40,13 @@ const AccountSetting: FC = ({ From 903501d38d7acb5e2be060240c5bf508ef20d034 Mon Sep 17 00:00:00 2001 From: tcsola Date: Thu, 26 Sep 2024 13:11:36 +0900 Subject: [PATCH 04/22] refactor: passwordPolicy not option --- .../innerPages/AccountSetting/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx index 0f9d0d7e8..f517b5e84 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx @@ -17,7 +17,7 @@ import PasswordModal from "./PasswordModal"; type Props = { imformationData: { name?: string; email?: string }; - passwordPolicy?: PasswordPolicy; + passwordPolicy: PasswordPolicy; onUpdateUserPassword: ({ password, passwordConfirmation From 2affb747348671d5260c3a048a7ad0c52cf04482 Mon Sep 17 00:00:00 2001 From: tcsola Date: Thu, 26 Sep 2024 13:15:26 +0900 Subject: [PATCH 05/22] refactor: no need type --- web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx index e94259bbb..521df33db 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx @@ -40,7 +40,6 @@ const AccountAndWorkSpaceSetting: FC = ({ tab }) => { [t] ); const { meData, passwordPolicy, handleUpdateUserPassword } = useHook(); - console.log(meData); const { name, email } = meData; return ( From 34aeb4da685bfa4953d5dc193a432992f8690ae4 Mon Sep 17 00:00:00 2001 From: tcsola Date: Thu, 26 Sep 2024 13:21:04 +0900 Subject: [PATCH 06/22] refactor: resolve more advice by bot --- .../features/AccountAndWorkSpaceSetting/index.tsx | 9 ++------- .../AccountSetting/PasswordModal/index.tsx | 15 ++------------- .../innerPages/AccountSetting/index.tsx | 10 +++++----- 3 files changed, 9 insertions(+), 25 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx index 521df33db..6c3c0fa11 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx @@ -44,12 +44,7 @@ const AccountAndWorkSpaceSetting: FC = ({ tab }) => { return ( - + @@ -72,7 +67,7 @@ const AccountAndWorkSpaceSetting: FC = ({ tab }) => { )} diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx index 14f3802b6..cb71d1a96 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx @@ -22,18 +22,7 @@ export type PasswordPolicy = { }; type Props = { - className?: string; - project?: { - id: string; - name: string; - isArchived: boolean; - }; - workspace?: { - id: string; - name: string; - }; isVisible: boolean; - archiveProject?: (archived: boolean) => void; onClose?: () => void; passwordPolicy?: PasswordPolicy; updatePassword?: ({ @@ -85,7 +74,7 @@ const PasswordModal: React.FC = ({ break; } }, - [t, password] // eslint-disable-line react-hooks/exhaustive-deps + [t, password, passwordPolicy] // eslint-disable-line react-hooks/exhaustive-deps ); const handleClose = useCallback(() => { @@ -171,7 +160,7 @@ const PasswordModal: React.FC = ({ - "repeatPassword" Passwords need to match. + {t('"repeatPassword" Passwords need to match')} ) : undefined} diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx index f517b5e84..dc07fa66a 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx @@ -16,8 +16,8 @@ import { InnerPage, SettingsWrapper, SettingsFields } from "../common"; import PasswordModal from "./PasswordModal"; type Props = { - imformationData: { name?: string; email?: string }; - passwordPolicy: PasswordPolicy; + informationData: { name?: string; email?: string }; + passwordPolicy?: PasswordPolicy; onUpdateUserPassword: ({ password, passwordConfirmation @@ -27,7 +27,7 @@ type Props = { const AccountSetting: FC = ({ passwordPolicy, onUpdateUserPassword, - imformationData + informationData }) => { const t = useT(); const [onPasswordModalClose, setPasswordModalOnClose] = @@ -40,13 +40,13 @@ const AccountSetting: FC = ({ From 93d141e17f6506a7c96779efd840b1366a57d56b Mon Sep 17 00:00:00 2001 From: tcsola Date: Thu, 26 Sep 2024 16:21:05 +0900 Subject: [PATCH 07/22] refactor: update i18n --- web/src/services/i18n/translations/en.yml | 29 +++++++++++++++++++---- web/src/services/i18n/translations/ja.yml | 29 +++++++++++++++++++---- 2 files changed, 50 insertions(+), 8 deletions(-) diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml index 0504c4f3b..4c442778f 100644 --- a/web/src/services/i18n/translations/en.yml +++ b/web/src/services/i18n/translations/en.yml @@ -1,6 +1,25 @@ You have passed the maximum value.: '' You have passed the minimum value.: '' Not found: '' +Account: '' +Name: '' +Email address: '' +Password: '' +'**********': '' +No whitespace is allowed.: '' +Too short.: '' +That is terribly long.: '' +That password is great!: '' +That password is better.: '' +That password is okay.: '' +That password confuses me, but might be okay.: '' +Change password: '' +In order to protect your account, make sure your password is unique and strong.: '' +New password: '' +New password (for confirmation): '' +'"repeatPassword" Passwords need to match': '' +Notice: '' +Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings.: '' Select Asset: '' Last Uploaded: '' First Uploaded: '' @@ -12,7 +31,6 @@ Upload File: '' Search in all assets library: '' Assets selected: '' Asset selected: '' -Name: '' Uploaded At: '' Size: '' No Asset has been uploaded yet: '' @@ -41,6 +59,7 @@ Starred: '' Switch WorkSpace: '' Personal: '' Team Workspace: '' +Account Settings: '' Log Out: '' Re:Earth Visualizer: '' Page: '' @@ -159,6 +178,7 @@ Align System: '' Widget Manager: '' Project settings: '' Plugin: '' +Visualizer: '' Unknown: '' Switch workspace: '' Log out: '' @@ -167,10 +187,8 @@ Map: '' Widgets: '' Error: '' Warning: '' -Notice: '' You have reached a policy limit. Please contact an administrator of your Re:Earth system.: '' Something went wrong. Please try again later.: '' -Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings.: '' Project Info: '' Thumbnail: '' Submit: '' @@ -201,7 +219,6 @@ Public Info: '' Basic Authorization: '' Enable Basic Authorization: '' Username: '' -Password: '' Site Setting: '' Site name: '' You are about to change the site name for your project. Only alphanumeric characters and hyphens are allows.: '' @@ -320,6 +337,10 @@ Failed to update the layerStyle.: '' Successfully updated a the layerStyle!: '' Failed to delete the layer style.: '' Successfully deleted the layer style!: '' +Failed to update user password.: '' +Successfully updated user password!: '' +Failed to delete user.: '' +Successfully delete user!: '' Failed to install plugin.: '' Successfully installed plugin!: '' Failed to upgrade plugin.: '' diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml index 5191641bc..9d824e988 100644 --- a/web/src/services/i18n/translations/ja.yml +++ b/web/src/services/i18n/translations/ja.yml @@ -1,6 +1,25 @@ You have passed the maximum value.: '' You have passed the minimum value.: '' Not found: ページが見つかりません +Account: '' +Name: 名前 +Email address: '' +Password: パスワード +'**********': '' +No whitespace is allowed.: '' +Too short.: '' +That is terribly long.: '' +That password is great!: '' +That password is better.: '' +That password is okay.: '' +That password confuses me, but might be okay.: '' +Change password: '' +In order to protect your account, make sure your password is unique and strong.: '' +New password: '' +New password (for confirmation): '' +'"repeatPassword" Passwords need to match': '' +Notice: 通知 +Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings.: プロジェクトをアーカイブ化すると、削除とアーカイブ化解除以外の編集は行えません。再度編集可能な状態にするには、プロジェクトのアーカイブ化を解除してください。 Select Asset: '' Last Uploaded: 昇順（アップロード日） First Uploaded: 降順（アップロード日） @@ -12,7 +31,6 @@ Upload File: '' Search in all assets library: '' Assets selected: '' Asset selected: '' -Name: 名前 Uploaded At: '' Size: '' No Asset has been uploaded yet: '' @@ -41,6 +59,7 @@ Starred: '' Switch WorkSpace: '' Personal: '' Team Workspace: '' +Account Settings: '' Log Out: '' Re:Earth Visualizer: '' Page: ページ @@ -159,6 +178,7 @@ Align System: アラインシステム Widget Manager: ウィジェット管理 Project settings: プロジェクト設定 Plugin: プラグイン +Visualizer: '' Unknown: 不明 Switch workspace: '' Log out: ログアウト @@ -167,10 +187,8 @@ Map: マップ Widgets: ウィジェット Error: エラー Warning: 注意 -Notice: 通知 You have reached a policy limit. Please contact an administrator of your Re:Earth system.: 現在のポリシーの上限に達しました。システム管理者にお問い合わせください。 Something went wrong. Please try again later.: 何らかの問題が発生しました。しばらく経ってからお試しください。 -Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings.: プロジェクトをアーカイブ化すると、削除とアーカイブ化解除以外の編集は行えません。再度編集可能な状態にするには、プロジェクトのアーカイブ化を解除してください。 Project Info: プロジェクト情報 Thumbnail: サムネイル画像 Submit: 反映 @@ -201,7 +219,6 @@ Public Info: 公開詳細設定 Basic Authorization: ベーシック認証 Enable Basic Authorization: ベーシック認証を有効化 Username: ユーザー名 -Password: パスワード Site Setting: サイト設定 Site name: サイト名 You are about to change the site name for your project. Only alphanumeric characters and hyphens are allows.: プロジェクト公開ページのサイト名を変更します。アルファベットとハイフン(-)のみ利用可能です。 @@ -320,6 +337,10 @@ Failed to update the layerStyle.: レイヤースタイルのアップデート Successfully updated a the layerStyle!: レイヤースタイルのアップデートに成功しました！ Failed to delete the layer style.: '' Successfully deleted the layer style!: '' +Failed to update user password.: '' +Successfully updated user password!: '' +Failed to delete user.: '' +Successfully delete user!: '' Failed to install plugin.: プラグインのインストールに失敗しました。 Successfully installed plugin!: プラグインがインストールされました。 Failed to upgrade plugin.: プラグインのアップグレードに失敗しました。 From 65e8f09467a9f1f3023eebc74f254ec1b7938c5c Mon Sep 17 00:00:00 2001 From: tcsola Date: Mon, 30 Sep 2024 12:31:18 +0900 Subject: [PATCH 08/22] refactor: rename closed function --- .../innerPages/AccountSetting/index.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx index dc07fa66a..4ffd6ad1b 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx @@ -30,8 +30,7 @@ const AccountSetting: FC = ({ informationData }) => { const t = useT(); - const [onPasswordModalClose, setPasswordModalOnClose] = - useState(true); + const [passwordModalClosed, setPasswordModalClosed] = useState(true); return ( @@ -64,7 +63,7 @@ const AccountSetting: FC = ({ appearance="secondary" icon="pencilSimple" onClick={() => { - setPasswordModalOnClose(!onPasswordModalClose); + setPasswordModalClosed(!passwordModalClosed); }} size="medium" hasBorder={true} @@ -76,9 +75,9 @@ const AccountSetting: FC = ({ setPasswordModalOnClose(!onPasswordModalClose)} + onClose={() => setPasswordModalClosed(!passwordModalClosed)} updatePassword={onUpdateUserPassword} /> From 280b8f1fb23710a13d0c1de3c3969bb9889b4f83 Mon Sep 17 00:00:00 2001 From: tcsola Date: Mon, 30 Sep 2024 12:37:55 +0900 Subject: [PATCH 09/22] refactor: setPasswordModalClosed directly --- .../innerPages/AccountSetting/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx index 4ffd6ad1b..45a4785bf 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx @@ -77,7 +77,7 @@ const AccountSetting: FC = ({ setPasswordModalClosed(!passwordModalClosed)} + onClose={() => setPasswordModalClosed(true)} updatePassword={onUpdateUserPassword} /> From 90e2bc8a8a39fbd581458a520610f47b29614b4a Mon Sep 17 00:00:00 2001 From: tcsola Date: Mon, 30 Sep 2024 12:39:58 +0900 Subject: [PATCH 10/22] refactor: don't need to translate **** --- .../innerPages/AccountSetting/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx index 45a4785bf..fab9eec04 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx @@ -54,7 +54,7 @@ const AccountSetting: FC = ({ {t("Password")} = ({ appearance="secondary" icon="pencilSimple" onClick={() => { - setPasswordModalClosed(!passwordModalClosed); + setPasswordModalClosed(false); }} size="medium" hasBorder={true} From a42d912b14f614d1b765b9edc871c7c424b055ef Mon Sep 17 00:00:00 2001 From: tcsola Date: Mon, 30 Sep 2024 12:44:15 +0900 Subject: [PATCH 11/22] refactor: change name for onPasswordUpdate --- .../innerPages/AccountSetting/PasswordModal/index.tsx | 8 ++++---- .../innerPages/AccountSetting/index.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx index cb71d1a96..60406f095 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx @@ -25,7 +25,7 @@ type Props = { isVisible: boolean; onClose?: () => void; passwordPolicy?: PasswordPolicy; - updatePassword?: ({ + onPasswordUpdate?: ({ password, passwordConfirmation }: { @@ -38,7 +38,7 @@ const PasswordModal: React.FC = ({ isVisible, onClose, passwordPolicy, - updatePassword + onPasswordUpdate }) => { const t = useT(); @@ -85,10 +85,10 @@ const PasswordModal: React.FC = ({ const handleSave = useCallback(() => { if (password === passwordConfirmation) { - updatePassword?.({ password, passwordConfirmation }); + onPasswordUpdate?.({ password, passwordConfirmation }); handleClose(); } - }, [updatePassword, handleClose, password, passwordConfirmation]); + }, [onPasswordUpdate, handleClose, password, passwordConfirmation]); useEffect(() => { if ( diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx index fab9eec04..e2e51a780 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx @@ -78,7 +78,7 @@ const AccountSetting: FC = ({ isVisible={!passwordModalClosed} passwordPolicy={passwordPolicy} onClose={() => setPasswordModalClosed(true)} - updatePassword={onUpdateUserPassword} + onPasswordUpdate={onUpdateUserPassword} /> ); From 103485c7cd5bf7d89311aad838af5c1edb00e574 Mon Sep 17 00:00:00 2001 From: tcsola Date: Mon, 30 Sep 2024 12:48:45 +0900 Subject: [PATCH 12/22] refactor: change password not in useCallback --- .../innerPages/AccountSetting/PasswordModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx index 60406f095..2f93f657f 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx @@ -74,7 +74,7 @@ const PasswordModal: React.FC = ({ break; } }, - [t, password, passwordPolicy] // eslint-disable-line react-hooks/exhaustive-deps + [t, passwordPolicy] ); const handleClose = useCallback(() => { From 495dced0d6f017c0d41f2aabea02b61356c344af Mon Sep 17 00:00:00 2001 From: tcsola Date: Mon, 30 Sep 2024 12:58:28 +0900 Subject: [PATCH 13/22] refactor: use theme color --- .../AccountSetting/PasswordModal/index.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx index 2f93f657f..2bee899e7 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx @@ -9,7 +9,7 @@ import { } from "@reearth/beta/lib/reearth-ui"; import { metricsSizes } from "@reearth/beta/utils/metrics"; import { useT } from "@reearth/services/i18n"; -import { styled } from "@reearth/services/theme"; +import { styled, useTheme } from "@reearth/services/theme"; import React, { useState, useCallback, useEffect } from "react"; export type PasswordPolicy = { @@ -41,6 +41,7 @@ const PasswordModal: React.FC = ({ onPasswordUpdate }) => { const t = useT(); + const theme = useTheme(); const [password, setPassword] = useState(""); const [regexMessage, setRegexMessage] = useState(); @@ -156,9 +157,17 @@ const PasswordModal: React.FC = ({ type="password" /> {isMatchPassword ? ( - + - + {t('"repeatPassword" Passwords need to match')} From bfe46f3e8a94c6c98880f376c16256a5a55c26e1 Mon Sep 17 00:00:00 2001 From: tcsola Date: Mon, 30 Sep 2024 13:02:00 +0900 Subject: [PATCH 14/22] refactor: delete useless export from common --- .../innerPages/common.tsx | 25 ------------------- 1 file changed, 25 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/common.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/common.tsx index c08ab6222..4a4ac5fc8 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/common.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/common.tsx @@ -1,5 +1,3 @@ -import { Collapse, Typography } from "@reearth/beta/lib/reearth-ui"; -import { useT } from "@reearth/services/i18n"; import { styled } from "@reearth/services/theme"; export const InnerPage = styled("div")<{ @@ -49,31 +47,8 @@ export const SettingsRowItem = styled("div")(() => ({ width: "100%" })); -export const Thumbnail = styled("div")<{ src?: string }>(({ src, theme }) => ({ - width: "100%", - paddingBottom: "52.3%", - fontSize: 0, - background: src - ? `url(${src}) center/contain no-repeat` - : theme.relative.dark, - borderRadius: theme.radius.small -})); - export const ButtonWrapper = styled("div")(({ theme }) => ({ display: "flex", justifyContent: "flex-end", gap: theme.spacing.small })); - -export const ArchivedSettingNotice: React.FC = () => { - const t = useT(); - return ( - - - {t( - "Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings." - )} - - - ); -}; From a431d2297da2511f6772fac437ec327fd69dc38a Mon Sep 17 00:00:00 2001 From: tcsola Date: Mon, 30 Sep 2024 13:11:26 +0900 Subject: [PATCH 15/22] feat: add color to RegexMessage --- .../AccountSetting/PasswordModal/index.tsx | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx index 2bee899e7..ae6971ea8 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx @@ -45,6 +45,9 @@ const PasswordModal: React.FC = ({ const [password, setPassword] = useState(""); const [regexMessage, setRegexMessage] = useState(); + const [regexMessageColor, setRegexMessageColor] = useState< + string | undefined + >(); const [passwordConfirmation, setPasswordConfirmation] = useState(); const [disabled, setDisabled] = useState(true); @@ -54,28 +57,34 @@ const PasswordModal: React.FC = ({ switch (true) { case passwordPolicy?.whitespace?.test(password ?? ""): setRegexMessage(t("No whitespace is allowed.")); + setRegexMessageColor(theme.warning.main); break; case passwordPolicy?.tooShort?.test(password ?? ""): setRegexMessage(t("Too short.")); + setRegexMessageColor(theme.warning.main); break; case passwordPolicy?.tooLong?.test(password ?? ""): setRegexMessage(t("That is terribly long.")); + setRegexMessageColor(theme.warning.main); break; case passwordPolicy?.highSecurity?.test(password ?? ""): setRegexMessage(t("That password is great!")); + setRegexMessageColor(theme.primary.main); break; case passwordPolicy?.medSecurity?.test(password ?? ""): - setRegexMessage(t("That password is better.")); + setRegexMessage(t("That password need more security.")); + setRegexMessageColor(theme.warning.main); break; case passwordPolicy?.lowSecurity?.test(password ?? ""): - setRegexMessage(t("That password is okay.")); + setRegexMessage(t("That password is low security.")); + setRegexMessageColor(theme.dangerous.main); break; default: setRegexMessage(t("That password confuses me, but might be okay.")); break; } }, - [t, passwordPolicy] + [t, passwordPolicy, theme] ); const handleClose = useCallback(() => { @@ -142,7 +151,11 @@ const PasswordModal: React.FC = ({ type="password" /> {password ? ( - + {regexMessage} ) : undefined} From 7b82f8cad5f29e78af4919388373919819c1ab73 Mon Sep 17 00:00:00 2001 From: tcsola Date: Mon, 30 Sep 2024 13:25:31 +0900 Subject: [PATCH 16/22] refactor: delete useless div and sub title weight to regular --- .../AccountSetting/PasswordModal/index.tsx | 108 ++++++++---------- 1 file changed, 50 insertions(+), 58 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx index ae6971ea8..79e905844 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx @@ -133,60 +133,56 @@ const PasswordModal: React.FC = ({ ]} > -
- - - {t( - `In order to protect your account, make sure your password is unique and strong.` - )} - - - - - {t("New password")} - - - {password ? ( - - {regexMessage} - - ) : undefined} - - - - {t("New password (for confirmation)")} - - - {isMatchPassword ? ( - - - - - {t('"repeatPassword" Passwords need to match')} - - ) : undefined} - -
+ + {t( + `In order to protect your account, make sure your password is unique and strong.` + )} + + + + {t("New password")} + + + {password ? ( + + {regexMessage} + + ) : undefined} + + + + {t("New password (for confirmation)")} + + + {isMatchPassword ? ( + + + + + {t('"repeatPassword" Passwords need to match')} + + ) : undefined} + @@ -201,10 +197,6 @@ const ModalContentWrapper = styled("div")(({ theme }) => ({ background: theme.bg[1] })); -const SubText = styled.div` - margin: ${({ theme }) => `${theme.spacing.large}px auto`}; -`; - const PasswordField = styled(Flex)` height: 50px; transition: all 0.2s; From c56e8477754af4e790e31852f7e57ec1d62eb6fa Mon Sep 17 00:00:00 2001 From: tcsola Date: Mon, 30 Sep 2024 13:29:09 +0900 Subject: [PATCH 17/22] refactor: update translate --- web/src/services/i18n/translations/en.yml | 9 ++++----- web/src/services/i18n/translations/ja.yml | 9 ++++----- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml index 4c442778f..fdb1da0cb 100644 --- a/web/src/services/i18n/translations/en.yml +++ b/web/src/services/i18n/translations/en.yml @@ -5,21 +5,18 @@ Account: '' Name: '' Email address: '' Password: '' -'**********': '' No whitespace is allowed.: '' Too short.: '' That is terribly long.: '' That password is great!: '' -That password is better.: '' -That password is okay.: '' +That password need more security.: '' +That password is low security.: '' That password confuses me, but might be okay.: '' Change password: '' In order to protect your account, make sure your password is unique and strong.: '' New password: '' New password (for confirmation): '' '"repeatPassword" Passwords need to match': '' -Notice: '' -Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings.: '' Select Asset: '' Last Uploaded: '' First Uploaded: '' @@ -187,8 +184,10 @@ Map: '' Widgets: '' Error: '' Warning: '' +Notice: '' You have reached a policy limit. Please contact an administrator of your Re:Earth system.: '' Something went wrong. Please try again later.: '' +Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings.: '' Project Info: '' Thumbnail: '' Submit: '' diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml index 9d824e988..5b747ca5f 100644 --- a/web/src/services/i18n/translations/ja.yml +++ b/web/src/services/i18n/translations/ja.yml @@ -5,21 +5,18 @@ Account: '' Name: 名前 Email address: '' Password: パスワード -'**********': '' No whitespace is allowed.: '' Too short.: '' That is terribly long.: '' That password is great!: '' -That password is better.: '' -That password is okay.: '' +That password need more security.: '' +That password is low security.: '' That password confuses me, but might be okay.: '' Change password: '' In order to protect your account, make sure your password is unique and strong.: '' New password: '' New password (for confirmation): '' '"repeatPassword" Passwords need to match': '' -Notice: 通知 -Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings.: プロジェクトをアーカイブ化すると、削除とアーカイブ化解除以外の編集は行えません。再度編集可能な状態にするには、プロジェクトのアーカイブ化を解除してください。 Select Asset: '' Last Uploaded: 昇順（アップロード日） First Uploaded: 降順（アップロード日） @@ -187,8 +184,10 @@ Map: マップ Widgets: ウィジェット Error: エラー Warning: 注意 +Notice: 通知 You have reached a policy limit. Please contact an administrator of your Re:Earth system.: 現在のポリシーの上限に達しました。システム管理者にお問い合わせください。 Something went wrong. Please try again later.: 何らかの問題が発生しました。しばらく経ってからお試しください。 +Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings.: プロジェクトをアーカイブ化すると、削除とアーカイブ化解除以外の編集は行えません。再度編集可能な状態にするには、プロジェクトのアーカイブ化を解除してください。 Project Info: プロジェクト情報 Thumbnail: サムネイル画像 Submit: 反映 From eb65c3925b28e0f6232860a70d6a5773515a1d3e Mon Sep 17 00:00:00 2001 From: tcsola Date: Tue, 1 Oct 2024 10:04:47 +0900 Subject: [PATCH 18/22] refactor: borderRadius use theme --- web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx index 6c3c0fa11..e4a593205 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/index.tsx @@ -91,11 +91,11 @@ const Wrapper = styled("div")(({ theme }) => ({ }, ["* ::-webkit-scrollbar-track"]: { background: theme.relative.darker, - borderRadius: "10px" + borderRadius: theme.radius.large }, ["* ::-webkit-scrollbar-thumb"]: { background: theme.relative.light, - borderRadius: "4px" + borderRadius: theme.radius.small }, ["* ::-webkit-scrollbar-thumb:hover"]: { background: theme.relative.lighter From 33bd09ddedc54c8a20e5fa3e1f9da6bdb9494f28 Mon Sep 17 00:00:00 2001 From: tcsola Date: Tue, 1 Oct 2024 10:14:39 +0900 Subject: [PATCH 19/22] refactor: refactor for font weight and style --- .../AccountSetting/PasswordModal/index.tsx | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx index 79e905844..7064104fd 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx @@ -133,32 +133,26 @@ const PasswordModal: React.FC = ({ ]} > - + {t( `In order to protect your account, make sure your password is unique and strong.` )} - - {t("New password")} - + {t("New password")} {password ? ( - + {regexMessage} ) : undefined} - + {t("New password (for confirmation)")} Date: Tue, 1 Oct 2024 10:17:49 +0900 Subject: [PATCH 20/22] refactor: delete useless span --- .../AccountSetting/PasswordModal/index.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx index 7064104fd..bf0b412f0 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx @@ -166,13 +166,11 @@ const PasswordModal: React.FC = ({ weight="regular" color={theme.dangerous.main} > - - - + {t('"repeatPassword" Passwords need to match')} ) : undefined} From 528ac026693a7a96c8a8a43b11b70df4cdfe1c8c Mon Sep 17 00:00:00 2001 From: tcsola Date: Tue, 1 Oct 2024 10:48:34 +0900 Subject: [PATCH 21/22] refactor: rename changePasswordModal --- .../innerPages/AccountSetting/index.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx index e2e51a780..9383b5657 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx @@ -30,7 +30,8 @@ const AccountSetting: FC = ({ informationData }) => { const t = useT(); - const [passwordModalClosed, setPasswordModalClosed] = useState(true); + const [changePasswordModal, setChangePasswordModal] = + useState(false); return ( @@ -63,7 +64,7 @@ const AccountSetting: FC = ({ appearance="secondary" icon="pencilSimple" onClick={() => { - setPasswordModalClosed(false); + setChangePasswordModal(true); }} size="medium" hasBorder={true} @@ -75,9 +76,9 @@ const AccountSetting: FC = ({ setPasswordModalClosed(true)} + onClose={() => setChangePasswordModal(false)} onPasswordUpdate={onUpdateUserPassword} /> From 70b9d672e6a9e5809da267d648fd7b006b46de05 Mon Sep 17 00:00:00 2001 From: tcsola Date: Tue, 1 Oct 2024 12:16:37 +0900 Subject: [PATCH 22/22] refactor: add margin for label --- .../AccountSetting/PasswordModal/index.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx index bf0b412f0..735f5b02c 100644 --- a/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx +++ b/web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx @@ -189,13 +189,16 @@ const ModalContentWrapper = styled("div")(({ theme }) => ({ background: theme.bg[1] })); -const PasswordField = styled(Flex)` - height: 50px; - transition: all 0.2s; - &:has(p ~ p) { - height: 68px; +const PasswordField = styled(Flex)(({ theme }) => ({ + height: "50px", + transition: "all 0.2s", + "& > *:first-child": { + marginBottom: theme.spacing.small + }, + "&:has(p ~ p)": { + height: "68px" } -`; +})); const PasswordMessage = styled(Typography)` margin-top: ${metricsSizes["s"]}px;