@authrim/sveltekit 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +191 -191
- package/README.md +527 -531
- package/dist/components/AuthProvider.svelte +56 -56
- package/dist/components/ProtectedRoute.svelte +71 -71
- package/dist/components/SignInButton.svelte +93 -93
- package/dist/components/SignOutButton.svelte +72 -72
- package/dist/components/UserProfile.svelte +71 -71
- package/dist/ui/account/LinkAccountButton.svelte +133 -133
- package/dist/ui/account/LinkedAccountsList.svelte +233 -233
- package/dist/ui/account/UnlinkAccountButton.svelte +179 -179
- package/dist/ui/forms/EmailCodeForm.svelte +224 -224
- package/dist/ui/forms/PasskeyConditionalInput.svelte +173 -173
- package/dist/ui/forms/SocialLoginButtons.svelte +209 -209
- package/dist/ui/helpers/AuthError.svelte +124 -124
- package/dist/ui/helpers/AuthLoading.svelte +83 -83
- package/dist/ui/helpers/OTPInput.svelte +214 -214
- package/dist/ui/helpers/ResendCodeButton.svelte +140 -140
- package/dist/ui/passkey/PasskeyDeleteButton.svelte +177 -177
- package/dist/ui/passkey/PasskeyList.svelte +225 -225
- package/dist/ui/passkey/PasskeyRegisterButton.svelte +52 -52
- package/dist/ui/session/SessionExpiryIndicator.svelte +109 -109
- package/dist/ui/session/SessionList.svelte +231 -231
- package/dist/ui/session/SessionRevokeButton.svelte +72 -72
- package/dist/ui/shared/Badge.svelte +100 -100
- package/dist/ui/shared/Button.svelte +213 -213
- package/dist/ui/shared/Card.svelte +85 -85
- package/dist/ui/shared/Input.svelte +192 -192
- package/dist/ui/shared/Spinner.svelte +75 -75
- package/dist/ui/styles/base.css +168 -168
- package/dist/ui/styles/theme.css +279 -279
- package/dist/ui/templates/AccountSettingsTemplate.svelte +205 -205
- package/dist/ui/templates/LoginTemplate.svelte +234 -234
- package/dist/ui/templates/SignUpTemplate.svelte +345 -345
- package/package.json +112 -111
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
UserProfile Component
|
|
3
|
-
|
|
4
|
-
Displays user information from the auth stores.
|
|
5
|
-
-->
|
|
6
|
-
<script lang="ts">
|
|
7
|
-
import { getAuthContext } from '../utils/context.js';
|
|
8
|
-
|
|
9
|
-
/** Show avatar */
|
|
10
|
-
export let showAvatar: boolean = true;
|
|
11
|
-
|
|
12
|
-
/** Show email */
|
|
13
|
-
export let showEmail: boolean = true;
|
|
14
|
-
|
|
15
|
-
/** Custom class */
|
|
16
|
-
let className: string = '';
|
|
17
|
-
export { className as class };
|
|
18
|
-
|
|
19
|
-
const auth = getAuthContext();
|
|
20
|
-
const { user, isAuthenticated } = auth.stores;
|
|
21
|
-
</script>
|
|
22
|
-
|
|
23
|
-
{#if $isAuthenticated && $user}
|
|
24
|
-
<div class={className} {...$$restProps}>
|
|
25
|
-
<slot name="avatar" user={$user}>
|
|
26
|
-
{#if showAvatar && $user.picture}
|
|
27
|
-
<img src={$user.picture} alt={$user.name || 'User avatar'} class="authrim-avatar" />
|
|
28
|
-
{/if}
|
|
29
|
-
</slot>
|
|
30
|
-
|
|
31
|
-
<slot name="info" user={$user}>
|
|
32
|
-
<div class="authrim-user-info">
|
|
33
|
-
{#if $user.name}
|
|
34
|
-
<span class="authrim-user-name">{$user.name}</span>
|
|
35
|
-
{/if}
|
|
36
|
-
{#if showEmail && $user.email}
|
|
37
|
-
<span class="authrim-user-email">{$user.email}</span>
|
|
38
|
-
{/if}
|
|
39
|
-
</div>
|
|
40
|
-
</slot>
|
|
41
|
-
|
|
42
|
-
<slot user={$user} />
|
|
43
|
-
</div>
|
|
44
|
-
{:else}
|
|
45
|
-
<slot name="unauthenticated">
|
|
46
|
-
<!-- Empty by default -->
|
|
47
|
-
</slot>
|
|
48
|
-
{/if}
|
|
49
|
-
|
|
50
|
-
<style>
|
|
51
|
-
.authrim-avatar {
|
|
52
|
-
width: 40px;
|
|
53
|
-
height: 40px;
|
|
54
|
-
border-radius: 50%;
|
|
55
|
-
object-fit: cover;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.authrim-user-info {
|
|
59
|
-
display: flex;
|
|
60
|
-
flex-direction: column;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.authrim-user-name {
|
|
64
|
-
font-weight: 500;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.authrim-user-email {
|
|
68
|
-
font-size: 0.875em;
|
|
69
|
-
opacity: 0.7;
|
|
70
|
-
}
|
|
71
|
-
</style>
|
|
1
|
+
<!--
|
|
2
|
+
UserProfile Component
|
|
3
|
+
|
|
4
|
+
Displays user information from the auth stores.
|
|
5
|
+
-->
|
|
6
|
+
<script lang="ts">
|
|
7
|
+
import { getAuthContext } from '../utils/context.js';
|
|
8
|
+
|
|
9
|
+
/** Show avatar */
|
|
10
|
+
export let showAvatar: boolean = true;
|
|
11
|
+
|
|
12
|
+
/** Show email */
|
|
13
|
+
export let showEmail: boolean = true;
|
|
14
|
+
|
|
15
|
+
/** Custom class */
|
|
16
|
+
let className: string = '';
|
|
17
|
+
export { className as class };
|
|
18
|
+
|
|
19
|
+
const auth = getAuthContext();
|
|
20
|
+
const { user, isAuthenticated } = auth.stores;
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
{#if $isAuthenticated && $user}
|
|
24
|
+
<div class={className} {...$$restProps}>
|
|
25
|
+
<slot name="avatar" user={$user}>
|
|
26
|
+
{#if showAvatar && $user.picture}
|
|
27
|
+
<img src={$user.picture} alt={$user.name || 'User avatar'} class="authrim-avatar" />
|
|
28
|
+
{/if}
|
|
29
|
+
</slot>
|
|
30
|
+
|
|
31
|
+
<slot name="info" user={$user}>
|
|
32
|
+
<div class="authrim-user-info">
|
|
33
|
+
{#if $user.name}
|
|
34
|
+
<span class="authrim-user-name">{$user.name}</span>
|
|
35
|
+
{/if}
|
|
36
|
+
{#if showEmail && $user.email}
|
|
37
|
+
<span class="authrim-user-email">{$user.email}</span>
|
|
38
|
+
{/if}
|
|
39
|
+
</div>
|
|
40
|
+
</slot>
|
|
41
|
+
|
|
42
|
+
<slot user={$user} />
|
|
43
|
+
</div>
|
|
44
|
+
{:else}
|
|
45
|
+
<slot name="unauthenticated">
|
|
46
|
+
<!-- Empty by default -->
|
|
47
|
+
</slot>
|
|
48
|
+
{/if}
|
|
49
|
+
|
|
50
|
+
<style>
|
|
51
|
+
.authrim-avatar {
|
|
52
|
+
width: 40px;
|
|
53
|
+
height: 40px;
|
|
54
|
+
border-radius: 50%;
|
|
55
|
+
object-fit: cover;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.authrim-user-info {
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.authrim-user-name {
|
|
64
|
+
font-weight: 500;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.authrim-user-email {
|
|
68
|
+
font-size: 0.875em;
|
|
69
|
+
opacity: 0.7;
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
@@ -1,133 +1,133 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
LinkAccountButton Component
|
|
3
|
-
Button to link a social account
|
|
4
|
-
-->
|
|
5
|
-
<script lang="ts">
|
|
6
|
-
import { createEventDispatcher } from 'svelte';
|
|
7
|
-
import type { SocialProvider } from '../../types.js';
|
|
8
|
-
import Spinner from '../shared/Spinner.svelte';
|
|
9
|
-
|
|
10
|
-
export let provider: SocialProvider;
|
|
11
|
-
export let loading = false;
|
|
12
|
-
export let disabled = false;
|
|
13
|
-
let className = '';
|
|
14
|
-
export { className as class };
|
|
15
|
-
|
|
16
|
-
const dispatch = createEventDispatcher<{ click: void }>();
|
|
17
|
-
|
|
18
|
-
const providerConfig: Record<SocialProvider, { name: string }> = {
|
|
19
|
-
google: { name: 'Google' },
|
|
20
|
-
apple: { name: 'Apple' },
|
|
21
|
-
microsoft: { name: 'Microsoft' },
|
|
22
|
-
github: { name: 'GitHub' },
|
|
23
|
-
facebook: { name: 'Facebook' },
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
$: config = providerConfig[provider] || { name: provider };
|
|
27
|
-
</script>
|
|
28
|
-
|
|
29
|
-
<button
|
|
30
|
-
type="button"
|
|
31
|
-
class="authrim-link-account authrim-link-account--{provider} {className}"
|
|
32
|
-
disabled={disabled || loading}
|
|
33
|
-
on:click={() => dispatch('click')}
|
|
34
|
-
{...$$restProps}
|
|
35
|
-
>
|
|
36
|
-
{#if loading}
|
|
37
|
-
<span class="authrim-link-account__spinner">
|
|
38
|
-
<Spinner size="sm" />
|
|
39
|
-
</span>
|
|
40
|
-
{:else}
|
|
41
|
-
<span class="authrim-link-account__icon">
|
|
42
|
-
{#if provider === 'google'}
|
|
43
|
-
<svg viewBox="0 0 24 24">
|
|
44
|
-
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
|
45
|
-
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
|
46
|
-
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
|
47
|
-
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
|
48
|
-
</svg>
|
|
49
|
-
{:else if provider === 'github'}
|
|
50
|
-
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
51
|
-
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
|
|
52
|
-
</svg>
|
|
53
|
-
{:else if provider === 'apple'}
|
|
54
|
-
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
55
|
-
<path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/>
|
|
56
|
-
</svg>
|
|
57
|
-
{:else}
|
|
58
|
-
<svg viewBox="0 0 20 20" fill="currentColor">
|
|
59
|
-
<path d="M10 0a10 10 0 1010 10A10 10 0 0010 0zm0 18a8 8 0 118-8 8 8 0 01-8 8z"/>
|
|
60
|
-
</svg>
|
|
61
|
-
{/if}
|
|
62
|
-
</span>
|
|
63
|
-
{/if}
|
|
64
|
-
<span class="authrim-link-account__text" class:authrim-link-account__text--hidden={loading}>
|
|
65
|
-
<slot>Link {config.name}</slot>
|
|
66
|
-
</span>
|
|
67
|
-
</button>
|
|
68
|
-
|
|
69
|
-
<style>
|
|
70
|
-
.authrim-link-account {
|
|
71
|
-
position: relative;
|
|
72
|
-
display: flex;
|
|
73
|
-
align-items: center;
|
|
74
|
-
justify-content: center;
|
|
75
|
-
gap: var(--authrim-space-2);
|
|
76
|
-
height: 40px;
|
|
77
|
-
padding: 0 var(--authrim-space-4);
|
|
78
|
-
font-family: var(--authrim-font-sans);
|
|
79
|
-
font-size: var(--authrim-text-sm);
|
|
80
|
-
font-weight: 500;
|
|
81
|
-
color: var(--authrim-color-text);
|
|
82
|
-
background: var(--authrim-color-bg);
|
|
83
|
-
border: 1.5px solid var(--authrim-color-border);
|
|
84
|
-
border-radius: var(--authrim-radius-md);
|
|
85
|
-
cursor: pointer;
|
|
86
|
-
transition:
|
|
87
|
-
background-color var(--authrim-duration-fast) var(--authrim-ease-default),
|
|
88
|
-
border-color var(--authrim-duration-fast) var(--authrim-ease-default),
|
|
89
|
-
transform var(--authrim-duration-fast) var(--authrim-ease-default);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.authrim-link-account:hover:not(:disabled) {
|
|
93
|
-
background: var(--authrim-color-bg-subtle);
|
|
94
|
-
border-color: var(--authrim-color-border-strong);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.authrim-link-account:active:not(:disabled) {
|
|
98
|
-
transform: scale(0.98);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.authrim-link-account:focus-visible {
|
|
102
|
-
outline: none;
|
|
103
|
-
box-shadow: var(--authrim-shadow-focus);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.authrim-link-account:disabled {
|
|
107
|
-
opacity: 0.5;
|
|
108
|
-
cursor: not-allowed;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.authrim-link-account__spinner {
|
|
112
|
-
position: absolute;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.authrim-link-account__icon {
|
|
116
|
-
width: 18px;
|
|
117
|
-
height: 18px;
|
|
118
|
-
flex-shrink: 0;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.authrim-link-account__icon svg {
|
|
122
|
-
width: 100%;
|
|
123
|
-
height: 100%;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.authrim-link-account__text {
|
|
127
|
-
transition: opacity var(--authrim-duration-fast) var(--authrim-ease-default);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.authrim-link-account__text--hidden {
|
|
131
|
-
opacity: 0;
|
|
132
|
-
}
|
|
133
|
-
</style>
|
|
1
|
+
<!--
|
|
2
|
+
LinkAccountButton Component
|
|
3
|
+
Button to link a social account
|
|
4
|
+
-->
|
|
5
|
+
<script lang="ts">
|
|
6
|
+
import { createEventDispatcher } from 'svelte';
|
|
7
|
+
import type { SocialProvider } from '../../types.js';
|
|
8
|
+
import Spinner from '../shared/Spinner.svelte';
|
|
9
|
+
|
|
10
|
+
export let provider: SocialProvider;
|
|
11
|
+
export let loading = false;
|
|
12
|
+
export let disabled = false;
|
|
13
|
+
let className = '';
|
|
14
|
+
export { className as class };
|
|
15
|
+
|
|
16
|
+
const dispatch = createEventDispatcher<{ click: void }>();
|
|
17
|
+
|
|
18
|
+
const providerConfig: Record<SocialProvider, { name: string }> = {
|
|
19
|
+
google: { name: 'Google' },
|
|
20
|
+
apple: { name: 'Apple' },
|
|
21
|
+
microsoft: { name: 'Microsoft' },
|
|
22
|
+
github: { name: 'GitHub' },
|
|
23
|
+
facebook: { name: 'Facebook' },
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
$: config = providerConfig[provider] || { name: provider };
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<button
|
|
30
|
+
type="button"
|
|
31
|
+
class="authrim-link-account authrim-link-account--{provider} {className}"
|
|
32
|
+
disabled={disabled || loading}
|
|
33
|
+
on:click={() => dispatch('click')}
|
|
34
|
+
{...$$restProps}
|
|
35
|
+
>
|
|
36
|
+
{#if loading}
|
|
37
|
+
<span class="authrim-link-account__spinner">
|
|
38
|
+
<Spinner size="sm" />
|
|
39
|
+
</span>
|
|
40
|
+
{:else}
|
|
41
|
+
<span class="authrim-link-account__icon">
|
|
42
|
+
{#if provider === 'google'}
|
|
43
|
+
<svg viewBox="0 0 24 24">
|
|
44
|
+
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
|
45
|
+
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
|
46
|
+
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
|
47
|
+
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
|
48
|
+
</svg>
|
|
49
|
+
{:else if provider === 'github'}
|
|
50
|
+
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
51
|
+
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
|
|
52
|
+
</svg>
|
|
53
|
+
{:else if provider === 'apple'}
|
|
54
|
+
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
55
|
+
<path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/>
|
|
56
|
+
</svg>
|
|
57
|
+
{:else}
|
|
58
|
+
<svg viewBox="0 0 20 20" fill="currentColor">
|
|
59
|
+
<path d="M10 0a10 10 0 1010 10A10 10 0 0010 0zm0 18a8 8 0 118-8 8 8 0 01-8 8z"/>
|
|
60
|
+
</svg>
|
|
61
|
+
{/if}
|
|
62
|
+
</span>
|
|
63
|
+
{/if}
|
|
64
|
+
<span class="authrim-link-account__text" class:authrim-link-account__text--hidden={loading}>
|
|
65
|
+
<slot>Link {config.name}</slot>
|
|
66
|
+
</span>
|
|
67
|
+
</button>
|
|
68
|
+
|
|
69
|
+
<style>
|
|
70
|
+
.authrim-link-account {
|
|
71
|
+
position: relative;
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
justify-content: center;
|
|
75
|
+
gap: var(--authrim-space-2);
|
|
76
|
+
height: 40px;
|
|
77
|
+
padding: 0 var(--authrim-space-4);
|
|
78
|
+
font-family: var(--authrim-font-sans);
|
|
79
|
+
font-size: var(--authrim-text-sm);
|
|
80
|
+
font-weight: 500;
|
|
81
|
+
color: var(--authrim-color-text);
|
|
82
|
+
background: var(--authrim-color-bg);
|
|
83
|
+
border: 1.5px solid var(--authrim-color-border);
|
|
84
|
+
border-radius: var(--authrim-radius-md);
|
|
85
|
+
cursor: pointer;
|
|
86
|
+
transition:
|
|
87
|
+
background-color var(--authrim-duration-fast) var(--authrim-ease-default),
|
|
88
|
+
border-color var(--authrim-duration-fast) var(--authrim-ease-default),
|
|
89
|
+
transform var(--authrim-duration-fast) var(--authrim-ease-default);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.authrim-link-account:hover:not(:disabled) {
|
|
93
|
+
background: var(--authrim-color-bg-subtle);
|
|
94
|
+
border-color: var(--authrim-color-border-strong);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.authrim-link-account:active:not(:disabled) {
|
|
98
|
+
transform: scale(0.98);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.authrim-link-account:focus-visible {
|
|
102
|
+
outline: none;
|
|
103
|
+
box-shadow: var(--authrim-shadow-focus);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.authrim-link-account:disabled {
|
|
107
|
+
opacity: 0.5;
|
|
108
|
+
cursor: not-allowed;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.authrim-link-account__spinner {
|
|
112
|
+
position: absolute;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.authrim-link-account__icon {
|
|
116
|
+
width: 18px;
|
|
117
|
+
height: 18px;
|
|
118
|
+
flex-shrink: 0;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.authrim-link-account__icon svg {
|
|
122
|
+
width: 100%;
|
|
123
|
+
height: 100%;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.authrim-link-account__text {
|
|
127
|
+
transition: opacity var(--authrim-duration-fast) var(--authrim-ease-default);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.authrim-link-account__text--hidden {
|
|
131
|
+
opacity: 0;
|
|
132
|
+
}
|
|
133
|
+
</style>
|