From 68f6457c9d2bde8aa95662783df6273b685126df Mon Sep 17 00:00:00 2001 From: Sam Date: Sun, 8 Aug 2021 11:49:01 +0200 Subject: [PATCH] Client - init Login form --- fittrackee_client/public/img/bike.svg | 49 ++++++++++ fittrackee_client/src/components/BikePic.vue | 38 ++++++++ fittrackee_client/src/components/NavBar.vue | 4 +- .../src/components/User/LoginForm.vue | 34 +++++++ .../src/components/User/UserForm.vue | 94 +++++++++++++++++++ fittrackee_client/src/locales/en/buttons.json | 3 + fittrackee_client/src/locales/en/en.ts | 2 + fittrackee_client/src/locales/en/user.json | 6 +- fittrackee_client/src/locales/fr/buttons.json | 3 + fittrackee_client/src/locales/fr/fr.ts | 2 + fittrackee_client/src/locales/fr/user.json | 7 +- fittrackee_client/src/router/index.ts | 6 ++ fittrackee_client/src/scss/base.scss | 30 ++++++ fittrackee_client/src/scss/colors.scss | 4 +- fittrackee_client/src/scss/vars.scss | 8 +- fittrackee_client/src/store/modules/user.ts | 1 + fittrackee_client/src/views/DashBoard.vue | 2 +- fittrackee_client/src/views/Login.vue | 55 +++++++++++ 18 files changed, 342 insertions(+), 6 deletions(-) create mode 100644 fittrackee_client/public/img/bike.svg create mode 100644 fittrackee_client/src/components/BikePic.vue create mode 100644 fittrackee_client/src/components/User/LoginForm.vue create mode 100644 fittrackee_client/src/components/User/UserForm.vue create mode 100644 fittrackee_client/src/locales/en/buttons.json create mode 100644 fittrackee_client/src/locales/fr/buttons.json create mode 100644 fittrackee_client/src/views/Login.vue diff --git a/fittrackee_client/public/img/bike.svg b/fittrackee_client/public/img/bike.svg new file mode 100644 index 00000000..f6c2243e --- /dev/null +++ b/fittrackee_client/public/img/bike.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + diff --git a/fittrackee_client/src/components/BikePic.vue b/fittrackee_client/src/components/BikePic.vue new file mode 100644 index 00000000..256b5a78 --- /dev/null +++ b/fittrackee_client/src/components/BikePic.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue index 075ad3f6..d03603e3 100644 --- a/fittrackee_client/src/components/NavBar.vue +++ b/fittrackee_client/src/components/NavBar.vue @@ -36,7 +36,9 @@
{{ t('user.REGISTER') }} - {{ t('user.LOGIN') }} + {{ + t('user.LOGIN') + }}
+
+ +
+ + + + + diff --git a/fittrackee_client/src/components/User/UserForm.vue b/fittrackee_client/src/components/User/UserForm.vue new file mode 100644 index 00000000..c0149266 --- /dev/null +++ b/fittrackee_client/src/components/User/UserForm.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/fittrackee_client/src/locales/en/buttons.json b/fittrackee_client/src/locales/en/buttons.json new file mode 100644 index 00000000..27a83d7a --- /dev/null +++ b/fittrackee_client/src/locales/en/buttons.json @@ -0,0 +1,3 @@ +{ + "LOGIN": "Log in" +} \ No newline at end of file diff --git a/fittrackee_client/src/locales/en/en.ts b/fittrackee_client/src/locales/en/en.ts index c24b9657..1364a04c 100644 --- a/fittrackee_client/src/locales/en/en.ts +++ b/fittrackee_client/src/locales/en/en.ts @@ -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, diff --git a/fittrackee_client/src/locales/en/user.json b/fittrackee_client/src/locales/en/user.json index 566c86bd..ed652fa9 100644 --- a/fittrackee_client/src/locales/en/user.json +++ b/fittrackee_client/src/locales/en/user.json @@ -1,6 +1,10 @@ { + "EMAIL": "Email", "LANGUAGE": "Language", "LOGIN": "Login", "LOGOUT": "Logout", - "REGISTER": "Register" + "PASSWORD": "Password", + "PASSWORD-CONFIRM": "Confirm Password", + "REGISTER": "Register", + "USERNAME": "Username" } diff --git a/fittrackee_client/src/locales/fr/buttons.json b/fittrackee_client/src/locales/fr/buttons.json new file mode 100644 index 00000000..250d82fb --- /dev/null +++ b/fittrackee_client/src/locales/fr/buttons.json @@ -0,0 +1,3 @@ +{ + "LOGIN": "Se connecter" +} \ No newline at end of file diff --git a/fittrackee_client/src/locales/fr/fr.ts b/fittrackee_client/src/locales/fr/fr.ts index c24b9657..1364a04c 100644 --- a/fittrackee_client/src/locales/fr/fr.ts +++ b/fittrackee_client/src/locales/fr/fr.ts @@ -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, diff --git a/fittrackee_client/src/locales/fr/user.json b/fittrackee_client/src/locales/fr/user.json index 9ba10b98..b3b1cf98 100644 --- a/fittrackee_client/src/locales/fr/user.json +++ b/fittrackee_client/src/locales/fr/user.json @@ -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" } \ No newline at end of file diff --git a/fittrackee_client/src/router/index.ts b/fittrackee_client/src/router/index.ts index 9a72a96c..c9f92871 100644 --- a/fittrackee_client/src/router/index.ts +++ b/fittrackee_client/src/router/index.ts @@ -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 = [ @@ -8,6 +9,11 @@ const routes: Array = [ name: 'Dashboard', component: Dashboard, }, + { + path: '/login', + name: 'Login', + component: Login, + }, { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound }, ] diff --git a/fittrackee_client/src/scss/base.scss b/fittrackee_client/src/scss/base.scss index 2f3d1ffc..5bb50432 100644 --- a/fittrackee_client/src/scss/base.scss +++ b/fittrackee_client/src/scss/base.scss @@ -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; } \ No newline at end of file diff --git a/fittrackee_client/src/scss/colors.scss b/fittrackee_client/src/scss/colors.scss index 8291a7ac..72ca3a03 100644 --- a/fittrackee_client/src/scss/colors.scss +++ b/fittrackee_client/src/scss/colors.scss @@ -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; } \ No newline at end of file diff --git a/fittrackee_client/src/scss/vars.scss b/fittrackee_client/src/scss/vars.scss index 6284c770..78e32924 100644 --- a/fittrackee_client/src/scss/vars.scss +++ b/fittrackee_client/src/scss/vars.scss @@ -3,4 +3,10 @@ */ $container-width: 1140px; $medium-limit: 1000px; -$small-limit: 500px; \ No newline at end of file +$small-limit: 500px; + +/* +* === PADDING / MARGIN === +*/ +$default-padding: 10px; +$default-margin: $default-padding; diff --git a/fittrackee_client/src/store/modules/user.ts b/fittrackee_client/src/store/modules/user.ts index 05a5d300..14bab8bc 100644 --- a/fittrackee_client/src/store/modules/user.ts +++ b/fittrackee_client/src/store/modules/user.ts @@ -13,6 +13,7 @@ const getters: Getters = { return state.authToken !== null }, } + export default { state: userState, getters, diff --git a/fittrackee_client/src/views/DashBoard.vue b/fittrackee_client/src/views/DashBoard.vue index d92369d1..d1393daa 100644 --- a/fittrackee_client/src/views/DashBoard.vue +++ b/fittrackee_client/src/views/DashBoard.vue @@ -1,5 +1,5 @@ diff --git a/fittrackee_client/src/views/Login.vue b/fittrackee_client/src/views/Login.vue new file mode 100644 index 00000000..a6ad4135 --- /dev/null +++ b/fittrackee_client/src/views/Login.vue @@ -0,0 +1,55 @@ + + + + +