Skip to content

Commit 05d115f

Browse files
rrd108rrd108
committed
feat LoginForm compoenet added
1 parent 56bd251 commit 05d115f

10 files changed

Lines changed: 1095 additions & 16 deletions

File tree

‎README.md‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,247 @@ nuxtUsers: {
104104
| `yarn db:create-users-table` | Create the users table |
105105
| `yarn db:create-user <email> <name> <password>` | Create a new user |
106106

107+
## Login Component
108+
109+
This module provides a flexible `LoginForm` component that you can use in your frontend. The component uses Formkit for form handling and validation, and includes slots for complete customization.
110+
111+
### Basic Usage
112+
113+
First, install Formkit in your project:
114+
115+
```bash
116+
npm install @formkit/nuxt
117+
# or
118+
yarn add @formkit/nuxt
119+
```
120+
121+
Add Formkit to your `nuxt.config.ts`:
122+
123+
```ts
124+
export default defineNuxtConfig({
125+
modules: ['nuxt-users', '@formkit/nuxt'],
126+
// ... other config
127+
})
128+
```
129+
130+
Then use the component in your Vue template:
131+
132+
```vue
133+
<template>
134+
<LoginForm
135+
@success="handleSuccess"
136+
@error="handleError"
137+
@submit="handleSubmit"
138+
/>
139+
</template>
140+
141+
<script setup>
142+
const handleSuccess = (user) => {
143+
console.log('Login successful:', user)
144+
// Handle successful login
145+
}
146+
147+
const handleError = (error) => {
148+
console.log('Login error:', error)
149+
// Handle login error
150+
}
151+
152+
const handleSubmit = (data) => {
153+
console.log('Form submitted:', data)
154+
// Handle form submission
155+
}
156+
</script>
157+
```
158+
159+
### Props
160+
161+
| Prop | Type | Default | Description |
162+
|------|------|---------|-------------|
163+
| `apiEndpoint` | `string` | `'/api/login'` | The API endpoint for login requests |
164+
| `redirectTo` | `string` | `'/'` | Where to redirect after successful login |
165+
166+
### Events
167+
168+
| Event | Payload | Description |
169+
|-------|---------|-------------|
170+
| `success` | `User` | Emitted when login is successful |
171+
| `error` | `string` | Emitted when login fails |
172+
| `submit` | `LoginFormData` | Emitted when form is submitted |
173+
174+
### Slots
175+
176+
The component provides several slots for customization:
177+
178+
#### `header`
179+
Customize the form header (title and subtitle).
180+
181+
```vue
182+
<LoginForm>
183+
<template #header>
184+
<div class="custom-header">
185+
<h2>Welcome to My App</h2>
186+
<p>Please sign in to continue</p>
187+
</div>
188+
</template>
189+
</LoginForm>
190+
```
191+
192+
#### `email-field`
193+
Customize the email input field.
194+
195+
```vue
196+
<LoginForm>
197+
<template #email-field>
198+
<FormKit
199+
type="email"
200+
name="email"
201+
label="Email Address"
202+
placeholder="your.email@example.com"
203+
validation="required|email"
204+
/>
205+
</template>
206+
</LoginForm>
207+
```
208+
209+
#### `password-field`
210+
Customize the password input field.
211+
212+
```vue
213+
<LoginForm>
214+
<template #password-field>
215+
<FormKit
216+
type="password"
217+
name="password"
218+
label="Password"
219+
placeholder="Enter your password"
220+
validation="required|length:6"
221+
/>
222+
</template>
223+
</LoginForm>
224+
```
225+
226+
#### `remember-me`
227+
Customize the remember me checkbox.
228+
229+
```vue
230+
<LoginForm>
231+
<template #remember-me>
232+
<div class="remember-me">
233+
<FormKit
234+
type="checkbox"
235+
name="rememberMe"
236+
label="Keep me signed in"
237+
/>
238+
</div>
239+
</template>
240+
</LoginForm>
241+
```
242+
243+
#### `submit-button`
244+
Customize the submit button.
245+
246+
```vue
247+
<LoginForm>
248+
<template #submit-button>
249+
<FormKit
250+
type="submit"
251+
class="custom-button"
252+
>
253+
Sign In to My App
254+
</FormKit>
255+
</template>
256+
</LoginForm>
257+
```
258+
259+
#### `footer`
260+
Customize the form footer (e.g., forgot password link).
261+
262+
```vue
263+
<LoginForm>
264+
<template #footer>
265+
<div class="login-footer">
266+
<p>Don't have an account? <a href="/signup">Sign up</a></p>
267+
</div>
268+
</template>
269+
</LoginForm>
270+
```
271+
272+
#### `error-message`
273+
Customize how error messages are displayed.
274+
275+
```vue
276+
<LoginForm>
277+
<template #error-message="{ error }">
278+
<div v-if="error" class="custom-error">
279+
<span class="error-icon">⚠️</span>
280+
<span>{{ error }}</span>
281+
</div>
282+
</template>
283+
</LoginForm>
284+
```
285+
286+
### Styling
287+
288+
The component comes with a clean, modern design that works without any CSS framework. You can customize the appearance by:
289+
290+
1. **Using CSS custom properties**: The component uses CSS custom properties for colors, spacing, and other design tokens.
291+
292+
2. **Overriding styles**: Use `:deep()` to target Formkit elements and customize their appearance.
293+
294+
3. **Using slots**: Replace any part of the form with your own custom components.
295+
296+
### Example with Custom Styling
297+
298+
```vue
299+
<template>
300+
<LoginForm
301+
class="my-login-form"
302+
@success="handleSuccess"
303+
>
304+
<template #header>
305+
<div class="branded-header">
306+
<h2>Welcome to MyApp</h2>
307+
<p>Sign in to access your dashboard</p>
308+
</div>
309+
</template>
310+
311+
<template #submit-button>
312+
<FormKit
313+
type="submit"
314+
class="branded-button"
315+
>
316+
Sign In
317+
</FormKit>
318+
</template>
319+
</LoginForm>
320+
</template>
321+
322+
<style scoped>
323+
.my-login-form {
324+
--fk-border-color: #059669;
325+
--fk-border-color-focus: #047857;
326+
--fk-bg-color: #f0fdf4;
327+
}
328+
329+
.branded-header h2 {
330+
color: #059669;
331+
font-size: 2rem;
332+
font-weight: 700;
333+
}
334+
335+
.branded-button {
336+
background-color: #059669 !important;
337+
border-color: #059669 !important;
338+
font-weight: 600 !important;
339+
}
340+
341+
.branded-button:hover:not(:disabled) {
342+
background-color: #047857 !important;
343+
border-color: #047857 !important;
344+
}
345+
</style>
346+
```
347+
107348
## Database Schema
108349

109350
```sql

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"better-sqlite3": "^12.2.0"
4646
},
4747
"devDependencies": {
48+
"@formkit/nuxt": "^1.6.9",
4849
"@nuxt/devtools": "^2.6.2",
4950
"@nuxt/eslint-config": "^1.5.2",
5051
"@nuxt/module-builder": "^1.0.1",

0 commit comments

Comments
 (0)