feat(pro): improve subscription form

Author: fiftin

web/src/App.vue

@@ -83,7 +83,8 @@
 
     <EditDialog
       v-model="subscriptionDialog"
-      :save-button-text="user.admin && !user.has_active_subscription ? 'Activate' : 'Reactivate'"
+      :save-button-text="null"
+      :cancel-button-text="$t('close')"
       v-if="user"
       event-name="i-user"
       dont-close-on-save

web/src/components/SubscriptionForm.vue

@@ -14,6 +14,7 @@
     <v-textarea
       class="mt-4"
       rows="4"
+      auto-grow
       v-model="item.key"
       label="Subscription Key"
       :rules="[v => !!v || $t('key_required')]"
@@ -23,42 +24,71 @@
       dense
     ></v-textarea>
 
-    <v-row v-if="item.plan" class="mb-3">
-      <v-col class="py-0">
-        <v-list class="py-0">
-          <v-list-item class="pa-0">
-            <v-list-item-content>
-              <v-list-item-title>Plan</v-list-item-title>
-              <v-list-item-subtitle>{{ item.plan }}</v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-          <v-list-item class="pa-0">
-            <v-list-item-content>
-              <v-list-item-title>Pro users</v-list-item-title>
-              <v-list-item-subtitle>{{ item.users }}</v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-        </v-list>
-      </v-col>
-      <v-col class="py-0">
-        <v-list class="py-0">
-          <v-list-item class="pa-0">
-            <v-list-item-content>
-              <v-list-item-title>Expires at</v-list-item-title>
-              <v-list-item-subtitle>{{ item.expiresAt }}</v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-          <v-list-item class="pa-0">
-            <v-list-item-content>
-              <v-list-item-title>Status</v-list-item-title>
-              <v-list-item-subtitle>
-                <v-chip :color="statusColor" label class="mt-1">{{ item.state }}</v-chip>
-              </v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-        </v-list>
-      </v-col>
-    </v-row>
+    <div style="text-align: right; margin-bottom: 30px; margin-top: -10px;">
+      <v-btn @click="save" color="primary">Activate new key</v-btn>
+    </div>
+
+    <v-card
+      v-if="item.plan"
+      class="mb-3"
+      style="background: var(--highlighted-card-bg-color)"
+    >
+      <v-card-title>Plan &amp; status</v-card-title>
+      <v-card-text class="pb-2">
+        <v-row>
+          <v-col class="py-0">
+            <v-list class="py-0" style="background: unset;">
+              <v-list-item class="pa-0">
+                <v-list-item-content>
+                  <v-list-item-title>Plan</v-list-item-title>
+                  <v-list-item-subtitle>{{ item.plan }}</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item class="pa-0">
+                <v-list-item-content>
+                  <v-list-item-title>Expires at</v-list-item-title>
+                  <v-list-item-subtitle>{{ item.expiresAt }}</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-col>
+          <v-col class="py-0">
+            <v-list class="py-0" style="background: unset;">
+              <v-list-item class="pa-0">
+                <v-list-item-content>
+                  <v-list-item-title>Pro users</v-list-item-title>
+                  <v-list-item-subtitle>{{ item.users }}</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item class="pa-0">
+                <v-list-item-content>
+                  <v-list-item-title>Status</v-list-item-title>
+                  <v-list-item-subtitle style="display: flex; align-items: center;">
+                    <div
+                      style="
+                        border-radius: 100px;
+                        width: 8px;
+                        height: 8px;
+                        background: greenyellow;
+                        margin-right: 5px;
+                        margin-top: 1px;
+                      "
+                    ></div>
+                    <div>{{ item.state }}</div>
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-col>
+        </v-row>
+
+        <div style="
+          margin-top: 20px;
+          font-weight: bold;
+          color: #00bc00;
+        ">Renews in {{ (new Date() - item.expiresAt) | formatMilliseconds }}</div>
+      </v-card-text>
+    </v-card>
 
     <div v-else class="mb-4 mt-2">