Client - init Login form

This commit is contained in:
Sam 2021-08-08 11:49:01 +02:00
parent 73915a1750
commit 68f6457c9d
18 changed files with 342 additions and 6 deletions

View 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

View 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>

View File

@ -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"

View 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>

View 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>

View File

@ -0,0 +1,3 @@
{
"LOGIN": "Log in"
}

View File

@ -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,

View File

@ -1,6 +1,10 @@
{
"EMAIL": "Email",
"LANGUAGE": "Language",
"LOGIN": "Login",
"LOGOUT": "Logout",
"REGISTER": "Register"
"PASSWORD": "Password",
"PASSWORD-CONFIRM": "Confirm Password",
"REGISTER": "Register",
"USERNAME": "Username"
}

View File

@ -0,0 +1,3 @@
{
"LOGIN": "Se connecter"
}

View File

@ -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,

View File

@ -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"
}

View File

@ -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 },
]

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;

View File

@ -13,6 +13,7 @@ const getters: Getters = {
return state.authToken !== null
},
}
export default {
state: userState,
getters,

View File

@ -1,5 +1,5 @@
<template>
<div class="dashboard">
<div id="dashboard">
<p>TODO Dashboard</p>
</div>
</template>

View 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>