@hotosm/hanko-auth 0.3.5 → 0.4.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/README.md +71 -6
- package/dist/hanko-auth.esm.js +2854 -2089
- package/dist/hanko-auth.iife.js +472 -360
- package/dist/hanko-auth.umd.js +472 -360
- package/package.json +1 -5
- package/src/hanko-auth.styles.ts +430 -0
- package/src/hanko-auth.ts +89 -346
- package/src/hanko-i18n-es.ts +229 -0
- package/src/hanko-i18n-fr.ts +229 -0
- package/src/hanko-i18n-pt.ts +229 -0
- 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):
|
|
@@ -152,6 +185,38 @@ Shows full authentication form (for login pages):
|
|
|
152
185
|
></hotosm-auth>
|
|
153
186
|
```
|
|
154
187
|
|
|
188
|
+
## Styling
|
|
189
|
+
|
|
190
|
+
The component uses Shadow DOM and can be customized using CSS custom properties.
|
|
191
|
+
|
|
192
|
+
### CSS Custom Properties
|
|
193
|
+
|
|
194
|
+
| Property | Description | Default |
|
|
195
|
+
| ----------------------------- | ---------------------------------- | ------------------------------------ |
|
|
196
|
+
| `--login-btn-margin` | Margin around the login button | `0` |
|
|
197
|
+
| `--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 | `inherit` |
|
|
204
|
+
|
|
205
|
+
**Example:**
|
|
206
|
+
|
|
207
|
+
```css
|
|
208
|
+
hotosm-auth {
|
|
209
|
+
--login-btn-margin: 8px;
|
|
210
|
+
--login-btn-padding: 12px 24px;
|
|
211
|
+
--login-btn-bg-color: #d73f3f;
|
|
212
|
+
--login-btn-hover-bg-color: #b83333;
|
|
213
|
+
--login-btn-border-radius: 8px;
|
|
214
|
+
--login-btn-text-color: #ffffff;
|
|
215
|
+
--login-btn-text-size: 16px;
|
|
216
|
+
--login-btn-font-family: 'Arial', sans-serif;
|
|
217
|
+
}
|
|
218
|
+
```
|
|
219
|
+
|
|
155
220
|
## Configuration
|
|
156
221
|
|
|
157
222
|
### Hanko URL Detection
|