Client - add registration
This commit is contained in:
Sam
parent
a3ee5b69a7
commit
f381c2dc65
@ -48,7 +48,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-items-group" v-else>
|
||||
<span class="nav-item">{{ t('user.REGISTER') }}</span>
|
||||
<router-link class="nav-item" to="/register" @click="closeMenu">{{
|
||||
t('user.REGISTER')
|
||||
}}</router-link>
|
||||
<router-link class="nav-item" to="/login" @click="closeMenu">{{
|
||||
t('user.LOGIN')
|
||||
}}</router-link>
|
||||
|
||||
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div id="login-form">
|
||||
<UserForm action="login"></UserForm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
import UserForm from '@/components/User/UserForm.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LoginForm',
|
||||
components: {
|
||||
UserForm,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~@/scss/base';
|
||||
|
||||
#login-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: calc(100vh - 100px);
|
||||
|
||||
border-radius: 4px;
|
||||
margin: $default-margin 0;
|
||||
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
118
fittrackee_client/src/components/User/LoginOrRegisterForm.vue
Normal file
118
fittrackee_client/src/components/User/LoginOrRegisterForm.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div id="login-form">
|
||||
<div id="user-form">
|
||||
<div class="form-box">
|
||||
<form @submit.prevent="onSubmit(action)">
|
||||
<div class="form-items">
|
||||
<input
|
||||
v-if="action === 'register'"
|
||||
id="username"
|
||||
required
|
||||
v-model="formData.username"
|
||||
:placeholder="t('user.USERNAME')"
|
||||
/>
|
||||
<input
|
||||
id="email"
|
||||
required
|
||||
type="email"
|
||||
v-model="formData.email"
|
||||
:placeholder="t('user.EMAIL')"
|
||||
/>
|
||||
<input
|
||||
id="password"
|
||||
required
|
||||
type="password"
|
||||
v-model="formData.password"
|
||||
:placeholder="t('user.PASSWORD')"
|
||||
/>
|
||||
<input
|
||||
v-if="action === 'register'"
|
||||
id="confirm-password"
|
||||
type="password"
|
||||
required
|
||||
v-model="formData.password_conf"
|
||||
:placeholder="t('user.PASSWORD-CONFIRM')"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit">{{ t('buttons.LOGIN') }}</button>
|
||||
</form>
|
||||
<p v-if="errorMessage">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { IFormData } from '@/interfaces'
|
||||
import { ROOT_STORE, USER_STORE } from '@/store/constants'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LoginForm',
|
||||
props: {
|
||||
action: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const formData: IFormData = reactive({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password_conf: '',
|
||||
})
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
function onSubmit(actionType: string) {
|
||||
return store.dispatch(USER_STORE.ACTIONS.LOGIN_OR_REGISTER, {
|
||||
actionType,
|
||||
formData,
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
errorMessage: computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGE]
|
||||
),
|
||||
t,
|
||||
formData,
|
||||
onSubmit,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~@/scss/base';
|
||||
|
||||
#login-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: calc(100vh - 100px);
|
||||
|
||||
border-radius: 4px;
|
||||
margin: $default-margin 0;
|
||||
|
||||
#user-form {
|
||||
width: 60%;
|
||||
|
||||
button {
|
||||
margin: $default-margin;
|
||||
}
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
margin-top: $default-margin;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,104 +0,0 @@
|
||||
<template>
|
||||
<div id="user-form">
|
||||
<div class="form-box">
|
||||
<form @submit.prevent="onSubmit(action)">
|
||||
<div class="form-items">
|
||||
<input
|
||||
v-if="action === 'register'"
|
||||
id="username"
|
||||
required
|
||||
v-model="formData.username"
|
||||
:placeholder="t('user.REGISTER')"
|
||||
/>
|
||||
<input
|
||||
id="email"
|
||||
required
|
||||
type="email"
|
||||
v-model="formData.email"
|
||||
:placeholder="t('user.EMAIL')"
|
||||
/>
|
||||
<input
|
||||
id="password"
|
||||
required
|
||||
type="password"
|
||||
v-model="formData.password"
|
||||
:placeholder="t('user.PASSWORD')"
|
||||
/>
|
||||
<input
|
||||
v-if="action === 'register'"
|
||||
id="confirm-password"
|
||||
type="password"
|
||||
required
|
||||
v-model="formData.confirmPassword"
|
||||
:placeholder="t('user.PASSWORD-CONFIRM')"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit">{{ t('buttons.LOGIN') }}</button>
|
||||
</form>
|
||||
<p v-if="errorMessage">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { IFormData } from '@/interfaces.ts'
|
||||
import { ROOT_STORE, USER_STORE } from '@/store/constants'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserForm',
|
||||
components: {},
|
||||
props: {
|
||||
action: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const formData: IFormData = reactive({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
})
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
function onSubmit(actionType: string) {
|
||||
return store.dispatch(USER_STORE.ACTIONS.LOGIN_OR_REGISTER, {
|
||||
actionType,
|
||||
formData,
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
errorMessage: computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGE]
|
||||
),
|
||||
t,
|
||||
formData,
|
||||
onSubmit,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~@/scss/base';
|
||||
|
||||
#user-form {
|
||||
width: 60%;
|
||||
|
||||
button {
|
||||
margin: $default-margin;
|
||||
}
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
margin-top: $default-margin;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -7,5 +7,5 @@ export interface IFormData {
|
||||
username: string
|
||||
email: string
|
||||
password: string
|
||||
confirmPassword: string
|
||||
password_conf: string
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||
import { USER_STORE } from '@/store/constants'
|
||||
import store from '@/store'
|
||||
import Dashboard from '@/views/DashBoard.vue'
|
||||
import Login from '@/views/Login.vue'
|
||||
import LoginOrRegister from '@/views/LoginOrRegister.vue'
|
||||
import NotFound from '@/views/NotFound.vue'
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
@ -15,7 +15,14 @@ const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: Login,
|
||||
component: LoginOrRegister,
|
||||
props: { action: 'login' },
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'Register',
|
||||
component: LoginOrRegister,
|
||||
props: { action: 'register' },
|
||||
},
|
||||
{ path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
|
||||
]
|
||||
@ -31,12 +38,12 @@ router.beforeEach((to, from, next) => {
|
||||
.then(() => {
|
||||
if (
|
||||
store.getters[USER_STORE.GETTERS.IS_AUTHENTICATED] &&
|
||||
['/login'].includes(to.path)
|
||||
['/login', '/register'].includes(to.path)
|
||||
) {
|
||||
return next('/')
|
||||
} else if (
|
||||
!store.getters[USER_STORE.GETTERS.IS_AUTHENTICATED] &&
|
||||
!['/login'].includes(to.path)
|
||||
!['/login', '/register'].includes(to.path)
|
||||
) {
|
||||
const path =
|
||||
to.path === '/'
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<BikePic />
|
||||
</div>
|
||||
<div class="container-sub">
|
||||
<LoginForm />
|
||||
<LoginOrRegisterForm :action="action" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -15,13 +15,19 @@
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
import BikePic from '@/components/BikePic.vue'
|
||||
import LoginForm from '@/components/User/LoginForm.vue'
|
||||
import LoginOrRegisterForm from '@/components/User/LoginOrRegisterForm.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NavBar',
|
||||
components: {
|
||||
BikePic,
|
||||
LoginForm,
|
||||
LoginOrRegisterForm,
|
||||
},
|
||||
props: {
|
||||
action: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user