diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 5e34ae19..59145c6f 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -240,6 +240,9 @@ "save": "Save", "edit_profile": "Edit Profile", "saved_successfully": "Saved successfully", - "try_again": "Please, try again" + "try_again": "Please, try again", + "signout_modal_title": "Are you sure?", + "cancel": "Cancel", + "signout": "Sign Out" } } diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json index eae07bfe..18ff1356 100644 --- a/src/locales/pt/translation.json +++ b/src/locales/pt/translation.json @@ -240,6 +240,9 @@ "save": "Salvar", "edit_profile": "Editar Perfil", "saved_successfully": "Salvo com sucesso", - "try_again": "Por favor, tente novamente" + "try_again": "Por favor, tente novamente", + "cancel": "Cancelar", + "signout": "Sair da conta", + "signout_modal_title": "Tem certeza?" } } diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx index 8c0db59a..5b4798e7 100644 --- a/src/renderer/src/pages/user/user-content.tsx +++ b/src/renderer/src/pages/user/user-content.tsx @@ -12,6 +12,7 @@ import { buildGameDetailsPath } from "@renderer/helpers"; import { PersonIcon, TelescopeIcon } from "@primer/octicons-react"; import { Button } from "@renderer/components"; import { UserEditProfileModal } from "./user-edit-modal"; +import { UserSignOutModal } from "./user-signout-modal"; const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120; @@ -29,6 +30,7 @@ export function UserContent({ const { userDetails, profileBackground, signOut } = useUserDetails(); const [showEditProfileModal, setShowEditProfileModal] = useState(false); + const [showSignOutModal, setShowSignOutModal] = useState(false); const navigate = useNavigate(); @@ -65,7 +67,7 @@ export function UserContent({ setShowEditProfileModal(true); }; - const handleSignout = async () => { + const handleConfirmSignout = async () => { signOut(); navigate("/"); }; @@ -87,6 +89,12 @@ export function UserContent({ userProfile={userProfile} /> + setShowSignOutModal(false)} + onConfirm={handleConfirmSignout} + /> +
- diff --git a/src/renderer/src/pages/user/user-signout-modal.tsx b/src/renderer/src/pages/user/user-signout-modal.tsx new file mode 100644 index 00000000..a6c40630 --- /dev/null +++ b/src/renderer/src/pages/user/user-signout-modal.tsx @@ -0,0 +1,37 @@ +import { Button, Modal } from "@renderer/components"; +import * as styles from "./user.css"; +import { useTranslation } from "react-i18next"; + +export interface UserEditProfileModalProps { + visible: boolean; + onConfirm: () => void; + onClose: () => void; +} + +export const UserSignOutModal = ({ + visible, + onConfirm, + onClose, +}: UserEditProfileModalProps) => { + const { t } = useTranslation("user_profile"); + + return ( + <> + +
+ + + +
+
+ + ); +}; diff --git a/src/renderer/src/pages/user/user.css.ts b/src/renderer/src/pages/user/user.css.ts index 4fa936ed..a74a4441 100644 --- a/src/renderer/src/pages/user/user.css.ts +++ b/src/renderer/src/pages/user/user.css.ts @@ -191,3 +191,11 @@ export const noDownloads = style({ flexDirection: "column", gap: `${SPACING_UNIT}px`, }); + +export const signOutModalButtonsContainer = style({ + display: "flex", + width: "100%", + justifyContent: "end", + alignItems: "center", + gap: `${SPACING_UNIT}px`, +});