@hotosm/hanko-auth 0.3.5 → 0.4.1
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/README.md +39 -6
- package/dist/hanko-auth.esm.js +1857 -1671
- package/dist/hanko-auth.iife.js +464 -368
- package/dist/hanko-auth.umd.js +464 -368
- package/package.json +1 -5
- package/src/hanko-auth.styles.ts +406 -0
- package/src/hanko-auth.ts +77 -344
- package/src/translations.ts +87 -0
package/README.md
CHANGED
|
@@ -19,7 +19,7 @@ yarn add @hotosm/hanko-auth
|
|
|
19
19
|
|
|
20
20
|
### Import the component
|
|
21
21
|
|
|
22
|
-
```
|
|
22
|
+
```js
|
|
23
23
|
import "@hotosm/hanko-auth";
|
|
24
24
|
```
|
|
25
25
|
|
|
@@ -73,10 +73,13 @@ export function AuthButton({ hankoUrl, onLogin }) {
|
|
|
73
73
|
|
|
74
74
|
### Display
|
|
75
75
|
|
|
76
|
-
| Attribute
|
|
77
|
-
|
|
|
78
|
-
| `show-profile`
|
|
79
|
-
| `display-name`
|
|
76
|
+
| Attribute | Type | Default | Description |
|
|
77
|
+
| ---------------- | ------- | ---------- | ----------------------------------------------------------------- |
|
|
78
|
+
| `show-profile` | boolean | `false` | Show full profile (vs header button) |
|
|
79
|
+
| `display-name` | string | `""` | Override display name |
|
|
80
|
+
| `lang` | string | `"en"` | Language/locale code (e.g., "en", "es", "fr"). Enlish as fallback |
|
|
81
|
+
| `button-variant` | string | `"filled"` | Button style: `filled`, `outline`, or `plain` |
|
|
82
|
+
| `button-color` | string | `"primary"`| Button color: `primary`, `neutral`, or `danger` |
|
|
80
83
|
|
|
81
84
|
### Redirects
|
|
82
85
|
|
|
@@ -106,7 +109,7 @@ The component dispatches the following custom events:
|
|
|
106
109
|
|
|
107
110
|
### Event Handling Example
|
|
108
111
|
|
|
109
|
-
```
|
|
112
|
+
```js
|
|
110
113
|
const auth = document.querySelector("hotosm-auth");
|
|
111
114
|
|
|
112
115
|
auth.addEventListener("hanko-login", (e) => {
|
|
@@ -138,6 +141,36 @@ Shows a compact login button in the header:
|
|
|
138
141
|
</header>
|
|
139
142
|
```
|
|
140
143
|
|
|
144
|
+
#### Button Styling
|
|
145
|
+
|
|
146
|
+
Customize the login button appearance with `button-variant` and `button-color`:
|
|
147
|
+
|
|
148
|
+
```html
|
|
149
|
+
<!-- Filled primary button (default) -->
|
|
150
|
+
<hotosm-auth hanko-url="https://login.hotosm.org"></hotosm-auth>
|
|
151
|
+
|
|
152
|
+
<!-- Outline button -->
|
|
153
|
+
<hotosm-auth
|
|
154
|
+
hanko-url="https://login.hotosm.org"
|
|
155
|
+
button-variant="outline"
|
|
156
|
+
button-color="primary"
|
|
157
|
+
></hotosm-auth>
|
|
158
|
+
|
|
159
|
+
<!-- Plain text button -->
|
|
160
|
+
<hotosm-auth
|
|
161
|
+
hanko-url="https://login.hotosm.org"
|
|
162
|
+
button-variant="plain"
|
|
163
|
+
button-color="neutral"
|
|
164
|
+
></hotosm-auth>
|
|
165
|
+
|
|
166
|
+
<!-- Filled danger button -->
|
|
167
|
+
<hotosm-auth
|
|
168
|
+
hanko-url="https://login.hotosm.org"
|
|
169
|
+
button-variant="filled"
|
|
170
|
+
button-color="danger"
|
|
171
|
+
></hotosm-auth>
|
|
172
|
+
```
|
|
173
|
+
|
|
141
174
|
### Profile Mode
|
|
142
175
|
|
|
143
176
|
Shows full authentication form (for login pages):
|