console/app/components/showcase/AuthForm.vue at main · agentruntimecontrolprotocol/console · 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<script setup lang="ts">
const loginFields = [
  {
    name: 'email',
    type: 'email',
    label: 'Agent identity',
    placeholder: 'agent@runtime.io',
    required: true,
  },
  {
    name: 'password',
    type: 'password',
    label: 'Secret key',
    placeholder: '••••••••',
    required: true,
  },
]

const registerFields = [
  {
    name: 'handle',
    type: 'text',
    label: 'Agent handle',
    placeholder: 'my-agent',
    required: true,
  },
  {
    name: 'email',
    type: 'email',
    label: 'Contact email',
    placeholder: 'ops@runtime.io',
    required: true,
  },
  {
    name: 'password',
    type: 'password',
    label: 'Secret key',
    placeholder: '••••••••',
    required: true,
  },
  {
    name: 'terms',
    type: 'checkbox',
    label: 'I agree to the runtime usage policy',
    required: true,
  },
]

const otpFields = [
  {
    name: 'otp',
    type: 'otp',
    label: 'Session verification code',
  },
]

const loginProviders = [
  {
    label: 'Continue with GitHub',
    icon: 'i-material-symbols-code',
    color: 'neutral' as const,
    variant: 'subtle' as const,
  },
  {
    label: 'Continue with SSO',
    icon: 'i-material-symbols-key-outline',
    color: 'neutral' as const,
    variant: 'subtle' as const,
  },
]

const loginState = ref({ email: '', password: '' })
const registerState = ref({ handle: '', email: '', password: '', terms: false })
const otpState = ref({ otp: '' })
const loadingLogin = ref(false)

function handleLogin() {
  loadingLogin.value = true
  setTimeout(() => { loadingLogin.value = false }, 1500)
}
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Login form">
      <div class="w-full max-w-sm">
        <UAuthForm
          icon="i-material-symbols-manage-accounts-outline"
          title="Sign in to ARCP"
          description="Authenticate to access the agent runtime control plane."
          :fields="loginFields"
          :providers="loginProviders"
          :submit="{ label: 'Sign in', block: true }"
          :loading="loadingLogin"
          @submit="handleLogin"
        />
      </div>
    </GallerySection>

    <GallerySection title="Registration form">
      <div class="w-full max-w-sm">
        <UAuthForm
          icon="i-material-symbols-robot-2-outline"
          title="Register an agent"
          description="Create a new agent identity in the runtime."
          :fields="registerFields"
          :submit="{ label: 'Create agent', block: true, color: 'primary' }"
          separator="or sign in instead"
        />
      </div>
    </GallerySection>

    <GallerySection title="OTP / session verification">
      <div class="w-full max-w-sm">
        <UAuthForm
          icon="i-material-symbols-lock-outline"
          title="Verify your session"
          description="Enter the 6-digit code sent to your registered address."
          :fields="otpFields"
          :submit="{ label: 'Verify', block: true, color: 'success' }"
        />
      </div>
    </GallerySection>

    <GallerySection title="Loading state">
      <div class="w-full max-w-sm">
        <UAuthForm
          icon="i-material-symbols-sync-outline"
          title="Connecting to runtime"
          description="Establishing a secure lease with the ARCP gateway…"
          :fields="loginFields"
          :submit="{ label: 'Connecting…', block: true }"
          loading
        />
      </div>
    </GallerySection>

    <GallerySection title="Disabled state">
      <div class="w-full max-w-sm">
        <UAuthForm
          icon="i-material-symbols-block-outline"
          title="Runtime unavailable"
          description="Authentication is temporarily disabled while the runtime is in maintenance mode."
          :fields="loginFields"
          :submit="{ label: 'Sign in', block: true }"
          disabled
        />
      </div>
    </GallerySection>
  </div>
</template>