Add Register Page

Author: Bhanu Teja P

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'import/extensions': 'off',
+    'import/no-cycle': 'off'
   },
   parserOptions: {
     parser: 'babel-eslint',

package-lock.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@mdi/font": "^3.6.95",
+    "axios": "^0.19.0",
     "codemirror": "^5.48.4",
     "core-js": "^2.6.5",
     "roboto-fontface": "*",

package.json

@@ -0,0 +1,27 @@
+<template>
+  <v-card
+    :loading="false"
+    class="mx-auto my-12"
+  >
+    <v-card-title>
+      <slot name="title"></slot>
+    </v-card-title>
+    <v-card-text>
+      <slot></slot>
+    </v-card-text>
+    <v-divider class="mx-4"></v-divider>
+    <v-card-actions>
+      <slot name="actions"></slot>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/Card.vue

@@ -0,0 +1,27 @@
+<template>
+  <fragment>
+    <v-alert
+      v-for="({type, message}, index) in alerts"
+      dismissible
+      :type="type"
+      class="mb-4"
+      :value="!!message"
+      :key="index"
+    >
+      {{ message }}
+    </v-alert>
+  </fragment>
+</template>
+
+<script>
+export default {
+  name: 'FormAlerts',
+  props: {
+    alerts: Array,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/FormAlerts.vue

@@ -0,0 +1,28 @@
+<template>
+  <fragment>
+    <v-text-field
+      v-for="({ label, placeholder, type, icon, value, input }, index) in fields"
+      :label="label"
+      :placeholder="placeholder"
+      :type="type"
+      :prepend-icon="icon"
+      :value="value"
+      @input="input"
+      :key="index"
+    >
+    </v-text-field>
+  </fragment>
+</template>
+
+<script>
+export default {
+  name: 'TestFields',
+  props: {
+    fields: Array,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/TextFields.vue

@@ -0,0 +1,4 @@
+export { default as HelloWorld } from './HelloWorld';
+export { default as TextFields } from './TextFields';
+export { default as Card } from './Card';
+export { default as FormAlerts } from './FormAlerts';

src/components/index.js

@@ -7,7 +7,7 @@
     <v-btn text>
       <span class="mr-2">Login</span>
     </v-btn>
-    <v-btn text>
+    <v-btn text to="/register">
       <span class="mr-2">SignUp</span>
     </v-btn>
   </v-app-bar>

src/components/layout/Header.vue

@@ -0,0 +1,7 @@
+import axios from 'axios';
+import store from './store';
+
+export default () => axios.create({
+  baseURL: store.state.baseUrl,
+  timeout: 10000,
+});

src/http.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import Home from '../views/Home';
 import About from '../views/About';
+import Register from '../views/Register';
 
 Vue.use(Router);
 
@@ -19,5 +20,10 @@ export default new Router({
       name: 'about',
       component: About,
     },
+    {
+      path: '/register',
+      name: 'register',
+      component: Register,
+    },
   ],
 });