Files

2.5 KiB

Customer & Router Onboarding Mockups

Built as part of the IT Pro Partner operations portal concept. Covers two onboarding flows:

Customer Onboarding

Three-step flow:

  1. Search Domain — enter domain or customer name; portal checks all connected platforms for matches
  2. Review Matches — auto-detected services shown with platform badge + detail. Not-found services shown with dashed border + "Link manually" action
  3. Confirm & Create — batch action to link selected services and create customer record

Service badge colors (per platform)

Platform Badge
Cloudflare (DNS) bg-amber-100 text-amber-700
RingLogix (VoIP) bg-purple-100 text-purple-700
UniFi (Network) bg-green-100 text-green-700
UISP (WISP) bg-cyan-100 text-cyan-700
RunCloud (Web) bg-blue-100 text-blue-700
MXroute (Email) bg-pink-100 text-pink-700

Key UX elements

  • "Create blank customer" link for new clients with no existing services
  • Save as Draft option for partial onboarding
  • Search triggers auto-scan across Cloudflare, RingLogix, UniFi, UISP APIs
  • Checkboxes allow selective linking (not all services need to be linked)

MikroTik Router Onboarding (onboard-router.html)

URL: https://vaultwarden.tailc2f3b0.ts.net/portal/onboard-router.html

Two-column layout:

  • Left: Customer selector dropdown, router name/model fields, Generate button, generated ROS7 script with Copy/Download actions
  • Right: 3-step explainer (Generate -> Run on Router -> Auto-Connects), status card, recently onboarded list

Registration script content

The generated script is displayed in a code block with:

  • WireGuard interface + peer creation
  • Tunnel IP assignment
  • Firewall rules (allow tunnel traffic, allow WG UDP port)
  • SSH lockdown to tunnel network
  • SSH key file write + import (ROS7 syntax: /user/ssh-keys/import public-key-file=...)
  • 60-second heartbeat scheduler via /system scheduler
  • One-time token tied to customer, expires in 24h

Status indicators

  • Waiting: Script generated but no check-in received (amber, clock icon)
  • Online: Router has checked in (green dot)

Previously onboarded list

Shows recent router deployments with name, online status, and time since registration.

Home Router WireGuard Tunnel (Live Test)

Germaine's CCR connected to netcup server as proof of concept.

  • Server: 10.77.0.1:51820
  • Router: 10.77.0.2 (WireGuard) / 10.10.10.1 (internal LAN)
  • SSH accessible through tunnel via wisp_rsa key
  • Latency: ~37ms, 0% packet loss
  • RouterOS 7.18.2 on CCR2004-16G-2S+