Feat: variants (#1885)

add primary & secondary button & actionfield

src/app/pages/admin.vue

@@ -15,12 +15,12 @@
               :to="`/admin/${item.id}`"
               active-class="bg-red-800 rounded"
             >
-              <BaseButton
+              <BaseSecondaryButton
                 as="span"
                 class="w-full cursor-pointer rounded p-2 font-medium transition-colors duration-200 hover:bg-red-800 dark:text-neutral-200"
               >
                 {{ item.name }}
-              </BaseButton>
+              </BaseSecondaryButton>
             </NuxtLink>
           </div>
         </div>

src/app/pages/admin/config.vue

@@ -49,8 +49,8 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
       </FormGroup>
     </FormElement>
   </main>

src/app/pages/admin/general.vue

@@ -32,8 +32,8 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
       </FormGroup>
     </FormElement>
   </main>

src/app/pages/admin/hooks.vue

@@ -25,8 +25,8 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
       </FormGroup>
     </FormElement>
   </main>

src/app/pages/admin/interface.vue

@@ -23,15 +23,15 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
         <AdminCidrDialog
           trigger-class="col-span-2"
           :ipv4-cidr="data.ipv4Cidr"
           :ipv6-cidr="data.ipv6Cidr"
           @change="changeCidr"
         >
-          <FormActionField
+          <FormSecondaryActionField
             :label="$t('admin.interface.changeCidr')"
             class="w-full"
             tabindex="-1"
@@ -41,7 +41,7 @@
           trigger-class="col-span-2"
           @restart="restartInterface"
         >
-          <FormActionField
+          <FormSecondaryActionField
             :label="$t('admin.interface.restart')"
             class="w-full"
             tabindex="-1"

src/app/pages/clients/[id].vue

@@ -107,14 +107,17 @@
           </FormGroup>
           <FormGroup>
             <FormHeading>{{ $t('form.actions') }}</FormHeading>
-            <FormActionField type="submit" :label="$t('form.save')" />
-            <FormActionField :label="$t('form.revert')" @click="revert" />
+            <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+            <FormSecondaryActionField
+              :label="$t('form.revert')"
+              @click="revert"
+            />
             <ClientsDeleteDialog
               trigger-class="col-span-2"
               :client-name="data.name"
               @delete="deleteClient"
             >
-              <FormActionField
+              <FormSecondaryActionField
                 label="Delete"
                 class="w-full"
                 type="button"

src/app/pages/me.vue

@@ -18,7 +18,7 @@
               v-model="email"
               :label="$t('user.email')"
             />
-            <FormActionField type="submit" :label="$t('form.save')" />
+            <FormSecondaryActionField type="submit" :label="$t('form.save')" />
           </FormGroup>
         </FormElement>
         <FormElement @submit.prevent="updatePassword">
@@ -42,7 +42,7 @@
               autocomplete="new-password"
               :label="$t('general.confirmPassword')"
             />
-            <FormActionField
+            <FormSecondaryActionField
               type="submit"
               :label="$t('general.updatePassword')"
             />
@@ -55,7 +55,10 @@
               v-if="!authStore.userData?.totpVerified && !twofa"
               class="col-span-2 flex flex-col"
             >
-              <FormActionField :label="$t('me.enable2fa')" @click="setup2fa" />
+              <FormSecondaryActionField
+                :label="$t('me.enable2fa')"
+                @click="setup2fa"
+              />
             </div>
             <div
               v-if="!authStore.userData?.totpVerified && twofa"
@@ -81,7 +84,7 @@
                   v-model="code"
                   :label="$t('general.2faCode')"
                 />
-                <FormActionField
+                <FormSecondaryActionField
                   :label="$t('me.enable2fa')"
                   @click="enable2fa"
                 />
@@ -101,7 +104,7 @@
                 type="password"
                 autocomplete="current-password"
               />
-              <FormActionField
+              <FormSecondaryActionField
                 :label="$t('me.disable2fa')"
                 @click="disable2fa"
               />

src/app/pages/setup/1.vue

@@ -4,7 +4,9 @@
       {{ $t('setup.welcomeDesc') }}
     </p>
     <NuxtLink to="/setup/2" class="mt-8">
-      <BaseButton as="span">{{ $t('general.continue') }}</BaseButton>
+      <BasePrimaryButton as="span">
+        {{ $t('general.continue') }}
+      </BasePrimaryButton>
     </NuxtLink>
   </div>
 </template>

src/app/pages/setup/2.vue

@@ -29,7 +29,9 @@
         />
       </div>
       <div class="mt-4 flex justify-center">
-        <BaseButton @click="submit">{{ $t('setup.createAccount') }}</BaseButton>
+        <BasePrimaryButton @click="submit">
+          {{ $t('setup.createAccount') }}
+        </BasePrimaryButton>
       </div>
     </div>
   </div>

src/app/pages/setup/3.vue

@@ -5,14 +5,14 @@
     </p>
     <div class="mt-4 flex justify-center gap-3">
       <NuxtLink to="/setup/4" class="w-20">
-        <BaseButton as="span" class="w-full justify-center">
+        <BasePrimaryButton as="span" class="w-full justify-center">
           {{ $t('general.no') }}
-        </BaseButton>
+        </BasePrimaryButton>
       </NuxtLink>
       <NuxtLink to="/setup/migrate" class="w-20">
-        <BaseButton as="span" class="w-full justify-center">
+        <BaseSecondaryButton as="span" class="w-full justify-center">
           {{ $t('general.yes') }}
-        </BaseButton>
+        </BaseSecondaryButton>
       </NuxtLink>
     </div>
   </div>

src/app/pages/setup/4.vue

@@ -23,7 +23,9 @@
         />
       </div>
       <div class="mt-4 flex justify-center">
-        <BaseButton @click="submit">{{ $t('general.continue') }}</BaseButton>
+        <BasePrimaryButton @click="submit">
+          {{ $t('general.continue') }}
+        </BasePrimaryButton>
       </div>
     </div>
   </div>

src/app/pages/setup/migrate.vue

@@ -8,7 +8,9 @@
       <input id="migration" type="file" @change="onChangeFile" />
     </div>
     <div class="mt-4">
-      <BaseButton @click="submit">{{ $t('setup.upload') }}</BaseButton>
+      <BasePrimaryButton @click="submit">
+        {{ $t('setup.upload') }}
+      </BasePrimaryButton>
     </div>
   </div>
 </template>

src/app/pages/setup/success.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col items-center">
     <p>{{ $t('setup.successful') }}</p>
     <NuxtLink to="/login" class="mt-4">
-      <BaseButton as="span">{{ $t('login.signIn') }}</BaseButton>
+      <BasePrimaryButton as="span">{{ $t('login.signIn') }}</BasePrimaryButton>
     </NuxtLink>
   </div>
 </template>