Skip to content

Commit 35f477f

Browse files
lcharettelcharette
committed
Re-split the login form, for use in other scenarios
1 parent 56549b5 commit 35f477f

File tree

4 files changed

+81
-135
lines changed

4 files changed

+81
-135
lines changed

‎src/components.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import AppLink from './components/Content/AppLink.vue'
99
import CardBox from './components/Content/CardBox.vue'
1010
import MainContent from './components/Content/MainContent.vue'
1111
import FooterContent from './components/Content/FooterContent.vue'
12+
import FormLogin from './components/Content/FormLogin.vue'
1213
import NavBar from './components/NavBar/NavBar.vue'
1314
import NavBarDropdown from './components/NavBar/NavBarDropdown.vue'
1415
import NavBarDropdownSeparator from './components/NavBar/NavBarDropdownSeparator.vue'
@@ -28,6 +29,7 @@ export {
2829
CardBox,
2930
MainContent,
3031
FooterContent,
32+
FormLogin,
3133
NavBar,
3234
NavBarDropdown,
3335
NavBarDropdownSeparator,
@@ -49,6 +51,7 @@ export default {
4951
.component('UFCardBox', CardBox)
5052
.component('UFMainContent', MainContent)
5153
.component('UFFooterContent', FooterContent)
54+
.component('UFFormLogin', FormLogin)
5255
.component('UFNavBar', NavBar)
5356
.component('UFNavBarDropdown', NavBarDropdown)
5457
.component('UFNavBarDropdownSeparator', NavBarDropdownSeparator)
@@ -71,6 +74,7 @@ declare module 'vue' {
7174
UFCardBox: typeof CardBox
7275
UFMainContent: typeof MainContent
7376
UFFooterContent: typeof FooterContent
77+
UFFormLogin: typeof FormLogin
7478
UFNavBar: typeof NavBar
7579
UFNavBarDropdown: typeof NavBarDropdown
7680
UFNavBarDropdownSeparator: typeof NavBarDropdownSeparator

‎src/components/Content/FormLogin.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
import UIkit from 'uikit'
4+
import type { AlertInterface, LoginForm } from '@userfrosting/sprinkle-account/types'
5+
import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
6+
7+
// Variables
8+
const loading = ref(false)
9+
const error = ref<AlertInterface | null>()
10+
let form: LoginForm = {
11+
user_name: '',
12+
password: ''
13+
}
14+
15+
// Stores
16+
const auth = useAuthStore()
17+
18+
// Form action
19+
function sendLogin() {
20+
loading.value = true
21+
error.value = null
22+
auth.login(form)
23+
.then((user) => {
24+
UIkit.notification({
25+
message: 'Welcome back ' + user?.full_name + '!',
26+
status: 'success',
27+
pos: 'bottom-right',
28+
timeout: 4000
29+
})
30+
})
31+
.catch((err) => {
32+
error.value = err
33+
})
34+
.finally(() => {
35+
loading.value = false
36+
})
37+
}
38+
</script>
39+
40+
<template>
41+
<form v-on:submit.prevent="sendLogin()">
42+
<fieldset class="uk-fieldset">
43+
<UFAlertContainer v-if="error" :alert="error" />
44+
<div class="uk-margin">
45+
<div class="uk-inline">
46+
<span class="uk-form-icon" uk-icon="icon: user"></span>
47+
<input
48+
class="uk-input uk-form-width-large"
49+
type="text"
50+
placeholder="Username"
51+
aria-label="Username"
52+
v-model="form.user_name" />
53+
</div>
54+
</div>
55+
<div class="uk-margin">
56+
<div class="uk-inline">
57+
<span class="uk-form-icon" uk-icon="icon: lock"></span>
58+
<input
59+
class="uk-input uk-form-width-large"
60+
type="password"
61+
placeholder="Password"
62+
aria-label="Password"
63+
v-model="form.password" />
64+
</div>
65+
</div>
66+
<p><a>Forgot your password?</a></p>
67+
<div class="uk-text-center">
68+
<button class="uk-button uk-button-primary" :disabled="loading">Login</button>
69+
</div>
70+
</fieldset>
71+
</form>
72+
</template>

‎src/components/NavBar/NavBarLogin.vue‎

Lines changed: 2 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,10 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue'
3-
import UIkit from 'uikit'
42
import NavBarDropdown from './NavBarDropdown.vue'
5-
import type { AlertInterface, LoginForm } from '@userfrosting/sprinkle-account/types'
6-
import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
7-
import AlertContainer from '../AlertContainer.vue'
8-
9-
// Variables
10-
const loading = ref(false)
11-
const error = ref<AlertInterface | null>()
12-
let form: LoginForm = {
13-
user_name: '',
14-
password: ''
15-
}
16-
17-
// Stores
18-
const auth = useAuthStore()
19-
20-
// Form action
21-
function sendLogin() {
22-
loading.value = true
23-
error.value = null
24-
auth.login(form)
25-
.then((user) => {
26-
UIkit.notification({
27-
message: 'Welcome back ' + user?.full_name + '!',
28-
status: 'success',
29-
pos: 'bottom-right',
30-
timeout: 4000
31-
})
32-
})
33-
.catch((err) => {
34-
error.value = err
35-
})
36-
.finally(() => {
37-
loading.value = false
38-
})
39-
}
3+
import FormLogin from '../Content/FormLogin.vue'
404
</script>
415

426
<template>
437
<NavBarDropdown label="Login" class="uf-nav-login uk-text-center">
44-
<form v-on:submit.prevent="sendLogin()">
45-
<fieldset class="uk-fieldset">
46-
<UFAlertContainer v-if="error" :alert="error" />
47-
<div class="uk-margin-small">
48-
<div class="uk-inline">
49-
<span class="uk-form-icon" uk-icon="icon: user"></span>
50-
<input
51-
class="uk-input uk-form-width-large"
52-
type="text"
53-
placeholder="Username"
54-
aria-label="Username"
55-
v-model="form.user_name" />
56-
</div>
57-
</div>
58-
<div class="uk-margin-small">
59-
<div class="uk-inline">
60-
<span class="uk-form-icon" uk-icon="icon: lock"></span>
61-
<input
62-
class="uk-input uk-form-width-large"
63-
type="password"
64-
placeholder="Password"
65-
aria-label="Password"
66-
v-model="form.password" />
67-
</div>
68-
</div>
69-
<div class="uk-margin-small">
70-
<a>Forgot your password?</a>
71-
</div>
72-
<div class="uk-text-center">
73-
<button class="uk-button uk-button-primary" :disabled="loading">Login</button>
74-
</div>
75-
</fieldset>
76-
</form>
8+
<FormLogin />
779
</NavBarDropdown>
7810
</template>

‎src/views/PageLogin.vue‎

Lines changed: 3 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
11
<script setup lang="ts">
2-
import { watch, ref } from 'vue'
2+
import { watch } from 'vue'
33
import { useRouter } from 'vue-router'
4-
import UIkit from 'uikit'
5-
import type { AlertInterface, LoginForm } from '@userfrosting/sprinkle-account/types'
64
import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
7-
8-
// Variables
9-
const loading = ref(false)
10-
const error = ref<AlertInterface | null>()
11-
let form: LoginForm = {
12-
user_name: '',
13-
password: ''
14-
}
5+
import FormLogin from '../components/Content/FormLogin.vue'
156
167
// Stores
178
const auth = useAuthStore()
@@ -31,67 +22,14 @@ watch(
3122
}
3223
}
3324
)
34-
35-
// Form action
36-
function sendLogin() {
37-
loading.value = true
38-
error.value = null
39-
auth.login(form)
40-
.then((user) => {
41-
UIkit.notification({
42-
message: 'Welcome back ' + user?.full_name + '!',
43-
status: 'success',
44-
pos: 'bottom-right',
45-
timeout: 4000
46-
})
47-
})
48-
.catch((err) => {
49-
error.value = err
50-
})
51-
.finally(() => {
52-
loading.value = false
53-
})
54-
}
5525
</script>
5626

5727
<template>
5828
<div class="uk-flex uk-flex-center uk-flex-middle">
5929
<div class="uk-width-1-1@s uk-width-3-5@l uk-width-1-3@xl">
6030
<UFCardBox>
6131
<h3 class="uk-card-title">Login</h3>
62-
<form v-on:submit.prevent="sendLogin()">
63-
<fieldset class="uk-fieldset">
64-
<UFAlertContainer v-if="error" :alert="error" />
65-
<div class="uk-margin">
66-
<div class="uk-inline">
67-
<span class="uk-form-icon" uk-icon="icon: user"></span>
68-
<input
69-
class="uk-input uk-form-width-large"
70-
type="text"
71-
placeholder="Username"
72-
aria-label="Username"
73-
v-model="form.user_name" />
74-
</div>
75-
</div>
76-
<div class="uk-margin">
77-
<div class="uk-inline">
78-
<span class="uk-form-icon" uk-icon="icon: lock"></span>
79-
<input
80-
class="uk-input uk-form-width-large"
81-
type="password"
82-
placeholder="Password"
83-
aria-label="Password"
84-
v-model="form.password" />
85-
</div>
86-
</div>
87-
<p><a>Forgot your password?</a></p>
88-
<div class="uk-text-center">
89-
<button class="uk-button uk-button-primary" :disabled="loading">
90-
Login
91-
</button>
92-
</div>
93-
</fieldset>
94-
</form>
32+
<FormLogin />
9533
<hr />
9634
<div class="uk-text-center">
9735
<p>You don't have an account yet?</p>

0 commit comments

Comments
 (0)