UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: auth screens, project actions и полировка внешних контуров

This commit is contained in:
DCCONSTRUCTIONS 2026-04-20 10:50:09 +03:00
parent c6ace8b9cc
commit 8fed697531
15 changed files with 362 additions and 241 deletions

View File

@ -90,7 +90,7 @@ export const ExternalContoursContentRoot = observer(function ExternalContoursCon
hasDirectTargetAccess={hasDirectTargetAccess}
/>
</div>
<ContentWrapper className="divide-y-2 divide-subtle-1">
<ContentWrapper className="space-y-4 px-4 py-4">
<ExternalContoursIssueMainContent
workspaceSlug={workspaceSlug}
sourceProjectId={projectId}

View File

@ -39,7 +39,7 @@ export function ExternalContourDeclineModal(props: Props) {
handleClose={handleClose}
position={EModalPosition.CENTER}
width={EModalWidth.LG}
className="rounded-lg"
className="nodedc-glass-modal rounded-[1.75rem]"
>
<div className="space-y-4 p-6">
<div className="space-y-1">
@ -54,13 +54,14 @@ export function ExternalContourDeclineModal(props: Props) {
rows={5}
disabled={isSubmitting}
autoFocus
className="nodedc-modal-input min-h-[8rem] resize-none"
/>
<div className="flex justify-end gap-2">
<Button variant="secondary" onClick={handleClose} disabled={isSubmitting}>
<Button variant="secondary" onClick={handleClose} disabled={isSubmitting} className="nodedc-modal-secondary-button">
{t("cancel")}
</Button>
<Button variant="primary" onClick={handleSubmit} disabled={isSubmitting || !comment.trim()}>
<Button variant="primary" onClick={handleSubmit} disabled={isSubmitting || !comment.trim()} className="nodedc-modal-primary-button">
{t("external_contours_page.decline_modal.submit")}
</Button>
</div>

View File

@ -135,7 +135,7 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
onSubmit={(comment) => handleDecision("decline", comment)}
/>
<Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 border-b border-subtle bg-surface-1 lg:flex">
<Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 px-4 lg:flex">
<div className="flex items-center gap-4">
{issue?.project_id && issue.sequence_id && (
<h3 className="flex-shrink-0 text-14 font-medium text-tertiary">
@ -157,11 +157,11 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
<div className="flex flex-wrap items-center gap-2">
{canReviewClosedRequest && (
<>
<Button variant="secondary" size="lg" onClick={() => handleDecision("accept")}>
<Button variant="primary" size="lg" onClick={() => handleDecision("accept")} className="nodedc-external-primary-button">
<CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />
{t("external_contours_page.actions.accept")}
</Button>
<Button variant="secondary" size="lg" onClick={() => setIsDeclineModalOpen(true)}>
<Button variant="secondary" size="lg" onClick={() => setIsDeclineModalOpen(true)} className="nodedc-external-action-button">
<CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />
{t("external_contours_page.actions.decline")}
</Button>
@ -172,12 +172,18 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
<Badge variant="neutral">{t("external_contours_page.traceability.source_decision_accepted")}</Badge>
)}
<Button variant="secondary" size="lg" prependIcon={<LinkIcon className="h-2.5 w-2.5" />} onClick={handleCopyLink}>
<Button
variant="secondary"
size="lg"
prependIcon={<LinkIcon className="h-2.5 w-2.5" />}
onClick={handleCopyLink}
className="nodedc-external-action-button"
>
{t("external_contours_page.actions.copy")}
</Button>
{hasDirectTargetAccess && (
<ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
<Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />}>
<Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />} className="nodedc-external-action-button">
{t("external_contours_page.actions.open")}
</Button>
</ControlLink>
@ -196,10 +202,10 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
<div className="ml-auto flex items-center gap-2">
{canReviewClosedRequest && (
<>
<Button variant="secondary" size="sm" onClick={() => handleDecision("accept")}>
<Button variant="primary" size="sm" onClick={() => handleDecision("accept")} className="nodedc-external-primary-button">
{t("external_contours_page.actions.accept")}
</Button>
<Button variant="secondary" size="sm" onClick={() => setIsDeclineModalOpen(true)}>
<Button variant="secondary" size="sm" onClick={() => setIsDeclineModalOpen(true)} className="nodedc-external-action-button">
{t("external_contours_page.actions.decline")}
</Button>
</>
@ -209,7 +215,7 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
)}
{hasDirectTargetAccess && (
<ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
<Button variant="secondary" size="sm">
<Button variant="secondary" size="sm" className="nodedc-external-action-button">
{t("external_contours_page.actions.open")}
</Button>
</ControlLink>

View File

@ -139,7 +139,7 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
if (!hasDirectTargetAccess) {
return (
<div className="space-y-4">
<div className="nodedc-external-section space-y-4 p-5">
<div className="nodedc-external-content-shell space-y-4 p-5">
{isSourceEditable ? (
<>
<IssueTitleInput
@ -239,8 +239,8 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
}
return (
<>
<div className="space-y-4 pb-4">
<div className="space-y-4">
<div className="nodedc-external-content-shell space-y-4 p-5">
{duplicateIssues.length > 0 && (
<DeDupeIssuePopoverRoot
workspaceSlug={workspaceSlug}
@ -313,15 +313,13 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
</div>
</div>
<div className="py-4">
<ExternalContoursRequestTraceability contourRequest={contourRequest} />
</div>
<ExternalContoursRequestTraceability contourRequest={contourRequest} />
<div className="py-4">
<div className="nodedc-external-section px-4 py-4">
<IssueAttachmentRoot workspaceSlug={workspaceSlug} projectId={targetProjectId} issueId={issue.id} disabled={!isEditable} />
</div>
<div className="py-4">
<div className="nodedc-external-section px-4 py-4">
<ExternalContoursIssueContentProperties
workspaceSlug={workspaceSlug}
targetProjectId={targetProjectId}
@ -331,9 +329,9 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
/>
</div>
<div className="pt-4">
<div className="nodedc-external-section px-4 py-4">
<IssueActivity workspaceSlug={workspaceSlug} projectId={targetProjectId} issueId={issue.id} />
</div>
</>
</div>
);
});

View File

@ -42,8 +42,11 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
if (!request || !issue) return <></>;
const assigneeDetails = issue.assignee_details?.slice(0, 2) ?? [];
const visibleLabels = issue.label_details?.slice(0, 3) ?? [];
const lastUpdatedAt = issue.updated_at || request.updated_at;
const requester = issue.created_by_detail;
const requesterName =
request.requested_by_name || requester?.display_name || t("external_contours_page.mirror.system_actor");
const contourName = request.target_project_name || issue.project_detail?.name || t("common.none");
return (
<Link
@ -55,38 +58,71 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
<Row
data-active={selectedInboxIssueId === request.id}
className={cn(
"nodedc-external-card relative flex cursor-pointer flex-col gap-4 px-4 py-4 transition-all hover:bg-white/5",
"nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-5 px-5 py-5 transition-all hover:bg-white/5",
{ "ring-1 ring-accent-primary/35": selectedInboxIssueId === request.id }
)}
>
<div className="space-y-2">
<div className="relative flex items-center justify-between gap-2">
<div className="flex min-w-0 items-center gap-2 text-11 font-medium text-tertiary">
<span>
{issue.project_detail?.identifier || "REQ"}-{issue.sequence_id}
</span>
{issue.project_detail?.name && <span className="truncate text-placeholder">{issue.project_detail.name}</span>}
<div className="flex items-start justify-between gap-3">
<div className="flex min-w-0 items-center gap-3">
<Avatar
src={requester?.avatar_url || ""}
name={requesterName}
size="lg"
showTooltip
/>
<div className="min-w-0">
<div className="truncate text-15 font-semibold text-primary">{requesterName}</div>
<div className="truncate text-13 text-secondary">{contourName}</div>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
<div className="text-11 font-medium text-tertiary">
{issue.project_detail?.identifier || "REQ"}-{issue.sequence_id}
</div>
<div className="flex items-center gap-2">
{request.has_unread_updates && (
<Tooltip tooltipHeading={t("external_contours_page.list.unread_updates")} isMobile={isMobile}>
<span className="size-2 rounded-full bg-accent-primary" />
</Tooltip>
)}
</div>
<div className="shrink-0">
<ExternalContourStatePill request={request} />
</div>
</div>
<h3 className="w-full text-15 leading-6 font-semibold text-primary">{issue.name}</h3>
</div>
<div className="flex items-center justify-between gap-2">
<div className="flex flex-wrap items-center gap-2">
<div className="flex flex-1 items-center justify-center px-2">
<h3 className="line-clamp-3 w-full max-w-[18rem] text-center text-16 leading-7 font-semibold text-primary">
{issue.name}
</h3>
</div>
<div className="flex items-center justify-between gap-3">
<div className="flex min-w-0 items-center gap-2">
{assigneeDetails.length > 0 ? (
assigneeDetails.map((assignee) => (
<Avatar
key={assignee.id}
src={assignee.avatar_url || ""}
name={assignee.display_name || "NODE.DC"}
size="lg"
showTooltip
/>
))
) : (
<Tooltip tooltipHeading={t("assignee")} tooltipContent={t("external_contours_page.list.unassigned")} isMobile={isMobile}>
<div className="text-11 text-placeholder">{t("external_contours_page.list.unassigned")}</div>
</Tooltip>
)}
</div>
<div className="flex flex-wrap items-center justify-end gap-2">
<Tooltip
tooltipHeading={t("external_contours_page.list.last_updated")}
tooltipContent={`${renderFormattedDate(lastUpdatedAt ?? "")}`}
isMobile={isMobile}
>
<div className="text-11 text-secondary">{renderFormattedDate(lastUpdatedAt ?? "")}</div>
<div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">
{renderFormattedDate(lastUpdatedAt ?? "")}
</div>
</Tooltip>
{issue.priority && issue.priority !== "none" && (
@ -94,32 +130,6 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
<PriorityIcon priority={issue.priority} withContainer className="h-3 w-3" />
</Tooltip>
)}
{visibleLabels.map((label) => (
<div key={label.id} className="relative flex h-6 items-center gap-1 rounded-full bg-white/6 px-2 text-11">
<span className="h-2 w-2 rounded-full" style={{ backgroundColor: label.color }} />
<span className="max-w-28 truncate normal-case">{label.name}</span>
</div>
))}
</div>
<div className="flex items-center gap-1">
{assigneeDetails.length > 0 ? (
<>
{assigneeDetails.map((assignee) => (
<Avatar
key={assignee.id}
src={assignee.avatar_url || ""}
name={assignee.display_name || "NODE.DC"}
size="lg"
showTooltip
/>
))}
</>
) : (
<Tooltip tooltipHeading={t("assignee")} tooltipContent={t("external_contours_page.list.unassigned")} isMobile={isMobile}>
<div className="text-11 text-placeholder">{t("external_contours_page.list.unassigned")}</div>
</Tooltip>
)}
</div>
</div>
</Row>

View File

@ -157,7 +157,7 @@ export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) {
function AuthContainer({ children }: { children: React.ReactNode }) {
return (
<div className="mt-6 flex w-full flex-grow flex-col items-center justify-center py-8">
<div className="mt-8 flex w-full flex-grow flex-col items-center justify-center py-8">
<div className="nodedc-auth-shell relative flex w-full max-w-[28rem] flex-col gap-6">{children}</div>
</div>
);

View File

@ -15,7 +15,7 @@ type AuthBaseProps = {
export function AuthBase({ authType }: AuthBaseProps) {
return (
<div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto bg-canvas px-8 pt-8 pb-10">
<div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto bg-canvas px-8 pt-10 pb-12">
<AuthHeader type={authType} />
<AuthRoot authMode={authType} />
</div>

View File

@ -73,7 +73,11 @@ export function AuthHeaderBase(props: TAuthHeaderBase) {
<PageHead title={pageTitle + " - NODE.DC"} />
<div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6 px-2 py-1">
<Link href="/">
<PlaneLockup height={40} width={190} className="text-primary transition-opacity hover:opacity-90" />
<PlaneLockup
height={54}
width={258}
className="nodedc-auth-logo-lockup text-primary transition-opacity hover:opacity-90"
/>
</Link>
{additionalAction}
</div>

View File

@ -17,7 +17,7 @@ import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } fro
import { useOutsideClickDetector } from "@plane/hooks";
import { useTranslation } from "@plane/i18n";
import { Tabs } from "@plane/propel/tabs";
import { Button, getButtonStyling } from "@plane/propel/button";
import { Button } from "@plane/propel/button";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EFileAssetType } from "@plane/types";
import { Input, Loader } from "@plane/ui";
@ -204,7 +204,9 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
return (
<Popover className="relative z-19" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
<Popover.Button
className={cn(getButtonStyling("secondary", "sm"), buttonClassName)}
className={cn(
buttonClassName || "inline-flex min-h-10 items-center justify-center rounded-[1.25rem] px-4 py-2"
)}
onClick={handleOnClick}
disabled={disabled}
>

View File

@ -17,39 +17,46 @@ export function InstanceNotReady() {
return (
<DefaultLayout>
<div className="relative z-10 flex h-screen w-screen overflow-hidden">
{/* Background decorations */}
<img
src={GradientBgLogo}
className="pointer-events-none absolute -top-24 -left-32 h-56 w-96 opacity-15"
alt=""
aria-hidden="true"
/>
<img
src={GradientBgLogo}
className="pointer-events-none absolute -right-20 -bottom-16 h-56 w-96 opacity-15"
alt=""
aria-hidden="true"
/>
{/* Main content */}
<div className="flex h-full w-full flex-col items-center px-8 pt-6 pb-10">
<div className="sticky top-0 flex w-full shrink-0 items-center justify-between gap-6">
<PlaneLockup height={20} width={95} className="text-primary" />
<PlaneLockup height={40} width={190} className="nodedc-auth-logo-lockup text-primary" />
</div>
<div className="flex h-full w-full flex-col items-center justify-center gap-7">
<div className="flex flex-col items-center gap-11">
<div className="nodedc-error-shell flex max-w-3xl flex-col items-center gap-11 text-center">
<img
src={GradientBgLogo}
className="pointer-events-none absolute -top-24 -left-32 h-56 w-96 opacity-12"
alt=""
aria-hidden="true"
/>
<img
src={GradientBgLogo}
className="pointer-events-none absolute -right-20 -bottom-16 h-56 w-96 opacity-12"
alt=""
aria-hidden="true"
/>
<img src={GradientLogo} className="h-24 w-40 object-contain" alt="NODE.DC Logo" />
<div className="flex max-w-124 flex-col items-center gap-3">
<h1 className="text-h2-semibold text-primary">Welcome to NODE.DC</h1>
<h1 className="text-h2-semibold text-primary">NODE.DC готов к запуску</h1>
<p className="text-center text-body-md-regular text-secondary">
Set up your instance and create your first workspace to begin managing projects and work.
Завершите настройку инстанса и создайте первое рабочее пространство, чтобы начать работу с
проектами и рабочими элементами.
</p>
</div>
<a href={GOD_MODE_URL} className="w-80">
<Button variant="primary" className="nodedc-error-primary w-full" size="xl">
Перейти к настройке
</Button>
</a>
<a
href="https://nodedc.dctouch.ru/"
target="_blank"
rel="noopener noreferrer"
className="nodedc-error-link text-13 font-medium"
>
Служба поддержки
</a>
</div>
<a href={GOD_MODE_URL} className="w-72">
<Button variant="primary" className="w-full" size="xl">
Get started
</Button>
</a>
</div>
</div>
</div>

View File

@ -84,7 +84,7 @@ function ProjectCreateHeader(props: Props) {
}}
control={control}
value={value ?? null}
buttonClassName="nodedc-overlay-button"
buttonClassName="nodedc-overlay-button min-w-[10.5rem]"
tabIndex={getIndex("cover_image")}
/>
)}

View File

@ -255,7 +255,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
control={control}
onChange={onChange}
value={value ?? null}
buttonClassName="nodedc-overlay-button"
buttonClassName="nodedc-overlay-button min-w-[10.5rem]"
disabled={!isAdmin}
projectId={project.id}
/>
@ -436,7 +436,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
type="submit"
loading={isLoading}
disabled={!isAdmin}
className="nodedc-settings-save-button min-w-[11.5rem]"
className="nodedc-settings-save-button min-w-[11.5rem] !text-[#0b1117] hover:!text-[#0b1117]"
>
{isLoading ? t("updating") : t("common.update_project")}
</Button>

View File

@ -57,7 +57,7 @@ export const ProjectFeatureUpdate = observer(function ProjectFeatureUpdate(props
<Link
href={`/${workspaceSlug}/projects/${projectId}/issues`}
onClick={onClose}
className="nodedc-modal-primary-button inline-flex min-w-[10.5rem] items-center justify-center"
className="nodedc-modal-primary-button inline-flex min-w-[10.5rem] items-center justify-center !text-[#0b1117] hover:!text-[#0b1117]"
tabIndex={2}
>
{t("open_project")}

View File

@ -494,6 +494,15 @@
background: color-mix(in srgb, rgb(var(--nodedc-card-active-rgb)) 82%, white) !important;
}
.nodedc-modal-primary-button,
.nodedc-modal-primary-button *,
.nodedc-settings-primary-button,
.nodedc-settings-primary-button *,
.nodedc-settings-save-button,
.nodedc-settings-save-button * {
color: #0b1117 !important;
}
.nodedc-modal-danger-button {
min-height: 2.75rem;
border: 0 !important;
@ -650,18 +659,18 @@
}
.nodedc-overlay-button {
min-height: 2.5rem;
min-height: 2.75rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.05rem !important;
border-radius: 1.25rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.018) 100%),
rgba(8, 8, 10, 0.58) !important;
linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.02) 100%),
rgba(9, 9, 12, 0.72) !important;
color: #f5f7fb !important;
padding-inline: 1rem !important;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
padding-inline: 1.05rem !important;
-webkit-backdrop-filter: blur(22px);
backdrop-filter: blur(22px);
transition:
background 120ms ease,
color 120ms ease,
@ -670,8 +679,8 @@
.nodedc-overlay-button:hover {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.03) 100%),
rgba(8, 8, 10, 0.72) !important;
linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%),
rgba(9, 9, 12, 0.8) !important;
color: #ffffff !important;
}
@ -798,17 +807,24 @@
.nodedc-auth-shell {
width: 100%;
max-width: 28rem;
max-width: 32rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.75rem !important;
padding: 1.75rem !important;
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.34),
0 8px 20px rgba(0, 0, 0, 0.18) !important;
border-radius: 1.9rem !important;
padding: 2.2rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%),
rgba(10, 10, 12, 0.82) !important;
-webkit-backdrop-filter: blur(34px);
backdrop-filter: blur(34px);
linear-gradient(180deg, rgba(255, 255, 255, 0.048) 0%, rgba(255, 255, 255, 0.015) 100%),
rgba(9, 9, 12, 0.84) !important;
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
}
.nodedc-auth-logo-lockup {
color: var(--text-color-primary) !important;
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.2));
}
.nodedc-auth-banner {
@ -885,14 +901,16 @@
max-width: 36rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.9rem !important;
padding: 2rem !important;
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.34),
0 8px 20px rgba(0, 0, 0, 0.18) !important;
border-radius: 1.95rem !important;
padding: 2.15rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%),
rgba(10, 10, 12, 0.82) !important;
-webkit-backdrop-filter: blur(36px);
backdrop-filter: blur(36px);
linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.016) 100%),
rgba(9, 9, 12, 0.86) !important;
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
}
.nodedc-error-link {
@ -955,10 +973,10 @@
.nodedc-external-sidebar-shell {
border: 0 !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%),
rgba(8, 8, 11, 0.82) !important;
-webkit-backdrop-filter: blur(26px);
backdrop-filter: blur(26px);
linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%),
rgba(8, 8, 11, 0.86) !important;
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(30px);
}
.nodedc-external-tab {
@ -985,23 +1003,65 @@
.nodedc-external-card {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.9rem !important;
background: rgb(var(--nodedc-card-passive-rgb)) !important;
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
border-radius: 2rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%),
rgb(var(--nodedc-card-passive-rgb)) !important;
color: var(--text-color-primary) !important;
}
.nodedc-external-card[data-active="true"] {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.01) 100%),
rgba(255, 255, 255, 0.04) !important;
box-shadow: inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.3);
linear-gradient(180deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.008) 100%),
rgba(255, 255, 255, 0.035) !important;
box-shadow:
inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.32),
0 12px 32px rgba(0, 0, 0, 0.16) !important;
}
.nodedc-external-content-shell {
border: 0 !important;
outline: none !important;
box-shadow:
0 18px 44px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
border-radius: 2rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.034) 0%, rgba(255, 255, 255, 0.014) 100%),
rgba(255, 255, 255, 0.03) !important;
-webkit-backdrop-filter: blur(28px);
backdrop-filter: blur(28px);
}
.nodedc-external-field {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.4rem !important;
background: rgba(255, 255, 255, 0.04) !important;
}
.nodedc-external-field:hover,
.nodedc-external-field:focus-within {
background: rgba(255, 255, 255, 0.055) !important;
}
.nodedc-external-chip {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.06) !important;
color: var(--text-color-primary) !important;
}
.nodedc-external-panel {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
border-radius: 1.6rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
@ -1013,7 +1073,9 @@
.nodedc-external-section {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
border-radius: 1.5rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.012) 100%),
@ -1030,4 +1092,35 @@
background: rgba(255, 255, 255, 0.035) !important;
color: var(--text-color-secondary) !important;
}
.nodedc-external-action-button {
min-height: 2.75rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.25rem !important;
background: rgba(255, 255, 255, 0.06) !important;
color: var(--text-color-primary) !important;
padding-inline: 1.15rem !important;
}
.nodedc-external-action-button:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.nodedc-external-primary-button {
min-height: 2.75rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.25rem !important;
background: rgb(var(--nodedc-card-active-rgb)) !important;
color: #0b1117 !important;
padding-inline: 1.2rem !important;
}
.nodedc-external-primary-button:hover {
background: color-mix(in srgb, rgb(var(--nodedc-card-active-rgb)) 82%, white) !important;
color: #0b1117 !important;
}
}

