@greatapps/common 1.1.346 → 1.1.348

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,143 +1,28 @@
1
1
  "use client";
2
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
- import { useState, useCallback } from "react";
4
- import { IconLock, IconTool } from "@tabler/icons-react";
5
- import { Badge } from "../../ui/data-display/Badge";
6
- import { Button } from "../../ui/buttons/Button";
7
- import { useAuth } from "../../../providers/auth.provider";
8
- import { useQueryClient } from "@tanstack/react-query";
9
- import { USER_QUERY_KEY } from "../../../modules/auth/hooks/useUserQuery";
10
- import { AccountSectionType } from "../../../enums/AccountSectionType";
11
- import TwoFactorAuthModal from "../TwoFactorAuthModal";
12
- import DisableTwoFactorAuthModal from "../DisableTwoFactorAuthModal";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { IconAlertTriangle } from "@tabler/icons-react";
13
4
  function SecuritySection({
14
- setActiveSection,
15
5
  onClose,
16
6
  onDeleteAccount
17
7
  }) {
18
- const { user } = useAuth();
19
- const queryClient = useQueryClient();
20
- const twoFactorAuth = user?.two_factor_authentication ?? false;
21
- const [twoFactorOpen, setTwoFactorOpen] = useState(false);
22
- const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);
23
- const handleToggleTwoFactor = useCallback(() => {
24
- if (twoFactorAuth) {
25
- setDisableTwoFactorOpen(true);
26
- } else {
27
- setTwoFactorOpen(true);
28
- }
29
- }, [twoFactorAuth]);
30
- const handleDisableTwoFactorSuccess = useCallback(() => {
31
- queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
32
- setDisableTwoFactorOpen(false);
33
- }, [queryClient]);
34
- const handleEnableTwoFactorSuccess = useCallback(() => {
35
- queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
36
- setTwoFactorOpen(false);
37
- }, [queryClient]);
38
- const handleDeleteAccount = useCallback(() => {
39
- onDeleteAccount?.();
40
- }, [onDeleteAccount]);
41
- return /* @__PURE__ */ jsxs(Fragment, { children: [
42
- /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto", children: [
43
- /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 hidden lg:block", children: "Seguran\xE7a" }),
44
- /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [
45
- /* @__PURE__ */ jsxs(
46
- "div",
47
- {
48
- className: "flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors",
49
- onClick: handleToggleTwoFactor,
50
- children: [
51
- /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-start lg:items-center gap-4 lg:gap-5", children: [
52
- /* @__PURE__ */ jsx("div", { className: "size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(IconTool, { size: 20, className: "text-gray-950" }) }),
53
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 flex-1", children: [
54
- /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
55
- /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: "Autentica\xE7\xE3o de dois fatores" }),
56
- /* @__PURE__ */ jsx(
57
- Badge,
58
- {
59
- className: `paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? "text-green-600 bg-green-50" : "text-gray-600 bg-gray-50"}`,
60
- children: twoFactorAuth ? "Habilitado" : "Desabilitado"
61
- }
62
- )
63
- ] }),
64
- /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: "Envio de c\xF3digo de seguran\xE7a (e-mail ou sms) para o usu\xE1rio acessar o sistema" })
65
- ] })
66
- ] }),
67
- /* @__PURE__ */ jsx(
68
- Button,
69
- {
70
- variant: "secondary",
71
- className: "h-10! shrink-0 w-full lg:w-auto",
72
- onClick: (e) => {
73
- e.stopPropagation();
74
- handleToggleTwoFactor();
75
- },
76
- children: twoFactorAuth ? "Desabilitar" : "Habilitar"
77
- }
78
- )
79
- ]
80
- }
81
- ),
82
- /* @__PURE__ */ jsxs(
83
- "div",
84
- {
85
- className: "flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors",
86
- onClick: () => setActiveSection(AccountSectionType.CHANGE_PASSWORD),
87
- children: [
88
- /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-start lg:items-center gap-4 lg:gap-5", children: [
89
- /* @__PURE__ */ jsx("div", { className: "size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(IconLock, { size: 20, className: "text-gray-950" }) }),
90
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 flex-1", children: [
91
- /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: "Alterar senha de acesso" }),
92
- /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: "Atualize sua senha sempre que necess\xE1rio para manter sua conta segura." })
93
- ] })
94
- ] }),
95
- /* @__PURE__ */ jsx(
96
- Button,
97
- {
98
- variant: "secondary",
99
- className: "h-10! shrink-0 w-full lg:w-auto",
100
- onClick: (e) => {
101
- e.stopPropagation();
102
- setActiveSection(AccountSectionType.CHANGE_PASSWORD);
103
- },
104
- children: "Alterar senha"
105
- }
106
- )
107
- ]
108
- }
109
- )
8
+ return /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto", children: [
9
+ /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 hidden lg:block", children: "Seguran\xE7a" }),
10
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center lg:items-start gap-4", children: [
11
+ /* @__PURE__ */ jsx("div", { className: "size-10 rounded-lg bg-red-50 flex items-center justify-center", children: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 20, className: "text-red-500" }) }),
12
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
13
+ /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: "Excluir conta" }),
14
+ /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: "Esta a\xE7\xE3o \xE9 permanente e n\xE3o pode ser desfeita. Todos os seus dados, projetos e configura\xE7\xF5es ser\xE3o removidos definitivamente." })
110
15
  ] }),
