Client - init Login form
This commit is contained in:
parent
73915a1750
commit
68f6457c9d
49
fittrackee_client/public/img/bike.svg
Normal file
49
fittrackee_client/public/img/bike.svg
Normal file
@ -0,0 +1,49 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve">
|
||||
<path style="fill:#73D4FF;" d="M512,256c0,6.165-0.219,12.278-0.648,18.338C501.948,407.165,391.22,512,256,512
|
||||
c-85.797,0-161.729-42.203-208.175-106.977c-13.678-19.069-24.795-40.082-32.852-62.558C5.277,315.455,0,286.344,0,256
|
||||
C0,114.615,114.615,0,256,0c99.85,0,186.358,57.166,228.561,140.56C502.115,175.25,512,214.476,512,256z"/>
|
||||
<path style="fill:#249FD3;" d="M512,256c0,6.165-0.219,12.278-0.648,18.338C501.948,407.165,391.22,512,256,512
|
||||
c-85.797,0-161.729-42.203-208.175-106.977c-13.678-19.069-24.795-40.082-32.852-62.558l93.33-230.013l62.694,100.31L272.866,40.354
|
||||
l148.113,163.788l63.582-63.582C502.115,175.25,512,214.476,512,256z"/>
|
||||
<g>
|
||||
<path style="fill:#324A97;" d="M147.074,349.54c-53.983,15.227-110.289-16.304-125.516-70.286s16.304-110.289,70.286-125.516
|
||||
s110.289,16.304,125.516,70.286S201.056,334.314,147.074,349.54z M96.981,171.953c-43.94,12.394-69.604,58.225-57.21,102.165
|
||||
s58.225,69.604,102.165,57.21s69.604-58.225,57.21-102.165S140.921,159.558,96.981,171.953z"/>
|
||||
<path style="fill:#324A97;" d="M407.309,276.136c-53.983,15.227-110.289-16.304-125.516-70.286s16.304-110.289,70.286-125.516
|
||||
s110.289,16.304,125.516,70.286S461.292,260.909,407.309,276.136z M357.216,98.547c-43.94,12.395-69.604,58.225-57.21,102.165
|
||||
s58.225,69.604,102.165,57.21c43.94-12.394,69.604-58.225,57.21-102.165C446.987,111.818,401.156,86.154,357.216,98.547z"/>
|
||||
</g>
|
||||
<path style="fill:#E8509A;" d="M123.193,242.597l29.354-121.287l84.62,89.137L123.193,242.597z M247.875,199.394l-85.089-89.631
|
||||
L283.972,75.58L247.875,199.394z M366.608,16.084c-6.381-10.944-19.674-15.81-31.609-11.546l-28.988,10.339l-22.312,7.953
|
||||
c-2.201,0.781-3.923,2.519-4.677,4.724c-0.766,2.207-0.484,4.647,0.761,6.618l14.28,22.653c-0.306,0.049-0.611,0.099-0.918,0.185
|
||||
l-142.32,40.144L134.69,80.174l-11.149,10.58l16.4,17.274l-34.78,143.731c-0.652,2.654,0.16,5.448,2.135,7.35
|
||||
c1.971,1.889,4.788,2.594,7.417,1.853l138.086-38.95l-0.009-0.034c0.175-0.037,0.359-0.076,0.533-0.114l0.273-0.077
|
||||
c2.55-0.719,4.548-2.697,5.293-5.241L301.849,69.18l71.344,113.157c1.854,2.955,5.39,4.207,8.589,3.304
|
||||
c0.695-0.195,1.371-0.497,2.02-0.902c3.588-2.265,4.657-7.016,2.392-10.605l-88.282-140.05l16.649-5.937l25.605-9.127
|
||||
c4.952-1.79,10.503,0.246,13.154,4.807c1.643,2.818,1.945,6.198,0.832,9.265c-1.114,3.067-3.513,5.452-6.58,6.563l-10.185,3.672
|
||||
c-3.992,1.445-6.067,5.852-4.622,9.845c1.434,3.995,5.861,6.052,9.834,4.625l10.185-3.672c7.371-2.669,13.136-8.412,15.815-15.779
|
||||
C371.272,30.966,370.548,22.862,366.608,16.084z"/>
|
||||
<g>
|
||||
<circle style="fill:#324A97;" cx="119.463" cy="251.643" r="15.768"/>
|
||||
<circle style="fill:#324A97;" cx="379.695" cy="178.239" r="15.768"/>
|
||||
<path style="fill:#324A97;" d="M368.598,38.345c-2.678,7.368-8.444,13.11-15.815,15.779l-10.185,3.672
|
||||
c-3.973,1.427-8.399-0.629-9.834-4.625c-1.445-3.993,0.629-8.399,4.622-9.845l10.185-3.672c3.067-1.111,5.466-3.496,6.58-6.563
|
||||
c1.114-3.067,0.812-6.447-0.832-9.265c-2.651-4.561-8.202-6.596-13.154-4.807l-17.975,6.407c-4.128,1.471-8.64-0.859-9.83-5.077
|
||||
l0,0c-1.072-3.8,0.956-7.786,4.658-9.156l17.98-6.656c11.935-4.263,25.228,0.602,31.609,11.546
|
||||
C370.548,22.862,371.272,30.966,368.598,38.345z"/>
|
||||
<path style="fill:#324A97;" d="M174.094,57.388l-61.025,7.232c-6.381,0.757-10.576,7.036-8.833,13.221l3.608,12.792
|
||||
c1.227,4.348,5.745,6.878,10.093,5.652l60.502-17.065c5.934-1.674,9.387-7.841,7.713-13.775l0,0
|
||||
C184.661,60.157,179.547,56.741,174.094,57.388z"/>
|
||||
</g>
|
||||
<path style="fill:#4E62B1;" d="M511.352,274.338c-3.302,46.686-19.122,89.903-44.126,126.328
|
||||
c-14.137,20.616-31.222,39.048-50.636,54.711c-22.037,17.774-47.083,31.974-74.261,41.702C315.361,506.734,286.292,512,256,512
|
||||
c-45.631,0-88.461-11.933-125.565-32.862c-32.653-18.411-60.855-43.792-82.61-74.115l99.244-57.574l102.285,20.47l50.155-84.637
|
||||
L511.352,274.338z"/>
|
||||
<path style="fill:#36539C;" d="M467.226,400.666c-14.137,20.616-31.222,39.048-50.636,54.711
|
||||
c-22.037,17.774-47.083,31.974-74.261,41.702C315.361,506.734,286.292,512,256,512c-45.631,0-88.461-11.933-125.565-32.862
|
||||
l42.13-67.333l142.618,25.067l76.8-76.79L467.226,400.666z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 4.4 KiB |
38
fittrackee_client/src/components/BikePic.vue
Normal file
38
fittrackee_client/src/components/BikePic.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div id="about">
|
||||
<img class="bike-img" v-bind:src="bike_image_url" alt="mountain bike" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'About',
|
||||
setup() {
|
||||
return {
|
||||
bike_image_url: './img/bike.svg',
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~@/scss/base';
|
||||
|
||||
#about {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
padding: $default-padding;
|
||||
height: calc(100vh - 100px);
|
||||
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.bike-img {
|
||||
max-width: 40%;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -36,7 +36,9 @@
|
||||
</div>
|
||||
<div class="nav-items-group" v-else>
|
||||
<span class="nav-item">{{ t('user.REGISTER') }}</span>
|
||||
<span class="nav-item">{{ t('user.LOGIN') }}</span>
|
||||
<router-link class="nav-item" to="/login" @click="closeMenu">{{
|
||||
t('user.LOGIN')
|
||||
}}</router-link>
|
||||
</div>
|
||||
<Dropdown
|
||||
v-if="availableLanguages && language"
|
||||
|
34
fittrackee_client/src/components/User/LoginForm.vue
Normal file
34
fittrackee_client/src/components/User/LoginForm.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<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>
|
94
fittrackee_client/src/components/User/UserForm.vue
Normal file
94
fittrackee_client/src/components/User/UserForm.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<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="user.username"
|
||||
:placeholder="t('user.REGISTER')"
|
||||
/>
|
||||
<input
|
||||
id="email"
|
||||
required
|
||||
type="email"
|
||||
v-model="user.email"
|
||||
:placeholder="t('user.EMAIL')"
|
||||
/>
|
||||
<input
|
||||
id="password"
|
||||
required
|
||||
type="password"
|
||||
v-model="user.password"
|
||||
:placeholder="t('user.PASSWORD')"
|
||||
/>
|
||||
<input
|
||||
v-if="action === 'register'"
|
||||
id="confirm-password"
|
||||
type="password"
|
||||
required
|
||||
v-model="user.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 { defineComponent, reactive, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserForm',
|
||||
components: {},
|
||||
props: {
|
||||
action: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const user = reactive({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
})
|
||||
const { t } = useI18n()
|
||||
function onSubmit(action: string) {
|
||||
console.log(action, user)
|
||||
}
|
||||
|
||||
return {
|
||||
errorMessage: ref(null),
|
||||
t,
|
||||
user,
|
||||
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>
|
3
fittrackee_client/src/locales/en/buttons.json
Normal file
3
fittrackee_client/src/locales/en/buttons.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"LOGIN": "Log in"
|
||||
}
|
@ -1,4 +1,5 @@
|
||||
import AdministrationTranslations from './administration.json'
|
||||
import ButtonsTranslations from './buttons.json'
|
||||
import CommonTranslations from './common.json'
|
||||
import DashboardTranslations from './dashboard.json'
|
||||
import ErrorTranslations from './error.json'
|
||||
@ -8,6 +9,7 @@ import WorkoutsTranslations from './workouts.json'
|
||||
|
||||
export default {
|
||||
administration: AdministrationTranslations,
|
||||
buttons: ButtonsTranslations,
|
||||
common: CommonTranslations,
|
||||
dashboard: DashboardTranslations,
|
||||
error: ErrorTranslations,
|
||||
|
@ -1,6 +1,10 @@
|
||||
{
|
||||
"EMAIL": "Email",
|
||||
"LANGUAGE": "Language",
|
||||
"LOGIN": "Login",
|
||||
"LOGOUT": "Logout",
|
||||
"REGISTER": "Register"
|
||||
"PASSWORD": "Password",
|
||||
"PASSWORD-CONFIRM": "Confirm Password",
|
||||
"REGISTER": "Register",
|
||||
"USERNAME": "Username"
|
||||
}
|
||||
|
3
fittrackee_client/src/locales/fr/buttons.json
Normal file
3
fittrackee_client/src/locales/fr/buttons.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"LOGIN": "Se connecter"
|
||||
}
|
@ -1,4 +1,5 @@
|
||||
import AdministrationTranslations from './administration.json'
|
||||
import ButtonsTranslations from './buttons.json'
|
||||
import CommonTranslations from './common.json'
|
||||
import DashboardTranslations from './dashboard.json'
|
||||
import ErrorTranslations from './error.json'
|
||||
@ -8,6 +9,7 @@ import WorkoutsTranslations from './workouts.json'
|
||||
|
||||
export default {
|
||||
administration: AdministrationTranslations,
|
||||
buttons: ButtonsTranslations,
|
||||
common: CommonTranslations,
|
||||
dashboard: DashboardTranslations,
|
||||
error: ErrorTranslations,
|
||||
|
@ -1,6 +1,11 @@
|
||||
{
|
||||
"CONFIRM-PASSWORD": "Confirmation du mot de passe",
|
||||
"EMAIL": "Email",
|
||||
"LANGUAGE": "Langue",
|
||||
"LOGIN": "Se connecter",
|
||||
"LOGOUT": "Se déconnecter",
|
||||
"REGISTER": "S'inscrire"
|
||||
"PASSWORD": "Mot de passe",
|
||||
"PASSWORD-CONFIRM": "Confirmation du mot de passe",
|
||||
"REGISTER": "S'inscrire",
|
||||
"USERNAME": "Nom d'utilisateur"
|
||||
}
|
@ -1,5 +1,6 @@
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||
import Dashboard from '@/views/DashBoard.vue'
|
||||
import Login from '@/views/Login.vue'
|
||||
import NotFound from '@/views/NotFound.vue'
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
@ -8,6 +9,11 @@ const routes: Array<RouteRecordRaw> = [
|
||||
name: 'Dashboard',
|
||||
component: Dashboard,
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: Login,
|
||||
},
|
||||
{ path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
|
||||
]
|
||||
|
||||
|
@ -23,6 +23,15 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 0;
|
||||
border: solid 1px var(--input-border-color);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--app-background-color);
|
||||
border: solid 1px var(--app-color);
|
||||
@ -42,6 +51,27 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
max-width: $container-width;
|
||||
}
|
||||
|
||||
.form-box {
|
||||
.form-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
input {
|
||||
margin: $default-margin;
|
||||
padding: $default-padding * .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upper {
|
||||
text-transform: uppercase;
|
||||
}
|
@ -2,6 +2,9 @@
|
||||
--app-background-color: #FFFFFF;
|
||||
--app-color: #2c3e50;
|
||||
--app-a-color: #40578a;
|
||||
--app-shadow-color: lightgrey;
|
||||
|
||||
--input-border-color: #9da3af;
|
||||
|
||||
--nav-bar-background-color: #FFFFFF;
|
||||
--nav-bar-link-active: #485b6e;
|
||||
@ -11,5 +14,4 @@
|
||||
--footer-border-color: #ebeef3;
|
||||
--footer-color: #8b8c8c;
|
||||
|
||||
--app-shadow-color: lightgrey;
|
||||
}
|
@ -3,4 +3,10 @@
|
||||
*/
|
||||
$container-width: 1140px;
|
||||
$medium-limit: 1000px;
|
||||
$small-limit: 500px;
|
||||
$small-limit: 500px;
|
||||
|
||||
/*
|
||||
* === PADDING / MARGIN ===
|
||||
*/
|
||||
$default-padding: 10px;
|
||||
$default-margin: $default-padding;
|
||||
|
@ -13,6 +13,7 @@ const getters: Getters = {
|
||||
return state.authToken !== null
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
state: userState,
|
||||
getters,
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<div id="dashboard">
|
||||
<p>TODO Dashboard</p>
|
||||
</div>
|
||||
</template>
|
||||
|
55
fittrackee_client/src/views/Login.vue
Normal file
55
fittrackee_client/src/views/Login.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div id="login">
|
||||
<div class="container">
|
||||
<div class="container-sub">
|
||||
<BikePic />
|
||||
</div>
|
||||
<div class="container-sub">
|
||||
<LoginForm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import BikePic from '@/components/BikePic.vue'
|
||||
import LoginForm from '@/components/User/LoginForm.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NavBar',
|
||||
components: {
|
||||
BikePic,
|
||||
LoginForm,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/scss/base';
|
||||
|
||||
#login {
|
||||
height: 84vh;
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.container-sub {
|
||||
min-width: 50%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.container-sub {
|
||||
.bike-img {
|
||||
margin-top: $default-margin * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user