dove into styling

Author: noah1234j

client/package-lock.json

@@ -14,8 +14,11 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.19.2",
+    "body-parser": "^1.19.0",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuetify": "^2.2.33"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

client/package.json

@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
     <router-view/>
   </div>
 </template>

client/src/App.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-layout column>
+    <v-flex xs6 offset-xs3>
+      <div class="white elevation-2">
+        <v-toolbar flat dense class='cyan' dark>
+          <v-toolbar-title>
+            Register
+          </v-toolbar-title>
+        </v-toolbar>
+        <h1>Register</h1>
+        <div class="pl-4 pr-4 pt-2 pb-2">
+          <input
+            type="email"
+            v-model="email"
+            name="email"
+            placeholder="email" />
+          <br>
+          <input
+            name="password"
+            v-model="password"
+            type="password"
+            placeholder="password" />
+          <br>
+          <v-button
+            @click="register">
+            Register</v-button>
+            <br>
+          <div class="error" v-html="error"></div>
+        </div>
+      </div>
+    </v-flex>
+  </v-layout>
+</template>
+
+<script>
+import AuthenitcationService from '@/services/AuthenticationService'
+
+export default {
+  data () {
+    return {
+      email: '',
+      password: '',
+      error: null
+    }
+  },
+  methods: {
+    async register () {
+      try {
+        await AuthenitcationService.register({
+          email: this.email,
+          password: this.password
+      })
+      } catch (error) {
+        this.error = error.response.data.error
+      }
+
+
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.error {
+  color: red
+}
+</style>

client/src/components/Register.vue

@@ -3,6 +3,8 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import Veutify from 'vuetify'
+import 'vuetify/dist/vuetify.min.css'
 
 Vue.config.productionTip = false
 

client/src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
+import Register from '@/components/Register'
 
 Vue.use(Router)
 
@@ -10,6 +11,11 @@ export default new Router({
       path: '/',
       name: 'HelloWorld',
       component: HelloWorld
+    },
+    {
+      path: '/register',
+      name: 'register',
+      component: Register
     }
   ]
 })

client/src/router/index.js

@@ -0,0 +1,7 @@
+import axios from 'axios'
+
+export default () => {
+  return axios.create({
+    baseURL: 'http://localhost:8081/'
+  })
+}

client/src/services/Api.js

@@ -0,0 +1,7 @@
+import Api from '@/services/Api'
+
+export default {
+  register (credentials) {
+    return Api().post('register', credentials)
+  }
+}