hivemind/app/views/channels/connect.html.erb at c1bd6597b80d9911c062e58ccb0a438657b842c6 · hivementality-ai/hivemind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<% platform_name = @channel.channel_type == "signal" ? "Signal" : "WhatsApp" %>
<div class="max-w-2xl mx-auto px-6 py-8" data-controller="qr-pair" data-qr-pair-health-url-value="<%= connector_health_channel_path(@channel) %>" data-qr-pair-qr-url-value="<%= connector_qr_channel_path(@channel) %>" data-qr-pair-logout-url-value="<%= connector_logout_channel_path(@channel) %>" data-qr-pair-platform-value="<%= platform_name %>">
  <%= link_to "← Channels", channels_path, class: "text-brand-light hover:text-brand-light text-sm" %>

  <div class="mt-6 mb-8 text-center">
    <h1 class="text-2xl font-bold text-white">Connect <%= @channel.name %></h1>
    <p class="text-text-muted mt-2">Scan the QR code with your phone to link this <%= platform_name %> account</p>
  </div>

  <!-- Status -->
  <div class="bg-surface-card rounded-xl border border-border-default p-8 text-center mb-6">
    <!-- Connection Status Badge -->
    <div class="mb-6" data-qr-pair-target="statusBadge">
      <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-surface-raised text-text-primary text-sm">
        <span class="w-2.5 h-2.5 rounded-full bg-yellow-500 animate-pulse"></span>
        Checking connector...
      </span>
    </div>

    <!-- QR Code Area -->
    <div class="flex justify-center mb-6" data-qr-pair-target="qrArea">
      <div class="w-[300px] h-[300px] bg-surface-base rounded-xl flex items-center justify-center">
        <div class="text-center">
          <div class="animate-spin w-8 h-8 border-2 border-brand border-t-transparent rounded-full mx-auto mb-3"></div>
          <p class="text-text-faint text-sm">Waiting for QR code...</p>
        </div>
      </div>
    </div>

    <!-- Connected State (hidden by default) -->
    <div class="hidden" data-qr-pair-target="connectedArea">
      <div class="w-24 h-24 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
        <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
        </svg>
      </div>
      <h2 class="text-xl font-bold text-green-400 mb-2">Connected!</h2>
      <p class="text-text-muted mb-4" data-qr-pair-target="userInfo"></p>
      <button data-action="click->qr-pair#reconnect"
              class="inline-flex items-center gap-2 px-5 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-lg transition text-sm">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        Reconnect (Generate New QR)
      </button>
    </div>

    <!-- Instructions -->
    <div data-qr-pair-target="instructions">
      <div class="text-left max-w-sm mx-auto mt-4 space-y-3">
        <p class="text-text-primary text-sm font-medium">To connect:</p>
        <ol class="text-text-muted text-sm space-y-2 list-decimal list-inside">
          <li>Open <strong class="text-white"><%= platform_name %></strong> on your phone</li>
          <li>Go to <strong class="text-white">Settings → Linked Devices</strong></li>
          <li>Tap <strong class="text-white"><%= @channel.channel_type == "signal" ? "Link New Device" : "Link a Device" %></strong></li>
          <li>Point your camera at the QR code above</li>
        </ol>
      </div>
    </div>
  </div>

  <!-- Error State -->
  <div class="hidden bg-red-900/20 border border-red-600 rounded-xl p-6 text-center mb-6" data-qr-pair-target="errorArea">
    <p class="text-red-300 font-medium mb-2">Connector not reachable</p>
    <p class="text-text-muted text-sm">Make sure the connector is running:</p>
    <code class="text-text-primary text-xs bg-surface-card px-3 py-1 rounded mt-2 inline-block">docker compose up connector</code>
  </div>

  <!-- Back button -->
  <div class="text-center">
    <%= link_to "Back to Channels", channels_path, class: "text-text-muted hover:text-text-primary text-sm" %>
  </div>
</div>