@greatapps/common 1.1.209 → 1.1.211
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.
- package/dist/components/account/DisableTwoFactorAuthModal.mjs +1 -1
- package/dist/components/account/DisableTwoFactorAuthModal.mjs.map +1 -1
- package/dist/components/account/TwoFactorAuthModal.mjs +4 -2
- package/dist/components/account/TwoFactorAuthModal.mjs.map +1 -1
- package/dist/components/navigation/ProjectSelectorPopover.mjs +6 -8
- package/dist/components/navigation/ProjectSelectorPopover.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs +5 -8
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/account/DisableTwoFactorAuthModal.tsx +1 -1
- package/src/components/account/TwoFactorAuthModal.tsx +4 -2
- package/src/components/navigation/ProjectSelectorPopover.tsx +5 -11
- package/src/components/navigation/subcomponents/ProjectSelector.tsx +5 -12
|
@@ -17,7 +17,7 @@ function DisableTwoFactorAuthModal({
|
|
|
17
17
|
onSuccess
|
|
18
18
|
}) {
|
|
19
19
|
const { code, setCode, isValid, isLoading, handleClose, handleSubmit } = useDisableTwoFactorAuthForm({ onClose, onSuccess });
|
|
20
|
-
return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsx(DialogContent, { className: "flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-117.5! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!", children: /* @__PURE__ */ jsxs(
|
|
20
|
+
return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsx(DialogContent, { overlayClassName: "z-[1010]", className: "z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-117.5! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!", children: /* @__PURE__ */ jsxs(
|
|
21
21
|
"form",
|
|
22
22
|
{
|
|
23
23
|
onSubmit: (e) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/account/DisableTwoFactorAuthModal.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ShieldCheck } from 'lucide-react';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport {\r\n Dialog,\r\n DialogContent,\r\n DialogDescription,\r\n DialogHeader,\r\n DialogTitle,\r\n} from '../ui/overlay/Dialog';\r\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';\r\nimport useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';\r\n\r\ninterface DisableTwoFactorAuthModalProps {\r\n open: boolean;\r\n onClose: () => void;\r\n onSuccess?: () => void;\r\n}\r\n\r\nexport default function DisableTwoFactorAuthModal({\r\n open,\r\n onClose,\r\n onSuccess,\r\n}: DisableTwoFactorAuthModalProps) {\r\n const { code, setCode, isValid, isLoading, handleClose, handleSubmit } =\r\n useDisableTwoFactorAuthForm({ onClose, onSuccess });\r\n\r\n return (\r\n <Dialog open={open} onOpenChange={handleClose}>\r\n <DialogContent className=\"flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-117.5! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!\">\r\n <form\r\n onSubmit={(e) => {\r\n e.preventDefault();\r\n handleSubmit();\r\n }}\r\n className=\"flex flex-col flex-1 lg:flex-none\"\r\n >\r\n <div className=\"flex flex-col gap-4 lg:gap-5 p-4 lg:p-5 flex-1 lg:flex-none\">\r\n <div className=\"flex items-center justify-center w-fit bg-gray-50 rounded-lg p-2\">\r\n <ShieldCheck size={20} className=\"text-gray-600\" />\r\n </div>\r\n <DialogHeader className=\"p-0 gap-2\">\r\n <DialogTitle className=\"paragraph-medium-semibold text-gray-950\">\r\n Desabilitar autenticação 2FA\r\n </DialogTitle>\r\n <DialogDescription className=\"paragraph-small-regular text-gray-600\">\r\n Informe o código de 6 dígitos do seu aplicativo autenticador para confirmar a\r\n desativação.\r\n </DialogDescription>\r\n </DialogHeader>\r\n\r\n <div className=\"flex flex-col gap-2\">\r\n <span className=\"paragraph-small-medium text-gray-700\">Código do autenticador</span>\r\n <InputOTP maxLength={6} value={code} onChange={setCode}>\r\n <InputOTPGroup className=\"gap-2\">\r\n {Array.from({ length: 6 }).map((_, i) => (\r\n <InputOTPSlot\r\n key={i}\r\n index={i}\r\n className=\"w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200\"\r\n />\r\n ))}\r\n </InputOTPGroup>\r\n </InputOTP>\r\n </div>\r\n </div>\r\n\r\n <div className=\"flex flex-row items-center gap-2 p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\r\n <Button className=\"h-10! flex-1\" disabled={!isValid || isLoading} type=\"submit\">\r\n {isLoading ? 'Desabilitando...' : 'Desabilitar 2FA'}\r\n </Button>\r\n <Button\r\n variant=\"secondary\"\r\n className=\"h-10! flex-1\"\r\n type=\"button\"\r\n onClick={handleClose}\r\n >\r\n Cancelar\r\n </Button>\r\n </div>\r\n </form>\r\n </DialogContent>\r\n </Dialog>\r\n );\r\n}\r\n"],"mappings":";AAwCc,cAEF,YAFE;AAtCd,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU,eAAe,oBAAoB;AACtD,OAAO,iCAAiC;AAQzB,SAAR,0BAA2C;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,QAAM,EAAE,MAAM,SAAS,SAAS,WAAW,aAAa,aAAa,IACnE,4BAA4B,EAAE,SAAS,UAAU,CAAC;AAEpD,SACE,oBAAC,UAAO,MAAY,cAAc,aAChC,8BAAC,iBAAc,WAAU,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/account/DisableTwoFactorAuthModal.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ShieldCheck } from 'lucide-react';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport {\r\n Dialog,\r\n DialogContent,\r\n DialogDescription,\r\n DialogHeader,\r\n DialogTitle,\r\n} from '../ui/overlay/Dialog';\r\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';\r\nimport useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';\r\n\r\ninterface DisableTwoFactorAuthModalProps {\r\n open: boolean;\r\n onClose: () => void;\r\n onSuccess?: () => void;\r\n}\r\n\r\nexport default function DisableTwoFactorAuthModal({\r\n open,\r\n onClose,\r\n onSuccess,\r\n}: DisableTwoFactorAuthModalProps) {\r\n const { code, setCode, isValid, isLoading, handleClose, handleSubmit } =\r\n useDisableTwoFactorAuthForm({ onClose, onSuccess });\r\n\r\n return (\r\n <Dialog open={open} onOpenChange={handleClose}>\r\n <DialogContent overlayClassName=\"z-[1010]\" className=\"z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-117.5! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!\">\r\n <form\r\n onSubmit={(e) => {\r\n e.preventDefault();\r\n handleSubmit();\r\n }}\r\n className=\"flex flex-col flex-1 lg:flex-none\"\r\n >\r\n <div className=\"flex flex-col gap-4 lg:gap-5 p-4 lg:p-5 flex-1 lg:flex-none\">\r\n <div className=\"flex items-center justify-center w-fit bg-gray-50 rounded-lg p-2\">\r\n <ShieldCheck size={20} className=\"text-gray-600\" />\r\n </div>\r\n <DialogHeader className=\"p-0 gap-2\">\r\n <DialogTitle className=\"paragraph-medium-semibold text-gray-950\">\r\n Desabilitar autenticação 2FA\r\n </DialogTitle>\r\n <DialogDescription className=\"paragraph-small-regular text-gray-600\">\r\n Informe o código de 6 dígitos do seu aplicativo autenticador para confirmar a\r\n desativação.\r\n </DialogDescription>\r\n </DialogHeader>\r\n\r\n <div className=\"flex flex-col gap-2\">\r\n <span className=\"paragraph-small-medium text-gray-700\">Código do autenticador</span>\r\n <InputOTP maxLength={6} value={code} onChange={setCode}>\r\n <InputOTPGroup className=\"gap-2\">\r\n {Array.from({ length: 6 }).map((_, i) => (\r\n <InputOTPSlot\r\n key={i}\r\n index={i}\r\n className=\"w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200\"\r\n />\r\n ))}\r\n </InputOTPGroup>\r\n </InputOTP>\r\n </div>\r\n </div>\r\n\r\n <div className=\"flex flex-row items-center gap-2 p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\r\n <Button className=\"h-10! flex-1\" disabled={!isValid || isLoading} type=\"submit\">\r\n {isLoading ? 'Desabilitando...' : 'Desabilitar 2FA'}\r\n </Button>\r\n <Button\r\n variant=\"secondary\"\r\n className=\"h-10! flex-1\"\r\n type=\"button\"\r\n onClick={handleClose}\r\n >\r\n Cancelar\r\n </Button>\r\n </div>\r\n </form>\r\n </DialogContent>\r\n </Dialog>\r\n );\r\n}\r\n"],"mappings":";AAwCc,cAEF,YAFE;AAtCd,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU,eAAe,oBAAoB;AACtD,OAAO,iCAAiC;AAQzB,SAAR,0BAA2C;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,QAAM,EAAE,MAAM,SAAS,SAAS,WAAW,aAAa,aAAa,IACnE,4BAA4B,EAAE,SAAS,UAAU,CAAC;AAEpD,SACE,oBAAC,UAAO,MAAY,cAAc,aAChC,8BAAC,iBAAc,kBAAiB,YAAW,WAAU,yTACnD;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,CAAC,MAAM;AACf,UAAE,eAAe;AACjB,qBAAa;AAAA,MACf;AAAA,MACA,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,+DACb;AAAA,8BAAC,SAAI,WAAU,oEACb,8BAAC,eAAY,MAAM,IAAI,WAAU,iBAAgB,GACnD;AAAA,UACA,qBAAC,gBAAa,WAAU,aACtB;AAAA,gCAAC,eAAY,WAAU,2CAA0C,gDAEjE;AAAA,YACA,oBAAC,qBAAkB,WAAU,yCAAwC,oHAGrE;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,gCAAC,UAAK,WAAU,wCAAuC,uCAAsB;AAAA,YAC7E,oBAAC,YAAS,WAAW,GAAG,OAAO,MAAM,UAAU,SAC7C,8BAAC,iBAAc,WAAU,SACtB,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC;AAAA,cAAC;AAAA;AAAA,gBAEC,OAAO;AAAA,gBACP,WAAU;AAAA;AAAA,cAFL;AAAA,YAGP,CACD,GACH,GACF;AAAA,aACF;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAU,wFACb;AAAA,8BAAC,UAAO,WAAU,gBAAe,UAAU,CAAC,WAAW,WAAW,MAAK,UACpE,sBAAY,qBAAqB,mBACpC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,MAAK;AAAA,cACL,SAAS;AAAA,cACV;AAAA;AAAA,UAED;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF,GACF;AAEJ;","names":[]}
|
|
@@ -32,7 +32,8 @@ function TwoFactorAuthModal({ open, onClose, onSuccess }) {
|
|
|
32
32
|
DialogContent,
|
|
33
33
|
{
|
|
34
34
|
showCloseButton: false,
|
|
35
|
-
|
|
35
|
+
overlayClassName: "z-[1010]",
|
|
36
|
+
className: "z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!",
|
|
36
37
|
children: [
|
|
37
38
|
/* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: "C\xF3digos de seguran\xE7a" }) }),
|
|
38
39
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0", children: [
|
|
@@ -86,7 +87,8 @@ function TwoFactorAuthModal({ open, onClose, onSuccess }) {
|
|
|
86
87
|
DialogContent,
|
|
87
88
|
{
|
|
88
89
|
showCloseButton: false,
|
|
89
|
-
|
|
90
|
+
overlayClassName: "z-[1010]",
|
|
91
|
+
className: "z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!",
|
|
90
92
|
children: [
|
|
91
93
|
/* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: "Autentica\xE7\xE3o de dois fatores" }) }),
|
|
92
94
|
/* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/account/TwoFactorAuthModal.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ArrowLeft, X, Copy, RefreshCw } from 'lucide-react';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';\r\nimport { Separator } from '../ui/data-display/Separator';\r\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';\r\nimport useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';\r\n\r\ninterface TwoFactorAuthModalProps {\r\n open: boolean;\r\n onClose: () => void;\r\n onSuccess?: () => void;\r\n}\r\n\r\nexport default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {\r\n const {\r\n code,\r\n setCode,\r\n isCodeComplete,\r\n isGenerating,\r\n isConfirming,\r\n generateFailed,\r\n retryGenerate,\r\n qrcode,\r\n backupCodes,\r\n step,\r\n handleSubmit,\r\n handleFinalize,\r\n handleCopyCodes,\r\n resetForm,\r\n } = useTwoFactorAuthForm({ onSuccess, open });\r\n\r\n const handleClose = () => {\r\n resetForm();\r\n onClose();\r\n };\r\n\r\n if (step === 'recovery') {\r\n return (\r\n <Dialog open={open} onOpenChange={handleClose}>\r\n <DialogContent\r\n showCloseButton={false}\r\n className=\"flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!\"\r\n >\r\n <DialogHeader className=\"sr-only\">\r\n <DialogTitle>Códigos de segurança</DialogTitle>\r\n </DialogHeader>\r\n <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\r\n <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\r\n Códigos de segurança\r\n </span>\r\n <Button\r\n type=\"button\"\r\n variant=\"ghost\"\r\n className=\"size-8! p-0 absolute right-4\"\r\n onClick={handleClose}\r\n >\r\n <X size={18} />\r\n </Button>\r\n </div>\r\n\r\n <div className=\"flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none\">\r\n <div className=\"flex flex-col gap-2\">\r\n <h3 className=\"paragraph-medium-semibold text-gray-950 max-w-[269px]\">\r\n Salve estes códigos de recuperação de emergência\r\n </h3>\r\n <div className=\"paragraph-small-regular text-gray-600\">\r\n <p>\r\n Se você perder acesso ao seu telefone, não será possível fazer login em sua conta\r\n sem um código de dois fatores.\r\n </p>\r\n <br />\r\n <p>Imprima, copie ou escreva em um local seguro os códigos abaixo.</p>\r\n </div>\r\n </div>\r\n\r\n <div className=\"bg-gray-50 rounded-lg p-4 flex flex-col gap-4\">\r\n <div className=\"paragraph-small-medium text-gray-950 whitespace-nowrap\">\r\n {backupCodes.map((backupCode, i) => (\r\n <p key={i}>{backupCode}</p>\r\n ))}\r\n </div>\r\n <Button\r\n type=\"button\"\r\n variant=\"secondary\"\r\n className=\"h-8! w-fit\"\r\n onClick={handleCopyCodes}\r\n >\r\n <Copy size={16} />\r\n Copiar códigos\r\n </Button>\r\n </div>\r\n </div>\r\n\r\n <div className=\"flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0\">\r\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\r\n Cancelar\r\n </Button>\r\n <Button className=\"h-10!\" type=\"button\" onClick={handleFinalize}>\r\n Finalizar\r\n </Button>\r\n </div>\r\n </DialogContent>\r\n </Dialog>\r\n );\r\n }\r\n\r\n return (\r\n <Dialog open={open} onOpenChange={handleClose}>\r\n <DialogContent\r\n showCloseButton={false}\r\n className=\"flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!\"\r\n >\r\n <DialogHeader className=\"sr-only\">\r\n <DialogTitle>Autenticação de dois fatores</DialogTitle>\r\n </DialogHeader>\r\n <div className=\"shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\r\n <Button\r\n type=\"button\"\r\n variant=\"ghost\"\r\n className=\"size-8! p-0 absolute left-4\"\r\n onClick={handleClose}\r\n >\r\n <ArrowLeft size={20} />\r\n </Button>\r\n <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\r\n Autenticação de dois fatores\r\n </span>\r\n <Button\r\n type=\"button\"\r\n variant=\"ghost\"\r\n className=\"size-8! p-0 absolute right-4\"\r\n onClick={handleClose}\r\n >\r\n <X size={18} />\r\n </Button>\r\n </div>\r\n\r\n <form\r\n className=\"flex-1 min-h-0 flex flex-col\"\r\n onSubmit={(e) => {\r\n e.preventDefault();\r\n if (isCodeComplete) handleSubmit();\r\n }}\r\n >\r\n <div className=\"flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible\">\r\n <div className=\"flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6\">\r\n <p className=\"paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]\">\r\n Instale um aplicativo autenticador no seu celular (ex.:{' '}\r\n <a\r\n href=\"https://support.google.com/accounts/answer/1066447\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n className=\"paragraph-small-medium underline\"\r\n >\r\n Google Authenticator\r\n </a>\r\n ), escaneie o QR Code ao lado ou copie a chave no aplicativo e, em seguida, digite o\r\n código de 6 dígitos gerado para continuar.\r\n </p>\r\n\r\n <div className=\"border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]\">\r\n {generateFailed ? (\r\n <button\r\n type=\"button\"\r\n onClick={() => retryGenerate()}\r\n className=\"flex flex-col items-center gap-1.5 text-center\"\r\n >\r\n <RefreshCw size={20} className=\"text-gray-400\" />\r\n <span className=\"paragraph-xsmall-medium text-gray-500\">Tentar novamente</span>\r\n </button>\r\n ) : isGenerating || !qrcode ? (\r\n <div className=\"skeleton w-full h-full rounded\" />\r\n ) : (\r\n // eslint-disable-next-line @next/next/no-img-element\r\n <img\r\n src={qrcode}\r\n alt=\"QR Code para autenticação de dois fatores\"\r\n className=\"w-full h-full\"\r\n />\r\n )}\r\n </div>\r\n\r\n <div className=\"flex items-center gap-3 w-full\">\r\n <Separator className=\"flex-1\" />\r\n <span className=\"paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap\">\r\n Cole os 6 dígitos abaixo\r\n </span>\r\n <Separator className=\"flex-1\" />\r\n </div>\r\n\r\n <div className=\"scroll-mt-20\">\r\n <InputOTP maxLength={6} value={code} onChange={setCode}>\r\n <InputOTPGroup className=\"gap-2\">\r\n {Array.from({ length: 6 }).map((_, i) => (\r\n <InputOTPSlot\r\n key={i}\r\n index={i}\r\n className=\"w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200\"\r\n />\r\n ))}\r\n </InputOTPGroup>\r\n </InputOTP>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div className=\"shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white\">\r\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\r\n Cancelar\r\n </Button>\r\n <Button type=\"submit\" className=\"h-10!\" disabled={!isCodeComplete || isConfirming}>\r\n {isConfirming ? 'Ativando...' : 'Ativar autenticação'}\r\n </Button>\r\n </div>\r\n </form>\r\n </DialogContent>\r\n </Dialog>\r\n );\r\n}\r\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/account/TwoFactorAuthModal.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ArrowLeft, X, Copy, RefreshCw } from 'lucide-react';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';\r\nimport { Separator } from '../ui/data-display/Separator';\r\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';\r\nimport useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';\r\n\r\ninterface TwoFactorAuthModalProps {\r\n open: boolean;\r\n onClose: () => void;\r\n onSuccess?: () => void;\r\n}\r\n\r\nexport default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {\r\n const {\r\n code,\r\n setCode,\r\n isCodeComplete,\r\n isGenerating,\r\n isConfirming,\r\n generateFailed,\r\n retryGenerate,\r\n qrcode,\r\n backupCodes,\r\n step,\r\n handleSubmit,\r\n handleFinalize,\r\n handleCopyCodes,\r\n resetForm,\r\n } = useTwoFactorAuthForm({ onSuccess, open });\r\n\r\n const handleClose = () => {\r\n resetForm();\r\n onClose();\r\n };\r\n\r\n if (step === 'recovery') {\r\n return (\r\n <Dialog open={open} onOpenChange={handleClose}>\r\n <DialogContent\r\n showCloseButton={false}\r\n overlayClassName=\"z-[1010]\"\r\n className=\"z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!\"\r\n >\r\n <DialogHeader className=\"sr-only\">\r\n <DialogTitle>Códigos de segurança</DialogTitle>\r\n </DialogHeader>\r\n <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\r\n <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\r\n Códigos de segurança\r\n </span>\r\n <Button\r\n type=\"button\"\r\n variant=\"ghost\"\r\n className=\"size-8! p-0 absolute right-4\"\r\n onClick={handleClose}\r\n >\r\n <X size={18} />\r\n </Button>\r\n </div>\r\n\r\n <div className=\"flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none\">\r\n <div className=\"flex flex-col gap-2\">\r\n <h3 className=\"paragraph-medium-semibold text-gray-950 max-w-[269px]\">\r\n Salve estes códigos de recuperação de emergência\r\n </h3>\r\n <div className=\"paragraph-small-regular text-gray-600\">\r\n <p>\r\n Se você perder acesso ao seu telefone, não será possível fazer login em sua conta\r\n sem um código de dois fatores.\r\n </p>\r\n <br />\r\n <p>Imprima, copie ou escreva em um local seguro os códigos abaixo.</p>\r\n </div>\r\n </div>\r\n\r\n <div className=\"bg-gray-50 rounded-lg p-4 flex flex-col gap-4\">\r\n <div className=\"paragraph-small-medium text-gray-950 whitespace-nowrap\">\r\n {backupCodes.map((backupCode, i) => (\r\n <p key={i}>{backupCode}</p>\r\n ))}\r\n </div>\r\n <Button\r\n type=\"button\"\r\n variant=\"secondary\"\r\n className=\"h-8! w-fit\"\r\n onClick={handleCopyCodes}\r\n >\r\n <Copy size={16} />\r\n Copiar códigos\r\n </Button>\r\n </div>\r\n </div>\r\n\r\n <div className=\"flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0\">\r\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\r\n Cancelar\r\n </Button>\r\n <Button className=\"h-10!\" type=\"button\" onClick={handleFinalize}>\r\n Finalizar\r\n </Button>\r\n </div>\r\n </DialogContent>\r\n </Dialog>\r\n );\r\n }\r\n\r\n return (\r\n <Dialog open={open} onOpenChange={handleClose}>\r\n <DialogContent\r\n showCloseButton={false}\r\n overlayClassName=\"z-[1010]\"\r\n className=\"z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!\"\r\n >\r\n <DialogHeader className=\"sr-only\">\r\n <DialogTitle>Autenticação de dois fatores</DialogTitle>\r\n </DialogHeader>\r\n <div className=\"shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\r\n <Button\r\n type=\"button\"\r\n variant=\"ghost\"\r\n className=\"size-8! p-0 absolute left-4\"\r\n onClick={handleClose}\r\n >\r\n <ArrowLeft size={20} />\r\n </Button>\r\n <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\r\n Autenticação de dois fatores\r\n </span>\r\n <Button\r\n type=\"button\"\r\n variant=\"ghost\"\r\n className=\"size-8! p-0 absolute right-4\"\r\n onClick={handleClose}\r\n >\r\n <X size={18} />\r\n </Button>\r\n </div>\r\n\r\n <form\r\n className=\"flex-1 min-h-0 flex flex-col\"\r\n onSubmit={(e) => {\r\n e.preventDefault();\r\n if (isCodeComplete) handleSubmit();\r\n }}\r\n >\r\n <div className=\"flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible\">\r\n <div className=\"flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6\">\r\n <p className=\"paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]\">\r\n Instale um aplicativo autenticador no seu celular (ex.:{' '}\r\n <a\r\n href=\"https://support.google.com/accounts/answer/1066447\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n className=\"paragraph-small-medium underline\"\r\n >\r\n Google Authenticator\r\n </a>\r\n ), escaneie o QR Code ao lado ou copie a chave no aplicativo e, em seguida, digite o\r\n código de 6 dígitos gerado para continuar.\r\n </p>\r\n\r\n <div className=\"border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]\">\r\n {generateFailed ? (\r\n <button\r\n type=\"button\"\r\n onClick={() => retryGenerate()}\r\n className=\"flex flex-col items-center gap-1.5 text-center\"\r\n >\r\n <RefreshCw size={20} className=\"text-gray-400\" />\r\n <span className=\"paragraph-xsmall-medium text-gray-500\">Tentar novamente</span>\r\n </button>\r\n ) : isGenerating || !qrcode ? (\r\n <div className=\"skeleton w-full h-full rounded\" />\r\n ) : (\r\n // eslint-disable-next-line @next/next/no-img-element\r\n <img\r\n src={qrcode}\r\n alt=\"QR Code para autenticação de dois fatores\"\r\n className=\"w-full h-full\"\r\n />\r\n )}\r\n </div>\r\n\r\n <div className=\"flex items-center gap-3 w-full\">\r\n <Separator className=\"flex-1\" />\r\n <span className=\"paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap\">\r\n Cole os 6 dígitos abaixo\r\n </span>\r\n <Separator className=\"flex-1\" />\r\n </div>\r\n\r\n <div className=\"scroll-mt-20\">\r\n <InputOTP maxLength={6} value={code} onChange={setCode}>\r\n <InputOTPGroup className=\"gap-2\">\r\n {Array.from({ length: 6 }).map((_, i) => (\r\n <InputOTPSlot\r\n key={i}\r\n index={i}\r\n className=\"w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200\"\r\n />\r\n ))}\r\n </InputOTPGroup>\r\n </InputOTP>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div className=\"shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white\">\r\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\r\n Cancelar\r\n </Button>\r\n <Button type=\"submit\" className=\"h-10!\" disabled={!isCodeComplete || isConfirming}>\r\n {isConfirming ? 'Ativando...' : 'Ativar autenticação'}\r\n </Button>\r\n </div>\r\n </form>\r\n </DialogContent>\r\n </Dialog>\r\n );\r\n}\r\n"],"mappings":"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","names":[]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import Image from "next/image";
|
|
4
3
|
import {
|
|
5
4
|
Button,
|
|
6
5
|
Command,
|
|
@@ -13,7 +12,8 @@ import {
|
|
|
13
12
|
PopoverTrigger,
|
|
14
13
|
Tooltip,
|
|
15
14
|
TooltipContent,
|
|
16
|
-
TooltipTrigger
|
|
15
|
+
TooltipTrigger,
|
|
16
|
+
UserAvatar
|
|
17
17
|
} from "../../index";
|
|
18
18
|
import { CheckIcon, ChevronDown, FolderOpen, Plus, Settings } from "lucide-react";
|
|
19
19
|
function ProjectItemSkeleton() {
|
|
@@ -100,13 +100,11 @@ function ProjectSelectorPopover({
|
|
|
100
100
|
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full cursor-pointer", children: [
|
|
101
101
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
|
|
102
102
|
/* @__PURE__ */ jsx(
|
|
103
|
-
|
|
103
|
+
UserAvatar,
|
|
104
104
|
{
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
height: 32,
|
|
109
|
-
className: "rounded-full"
|
|
105
|
+
photo: project.photo,
|
|
106
|
+
name: project.title,
|
|
107
|
+
size: 32
|
|
110
108
|
}
|
|
111
109
|
),
|
|
112
110
|
project.title
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Dispatch, RefObject, SetStateAction } from 'react';\r\nimport
|
|
1
|
+
{"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Dispatch, RefObject, SetStateAction } from 'react';\r\nimport {\r\n Button,\r\n Command,\r\n CommandEmpty,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n Tooltip,\r\n TooltipContent,\r\n TooltipTrigger,\r\n UserAvatar,\r\n} from '../../index';\r\nimport { CheckIcon, ChevronDown, FolderOpen, Plus, Settings } from 'lucide-react';\r\nimport type { NavigationProject } from './types';\r\n\r\ninterface ProjectSelectorPopoverProps {\r\n open: boolean;\r\n setOpen: Dispatch<SetStateAction<boolean>>;\r\n titleRef?: RefObject<HTMLSpanElement | null>;\r\n projects: NavigationProject[];\r\n selectedProject: NavigationProject | null;\r\n onSelectProject: (project: NavigationProject) => void;\r\n onAddProject: () => void;\r\n onManageProjects: () => void;\r\n children?: React.ReactNode;\r\n}\r\n\r\nfunction ProjectItemSkeleton() {\r\n return (\r\n <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\r\n <div className=\"flex items-center gap-2 flex-1\">\r\n <div className=\"skeleton size-8 rounded-lg shrink-0\" />\r\n <div className=\"skeleton h-3.5 w-32 rounded\" />\r\n </div>\r\n <div className=\"skeleton size-4 rounded-full shrink-0\" />\r\n </div>\r\n );\r\n}\r\n\r\nexport function ProjectSelectorPopover({\r\n open,\r\n setOpen,\r\n titleRef,\r\n projects,\r\n selectedProject,\r\n onSelectProject,\r\n onAddProject,\r\n onManageProjects,\r\n children,\r\n}: ProjectSelectorPopoverProps) {\r\n return (\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger asChild>\r\n {children ?? (\r\n <button className=\"cursor-pointer\">\r\n <ChevronDown\r\n size={20}\r\n className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\r\n />\r\n </button>\r\n )}\r\n </PopoverTrigger>\r\n <PopoverContent\r\n className=\"w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\r\n align=\"start\"\r\n sideOffset={8}\r\n onOpenAutoFocus={(e: Event) => e.preventDefault()}\r\n onInteractOutside={(event: Event) => {\r\n if (titleRef?.current?.contains(event.target as Node)) {\r\n event.preventDefault();\r\n }\r\n }}\r\n >\r\n <div className=\"flex flex-col p-3 gap-2\">\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-small-semibold\">Projetos</span>\r\n <div className=\"flex items-center gap-1.5\">\r\n <Button\r\n variant=\"secondary\"\r\n className=\"h-8! paragraph-small-semibold text-gray-950\"\r\n onClick={onAddProject}\r\n >\r\n <Plus size={16} />\r\n Adicionar\r\n </Button>\r\n <Tooltip>\r\n <TooltipTrigger asChild>\r\n <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\r\n <Settings size={18} />\r\n </Button>\r\n </TooltipTrigger>\r\n <TooltipContent className=\"z-[1002]\">Visualizar todos projetos</TooltipContent>\r\n </Tooltip>\r\n </div>\r\n </div>\r\n <Command className=\"gap-2\">\r\n <CommandInput placeholder=\"Busque aqui\" />\r\n <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\r\n {projects.length === 0 ? (\r\n <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\r\n <FolderOpen size={28} className=\"text-gray-300\" />\r\n <span className=\"paragraph-small-medium text-center text-gray-500\">\r\n Nenhum projeto encontrado.\r\n <br />\r\n Crie um projeto para começar.\r\n </span>\r\n </div>\r\n ) : (\r\n <>\r\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\r\n {projects.map((project) => {\r\n const isSelected = selectedProject?.id === project.id;\r\n return (\r\n <CommandItem\r\n key={project.id}\r\n value={project.title}\r\n className={isSelected ? 'bg-gray-50' : ''}\r\n onSelect={() => onSelectProject(project)}\r\n >\r\n <div className=\"flex items-center justify-between w-full cursor-pointer\">\r\n <div className=\"flex items-center gap-2 w-full\">\r\n <UserAvatar\r\n photo={project.photo}\r\n name={project.title}\r\n size={32}\r\n />\r\n {project.title}\r\n </div>\r\n {isSelected && (\r\n <CheckIcon className=\"size-4 text-gray-950\" />\r\n )}\r\n </div>\r\n </CommandItem>\r\n );\r\n })}\r\n </>\r\n )}\r\n </CommandList>\r\n </Command>\r\n </div>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n}\r\n"],"mappings":"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","names":[]}
|
|
@@ -2,11 +2,10 @@
|
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useRef, useEffect } from "react";
|
|
4
4
|
import { useMobileNavbarSheet } from "../../../store/useMobileNavbarSheet";
|
|
5
|
-
import Image from "next/image";
|
|
6
5
|
import { useAppNavigationContext } from "../AppNavigationContext";
|
|
7
6
|
import { ProjectSelectorPopover } from "../ProjectSelectorPopover";
|
|
8
7
|
import { UsersSelectorPopover } from "../../layouts/UsersSelectorPopover";
|
|
9
|
-
import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "../../../index";
|
|
8
|
+
import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from "../../../index";
|
|
10
9
|
import { ChevronDown, Plus, Settings } from "lucide-react";
|
|
11
10
|
function ProjectItemSkeleton() {
|
|
12
11
|
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
|
|
@@ -105,13 +104,11 @@ function ProjectSelector({
|
|
|
105
104
|
},
|
|
106
105
|
children: [
|
|
107
106
|
/* @__PURE__ */ jsx(
|
|
108
|
-
|
|
107
|
+
UserAvatar,
|
|
109
108
|
{
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
height: 32,
|
|
114
|
-
className: "rounded-full"
|
|
109
|
+
photo: project.photo,
|
|
110
|
+
name: project.title,
|
|
111
|
+
size: 32
|
|
115
112
|
}
|
|
116
113
|
),
|
|
117
114
|
project.title
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useRef, useEffect, RefObject } from 'react';\r\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\r\nimport
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useRef, useEffect, RefObject } from 'react';\r\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\r\nimport { useAppNavigationContext } from '../AppNavigationContext';\r\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\r\nimport { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';\r\nimport { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';\r\nimport { ChevronDown, Plus, Settings } from 'lucide-react';\r\nimport type { NavigationProject } from '../types';\r\n\r\nexport interface ProjectSelectorProps {\r\n projects: NavigationProject[];\r\n selectedProject: NavigationProject | null;\r\n isLoading?: boolean;\r\n onSelectProject: (project: NavigationProject) => void;\r\n onAddProject: () => void;\r\n onManageProjects: () => void;\r\n}\r\n\r\nfunction ProjectItemSkeleton() {\r\n return (\r\n <div className=\"flex items-center gap-2 p-2\">\r\n <div className=\"skeleton size-8 rounded-lg shrink-0\" />\r\n <div className=\"skeleton h-3.5 w-32 rounded\" />\r\n </div>\r\n );\r\n}\r\n\r\nexport function ProjectSelector({\r\n projects,\r\n selectedProject,\r\n isLoading,\r\n onSelectProject,\r\n onAddProject,\r\n onManageProjects,\r\n}: ProjectSelectorProps) {\r\n const { breakpoint } = useAppNavigationContext();\r\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\r\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\r\n const titleRef = useRef<HTMLDivElement>(null);\r\n const { openProjectList, clearProjectList } = useMobileNavbarSheet();\r\n\r\n useEffect(() => {\r\n if (openProjectList && breakpoint === 'mobile') {\r\n setActiveSection('projects');\r\n clearProjectList();\r\n }\r\n }, [openProjectList, breakpoint, clearProjectList]);\r\n\r\n // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)\r\n if (breakpoint === 'desktop' || breakpoint === 'md') {\r\n return (\r\n <div className=\"flex items-center justify-between\">\r\n <ProjectSelectorPopover\r\n open={isPopoverOpen}\r\n setOpen={setIsPopoverOpen}\r\n titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\r\n projects={projects}\r\n selectedProject={selectedProject}\r\n onSelectProject={onSelectProject}\r\n onAddProject={onAddProject}\r\n onManageProjects={onManageProjects}\r\n >\r\n <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\r\n {isLoading ? (\r\n <div className=\"skeleton h-4 w-32 rounded\" />\r\n ) : (\r\n <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block\">\r\n {selectedProject?.title}\r\n </span>\r\n )}\r\n <ChevronDown\r\n size={20}\r\n className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\r\n />\r\n </div>\r\n </ProjectSelectorPopover>\r\n <div className=\"flex items-center gap-2\">\r\n <UsersSelectorPopover projectId={selectedProject?.id} />\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n // Mobile: inline collapsible accordion\r\n return (\r\n <div className=\"flex flex-col gap-2.5\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center gap-1\">\r\n <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\r\n <ChevronDown\r\n size={20}\r\n onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\r\n className={`transition-transform duration-200 cursor-pointer ${\r\n activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\r\n }`}\r\n />\r\n </div>\r\n <UsersSelectorPopover projectId={selectedProject?.id} />\r\n </div>\r\n {activeSection === 'projects' && (\r\n <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-small-semibold\">Projetos</span>\r\n <div className=\"flex items-center gap-1.5\">\r\n <Button variant=\"secondary\" className=\"h-8! paragraph-small-semibold text-gray-950\" onClick={onAddProject}>\r\n <Plus size={16} />\r\n Adicionar\r\n </Button>\r\n <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\r\n <Settings size={18} />\r\n </Button>\r\n </div>\r\n </div>\r\n <Command className=\"gap-2\">\r\n <CommandInput placeholder=\"Busque aqui\" />\r\n <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\r\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\r\n {isLoading ? (\r\n <>\r\n <ProjectItemSkeleton />\r\n <ProjectItemSkeleton />\r\n </>\r\n ) : (\r\n projects.map((project) => (\r\n <CommandItem\r\n key={project.id}\r\n value={project.title}\r\n className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}\r\n onSelect={() => { onSelectProject(project); setActiveSection(null); }}\r\n >\r\n <UserAvatar\r\n photo={project.photo}\r\n name={project.title}\r\n size={32}\r\n />\r\n {project.title}\r\n </CommandItem>\r\n ))\r\n )}\r\n </CommandList>\r\n </Command>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -28,7 +28,7 @@ export default function DisableTwoFactorAuthModal({
|
|
|
28
28
|
|
|
29
29
|
return (
|
|
30
30
|
<Dialog open={open} onOpenChange={handleClose}>
|
|
31
|
-
<DialogContent className="flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-117.5! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
|
|
31
|
+
<DialogContent overlayClassName="z-[1010]" className="z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-117.5! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
|
|
32
32
|
<form
|
|
33
33
|
onSubmit={(e) => {
|
|
34
34
|
e.preventDefault();
|
|
@@ -41,7 +41,8 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
|
|
|
41
41
|
<Dialog open={open} onOpenChange={handleClose}>
|
|
42
42
|
<DialogContent
|
|
43
43
|
showCloseButton={false}
|
|
44
|
-
|
|
44
|
+
overlayClassName="z-[1010]"
|
|
45
|
+
className="z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!"
|
|
45
46
|
>
|
|
46
47
|
<DialogHeader className="sr-only">
|
|
47
48
|
<DialogTitle>Códigos de segurança</DialogTitle>
|
|
@@ -110,7 +111,8 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
|
|
|
110
111
|
<Dialog open={open} onOpenChange={handleClose}>
|
|
111
112
|
<DialogContent
|
|
112
113
|
showCloseButton={false}
|
|
113
|
-
|
|
114
|
+
overlayClassName="z-[1010]"
|
|
115
|
+
className="z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!"
|
|
114
116
|
>
|
|
115
117
|
<DialogHeader className="sr-only">
|
|
116
118
|
<DialogTitle>Autenticação de dois fatores</DialogTitle>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
import { Dispatch, RefObject, SetStateAction } from 'react';
|
|
4
|
-
import Image from 'next/image';
|
|
5
4
|
import {
|
|
6
5
|
Button,
|
|
7
6
|
Command,
|
|
@@ -15,6 +14,7 @@ import {
|
|
|
15
14
|
Tooltip,
|
|
16
15
|
TooltipContent,
|
|
17
16
|
TooltipTrigger,
|
|
17
|
+
UserAvatar,
|
|
18
18
|
} from '../../index';
|
|
19
19
|
import { CheckIcon, ChevronDown, FolderOpen, Plus, Settings } from 'lucide-react';
|
|
20
20
|
import type { NavigationProject } from './types';
|
|
@@ -125,16 +125,10 @@ export function ProjectSelectorPopover({
|
|
|
125
125
|
>
|
|
126
126
|
<div className="flex items-center justify-between w-full cursor-pointer">
|
|
127
127
|
<div className="flex items-center gap-2 w-full">
|
|
128
|
-
<
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${project.photo}`
|
|
133
|
-
: '/images/Logomark.png'
|
|
134
|
-
}
|
|
135
|
-
width={32}
|
|
136
|
-
height={32}
|
|
137
|
-
className="rounded-full"
|
|
128
|
+
<UserAvatar
|
|
129
|
+
photo={project.photo}
|
|
130
|
+
name={project.title}
|
|
131
|
+
size={32}
|
|
138
132
|
/>
|
|
139
133
|
{project.title}
|
|
140
134
|
</div>
|
|
@@ -2,11 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
import { useState, useRef, useEffect, RefObject } from 'react';
|
|
4
4
|
import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
|
|
5
|
-
import Image from 'next/image';
|
|
6
5
|
import { useAppNavigationContext } from '../AppNavigationContext';
|
|
7
6
|
import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
|
|
8
7
|
import { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';
|
|
9
|
-
import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../../../index';
|
|
8
|
+
import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';
|
|
10
9
|
import { ChevronDown, Plus, Settings } from 'lucide-react';
|
|
11
10
|
import type { NavigationProject } from '../types';
|
|
12
11
|
|
|
@@ -131,16 +130,10 @@ export function ProjectSelector({
|
|
|
131
130
|
className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}
|
|
132
131
|
onSelect={() => { onSelectProject(project); setActiveSection(null); }}
|
|
133
132
|
>
|
|
134
|
-
<
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${project.photo}`
|
|
139
|
-
: '/images/Logomark.png'
|
|
140
|
-
}
|
|
141
|
-
width={32}
|
|
142
|
-
height={32}
|
|
143
|
-
className="rounded-full"
|
|
133
|
+
<UserAvatar
|
|
134
|
+
photo={project.photo}
|
|
135
|
+
name={project.title}
|
|
136
|
+
size={32}
|
|
144
137
|
/>
|
|
145
138
|
{project.title}
|
|
146
139
|
</CommandItem>
|