update: auth & update modal

src/components/UpdateCard.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="bg-dimmer" @click="closeCard"></div>
+  <div class="g-card popup-card">
+    <div class="card_content">
+      <h1>Raport zmian</h1>
+
+      <p v-for="(ch, i) in changesResponseComp" :key="i" :style="{ color: ch.resolved ? 'lime' : 'crimson' }">
+        {{ ch.resolved ? `✅` : `❌` }} {{ ch.message }}
+      </p>
+    </div>
+
+    <div class="card_actions">
+      <button @click="closeCard">OK!</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+
+export default defineComponent({
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  computed: {
+    changesResponseComp() {
+      return this.store.changesResponse.map((ch) => ({
+        resolved: ch.split(' ')[0] == 'v',
+        message: ch.replace(/^[v|x] /, ''),
+      }));
+    },
+  },
+
+  methods: {
+    closeCard() {
+      this.store.changesResponse.length = 0;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.bg-dimmer {
+  position: fixed;
+  z-index: 998;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  background-color: #0000004f;
+}
+
+h1 {
+  text-align: center;
+}
+
+.card_actions {
+  display: flex;
+  justify-content: center;
+}
+</style>
+