@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.
Files changed (34) hide show
  1. package/LICENSE +191 -191
  2. package/README.md +527 -531
  3. package/dist/components/AuthProvider.svelte +56 -56
  4. package/dist/components/ProtectedRoute.svelte +71 -71
  5. package/dist/components/SignInButton.svelte +93 -93
  6. package/dist/components/SignOutButton.svelte +72 -72
  7. package/dist/components/UserProfile.svelte +71 -71
  8. package/dist/ui/account/LinkAccountButton.svelte +133 -133
  9. package/dist/ui/account/LinkedAccountsList.svelte +233 -233
  10. package/dist/ui/account/UnlinkAccountButton.svelte +179 -179
  11. package/dist/ui/forms/EmailCodeForm.svelte +224 -224
  12. package/dist/ui/forms/PasskeyConditionalInput.svelte +173 -173
  13. package/dist/ui/forms/SocialLoginButtons.svelte +209 -209
  14. package/dist/ui/helpers/AuthError.svelte +124 -124
  15. package/dist/ui/helpers/AuthLoading.svelte +83 -83
  16. package/dist/ui/helpers/OTPInput.svelte +214 -214
  17. package/dist/ui/helpers/ResendCodeButton.svelte +140 -140
  18. package/dist/ui/passkey/PasskeyDeleteButton.svelte +177 -177
  19. package/dist/ui/passkey/PasskeyList.svelte +225 -225
  20. package/dist/ui/passkey/PasskeyRegisterButton.svelte +52 -52
  21. package/dist/ui/session/SessionExpiryIndicator.svelte +109 -109
  22. package/dist/ui/session/SessionList.svelte +231 -231
  23. package/dist/ui/session/SessionRevokeButton.svelte +72 -72
  24. package/dist/ui/shared/Badge.svelte +100 -100
  25. package/dist/ui/shared/Button.svelte +213 -213
  26. package/dist/ui/shared/Card.svelte +85 -85
  27. package/dist/ui/shared/Input.svelte +192 -192
  28. package/dist/ui/shared/Spinner.svelte +75 -75
  29. package/dist/ui/styles/base.css +168 -168
  30. package/dist/ui/styles/theme.css +279 -279
  31. package/dist/ui/templates/AccountSettingsTemplate.svelte +205 -205
  32. package/dist/ui/templates/LoginTemplate.svelte +234 -234
  33. package/dist/ui/templates/SignUpTemplate.svelte +345 -345
  34. package/package.json +112 -111
