Merge branch 'master' of http://gvipers.imt-lille-douai.fr/QVrel/projet-cdaw

frontend/src/components/PageTitle.vue

+<template>
+    <div class="page-title">
+        <h2>{{pagetitle}}</h2>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        pagetitle: {
+            type: String
+        }
+    }
+}
+</script>
+
+<style>
+
+@import url("https://fonts.googleapis.com/css2?family=Shojumaru&display=swap");
+
+.page-title h2{
+    font-family: Shojumaru;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 72px;
+    line-height: 95px;
+    text-align: center;
+
+    color: #000000;
+
+    text-shadow: 5px 5px 0px #CCCCCC, 5px -5px 0px #CCCCCC, -5px 5px 0px #CCCCCC, -5px -5px 0px #CCCCCC;
+
+}
+</style>
\ No newline at end of file

frontend/src/components/SvgButton.vue

+<template>
+    <button :onclick="this.onclick">
+        <img :src="this.svg" :width="this.width" :height="this.height"/>
+    </button>
+</template>
+
+<style>
+button{
+    background: transparent;
+    border: none;
+    margin: 50px;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    svg: { type: String, default: ''},
+    width: { type: [Number, String], default: 80 },
+    height: {type: [Number, String], default: 80 },
+    onclick: {type: String, default: ''}
+  }
+}
+</script>
\ No newline at end of file

frontend/src/components/form/CheckboxInput.vue

+<template>
+    <div class="form-check row">
+                <label class="col-md-4 col-form-label text-md-right" :for="this.id">{{label}}</label>
+                <input class="form-check-input" type="checkbox" :id="this.id" :name="this.id">
+            
+            </div>
+            
+</template>
+
+<script>
+export default {
+    props: {
+        id: { type: String, default: ''},
+        label: { type: String, default: 'label' }
+    }
+}
+</script>
+
+<style>
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px;
+}
+.form-check-input {
+    height: 1.5em;
+    width: 1.5em;
+}
+.form-check {
+    position: relative;
+    display: block;
+    padding-left: 1.25rem;
+}
+
+.col-md-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+}
+.text-md-right {
+    text-align: right !important;
+}
+.col-form-label {
+    padding-top: calc(0.375rem + 1px);
+    padding-bottom: calc(0.375rem + 1px);
+    margin-bottom: 0;
+    line-height: 1.6;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 42px;
+
+    color: #000000;
+}
+.col-md-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.col-md-4, .col-md-6{
+    position: relative;
+width: 100%;
+padding-right: 15px;
+padding-left: 15px;
+}
+
+.form-control {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.6;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+</style>
\ No newline at end of file

frontend/src/components/form/PwdInput.vue

+<template>
+    <div class="form-group row">
+                <label class="col-md-4 col-form-label text-md-right" :for="this.id">{{label}}</label>
+                <input class="col-md-6 form-control " type="password" :id="this.id" :name="this.id">
+            
+            </div>
+</template>
+
+<script>
+export default {
+    props: {
+        id: { type: String, default: ''},
+        label: { type: String, default: 'label' }
+    }
+}
+</script>
+
+<style>
+.form-group {
+    margin-bottom: 3rem;
+}
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px;
+}
+.col-md-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+}
+.text-md-right {
+    text-align: right !important;
+}
+.col-form-label {
+    padding-top: calc(0.375rem + 1px);
+    padding-bottom: calc(0.375rem + 1px);
+    margin-bottom: 0;
+    line-height: 1.6;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 42px;
+
+    color: #000000;
+}
+.col-md-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.col-md-4, .col-md-6{
+    position: relative;
+width: 100%;
+padding-right: 15px;
+padding-left: 15px;
+}
+
+.form-control {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.6;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+</style>
\ No newline at end of file

frontend/src/components/form/TextInput.vue

+<template>
+    <div class="form-group row">
+                <label class="col-md-4 col-form-label text-md-right" :for="this.id">{{label}}</label>
+                <input class="col-md-6 form-control " type="text" :id="this.id" :name="this.id">
+            
+            </div>
+</template>
+
+<script>
+export default {
+    props: {
+        id: { type: String, default: ''},
+        label: { type: String, default: 'label' }
+    }
+}
+</script>
+
+<style>
+.form-group {
+    margin-bottom: 3rem;
+}
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px;
+}
+.col-md-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+}
+.text-md-right {
+    text-align: right !important;
+}
+.col-form-label {
+    padding-top: calc(0.375rem + 1px);
+    padding-bottom: calc(0.375rem + 1px);
+    margin-bottom: 0;
+    line-height: 1.6;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 42px;
+
+    color: #000000;
+}
+.col-md-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.col-md-4, .col-md-6{
+    position: relative;
+width: 100%;
+padding-right: 15px;
+padding-left: 15px;
+}
+
+.form-control {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.6;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+</style>
\ No newline at end of file

frontend/src/views/Login.vue

+<template>
+    <div class="login-page">
+        <page-title pagetitle="Se Connecter"/>
+        <form action="#">
+            <text-input id="mail" label="Email"/>
+            <pwd-input id="password" label="Mot de passe"/>
+            <checkbox-input id="remember" label="Se souvenir de moi"/>
+            
+            
+        </form>
+        <svg-button svg="/icons/back.svg"/>
+        <svg-button svg="/icons/validate.svg"/>
+    </div>
+</template>
+
+<script>
+import PageTitle from '@/components/PageTitle.vue'
+import SvgButton from '@/components/SvgButton.vue'
+import TextInput from '@/components/form/TextInput.vue'
+import PwdInput from '@/components/form/PwdInput.vue'
+import CheckboxInput from '@/components/form/CheckboxInput.vue'
+export default {
+    name: 'Login',
+    components: {
+        PageTitle,
+        SvgButton,
+        TextInput,
+        PwdInput,
+        CheckboxInput
+    }
+}
+</script>
+
+<style>
+.login-page{
+    top: 100px;
+    position: relative;
+}
+
+form{
+    flex-direction: column;
+    display: flex;
+    width: 900px;
+    background-color: rgba(196, 196, 196, 0.6);
+    margin: 0 auto;
+    padding: 50px;
+}
+
+
+
+*, ::before, ::after {
+    box-sizing: border-box;
+}
+</style>
\ No newline at end of file