> ## Documentation Index > Fetch the complete documentation index at: https://docs.anchorage.com/llms.txt > Use this file to discover all available pages before exploring further. # Adding users > Invite and onboard new users to Porto. export const ImageCarousel = ({images, perView = 3, thumbMaxWidth = 220, children}) => { const [page, setPage] = useState(0); const [imgH, setImgH] = useState(0); const [zoomIdx, setZoomIdx] = useState(null); const stripRef = useRef(null); const THUMB_MAX_WIDTH = thumbMaxWidth; const PEEK_WIDTH = 34; const STAGE_HEIGHT = 460; const fromChildren = React.Children.toArray(children).map(c => c && c.props && c.props.src ? { src: c.props.src, alt: c.props.alt } : null).filter(Boolean); const items = fromChildren.length ? fromChildren : images || []; const count = items.length; const columns = Math.min(perView, count) || 1; const totalPages = Math.ceil(count / columns); const showControls = totalPages > 1; const goTo = p => setPage((p % totalPages + totalPages) % totalPages); const prev = () => goTo(page - 1); const next = () => goTo(page + 1); const zoomTo = i => { const idx = (i % count + count) % count; setZoomIdx(idx); setPage(Math.floor(idx / columns)); }; useEffect(() => { if (zoomIdx === null) return; const item = items[zoomIdx]; const overlay = document.createElement("div"); overlay.setAttribute("role", "dialog"); overlay.setAttribute("aria-modal", "true"); overlay.setAttribute("aria-label", item.alt || "Screenshot"); Object.assign(overlay.style, { position: "fixed", top: "0", left: "0", right: "0", bottom: "0", zIndex: "2147483000", background: "rgba(5, 5, 5, 0.98)", display: "flex", alignItems: "center", justifyContent: "center", padding: "24px 72px", cursor: "zoom-out" }); const img = document.createElement("img"); img.src = item.src; img.alt = item.alt || ""; Object.assign(img.style, { maxWidth: "94vw", maxHeight: "88vh", width: "auto", height: "auto", borderRadius: "10px", boxShadow: "0 8px 40px rgba(0, 0, 0, 0.5)", cursor: "zoom-out" }); overlay.appendChild(img); const makeButton = (label, text, position) => { const b = document.createElement("button"); b.type = "button"; b.setAttribute("aria-label", label); b.textContent = text; Object.assign(b.style, { position: "absolute", width: "40px", height: "40px", borderRadius: "50%", border: "1px solid rgba(255, 255, 255, 0.35)", background: "rgba(255, 255, 255, 0.16)", color: "#fff", fontSize: "20px", lineHeight: "38px", textAlign: "center", cursor: "pointer", padding: "0" }, position); overlay.appendChild(b); return b; }; const closeButton = makeButton("Close", "×", { top: "18px", right: "18px" }); let prevButton = null; let nextButton = null; if (count > 1) { prevButton = makeButton("Previous screenshot", "‹", { left: "18px", top: "calc(50% - 20px)" }); nextButton = makeButton("Next screenshot", "›", { right: "18px", top: "calc(50% - 20px)" }); const counter = document.createElement("div"); counter.textContent = `${zoomIdx + 1} of ${count}`; Object.assign(counter.style, { position: "absolute", bottom: "16px", left: "0", right: "0", textAlign: "center", fontSize: "13px", color: "rgba(255, 255, 255, 0.85)" }); overlay.appendChild(counter); } const close = () => setZoomIdx(null); overlay.addEventListener("click", e => { if (e.target === prevButton || e.target === nextButton) return; close(); }); if (prevButton) prevButton.addEventListener("click", () => zoomTo(zoomIdx - 1)); if (nextButton) nextButton.addEventListener("click", () => zoomTo(zoomIdx + 1)); const onKey = e => { if (e.key === "Escape") close(); else if (e.key === "ArrowLeft") zoomTo(zoomIdx - 1); else if (e.key === "ArrowRight") zoomTo(zoomIdx + 1); }; window.addEventListener("keydown", onKey); const previousOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; document.body.appendChild(overlay); closeButton.focus(); return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = previousOverflow; overlay.remove(); }; }, [zoomIdx]); useEffect(() => { const strip = stripRef.current; if (!strip) return; const measure = () => { const box = strip.querySelector("[data-carousel-imgbox]"); if (box && box.clientHeight) setImgH(box.clientHeight); }; measure(); const ro = new ResizeObserver(measure); ro.observe(strip); return () => ro.disconnect(); }, []); if (!items.length) return null; const start = page * columns; const visible = items.slice(start, start + columns); const zoomBtnStyle = { position: "absolute", zIndex: 2, width: "40px", height: "40px", borderRadius: "50%", border: "1px solid rgba(255, 255, 255, 0.3)", background: "rgba(255, 255, 255, 0.14)", color: "#fff", fontSize: "20px", lineHeight: "38px", textAlign: "center", cursor: "pointer", padding: 0 }; const pager = showControls ?
{start + 1} {visible.length > 1 ? "–" + (start + visible.length) : ""} of {count}
: null; if (perView === 1) { const img = items[page]; const overlayArrow = side => { const isLeft = side === "left"; return ; }; return
{showControls && overlayArrow("left")} {showControls && overlayArrow("right")}
{img.alt &&
{img.alt}
} {pager}
; } const prevPeek = start > 0 ? items[start - 1] : null; const nextPeek = start + columns < count ? items[start + columns] : null; const renderPeek = (img, side) => { if (!img) return null; const isLeft = side === "left"; return }
{renderPeek(prevPeek, "left")} {} {Array.from({ length: columns }).map((_, i) => { const img = visible[i]; const slotStyle = { margin: 0, flex: "1 1 0", maxWidth: THUMB_MAX_WIDTH + "px", minWidth: 0 }; if (!img) { return {showControls && }
{pager} ; }; Only administrators can add new users to an organization and generate invites. ## Invite a new user Tap the **Settings** icon (bottom right), tap **Team**, then tap **Add new user**. Select the permission levels for the user, then tap **Continue**. Select the vaults the user will have access to and tap **Continue**. Then select the vault policies the user will be a required approver of. Provide the email address of the user you would like to invite. Add user screen for selecting a team role Add user screen for selecting which vaults the new user can access Add user screen for selecting vault policies for operator access Add user screen for entering the new user's email address Confirmation screen showing the invite was sent to the new user's email address The new user will receive an invite via email from `institutional@messages.anchorage.com` with instructions for how to join the organization. ## New user onboarding In the invite email, tap **Download the Porto iOS app** to download the mobile app from the Apple App Store. Follow the in-app prompts to complete identity verification (KYC) enrollment. Scan the enrollment QR code to link your device to the organization. ## Quorum approval Once the new user completes enrollment, the operation must be approved by the organization's quorum administrators. The administrator who initiated the request receives an alert notifying them to approve the operation. Quorum administrators receive a notification to approve the **Add user** operation. Each approving administrator taps **Add user** and completes biometric authentication to confirm. Once the quorum is met, the new user gains access to the organization and its assigned vaults. ## Related topics - [Adding users](/knowledge-base/platform/users/adding-users.md) - [Adding users with shared policies](/knowledge-base/porto/users/adding-users-advanced.md) - [Sandbox onboarding](/knowledge-base/platform/developers/sandbox/sandbox-onboarding.md) - [Onboarding your organization](/knowledge-base/platform/users/onboarding-organization.md) - [Creating and managing vaults](/knowledge-base/platform/users/creating-vaults.md)