111
16
  onDeleteAccount && /* @__PURE__ */ jsx(
112
17
  "button",
113
18
  {
114
19
  type: "button",
115
20
  className: "paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit",
116
- onClick: handleDeleteAccount,
21
+ onClick: onDeleteAccount,
117
22
  children: "Excluir minha conta"
118
23
  }
119
24
  )
120
- ] }),
121
- /* @__PURE__ */ jsxs("div", { className: "fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10", children: [
122
- /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: onClose, children: "Cancelar" }),
123
- /* @__PURE__ */ jsx(Button, { className: "h-10!", onClick: onClose, children: "Salvar altera\xE7\xF5es" })
124
- ] }),
125
- /* @__PURE__ */ jsx(
126
- DisableTwoFactorAuthModal,
127
- {
128
- open: disableTwoFactorOpen,
129
- onClose: () => setDisableTwoFactorOpen(false),
130
- onSuccess: handleDisableTwoFactorSuccess
131
- }
132
- ),
133
- /* @__PURE__ */ jsx(
134
- TwoFactorAuthModal,
135
- {
136
- open: twoFactorOpen,
137
- onClose: () => setTwoFactorOpen(false),
138
- onSuccess: handleEnableTwoFactorSuccess
139
- }
140
- )
25
+ ] })
141
26
  ] });
142
27
  }
