working frontend

YitziG · Mar 17, 2020 · 965f814 · 965f814
1 parent 0bf9573
commit 965f814
Show file tree

Hide file tree

Showing 11 changed files with 276 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.4",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vuetify": "^2.2.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.2.0",
@@ -18,7 +20,11 @@
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.1.2",
-    "vue-template-compiler": "^2.6.11"
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "vue-cli-plugin-vuetify": "~2.0.5",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
   },
   "eslintConfig": {
     "root": true,

diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,16 +1,36 @@
 <template>
-  <div id="app">
-    <Messages></Messages>
-  </div>
+  <v-app>
+    <v-app-bar
+      app
+      color="primary"
+      dark
+    >
+
+    </v-app-bar>
+
+    <v-content>
+      <br>
+      <Authenticate/>
+      <br>
+      <Videos/>
+    </v-content>
+  </v-app>
 </template>
 
 <script>
-import Messages from './components/Messages.vue'
+import Videos from './components/Videos';
+import Authenticate from './components/Authenticate';
 
 export default {
   name: 'App',
+
   components: {
-    Messages
-  }
-}
+    Videos,
+    Authenticate
+  },
+
+  data: () => ({
+    //
+  }),
+};
 </script>
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/components/Authenticate.vue b/src/components/Authenticate.vue
@@ -0,0 +1,44 @@
+<template>
+  <v-container>
+    <v-card class="mx-auto" max-width="400">
+      <v-form>
+        <v-toolbar dark>
+          <v-toolbar-title>Authenticate</v-toolbar-title>
+        </v-toolbar>
+        <v-row>
+          <v-col cols="12" sm="4" offset-sm="1">
+            <v-text-field v-model="apiKey" label="API Key" required></v-text-field>
+            <v-btn class="mr-4" @click="submit">submit</v-btn>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card>
+  </v-container>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      apiKey: "",
+      accessToken: "",
+      refreshToken: ""
+    };
+  },
+  methods: {
+    submit: function() {
+      self = this;
+      axios
+        .post("https://sandbox.api.video/auth/api-key", {
+          apiKey: self.apiKey
+        })
+        .then(function(response) {
+          self.accessToken = response.data.access_token;
+          self.refreshToken = response.data.refresh_token;
+        });
+    }
+  }
+};
+</script>
diff --git a/src/components/Messages.vue b/src/components/Messages.vue
diff --git a/src/components/Videos.vue b/src/components/Videos.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-card class="mx-auto" max-width="400" tile>
+    <v-toolbar dark>
+      <v-toolbar-title>Videos</v-toolbar-title>
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-list>
+            <v-list-item-group>
+              <v-list-item v-for="(message, i) in messages" :key="i">
+                <v-list-item-content>
+                  <v-list-item-title v-html="message"></v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list-item-group>
+          </v-list>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      messages: []
+    };
+  },
+  created: function() {
+    self = this;
+    axios.get("http://localhost:3000/messages").then(function(response) {
+      self.messages = response.data;
+    });
+  }
+};
+</script>