changes: update card & auth

src/App.vue

@@ -137,7 +137,6 @@ button:focus-visible {
   max-width: 550px;
 
   padding: 0.5em 1em;
-  margin-top: 1em;
 
   border-radius: 1em;
 

src/components/UpdateCard.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="bg-dimmer" @click="closeCard"></div>
-  <div class="g-card popup-card">
+  <div class="g-card">
-    <div class="card_content">
+    <div class="card_body">
       <h1>Raport zmian</h1>
 
-      <p v-for="(ch, i) in changesResponseComp" :key="i" :style="{ color: ch.resolved ? 'lime' : 'crimson' }">
+      <div class="card_content">
-        {{ ch.resolved ? `✅` : `❌` }} {{ ch.message }}
+        <div class="changes-list">
-      </p>
+          <p v-for="(ch, i) in changesResponseComp" :key="i" :style="{ color: ch.resolved ? 'lime' : 'crimson' }">
-    </div>
+            {{ ch.resolved ? `✅` : `❌` }} {{ ch.message }}
+          </p>
+        </div>
+      </div>
 
-    <div class="card_actions">
+      <div class="card_actions">
-      <button @click="closeCard">OK!</button>
+        <button @click="closeCard">OK!</button>
+      </div>
     </div>
   </div>
 </template>
@@ -55,8 +59,30 @@ export default defineComponent({
   background-color: #0000004f;
 }
 
+.g-card {
+  overflow: auto;
+}
+
+.card_body {
+  display: grid;
+  grid-template-rows: 60px 80%;
+  height: 90vh;
+  max-height: 550px;
+  padding: 0.5em;
+}
+
+.card_content {
+  overflow: auto;
+}
+
+.changes-list {
+  overflow: auto;
+}
+
 h1 {
   text-align: center;
+  margin: 0;
+  padding: 0.5em 0;
 }
 
 .card_actions {

src/views/LoginView.vue

@@ -16,6 +16,7 @@
       <br />
       <button>{{ loginState == LoginState.LOADING ? 'Logowanie...' : 'Zaloguj się' }}</button>
     </form>
+    <p style="color: yellow; height: 25px">{{ errorMessage }}</p>
   </div>
 </template>
 
@@ -35,14 +36,21 @@ enum LoginState {
 export default defineComponent({
   mixins: [dataMixin],
 
+  data() {
+    return {
+      errorMessage: '',
+    };
+  },
+
   setup() {
     return {
+      LoginState,
+      AuthState,
+
       name: '',
       password: '',
       loginState: LoginState.INITIALIZED,
-      LoginState,
       store: useStore(),
-      AuthState,
     };
   },
 
@@ -80,7 +88,7 @@ export default defineComponent({
         this.loginState = LoginState.LOADED;
 
         if (!e.response || e.response.status === undefined) {
-          this.store.alertMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
+          this.errorMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
           return false;
         }
 
@@ -88,11 +96,11 @@ export default defineComponent({
         const status: number = response.status;
 
         if (status == 401) {
-          this.store.alertMessage = 'Nieprawidłowe dane!';
+          this.errorMessage = 'Nieprawidłowe dane!';
           return false;
         }
 
-        this.store.alertMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
+        this.errorMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
         return false;
       }