vue-router and login page

src/App.vue

@@ -1,49 +1,18 @@
 <template>
   <div id="app">
     <div class="content">
-      <div id="messagesContainer" class="messagesContainer">
+      <router-view />
-        <div id="messages" class="messages">
-          <message msg="Hey :D" />
-          <message msg="Du bist blööööd xD" />
-          <messageReceive msg="Du auch" />
-          <message msg="lol" />
-          <messageReceive msg="Du bist voll blöd, ich hasse dich, warum tust du das?!" />
-          <message msg="Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Ut imperdiet vel risus tristique mollis. Proin aliquam felis non vehicula ornare.
-                        Fusce scelerisque pellentesque erat quis sollicitudin.
-                        Quisque aliquet, ligula ut volutpat vulputate, ligula lorem dictum velit, et aliquam sapien orci sed magna.
-                        Nam suscipit ex eget urna accumsan pulvinar. Pellentesque fringilla placerat feugiat.
-                        Aenean aliquam vestibulum metus. Nulla augue turpis, consectetur vitae quam ac, porttitor rhoncus nunc.
-                        Nullam non turpis consequat, placerat lectus nec, ornare orci.
-                        Fusce lorem tortor, viverra ac suscipit sit amet, scelerisque id eros.
-                        Suspendisse et ultricies elit, vitae pretium ipsum. Suspendisse vel ex in turpis pulvinar feugiat. "
-          />
-          <messageReceive msg="Du hast Pizza!" />
-          <message msg="und Kuchen :P" />
-          <message msg="und Kuchen :P" />
-          <message msg="und Kuchen :P" />
-          <message msg="und Kuchen :P" />
-          <message msg="und Kuchen :P" />
-        </div>
-      </div>
-      <newMessage />
       <error />
     </div>
   </div>
 </template>
 
 <script>
-import message from './components/message.vue';
-import messageReceive from './components/messageReceive.vue';
-import newMessage from './components/newMessage.vue';
 import error from "@/components/error.vue";
 
 export default {
   name: 'App',
   components:{
-    message,
-    messageReceive,
-    newMessage,
     error
   }
 }
@@ -72,20 +41,6 @@ body{
   background-color: #313131;
   box-shadow: 3px 3px 10px #111;
 }
-.messagesContainer{
-  position: absolute;
-  margin: 0;
-  left: 0;
-  top: 0;
-  height: calc(100% - 4rem);
-  width: 100%;
-  overflow-y: auto;
-}
-.messages{
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 @media (max-width: 55rem){
   .content{
     width: calc(100%);

src/components/message.vue

@@ -33,6 +33,7 @@ export default {
     background-color: #42a7b9;
     border-radius: 1rem 1rem 0 1rem;
     text-align: left;
+    word-break: break-word;
   }
 
   @media (min-width: 45rem){

src/components/newMessage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="newMessageBanner">
     <label for="newMessageInput"></label>
-    <textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="msg.content.text" />
+    <textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput" autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" />
     <icon @click.native="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
   </div>
 </template>

src/components/textbtn.vue

@@ -0,0 +1,33 @@
+<template>
+  <button class="btn">
+    <div class="btnText">{{text}}</div>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "textbtn",
+  props:{
+    text: String
+  }
+}
+</script>
+
+<style scoped>
+  .btn{
+    cursor: pointer;
+    border: none;
+    height: 2.5rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    background-color: #00BCD4;
+    box-shadow: 3px 3px 10px #222;
+    border-radius: 1.25rem;
+  }
+  .btnText {
+    position: relative;
+    font-size: 1.4rem;
+    color:#fff;
+    font-family:Arial, "lucida console", sans-serif;
+  }
+</style>

src/main.js

@@ -1,10 +1,37 @@
 import Vue from 'vue'
+import VueRouter from 'vue-router'
 import App from './App.vue'
+import login from './views/login.vue'
+import chat from './views/chat.vue'
 
 Vue.config.productionTip = false
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: login
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: login
+    },
+    {
+      path: '/chat',
+      name: 'chat',
+      component: chat
+    }
+  ]
+})
 
 new Vue({
-  render: h => h(App),
+  el: '#app',
+  router,
+  template: '<App/>',
+  components: {App}
 }).$mount('#app')
 
 export default {
@@ -50,7 +77,13 @@ socket.onmessage = (e) => {
   let msg = JSON.parse(e.data)
   if (msg.type === 'error') show_error(msg.content)
   else if (msg.type === 'message'){
-    element('messages').innerHTML += `<messageReceive msg="${msg.content.message}" />`;
+    //just for now, ik it's dirty
+    element('messages').innerHTML +=
+        `<div class="messageContainer" data-v-032da2b2="">
+            <div class="message" data-v-032da2b2="">
+                ${msg.content.text}
+            </div>
+        </div>`;
   }
 }
 

src/views/chat.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div ref="msgContainer" id="messagesContainer" class="messagesContainer">
+      <div id="messages" class="messages">
+        <message msg="Hey :D" />
+        <message msg="Du bist blööööd xD" />
+        <messageReceive msg="Du auch" />
+        <message msg="lol" />
+        <messageReceive msg="Du bist voll blöd, ich hasse dich, warum tust du das?!" />
+        <message msg="Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      Ut imperdiet vel risus tristique mollis. Proin aliquam felis non vehicula ornare.
+                      Fusce scelerisque pellentesque erat quis sollicitudin.
+                      Quisque aliquet, ligula ut volutpat vulputate, ligula lorem dictum velit, et aliquam sapien orci sed magna.
+                      Nam suscipit ex eget urna accumsan pulvinar. Pellentesque fringilla placerat feugiat.
+                      Aenean aliquam vestibulum metus. Nulla augue turpis, consectetur vitae quam ac, porttitor rhoncus nunc.
+                      Nullam non turpis consequat, placerat lectus nec, ornare orci.
+                      Fusce lorem tortor, viverra ac suscipit sit amet, scelerisque id eros.
+                      Suspendisse et ultricies elit, vitae pretium ipsum. Suspendisse vel ex in turpis pulvinar feugiat. "
+        />
+        <messageReceive msg="Du hast Pizza!" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+      </div>
+    </div>
+    <newMessage />
+  </div>
+</template>
+
+<script>
+import message from '@/components/message.vue';
+import messageReceive from '@/components/messageReceive.vue';
+import newMessage from '@/components/newMessage.vue';
+
+export default {
+  name: 'chat',
+  components: {
+    message,
+    messageReceive,
+    newMessage
+  }
+}
+</script>
+
+<style scoped>
+.messagesContainer{
+  position: absolute;
+  margin: 0;
+  left: 0;
+  top: 0;
+  height: calc(100% - 4rem);
+  width: 100%;
+  overflow-y: auto;
+}
+.messages{
+  position: relative;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+</style>

src/views/login.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="login">
+    <h1 class="title">short your url</h1>
+    <div class="input-field" id="longurl">
+      <label for="longurl-input"></label>
+      <input class="input" id="longurl-input" type="text" autocomplete="off" maxlength="20" placeholder="chose nickname">
+    </div>
+    <input type="hidden" value="search" name="login">
+    <textbtn text="login" />
+  </div>
+</template>
+
+<script>
+import textbtn from '@/components/textbtn';
+
+export default {
+  name: "login.vue",
+  components: {
+    textbtn
+  }
+}
+</script>
+
+<style scoped>
+#login{
+  text-align: center;
+}
+</style>

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    runtimeCompiler: true
+}