143
28
  export {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/account/sections/SecuritySection.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useCallback } from 'react';\nimport { IconLock, IconTool } from '@tabler/icons-react';\nimport { Badge } from '../../ui/data-display/Badge';\nimport { Button } from '../../ui/buttons/Button';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';\nimport { AccountSectionType } from '../../../enums/AccountSectionType';\nimport TwoFactorAuthModal from '../TwoFactorAuthModal';\nimport DisableTwoFactorAuthModal from '../DisableTwoFactorAuthModal';\n\ninterface SecuritySectionProps {\n setActiveSection: (section: AccountSectionType) => void;\n onClose: () => void;\n onDeleteAccount?: () => void;\n}\n\nexport function SecuritySection({\n setActiveSection,\n onClose,\n onDeleteAccount,\n}: SecuritySectionProps) {\n const { user } = useAuth();\n const queryClient = useQueryClient();\n\n const twoFactorAuth = user?.two_factor_authentication ?? false;\n const [twoFactorOpen, setTwoFactorOpen] = useState(false);\n const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);\n\n const handleToggleTwoFactor = useCallback(() => {\n if (twoFactorAuth) {\n setDisableTwoFactorOpen(true);\n } else {\n setTwoFactorOpen(true);\n }\n }, [twoFactorAuth]);\n\n const handleDisableTwoFactorSuccess = useCallback(() => {\n queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });\n setDisableTwoFactorOpen(false);\n }, [queryClient]);\n\n const handleEnableTwoFactorSuccess = useCallback(() => {\n queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });\n setTwoFactorOpen(false);\n }, [queryClient]);\n\n const handleDeleteAccount = useCallback(() => {\n onDeleteAccount?.();\n }, [onDeleteAccount]);\n\n return (\n <>\n <div className=\"h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto\">\n <span className=\"paragraph-medium-semibold text-gray-950 hidden lg:block\">Segurança</span>\n\n <div className=\"border border-gray-200 rounded-lg overflow-hidden\">\n <div\n className=\"flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors\"\n onClick={handleToggleTwoFactor}\n >\n <div className=\"flex flex-1 items-start lg:items-center gap-4 lg:gap-5\">\n <div className=\"size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0\">\n <IconTool size={20} className=\"text-gray-950\" />\n </div>\n <div className=\"flex flex-col gap-1.5 flex-1\">\n <div className=\"flex flex-wrap items-center gap-2\">\n <span className=\"paragraph-small-semibold text-gray-950\">\n Autenticação de dois fatores\n </span>\n <Badge\n className={`paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? 'text-green-600 bg-green-50' : 'text-gray-600 bg-gray-50'}`}\n >\n {twoFactorAuth ? 'Habilitado' : 'Desabilitado'}\n </Badge>\n </div>\n <span className=\"paragraph-small-regular text-gray-600\">\n Envio de código de segurança (e-mail ou sms) para o usuário acessar o sistema\n </span>\n </div>\n </div>\n <Button\n variant=\"secondary\"\n className=\"h-10! shrink-0 w-full lg:w-auto\"\n onClick={(e) => {\n e.stopPropagation();\n handleToggleTwoFactor();\n }}\n >\n {twoFactorAuth ? 'Desabilitar' : 'Habilitar'}\n </Button>\n </div>\n\n <div\n className=\"flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors\"\n onClick={() => setActiveSection(AccountSectionType.CHANGE_PASSWORD)}\n >\n <div className=\"flex flex-1 items-start lg:items-center gap-4 lg:gap-5\">\n <div className=\"size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0\">\n <IconLock size={20} className=\"text-gray-950\" />\n </div>\n <div className=\"flex flex-col gap-1.5 flex-1\">\n <span className=\"paragraph-small-semibold text-gray-950\">\n Alterar senha de acesso\n </span>\n <span className=\"paragraph-small-regular text-gray-600\">\n Atualize sua senha sempre que necessário para manter sua conta segura.\n </span>\n </div>\n </div>\n <Button\n variant=\"secondary\"\n className=\"h-10! shrink-0 w-full lg:w-auto\"\n onClick={(e) => {\n e.stopPropagation();\n setActiveSection(AccountSectionType.CHANGE_PASSWORD);\n }}\n >\n Alterar senha\n </Button>\n </div>\n </div>\n\n {onDeleteAccount && (\n <button\n type=\"button\"\n className=\"paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit\"\n onClick={handleDeleteAccount}\n >\n Excluir minha conta\n </button>\n )}\n </div>\n\n <div className=\"fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10\">\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={onClose}>\n Cancelar\n </Button>\n <Button className=\"h-10!\" onClick={onClose}>\n Salvar alterações\n </Button>\n </div>\n\n <DisableTwoFactorAuthModal\n open={disableTwoFactorOpen}\n onClose={() => setDisableTwoFactorOpen(false)}\n onSuccess={handleDisableTwoFactorSuccess}\n />\n <TwoFactorAuthModal\n open={twoFactorOpen}\n onClose={() => setTwoFactorOpen(false)}\n onSuccess={handleEnableTwoFactorSuccess}\n />\n </>\n );\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../../../src/components/account/sections/SecuritySection.tsx"],"sourcesContent":["'use client';\n\nimport { IconAlertTriangle } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { AccountSectionType } from '../../../enums/AccountSectionType';\n\ninterface SecuritySectionProps {\n setActiveSection: (section: AccountSectionType) => void;\n onClose: () => void;\n onDeleteAccount?: () => void;\n}\n\nexport function SecuritySection({\n onClose,\n onDeleteAccount,\n}: SecuritySectionProps) {\n return (\n <div className=\"h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto\">\n <span className=\"paragraph-medium-semibold text-gray-950 hidden lg:block\">Segurança</span>\n\n <div className=\"flex flex-col items-center lg:items-start gap-4\">\n <div className=\"size-10 rounded-lg bg-red-50 flex items-center justify-center\">\n <IconAlertTriangle size={20} className=\"text-red-500\" />\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <span className=\"paragraph-medium-semibold text-gray-950\">Excluir conta</span>\n <span className=\"paragraph-small-regular text-gray-600\">\n Esta ação é permanente e não pode ser desfeita. Todos os seus dados, projetos e configurações serão removidos definitivamente.\n </span>\n </div>\n\n {onDeleteAccount && (\n <button\n type=\"button\"\n className=\"paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit\"\n onClick={onDeleteAccount}\n >\n Excluir minha conta\n </button>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";AAmBM,cAOE,YAPF;AAjBN,SAAS,yBAAyB;AAW3B,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAAyB;AACvB,SACE,qBAAC,SAAI,WAAU,gIACb;AAAA,wBAAC,UAAK,WAAU,2DAA0D,0BAAS;AAAA,IAEnF,qBAAC,SAAI,WAAU,mDACb;AAAA,0BAAC,SAAI,WAAU,iEACb,8BAAC,qBAAkB,MAAM,IAAI,WAAU,gBAAe,GACxD;AAAA,MAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,4BAAC,UAAK,WAAU,2CAA0C,2BAAa;AAAA,QACvE,oBAAC,UAAK,WAAU,yCAAwC,iKAExD;AAAA,SACF;AAAA,MAEC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS;AAAA,UACV;AAAA;AAAA,MAED;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greatapps/common",
