diff --git a/desktop/src/features/communities/ui/WelcomeSetup.tsx b/desktop/src/features/communities/ui/WelcomeSetup.tsx index 3ff00df51b..ee1f221389 100644 --- a/desktop/src/features/communities/ui/WelcomeSetup.tsx +++ b/desktop/src/features/communities/ui/WelcomeSetup.tsx @@ -43,6 +43,7 @@ export function WelcomeSetup({ // behind the modal never changes out from under the user. const [isHostedSignInOpen, setIsHostedSignInOpen] = React.useState(false); const [copiedNpub, setCopiedNpub] = React.useState(false); + const [membershipRequired, setMembershipRequired] = React.useState(false); const communityOnboarding = useCommunityOnboarding(); const identityQuery = useIdentityQuery(); const systemColorScheme = useSystemColorScheme(); @@ -57,6 +58,7 @@ export function WelcomeSetup({ const showPage = React.useCallback( (nextPage: WelcomeSetupPage, direction?: OnboardingTransitionDirection) => { + setMembershipRequired(false); setTransitionMode( direction ?? (nextPage === "welcome" ? "backward" : "forward"), ); @@ -262,19 +264,24 @@ export function WelcomeSetup({ showPage(page === "member" ? "existing" : "welcome") } onConnect={startConnection} + onMembershipRequirementChange={ + page === "join" ? setMembershipRequired : undefined + } onRedeem={redeemInvite} placeholder="Invite link or community URL" variant="onboarding-spotlight" /> - {page === "join" ? ( -
- Joining a private community? + You’ll need to request access to this community
- Some communities need the owner to add you before you can - join. Copy your public ID and send it to the community - owner. + This community requires an admin to add you before you can + join. Copy your public ID and send it to them.
void;
onShowOptions: () => void;
optionsExpanded: boolean;
+ lockedBackupCreated?: boolean;
previewMode?: boolean;
returningFromSecurity: boolean;
+ showPreviewBackupShortcut?: boolean;
};
/**
@@ -80,8 +86,10 @@ export function BackupStep({
onOpenPasswordBackup,
onShowOptions,
optionsExpanded,
+ lockedBackupCreated = false,
previewMode = false,
returningFromSecurity,
+ showPreviewBackupShortcut = true,
}: BackupStepProps) {
const reduceMotion = useReducedMotion() ?? false;
const [created, setCreated] = React.useState(introPlayed || reduceMotion);
@@ -91,6 +99,10 @@ export function BackupStep({
const [copyError, setCopyError] = React.useState(null);
const [nsec, setNsec] = React.useState(null);
const [isRevealed, setIsRevealed] = React.useState(false);
+ const canUseSpoilerParticles = React.useMemo(
+ () => previewMode && supportsSpoilerParticles(),
+ [previewMode],
+ );
const cancelledRef = React.useRef(false);
const copiedTimerRef = React.useRef(null);
@@ -199,108 +211,167 @@ export function BackupStep({
>
- {previewMode ? "Back up your identity" : "Backup options"}
+ {previewMode ? "Create a private identity key" : "Backup options"}
-
- {previewMode
- ? "Buzz keeps your identity key protected on this device, but you should make a separate backup in case you lose access."
- : "Your identity key works like a password for your Buzz account. Keep a copy somewhere safe. You can create a backup file and lock it with a password you can remember."}
-
+ {previewMode ? (
+
+
+
+ ) : (
+
+ Your identity key works like a password for your Buzz account.
+ Keep a copy somewhere safe. You can create a backup file and lock
+ it with a password you can remember.
+
+ )}
-
-
+ {previewMode ? (
+
- {storageTitle}
-
- {storageDescription}
-
-
-
-
-
- {previewMode
- ? "Save in your password manager"
- : "Saved in your password manager"}
-
-
- Copy your identity key, then save it in a password manager like
- 1Password.
-
-
-
-
-
-
- {previewMode
- ? "Create a locked backup"
- : "Locked in a backup file"}
-
-
- Create a backup file and choose a password you can remember.
- You’ll need both to restore your account.
-
-
+
+
+
+
+
+ Keep it private and secure at all times.
+
+
+
+
+
+
+
+ Don’t share it with anyone.
+
+
+
+
+
+
+
+ Keep a backup because Buzz can’t reset or recover it.
+
+
-
- {copyError ? (
-
+
- Could not retrieve your private key: {copyError}. You can continue
- and find it later in Settings > Profile > Identity.
-
- ) : null}
-
+
+ {storageTitle}
+
+ {storageDescription}
+
+
+
+
+
+ Saved in your password manager
+
+
+ Copy your identity key, then save it in a password manager
+ like 1Password.
+
+
+
+
+
+
+ Locked in a backup file
+
+
+ Create a backup file and choose a password you can remember.
+ You’ll need both to restore your account.
+
+
+
+
+
+ {copyError ? (
+
+ Could not retrieve your private key: {copyError}. You can
+ continue and find it later in Settings > Profile >
+ Identity.
+
+ ) : null}
+
+ )}
+
+ {previewMode ? (
+
+
+
+ ) : null}
);
}
@@ -320,7 +391,7 @@ export function BackupStep({
key={created ? "created" : "creating"}
>
{created && previewMode
- ? "Your identity key is ready"
+ ? "Your private identity key"
: created
? "Your unique identity key has been created"
: "Creating your identity key"}
@@ -333,10 +404,7 @@ export function BackupStep({
)}
>
{previewMode ? (
- <>
- This works as the login and password for your Buzz account. Use
- it to access Buzz from any device.
- >
+ "Keep this key private. Anyone who has it can access your account."
) : (
<>
{introStorageDescription} You can continue now, or{" "}
@@ -379,60 +447,104 @@ export function BackupStep({
-
- {isRevealed && nsec ? nsec : maskedKey}
-
-
-
- {previewMode ? (
+
+ {canUseSpoilerParticles ? null : (
- ) : null}
+ )}
) : null} -
-
+
- {hasVerifiedBackup - ? "Your file and password can restore your identity." - : hasSelectedBackup - ? "Now enter your password to prove you can unlock it." - : hasCreated - ? "Learn how your backup works. Drop the file you just saved and unlock it with your password." - : "Keep the downloaded file private — you need both it and your password to restore your identity. Save the backup password somewhere safe; Buzz cannot reset it if lost."} + {showPreviewSaved + ? "Keep the backup file and password somewhere safe. You’ll need both to restore your identity." + : hasVerifiedBackup + ? "Your file and password can restore your identity." + : hasSelectedBackup + ? "Now enter your password to prove you can unlock it." + : hasCreated + ? "Learn how your backup works. Drop the file you just saved and unlock it with your password." + : "Keep the downloaded file private — you need both it and your password to restore your identity. Save the backup password somewhere safe; Buzz cannot reset it if lost."}
@@ -89,7 +106,13 @@ export function DownloadKeyStep({