View File

@ -60,32 +60,32 @@ export type PasswordCriteria = {
export const getPasswordCriteria = (password: string): PasswordCriteria[] => [
{
key: "length",
label: "Min 8 characters",
label: "Минимум 8 символов",
isValid: password.length >= 8,
},
{
key: "uppercase",
label: "Min 1 upper-case letter",
label: "Минимум 1 заглавная буква",
isValid: /[A-Z]/.test(password),
},
{
key: "lowercase",
label: "Min 1 lower-case letter",
label: "Минимум 1 строчная буква",
isValid: /[a-z]/.test(password),
},
{
key: "number",
label: "Min 1 number",
label: "Минимум 1 цифра",
isValid: /[0-9]/.test(password),
},
{
key: "special",
label: "Min 1 special character",
label: "Минимум 1 спецсимвол",
isValid: /[!@#$%^&*()\-_+=\[\]{}|;:'",.<>?/]/.test(password),
},
{
key: "predictable",
label: "Avoid common or predictable patterns",
label: "Избегайте простых и предсказуемых шаблонов",
isValid: password.length >= 8 ? zxcvbn(password).score >= 3 : false,
},
];
@ -96,218 +96,218 @@ const errorCodeMessages: {
} = {
// global
[EAuthErrorCodes.INSTANCE_NOT_CONFIGURED]: {
title: `Instance not configured`,
message: () => `Instance not configured. Please contact your administrator.`,
title: `Инстанс не настроен`,
message: () => `Инстанс не настроен. Обратитесь к администратору.`,
},
[EAuthErrorCodes.SIGNUP_DISABLED]: {
title: `Sign up disabled`,
message: () => `Sign up disabled. Please contact your administrator.`,
title: `Регистрация отключена`,
message: () => `Регистрация отключена. Обратитесь к администратору.`,
},
[EAuthErrorCodes.INVALID_PASSWORD]: {
title: `Invalid password`,
message: () => `Invalid password. Please try again.`,
title: `Неверный пароль`,
message: () => `Неверный пароль. Попробуйте снова.`,
},
[EAuthErrorCodes.PASSWORD_TOO_WEAK]: {
title: `Password too weak`,
title: `Слишком простой пароль`,
message: () =>
`Password must include upper-case, lower-case, number, special character, and must not be predictable.`,
`Пароль должен содержать заглавные и строчные буквы, цифру, спецсимвол и не быть предсказуемым.`,
},
[EAuthErrorCodes.SMTP_NOT_CONFIGURED]: {
title: `SMTP not configured`,
message: () => `SMTP not configured. Please contact your administrator.`,
title: `SMTP не настроен`,
message: () => `SMTP не настроен. Обратитесь к администратору.`,
},
// email check in both sign up and sign in
[EAuthErrorCodes.INVALID_EMAIL]: {
title: `Invalid email`,
message: () => `Invalid email. Please try again.`,
title: `Некорректный e-mail`,
message: () => `Некорректный e-mail. Попробуйте снова.`,
},
[EAuthErrorCodes.EMAIL_REQUIRED]: {
title: `Email required`,
message: () => `Email required. Please try again.`,
title: `Нужен e-mail`,
message: () => `Укажите e-mail и попробуйте снова.`,
},
// sign up
[EAuthErrorCodes.USER_ALREADY_EXIST]: {
title: `User already exists`,
message: () => `Your account is already registered. Sign in now.`,
title: `Аккаунт уже существует`,
message: () => `Аккаунт уже зарегистрирован. Выполните вход.`,
},
[EAuthErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_UP]: {
title: `Email and password required`,
message: () => `Email and password required. Please try again.`,
title: `Нужны e-mail и пароль`,
message: () => `Укажите e-mail и пароль, затем попробуйте снова.`,
},
[EAuthErrorCodes.AUTHENTICATION_FAILED_SIGN_UP]: {
title: `Authentication failed`,
message: () => `Authentication failed. Please try again.`,
title: `Не удалось выполнить вход`,
message: () => `Не удалось выполнить вход. Проверьте данные и попробуйте снова.`,
},
[EAuthErrorCodes.INVALID_EMAIL_SIGN_UP]: {
title: `Invalid email`,
message: () => `Invalid email. Please try again.`,
title: `Некорректный e-mail`,
message: () => `Некорректный e-mail. Попробуйте снова.`,
},
[EAuthErrorCodes.MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED]: {
title: `Email and code required`,
message: () => `Email and code required. Please try again.`,
title: `Нужны e-mail и код`,
message: () => `Укажите e-mail и код подтверждения, затем попробуйте снова.`,
},
[EAuthErrorCodes.INVALID_EMAIL_MAGIC_SIGN_UP]: {
title: `Invalid email`,
message: () => `Invalid email. Please try again.`,
title: `Некорректный e-mail`,
message: () => `Некорректный e-mail. Попробуйте снова.`,
},
// sign in
[EAuthErrorCodes.USER_ACCOUNT_DEACTIVATED]: {
title: `User account deactivated`,
message: () => `User account deactivated. Please contact administrator.`,
title: `Аккаунт деактивирован`,
message: () => `Аккаунт деактивирован. Обратитесь к администратору.`,
},
[EAuthErrorCodes.USER_DOES_NOT_EXIST]: {
title: `User does not exist`,
message: () => `No account found. Create one to get started.`,
title: `Аккаунт не найден`,
message: () => `Аккаунт не найден. Создайте новый для начала работы.`,
},
[EAuthErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_IN]: {
title: `Email and password required`,
message: () => `Email and password required. Please try again.`,
title: `Нужны e-mail и пароль`,
message: () => `Укажите e-mail и пароль, затем попробуйте снова.`,
},
[EAuthErrorCodes.AUTHENTICATION_FAILED_SIGN_IN]: {
title: `Authentication failed`,
message: () => `Authentication failed. Please try again.`,
title: `Не удалось выполнить вход`,
message: () => `Не удалось выполнить вход. Проверьте данные и попробуйте снова.`,
},
[EAuthErrorCodes.INVALID_EMAIL_SIGN_IN]: {
title: `Invalid email`,
message: () => `Invalid email. Please try again.`,
title: `Некорректный e-mail`,
message: () => `Некорректный e-mail. Попробуйте снова.`,
},
[EAuthErrorCodes.MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED]: {
title: `Email and code required`,
message: () => `Email and code required. Please try again.`,
title: `Нужны e-mail и код`,
message: () => `Укажите e-mail и код подтверждения, затем попробуйте снова.`,
},
[EAuthErrorCodes.INVALID_EMAIL_MAGIC_SIGN_IN]: {
title: `Invalid email`,
message: () => `Invalid email. Please try again.`,
title: `Некорректный e-mail`,
message: () => `Некорректный e-mail. Попробуйте снова.`,
},
// Both Sign in and Sign up
[EAuthErrorCodes.INVALID_MAGIC_CODE_SIGN_IN]: {
title: `Authentication failed`,
message: () => `Invalid magic code. Please try again.`,
title: `Неверный код подтверждения`,
message: () => `Неверный код подтверждения. Попробуйте снова.`,
},
[EAuthErrorCodes.INVALID_MAGIC_CODE_SIGN_UP]: {
title: `Authentication failed`,
message: () => `Invalid magic code. Please try again.`,
title: `Неверный код подтверждения`,
message: () => `Неверный код подтверждения. Попробуйте снова.`,
},
[EAuthErrorCodes.EXPIRED_MAGIC_CODE_SIGN_IN]: {
title: `Expired magic code`,
message: () => `Expired magic code. Please try again.`,
title: `Код подтверждения истёк`,
message: () => `Код подтверждения истёк. Запросите новый и попробуйте снова.`,
},
[EAuthErrorCodes.EXPIRED_MAGIC_CODE_SIGN_UP]: {
title: `Expired magic code`,
message: () => `Expired magic code. Please try again.`,
title: `Код подтверждения истёк`,
message: () => `Код подтверждения истёк. Запросите новый и попробуйте снова.`,
},
[EAuthErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN]: {
title: `Expired magic code`,
message: () => `Expired magic code. Please try again.`,
title: `Лимит попыток исчерпан`,
message: () => `Лимит попыток ввода кода исчерпан. Запросите новый код.`,
},
[EAuthErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP]: {
title: `Expired magic code`,
message: () => `Expired magic code. Please try again.`,
title: `Лимит попыток исчерпан`,
message: () => `Лимит попыток ввода кода исчерпан. Запросите новый код.`,
},
// Oauth
[EAuthErrorCodes.OAUTH_NOT_CONFIGURED]: {
title: `OAuth not configured`,
message: () => `OAuth not configured. Please contact your administrator.`,
title: `OAuth не настроен`,
message: () => `OAuth не настроен. Обратитесь к администратору.`,
},
[EAuthErrorCodes.GOOGLE_NOT_CONFIGURED]: {
title: `Google not configured`,
message: () => `Google not configured. Please contact your administrator.`,
title: `Google OAuth не настроен`,
message: () => `Google OAuth не настроен. Обратитесь к администратору.`,
},
[EAuthErrorCodes.GITHUB_NOT_CONFIGURED]: {
title: `GitHub not configured`,
message: () => `GitHub not configured. Please contact your administrator.`,
title: `GitHub OAuth не настроен`,
message: () => `GitHub OAuth не настроен. Обратитесь к администратору.`,
},
[EAuthErrorCodes.GITLAB_NOT_CONFIGURED]: {
title: `GitLab not configured`,
message: () => `GitLab not configured. Please contact your administrator.`,
title: `GitLab OAuth не настроен`,
message: () => `GitLab OAuth не настроен. Обратитесь к администратору.`,
},
[EAuthErrorCodes.GOOGLE_OAUTH_PROVIDER_ERROR]: {
title: `Google OAuth provider error`,
message: () => `Google OAuth provider error. Please try again.`,
title: `Ошибка Google OAuth`,
message: () => `Не удалось авторизоваться через Google. Попробуйте снова.`,
},
[EAuthErrorCodes.GITHUB_OAUTH_PROVIDER_ERROR]: {
title: `GitHub OAuth provider error`,
message: () => `GitHub OAuth provider error. Please try again.`,
title: `Ошибка GitHub OAuth`,
message: () => `Не удалось авторизоваться через GitHub. Попробуйте снова.`,
},
[EAuthErrorCodes.GITLAB_OAUTH_PROVIDER_ERROR]: {
title: `GitLab OAuth provider error`,
message: () => `GitLab OAuth provider error. Please try again.`,
title: `Ошибка GitLab OAuth`,
message: () => `Не удалось авторизоваться через GitLab. Попробуйте снова.`,
},
// Reset Password
[EAuthErrorCodes.INVALID_PASSWORD_TOKEN]: {
title: `Invalid password token`,
message: () => `Invalid password token. Please try again.`,
title: `Некорректный токен`,
message: () => `Некорректный токен восстановления. Попробуйте снова.`,
},
[EAuthErrorCodes.EXPIRED_PASSWORD_TOKEN]: {
title: `Expired password token`,
message: () => `Expired password token. Please try again.`,
title: `Токен истёк`,
message: () => `Токен восстановления истёк. Запросите новый.`,
},
// Change password
[EAuthErrorCodes.MISSING_PASSWORD]: {
title: `Password required`,
message: () => `Password required. Please try again.`,
title: `Нужен пароль`,
message: () => `Укажите пароль и попробуйте снова.`,
},
[EAuthErrorCodes.INCORRECT_OLD_PASSWORD]: {
title: `Incorrect old password`,
message: () => `Incorrect old password. Please try again.`,
title: `Неверный старый пароль`,
message: () => `Старый пароль указан неверно. Попробуйте снова.`,
},
[EAuthErrorCodes.INVALID_NEW_PASSWORD]: {
title: `Invalid new password`,
message: () => `Invalid new password. Please try again.`,
title: `Некорректный новый пароль`,
message: () => `Новый пароль не соответствует требованиям.`,
},
// set password
[EAuthErrorCodes.PASSWORD_ALREADY_SET]: {
title: `Password already set`,
message: () => `Password already set. Please try again.`,
title: `Пароль уже установлен`,
message: () => `Пароль уже установлен. Выполните вход.`,
},
// admin
[EAuthErrorCodes.ADMIN_ALREADY_EXIST]: {
title: `Admin already exists`,
message: () => `Admin already exists. Please try again.`,
title: `Администратор уже существует`,
message: () => `Администратор уже существует. Попробуйте снова.`,
},
[EAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
title: `Email, password and first name required`,
message: () => `Email, password and first name required. Please try again.`,
title: `Нужны e-mail, пароль и имя`,
message: () => `Укажите e-mail, пароль и имя, затем попробуйте снова.`,
},
[EAuthErrorCodes.INVALID_ADMIN_EMAIL]: {
title: `Invalid admin email`,
message: () => `Invalid admin email. Please try again.`,
title: `Некорректный e-mail администратора`,
message: () => `Некорректный e-mail администратора. Попробуйте снова.`,
},
[EAuthErrorCodes.INVALID_ADMIN_PASSWORD]: {
title: `Invalid admin password`,
message: () => `Invalid admin password. Please try again.`,
title: `Некорректный пароль администратора`,
message: () => `Некорректный пароль администратора. Попробуйте снова.`,
},
[EAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
title: `Email and password required`,
message: () => `Email and password required. Please try again.`,
title: `Нужны e-mail и пароль`,
message: () => `Укажите e-mail и пароль, затем попробуйте снова.`,
},
[EAuthErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
title: `Authentication failed`,
message: () => `Authentication failed. Please try again.`,
title: `Не удалось выполнить вход`,
message: () => `Не удалось выполнить вход. Проверьте данные и попробуйте снова.`,
},
[EAuthErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
title: `Admin user already exists`,
message: () => `Admin user already exists. Sign in now.`,
title: `Администратор уже существует`,
message: () => `Администратор уже существует. Выполните вход.`,
},
[EAuthErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
title: `Admin user does not exist`,
message: () => `Admin user does not exist. Sign in now.`,
title: `Администратор не найден`,
message: () => `Администратор не найден. Выполните вход.`,
},
[EAuthErrorCodes.MAGIC_LINK_LOGIN_DISABLED]: {
title: `Magic link login disabled`,
message: () => `Magic link login is disabled. Please use password to login.`,
title: `Вход по magic link отключён`,
message: () => `Вход по magic link отключён. Используйте пароль.`,
},
[EAuthErrorCodes.PASSWORD_LOGIN_DISABLED]: {
title: `Password login disabled`,
message: () => `Password login is disabled. Please use magic link to login.`,
title: `Вход по паролю отключён`,
message: () => `Вход по паролю отключён. Используйте magic link.`,
},
[EAuthErrorCodes.ADMIN_USER_DEACTIVATED]: {
title: `Admin user deactivated`,
message: () => `Admin user account has been deactivated. Please contact administrator.`,
title: `Администратор деактивирован`,
message: () => `Аккаунт администратора деактивирован. Обратитесь к администратору.`,
},
[EAuthErrorCodes.RATE_LIMIT_EXCEEDED]: {
title: `Rate limit exceeded`,
message: () => `Too many requests. Please try again later.`,
title: `Слишком много запросов`,
message: () => `Слишком много запросов. Повторите попытку позже.`,
},
};
@ -365,8 +365,8 @@ export const authErrorHandler = (errorCode: EAuthErrorCodes, email?: string): TA
return {
type: EErrorAlertType.BANNER_ALERT,
code: errorCode,
title: errorCodeMessages[errorCode]?.title || "Error",
message: errorCodeMessages[errorCode]?.message(email) || "Something went wrong. Please try again.",
title: errorCodeMessages[errorCode]?.title || "Ошибка",
message: errorCodeMessages[errorCode]?.message(email) || "Что-то пошло не так. Попробуйте снова.",
};
return undefined;