3
- "version": "1.1.346",
3
+ "version": "1.1.348",
4
4
  "description": "Shared library for GreatApps frontend applications",
5
5
  "main": "./dist/index.mjs",
6
6
  "types": "./src/index.ts",
@@ -1,15 +1,9 @@
1
1
  'use client';
2
2
 
3
- import { useState, useCallback } from 'react';
4
- import { IconLock, IconTool } from '@tabler/icons-react';
5
- import { Badge } from '../../ui/data-display/Badge';
3
+ import { IconAlertTriangle } from '@tabler/icons-react';
6
4
  import { Button } from '../../ui/buttons/Button';
7
5
  import { useAuth } from '../../../providers/auth.provider';
8
- import { useQueryClient } from '@tanstack/react-query';
9
- import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
10
6
  import { AccountSectionType } from '../../../enums/AccountSectionType';
11
- import TwoFactorAuthModal from '../TwoFactorAuthModal';
12
- import DisableTwoFactorAuthModal from '../DisableTwoFactorAuthModal';
13
7
 
14
8
  interface SecuritySectionProps {
15
9
  setActiveSection: (section: AccountSectionType) => void;
@@ -18,141 +12,35 @@ interface SecuritySectionProps {
18
12
  }
19
13
 
20
14
  export function SecuritySection({
21
- setActiveSection,
22
15
  onClose,
23
16
  onDeleteAccount,
24
17
  }: SecuritySectionProps) {
25
- const { user } = useAuth();
26
- const queryClient = useQueryClient();
27
-
28
- const twoFactorAuth = user?.two_factor_authentication ?? false;
29
- const [twoFactorOpen, setTwoFactorOpen] = useState(false);
30
- const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);
31
-
32
- const handleToggleTwoFactor = useCallback(() => {
33
- if (twoFactorAuth) {
34
- setDisableTwoFactorOpen(true);
35
- } else {
36
- setTwoFactorOpen(true);
37
- }
38
- }, [twoFactorAuth]);
39
-
40
- const handleDisableTwoFactorSuccess = useCallback(() => {
41
- queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
42
- setDisableTwoFactorOpen(false);
43
- }, [queryClient]);
44
-
45
- const handleEnableTwoFactorSuccess = useCallback(() => {
46
- queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
47
- setTwoFactorOpen(false);
48
- }, [queryClient]);
49
-
50
- const handleDeleteAccount = useCallback(() => {
51
- onDeleteAccount?.();
52
- }, [onDeleteAccount]);
53
-
54
18
  return (
55
- <>
56
- <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
57
- <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">Segurança</span>
19
+ <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
20
+ <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">Segurança</span>
58
21
 
59
- <div className="border border-gray-200 rounded-lg overflow-hidden">
60
- <div
61
- className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors"
62
- onClick={handleToggleTwoFactor}
63
- >
64
- <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
65
- <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
66
- <IconTool size={20} className="text-gray-950" />
67
- </div>
68
- <div className="flex flex-col gap-1.5 flex-1">
69
- <div className="flex flex-wrap items-center gap-2">
70
- <span className="paragraph-small-semibold text-gray-950">
71
- Autenticação de dois fatores
72
- </span>
73
- <Badge
74
- className={`paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? 'text-green-600 bg-green-50' : 'text-gray-600 bg-gray-50'}`}
75
- >
76
- {twoFactorAuth ? 'Habilitado' : 'Desabilitado'}
77
- </Badge>
78
- </div>
79
- <span className="paragraph-small-regular text-gray-600">
80
- Envio de código de segurança (e-mail ou sms) para o usuário acessar o sistema
81
- </span>
82
- </div>
83
- </div>
84
- <Button
85
- variant="secondary"
86
- className="h-10! shrink-0 w-full lg:w-auto"
87
- onClick={(e) => {
88
- e.stopPropagation();
89
- handleToggleTwoFactor();
90
- }}
91
- >
92
- {twoFactorAuth ? 'Desabilitar' : 'Habilitar'}
93
- </Button>
94
- </div>
22
+ <div className="flex flex-col items-center lg:items-start gap-4">
23
+ <div className="size-10 rounded-lg bg-red-50 flex items-center justify-center">
24
+ <IconAlertTriangle size={20} className="text-red-500" />
25
+ </div>
95
26
 
96
- <div
97
- className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors"
98
- onClick={() => setActiveSection(AccountSectionType.CHANGE_PASSWORD)}
99
- >
100
- <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
101
- <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
102
- <IconLock size={20} className="text-gray-950" />
103
- </div>
104
- <div className="flex flex-col gap-1.5 flex-1">
105
- <span className="paragraph-small-semibold text-gray-950">
106
- Alterar senha de acesso
107
- </span>
108
- <span className="paragraph-small-regular text-gray-600">
109
- Atualize sua senha sempre que necessário para manter sua conta segura.
110
- </span>
111
- </div>
112
- </div>
113
- <Button
114
- variant="secondary"
115
- className="h-10! shrink-0 w-full lg:w-auto"
116
- onClick={(e) => {
117
- e.stopPropagation();
118
- setActiveSection(AccountSectionType.CHANGE_PASSWORD);
119
- }}
120
- >
121
- Alterar senha
122
- </Button>
123
- </div>
27
+ <div className="flex flex-col gap-2">
28
+ <span className="paragraph-medium-semibold text-gray-950">Excluir conta</span>
29
+ <span className="paragraph-small-regular text-gray-600">
30
+ Esta ação é permanente e não pode ser desfeita. Todos os seus dados, projetos e configurações serão removidos definitivamente.
31
+ </span>
124
32
  </div>
125
33
 
126
34
  {onDeleteAccount && (
127
35
  <button
128
36
  type="button"
129
37
  className="paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit"
130
- onClick={handleDeleteAccount}
38
+ onClick={onDeleteAccount}
131
39
  >
132
40
  Excluir minha conta
133
41
  </button>
134
42
  )}
135
43
  </div>
136
-
137
- <div className="fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10">
138
- <Button variant="secondary" className="h-10!" type="button" onClick={onClose}>
139
- Cancelar
140
- </Button>
141
- <Button className="h-10!" onClick={onClose}>
142
- Salvar alterações
143
- </Button>
144
- </div>
145
-
146
- <DisableTwoFactorAuthModal
147
- open={disableTwoFactorOpen}
148
- onClose={() => setDisableTwoFactorOpen(false)}
149
- onSuccess={handleDisableTwoFactorSuccess}
150
- />
151
- <TwoFactorAuthModal
152
- open={twoFactorOpen}
153
- onClose={() => setTwoFactorOpen(false)}
154
- onSuccess={handleEnableTwoFactorSuccess}
155
- />
156
- </>
44
+ </div>
157
45
  );
158
46
  }