my first commit

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --port 8081",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
     <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
   </div>
 </template>
@@ -18,12 +17,4 @@ export default class App extends Vue {}
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>

src/components/HelloWorld.vue

@@ -1,32 +1,13 @@
 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
+    <h1>Demo Message Client UI</h1>
     <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+      <button @click.prevent="loginFis">Login</button><button @click.prevent="logoutAllFis">LogoutAll</button>
     </p>
-    <h3>Installed CLI Plugins</h3>
     <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+      <transition-group name="fade">
+        <li v-for="session in sessions" :key="session.id">UCPID : {{ session.ucpId }}</li>
+      </transition-group>
     </ul>
   </div>
 </template>
@@ -34,26 +15,59 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
+type fisSession = {
+  id:symbol,
+  ucpId: string,
+}
+
 @Component
 export default class HelloWorld extends Vue {
   @Prop() private msg!: string;
+  sessions: fisSession[] = [];
+
+  logoutAllFis(){
+    this.sessions = []
+  }
+  loginFis(){
+    this.sessions.push({
+      id: Symbol(),
+      ucpId: Math.round(Math.random() * 1000)+"",
+    })
+  }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h3 {
-  margin: 40px 0 0;
+.fade-enter-active, .fade-leave-active {
+  /* transition: translate scale opacity 0.5s ease-out; */
+  transition: all 0.3s ease-out;
+}
+.fade-enter, .fade-leave-to {
+  transform: scale(0.5) translateY(-49px) translateX(-103px);
+  box-shadow: none;
+  opacity: 0;
+}
+
+button + button {
+  margin-left: 1em;
 }
 ul {
-  list-style-type: none;
-  padding: 0;
+  margin: 0px;
+  padding: 0px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
-li {
+ul li {
+  list-style: none;
+  box-shadow: #989795a6 1px 3px 13px;
+  /* border: 2px solid gray; */
+  margin: .2em;
   display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
+  width: 200px;
+  height: 100px;
+  border-radius: .5em;
+  padding: 10px;
 }
 </style>