package/dist/ui/account/UnlinkAccountButton.svelte CHANGED
@@ -1,179 +1,179 @@
1
- <!--
2
- UnlinkAccountButton Component
3
- Button to unlink a social account with confirmation
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 accountId: string;
11
- export let provider: SocialProvider;
12
- export let loading = false;
13
- let className = '';
14
- export { className as class };
15
-
16
- const dispatch = createEventDispatcher<{
17
- click: void;
18
- confirm: void;
19
- }>();
20
-
21
- let showConfirm = false;
22
-
23
- function handleClick() {
24
- if (loading) return;
25
- dispatch('click');
26
- showConfirm = true;
27
- }
28
-
29
- function handleConfirm() {
30
- if (loading) return;
31
- dispatch('confirm');
32
- }
33
-
34
- function handleCancel() {
35
- showConfirm = false;
36
- }
37
- </script>
38
-
39
- <div class="authrim-unlink {className}" data-account-id={accountId} data-provider={provider}>
40
- {#if showConfirm}
41
- <div class="authrim-unlink__confirm">
42
- <span class="authrim-unlink__confirm-text">Unlink?</span>
43
- <button
44
- type="button"
45
- class="authrim-unlink__action authrim-unlink__action--confirm"
46
- disabled={loading}
47
- on:click={handleConfirm}
48
- >
49
- {#if loading}
50
- <Spinner size="sm" />
51
- {:else}
52
- Yes
53
- {/if}
54
- </button>
55
- <button
56
- type="button"
57
- class="authrim-unlink__action authrim-unlink__action--cancel"
58
- disabled={loading}
59
- on:click={handleCancel}
60
- >
61
- No
62
- </button>
63
- </div>
64
- {:else}
65
- <button
66
- type="button"
67
- class="authrim-unlink__btn"
68
- disabled={loading}
69
- on:click={handleClick}
70
- aria-label="Unlink account"
71
- >
72
- <svg viewBox="0 0 20 20" fill="currentColor">
73
- <path d="M11.983 1.907a.75.75 0 00-1.292-.657l-8.5 9.5A.75.75 0 002.75 12h6.572l-1.305 6.093a.75.75 0 001.292.657l8.5-9.5A.75.75 0 0017.25 8h-6.572l1.305-6.093z"/>
74
- </svg>
75
- </button>
76
- {/if}
77
- </div>
78
-
79
- <style>
80
- .authrim-unlink {
81
- flex-shrink: 0;
82
- }
83
-
84
- .authrim-unlink__btn {
85
- display: flex;
86
- align-items: center;
87
- justify-content: center;
88
- width: 36px;
89
- height: 36px;
90
- padding: 0;
91
- background: transparent;
92
- border: none;
93
- border-radius: var(--authrim-radius-sm);
94
- color: var(--authrim-color-text-muted);
95
- cursor: pointer;
96
- transition:
97
- color var(--authrim-duration-fast) var(--authrim-ease-default),
98
- background-color var(--authrim-duration-fast) var(--authrim-ease-default);
99
- }
100
-
101
- .authrim-unlink__btn:hover:not(:disabled) {
102
- color: var(--authrim-color-warning-text);
103
- background: var(--authrim-color-warning-subtle);
104
- }
105
-
106
- .authrim-unlink__btn:focus-visible {
107
- outline: none;
108
- box-shadow: 0 0 0 3px var(--authrim-color-warning-subtle);
109
- }
110
-
111
- .authrim-unlink__btn:disabled {
112
- opacity: 0.5;
113
- cursor: not-allowed;
114
- }
115
-
116
- .authrim-unlink__btn svg {
117
- width: 18px;
118
- height: 18px;
119
- }
120
-
121
- .authrim-unlink__confirm {
122
- display: flex;
123
- align-items: center;
124
- gap: var(--authrim-space-2);
125
- animation: fade-in var(--authrim-duration-fast) var(--authrim-ease-out);
126
- }
127
-
128
- @keyframes fade-in {
129
- from { opacity: 0; }
130
- to { opacity: 1; }
131
- }
132
-
133
- .authrim-unlink__confirm-text {
134
- font-size: var(--authrim-text-xs);
135
- font-weight: 500;
136
- color: var(--authrim-color-text-secondary);
137
- }
138
-
139
- .authrim-unlink__action {
140
- padding: var(--authrim-space-1) var(--authrim-space-2);
141
- font-family: var(--authrim-font-sans);
142
- font-size: var(--authrim-text-xs);
143
- font-weight: 500;
144
- border: none;
145
- border-radius: var(--authrim-radius-sm);
146
- cursor: pointer;
147
- transition:
148
- background-color var(--authrim-duration-fast) var(--authrim-ease-default),
149
- transform var(--authrim-duration-fast) var(--authrim-ease-default);
150
- }
151
-
152
- .authrim-unlink__action:active:not(:disabled) {
153
- transform: scale(0.95);
154
- }
155
-
156
- .authrim-unlink__action:disabled {
157
- opacity: 0.5;
158
- cursor: not-allowed;
159
- }
160
-
161
- .authrim-unlink__action--confirm {
162
- background: var(--authrim-color-warning);
163
- color: white;
164
- min-width: 40px;
165
- }
166
-
167
- .authrim-unlink__action--confirm:hover:not(:disabled) {
168
- background: var(--authrim-color-warning-hover);
169
- }
170
-
171
- .authrim-unlink__action--cancel {
172
- background: var(--authrim-color-bg-subtle);
173
- color: var(--authrim-color-text-secondary);
174
- }
175
-
176
- .authrim-unlink__action--cancel:hover:not(:disabled) {
177
- background: var(--authrim-color-bg-muted);
178
- }
179
- </style>
1
+ <!--
2
+ UnlinkAccountButton Component
3
+ Button to unlink a social account with confirmation
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 accountId: string;
11
+ export let provider: SocialProvider;
12
+ export let loading = false;
13
+ let className = '';
14
+ export { className as class };
15
+
16
+ const dispatch = createEventDispatcher<{
17
+ click: void;
18
+ confirm: void;
19
+ }>();
20
+
21
+ let showConfirm = false;
22
+
23
+ function handleClick() {
24
+ if (loading) return;
25
+ dispatch('click');
26
+ showConfirm = true;
27
+ }
28
+
29
+ function handleConfirm() {
30
+ if (loading) return;
31
+ dispatch('confirm');
32
+ }
33
+
34
+ function handleCancel() {
35
+ showConfirm = false;
36
+ }
37
+ </script>
38
+
39
+ <div class="authrim-unlink {className}" data-account-id={accountId} data-provider={provider}>
40
+ {#if showConfirm}
41
+ <div class="authrim-unlink__confirm">
42
+ <span class="authrim-unlink__confirm-text">Unlink?</span>
43
+ <button
44
+ type="button"
45
+ class="authrim-unlink__action authrim-unlink__action--confirm"
46
+ disabled={loading}
47
+ on:click={handleConfirm}
48
+ >
49
+ {#if loading}
50
+ <Spinner size="sm" />
51
+ {:else}
52
+ Yes
53
+ {/if}
54
+ </button>
55
+ <button
56
+ type="button"
57
+ class="authrim-unlink__action authrim-unlink__action--cancel"
58
+ disabled={loading}
59
+ on:click={handleCancel}
60
+ >
61
+ No
62
+ </button>
63
+ </div>
64
+ {:else}
65
+ <button
66
+ type="button"
67
+ class="authrim-unlink__btn"
68
+ disabled={loading}
69
+ on:click={handleClick}
70
+ aria-label="Unlink account"
71
+ >
72
+ <svg viewBox="0 0 20 20" fill="currentColor">
73
+ <path d="M11.983 1.907a.75.75 0 00-1.292-.657l-8.5 9.5A.75.75 0 002.75 12h6.572l-1.305 6.093a.75.75 0 001.292.657l8.5-9.5A.75.75 0 0017.25 8h-6.572l1.305-6.093z"/>
74
+ </svg>
75
+ </button>
76
+ {/if}
77
+ </div>
78
+
79
+ <style>
80
+ .authrim-unlink {
81
+ flex-shrink: 0;
82
+ }
83
+
84
+ .authrim-unlink__btn {
85
+ display: flex;
86
+ align-items: center;
87
+ justify-content: center;
88
+ width: 36px;
89
+ height: 36px;
90
+ padding: 0;
91
+ background: transparent;
92
+ border: none;
93
+ border-radius: var(--authrim-radius-sm);
94
+ color: var(--authrim-color-text-muted);
95
+ cursor: pointer;
96
+ transition:
97
+ color var(--authrim-duration-fast) var(--authrim-ease-default),
98
+ background-color var(--authrim-duration-fast) var(--authrim-ease-default);
99
+ }
100
+
101
+ .authrim-unlink__btn:hover:not(:disabled) {
102
+ color: var(--authrim-color-warning-text);
103
+ background: var(--authrim-color-warning-subtle);
104
+ }
105
+
106
+ .authrim-unlink__btn:focus-visible {
107
+ outline: none;
108
+ box-shadow: 0 0 0 3px var(--authrim-color-warning-subtle);
109
+ }
110
+
111
+ .authrim-unlink__btn:disabled {
112
+ opacity: 0.5;
113
+ cursor: not-allowed;
114
+ }
115
+
116
+ .authrim-unlink__btn svg {
117
+ width: 18px;
118
+ height: 18px;
119
+ }
120
+
121
+ .authrim-unlink__confirm {
122
+ display: flex;
123
+ align-items: center;
124
+ gap: var(--authrim-space-2);
125
+ animation: fade-in var(--authrim-duration-fast) var(--authrim-ease-out);
126
+ }
127
+
128
+ @keyframes fade-in {
129
+ from { opacity: 0; }
130
+ to { opacity: 1; }
131
+ }
132
+
133
+ .authrim-unlink__confirm-text {
134
+ font-size: var(--authrim-text-xs);
135
+ font-weight: 500;
136
+ color: var(--authrim-color-text-secondary);
137
+ }
138
+
139
+ .authrim-unlink__action {
140
+ padding: var(--authrim-space-1) var(--authrim-space-2);
141
+ font-family: var(--authrim-font-sans);
142
+ font-size: var(--authrim-text-xs);
143
+ font-weight: 500;
144
+ border: none;
145
+ border-radius: var(--authrim-radius-sm);
146
+ cursor: pointer;
147
+ transition:
148
+ background-color var(--authrim-duration-fast) var(--authrim-ease-default),
149
+ transform var(--authrim-duration-fast) var(--authrim-ease-default);
150
+ }
151
+
152
+ .authrim-unlink__action:active:not(:disabled) {
153
+ transform: scale(0.95);
154
+ }
155
+
156
+ .authrim-unlink__action:disabled {
157
+ opacity: 0.5;
158
+ cursor: not-allowed;
159
+ }
160
+
161
+ .authrim-unlink__action--confirm {
162
+ background: var(--authrim-color-warning);
163
+ color: white;
164
+ min-width: 40px;
165
+ }
166
+
167
+ .authrim-unlink__action--confirm:hover:not(:disabled) {
168
+ background: var(--authrim-color-warning-hover);
169
+ }
170
+
171
+ .authrim-unlink__action--cancel {
172
+ background: var(--authrim-color-bg-subtle);
173
+ color: var(--authrim-color-text-secondary);
174
+ }
175
+
176
+ .authrim-unlink__action--cancel:hover:not(:disabled) {
177
+ background: var(--authrim-color-bg-muted);
178
+ }
179
+ </style>