@hotosm/hanko-auth 0.4.5 → 0.4.7
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 +38 -9
- package/dist/hanko-auth.esm.js +782 -660
- package/dist/hanko-auth.iife.js +171 -57
- package/dist/hanko-auth.umd.js +172 -58
- package/package.json +1 -1
- package/src/hanko-auth.styles.ts +85 -19
- package/src/hanko-auth.ts +89 -2
package/README.md
CHANGED
|
@@ -80,6 +80,7 @@ export function AuthButton({ hankoUrl, onLogin }) {
|
|
|
80
80
|
| `lang` | string | `"en"` | Language/locale code (e.g., "en", "es", "fr"). Enlish as fallback |
|
|
81
81
|
| `button-variant` | string | `"filled"` | Button style: `filled`, `outline`, or `plain` |
|
|
82
82
|
| `button-color` | string | `"primary"`| Button color: `primary`, `neutral`, or `danger` |
|
|
83
|
+
| `display` | string | `"default"`| Display mode: `default` (compact avatar) or `bar` (full-width bar with avatar + email + arrow) |
|
|
83
84
|
|
|
84
85
|
### Redirects
|
|
85
86
|
|
|
@@ -171,6 +172,18 @@ Customize the login button appearance with `button-variant` and `button-color`:
|
|
|
171
172
|
></hotosm-auth>
|
|
172
173
|
```
|
|
173
174
|
|
|
175
|
+
### Bar Mode
|
|
176
|
+
|
|
177
|
+
Shows a full-width bar with avatar, email, and chevron arrow (ideal for mobile drawers/menus):
|
|
178
|
+
|
|
179
|
+
```html
|
|
180
|
+
<hotosm-auth
|
|
181
|
+
hanko-url="https://login.hotosm.org"
|
|
182
|
+
display="bar"
|
|
183
|
+
redirect-after-login="/"
|
|
184
|
+
></hotosm-auth>
|
|
185
|
+
```
|
|
186
|
+
|
|
174
187
|
### Profile Mode
|
|
175
188
|
|
|
176
189
|
Shows full authentication form (for login pages):
|
|
@@ -191,21 +204,36 @@ The component uses Shadow DOM and can be customized using CSS custom properties.
|
|
|
191
204
|
|
|
192
205
|
### CSS Custom Properties
|
|
193
206
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
|
207
|
+
#### Whole component
|
|
208
|
+
|
|
209
|
+
| Property | Description | Default |
|
|
210
|
+
| ----------------- | --------------------------------------------- | --------------------------------------- |
|
|
211
|
+
| `--font-family` | Font family for all text in the component | `system-ui, -apple-system, sans-serif` |
|
|
212
|
+
| `--font-weight` | Font weight for all text in the component | `500` |
|
|
213
|
+
|
|
214
|
+
#### Login button
|
|
215
|
+
|
|
216
|
+
| Property | Description | Default |
|
|
217
|
+
| ----------------------------- | ---------------------------------- | ------------------------------------------------------ |
|
|
218
|
+
| `--login-btn-margin` | Margin around the login button | `0` |
|
|
197
219
|
| `--login-btn-padding` | Padding inside the login button | `var(--hot-spacing-x-small) var(--hot-spacing-medium)` |
|
|
198
|
-
| `--login-btn-bg-color` | Background color of login button | `var(--hot-color-primary-1000)`
|
|
199
|
-
| `--login-btn-hover-bg-color` | Background color on hover | `var(--hot-color-primary-900)`
|
|
200
|
-
| `--login-btn-border-radius` | Border radius of login button | `var(--hot-border-radius-medium)`
|
|
201
|
-
| `--login-btn-text-color` | Text color of login button | `white`
|
|
202
|
-
| `--login-btn-text-size` | Font size of login button text | `var(--hot-font-size-medium)`
|
|
203
|
-
| `--login-btn-font-family` | Font family of login button | `
|
|
220
|
+
| `--login-btn-bg-color` | Background color of login button | `var(--hot-color-primary-1000)` |
|
|
221
|
+
| `--login-btn-hover-bg-color` | Background color on hover | `var(--hot-color-primary-900)` |
|
|
222
|
+
| `--login-btn-border-radius` | Border radius of login button | `var(--hot-border-radius-medium)` |
|
|
223
|
+
| `--login-btn-text-color` | Text color of login button | `white` |
|
|
224
|
+
| `--login-btn-text-size` | Font size of login button text | `var(--hot-font-size-medium)` |
|
|
225
|
+
| `--login-btn-font-family` | Font family of login button | falls back to `--font-family` |
|
|
226
|
+
| `--login-btn-font-weight` | Font weight of login button | falls back to `--font-weight` |
|
|
204
227
|
|
|
205
228
|
**Example:**
|
|
206
229
|
|
|
207
230
|
```css
|
|
208
231
|
hotosm-auth {
|
|
232
|
+
/* Whole component */
|
|
233
|
+
--font-family: 'Inter', sans-serif;
|
|
234
|
+
--font-weight: 400;
|
|
235
|
+
|
|
236
|
+
/* Login button overrides */
|
|
209
237
|
--login-btn-margin: 8px;
|
|
210
238
|
--login-btn-padding: 12px 24px;
|
|
211
239
|
--login-btn-bg-color: #d73f3f;
|
|
@@ -214,6 +242,7 @@ hotosm-auth {
|
|
|
214
242
|
--login-btn-text-color: #ffffff;
|
|
215
243
|
--login-btn-text-size: 16px;
|
|
216
244
|
--login-btn-font-family: 'Arial', sans-serif;
|
|
245
|
+
--login-btn-font-weight: 700;
|
|
217
246
|
}
|
|
218
247
|
```
|
|
219
248
|
|