@fy-/fws-vue 2.3.36 → 2.3.38

package/components/fws/UserData.vue

@@ -72,72 +72,96 @@ async function patchUser() {
 </script>
 
 <template>
-  <form @submit.prevent="patchUser">
-    <DefaultInput
-      id="firstnameFWS"
-      v-model="state.userData.Firstname"
-      class="mb-4"
-      type="text"
-      :label="$t('fws_firstname_label')"
-      :help="$t('fws_firstname_help')"
-      :error-vuelidate="v$.userData.Firstname.$errors"
-    />
-    <DefaultInput
-      id="lastnameFWS"
-      v-model="state.userData.Lastname"
-      class="mb-4"
-      type="text"
-      :label="$t('fws_lastname_label')"
-      :help="$t('fws_lastname_help')"
-      :error-vuelidate="v$.userData.Lastname.$errors"
-    />
-    <DefaultInput
-      id="phoneFWS"
-      v-model="state.userData.Phone"
-      class="mb-4"
-      type="text"
-      :label="$t('fws_phone_label')"
-      :help="$t('fws_phone_help')"
-      :error-vuelidate="v$.userData.Phone.$errors"
-    />
-    <DefaultInput
-      v-if="!userData?.AcceptedTerms"
-      id="acceptedTermsFWS"
-      v-model:checkbox-value="state.userData.AcceptedTerms"
-      type="toggle"
-      :label="$t('fws_accepted_terms_label')"
-      :help="$t('fws_accepted_terms_help')"
-      :error-vuelidate="v$.userData.AcceptedTerms.$errors"
-    />
-    <DefaultInput
-      id="enabledNotificationsFWS"
-      v-model:checkbox-value="state.userData.EnabledNotifications"
-      type="toggle"
-      :label="$t('fws_enabled_notifications_label')"
-      :help="$t('fws_enabled_notifications_help')"
-      :error-vuelidate="v$.userData.EnabledNotifications.$errors"
-    />
-    <DefaultInput
-      id="enabledEmailsFWS"
-      v-model:checkbox-value="state.userData.EnabledEmails"
-      type="toggle"
-      :label="$t('fws_enabled_emails_label')"
-      :help="$t('fws_enabled_emails_help')"
-      :error-vuelidate="v$.userData.EnabledEmails.$errors"
-    />
-    <DefaultInput
-      id="enabledTrainingFromMyDataFWS"
-      v-model:checkbox-value="state.userData.EnabledTrainingFromMyData"
-      type="toggle"
-      :label="$t('fws_enabled_training_from_my_data_label')"
-      :help="$t('fws_enabled_training_from_my_data_help')"
-      :error-vuelidate="v$.userData.EnabledTrainingFromMyData.$errors"
-    />
+  <form class="space-y-4" @submit.prevent="patchUser">
+    <div class="bg-white dark:bg-fv-neutral-900 p-4 sm:p-6 rounded-lg shadow-sm border border-fv-neutral-200 dark:border-fv-neutral-700">
+      <h3 class="text-lg font-semibold text-fv-neutral-900 dark:text-white mb-4 sm:mb-5 pb-2 border-b border-fv-neutral-200 dark:border-fv-neutral-700">
+        {{ $t('fws_personal_data_title') || $t('fws_personal_information') }}
+      </h3>
 
-    <div class="flex">
-      <button type="submit" class="btn defaults primary">
-        {{ $t("fws_save_user_cta") }}
-      </button>
+      <!-- Personal Information Section -->
+      <div class="grid gap-4 md:grid-cols-2 mb-4 sm:mb-6">
+        <DefaultInput
+          id="firstnameFWS"
+          v-model="state.userData.Firstname"
+          type="text"
+          :label="$t('fws_firstname_label')"
+          :help="$t('fws_firstname_help')"
+          :error-vuelidate="v$.userData.Firstname.$errors"
+        />
+        <DefaultInput
+          id="lastnameFWS"
+          v-model="state.userData.Lastname"
+          type="text"
+          :label="$t('fws_lastname_label')"
+          :help="$t('fws_lastname_help')"
+          :error-vuelidate="v$.userData.Lastname.$errors"
+        />
+        <DefaultInput
+          id="phoneFWS"
+          v-model="state.userData.Phone"
+          type="text"
+          :label="$t('fws_phone_label')"
+          :help="$t('fws_phone_help')"
+          :error-vuelidate="v$.userData.Phone.$errors"
+        />
+      </div>
+
+      <!-- Terms & Preferences -->
+      <div class="pt-3 sm:pt-4 border-t border-fv-neutral-200 dark:border-fv-neutral-700">
+        <h4 class="font-medium text-fv-neutral-800 dark:text-white mb-2 sm:mb-3">
+          {{ $t('fws_preferences_and_settings') }}
+        </h4>
+
+        <div class="grid gap-2 sm:gap-3 p-1 sm:p-2">
+          <DefaultInput
+            v-if="!userData?.AcceptedTerms"
+            id="acceptedTermsFWS"
+            v-model:checkbox-value="state.userData.AcceptedTerms"
+            type="toggle"
+            :label="$t('fws_accepted_terms_label')"
+            :help="$t('fws_accepted_terms_help')"
+            :error-vuelidate="v$.userData.AcceptedTerms.$errors"
+          />
+
+          <div class="grid gap-3 md:grid-cols-2 my-1">
+            <DefaultInput
+              id="enabledNotificationsFWS"
+              v-model:checkbox-value="state.userData.EnabledNotifications"
+              type="toggle"
+              :label="$t('fws_enabled_notifications_label')"
+              :help="$t('fws_enabled_notifications_help')"
+              :error-vuelidate="v$.userData.EnabledNotifications.$errors"
+            />
+            <DefaultInput
+              id="enabledEmailsFWS"
+              v-model:checkbox-value="state.userData.EnabledEmails"
+              type="toggle"
+              :label="$t('fws_enabled_emails_label')"
+              :help="$t('fws_enabled_emails_help')"
+              :error-vuelidate="v$.userData.EnabledEmails.$errors"
+            />
+          </div>
+
+          <DefaultInput
+            id="enabledTrainingFromMyDataFWS"
+            v-model:checkbox-value="state.userData.EnabledTrainingFromMyData"
+            type="toggle"
+            :label="$t('fws_enabled_training_from_my_data_label')"
+            :help="$t('fws_enabled_training_from_my_data_help')"
+            :error-vuelidate="v$.userData.EnabledTrainingFromMyData.$errors"
+          />
+        </div>
+      </div>
+
+      <!-- Save Button -->
+      <div class="flex justify-end mt-6">
+        <button type="submit" class="btn defaults primary flex items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+          </svg>
+          {{ $t("fws_save_user_cta") }}
+        </button>
+      </div>
     </div>
   </form>
 </template>

package/components/fws/UserOAuth2.vue

@@ -14,6 +14,12 @@ const isAuth = computed(() => userStore.isAuth)
 const data = ref()
 const providersData = ref()
 const usedProviders = ref<Record<string, boolean>>({})
+
+// Check if there are any available providers that aren't connected yet
+const hasAvailableProviders = computed(() => {
+  if (!providersData.value || providersData.value.length === 0) return false
+  return providersData.value.some(provider => !usedProviders.value[provider.UUID])
+})
 const props = defineProps({
   returnTo: {
     type: String,
@@ -81,93 +87,170 @@ onMounted(() => {
 
 <template>
   <div class="flex flex-col gap-3">
+    <!-- Provider Selection Modal -->
     <DefaultModal id="providers" :title="$t('providers_modal_title')">
-      <template v-for="provider in providersData" :key="provider.UUID">
-        <div
-          v-if="!usedProviders[provider.UUID]"
-          class="flex items-center gap-3"
-        >
-          <button
-            class="flex border border-fv-neutral-300 dark:border-fv-neutral-700 shadow items-center gap-2 justify-start btn neutral defaults w-full mx-auto !font-semibold"
-            :style="`background: ${
-              provider.Data.Button.button['background-color']
-            }; color: ${$getContrastingTextColor(
-              provider.Data.Button.button['background-color'],
-            )}`"
-            @click="
-              () => {
-                getOAuth2Redirect(provider.UUID);
-              }
-            "
-          >
-            <img
-              :key="`${provider.Data.Button.label}oauth`"
-              class="h-12 w-12 block p-2 mr-3"
-              :alt="provider.Data.Button.info.Name"
-              :src="provider.Data.Button.button.logo"
+      <div class="grid gap-4 p-1">
+        <!-- Check if there are available providers to connect -->
+        <div v-if="providersData && providersData.length > 0">
+          <div v-if="!hasAvailableProviders" class="text-center py-6">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-fv-neutral-400 dark:text-fv-neutral-500 mb-3" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clip-rule="evenodd" />
+            </svg>
+            <p class="text-fv-neutral-700 dark:text-fv-neutral-300 mb-1 font-medium">
+              {{ $t('account_already_connected_to_all_providers') || 'All services are connected' }}
+            </p>
+            <p class="text-sm text-fv-neutral-500 dark:text-fv-neutral-400">
+              {{ $t('no_more_available_providers') || 'Your account is already connected to all available services' }}
+            </p>
+          </div>
+
+          <template v-for="provider in providersData" v-else :key="provider.UUID">
+            <div
+              v-if="!usedProviders[provider.UUID]"
+              class="flex items-center"
             >
-            <div>
-              {{
-                $t("user_flow_signin_with", {
-                  provider: provider.Data.Button.name,
-                })
-              }}
+              <button
+                class="flex border border-fv-neutral-300 dark:border-fv-neutral-700 rounded-lg shadow-sm hover:shadow items-center gap-2 justify-start w-full mx-auto !font-medium p-3 transition-all duration-200"
+                :style="`background: ${
+                  provider.Data.Button.button['background-color']
+                }; color: ${$getContrastingTextColor(
+                  provider.Data.Button.button['background-color'],
+                )}`"
+                @click="
+                  () => {
+                    getOAuth2Redirect(provider.UUID);
+                  }
+                "
+              >
+                <img
+                  :key="`${provider.Data.Button.label}oauth`"
+                  class="h-10 w-10 block p-1.5 mr-3 rounded"
+                  :alt="provider.Data.Button.info.Name"
+                  :src="provider.Data.Button.button.logo"
+                >
+                <div class="text-base">
+                  {{
+                    $t("user_flow_signin_with", {
+                      provider: provider.Data.Button.name,
+                    })
+                  }}
+                </div>
+              </button>
             </div>
-          </button>
+          </template>
+        </div>
+
+        <!-- Loading or no providers available -->
+        <div v-else class="text-center py-4">
+          <p class="text-fv-neutral-500 dark:text-fv-neutral-400">
+            {{ $t('loading_providers') || 'Loading available services...' }}
+          </p>
         </div>
-      </template>
+      </div>
     </DefaultModal>
-    <h2 class="h3 flex items-center justify-between">
-      <span>{{ $t("oauth2_providers_title") }}</span>
-      <button
-        class="btn primary medium !py-1 !px-3"
-        @click="
-          () => {
-            $eventBus.emit('providersModal', true);
-          }
-        "
+
+    <!-- Main Container -->
+    <div class="bg-white dark:bg-fv-neutral-900 rounded-lg shadow-sm border border-fv-neutral-200 dark:border-fv-neutral-700 p-4 sm:p-6">
+      <!-- Header -->
+      <div class="flex items-center justify-between mb-4 sm:mb-6 pb-2 sm:pb-3 border-b border-fv-neutral-200 dark:border-fv-neutral-700">
+        <h2 class="text-lg font-semibold text-fv-neutral-900 dark:text-white">
+          {{ $t("oauth2_providers_title") }}
+        </h2>
+        <button
+          class="btn primary small flex items-center gap-2"
+          @click="
+            () => {
+              $eventBus.emit('providersModal', true);
+            }
+          "
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
+          </svg>
+          {{ $t("add_oauth2_con_cta") }}
+        </button>
+      </div>
+
+      <!-- Error Message -->
+      <div
+        v-if="$route.query.error && $route.query.error === 'user_oauth2_connection_exists'"
+        class="mb-3 sm:mb-4 p-2 sm:p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg"
       >
-        {{ $t("add_oauth2_con_cta") }}
-      </button>
-    </h2>
-    <p
-      v-if="
-        $route.query.error
-          && $route.query.error === 'user_oauth2_connection_exists'
-      "
-      class="text-red-900 dark:text-red-300 text-sm bg-red-200/[.2] dark:bg-red-900/[.2] p-2 rounded shadow"
-    >
-      {{ $t("oauth2_error_user_oauth2_connection_exists") }}
-    </p>
-    <div v-if="data && data.length === 0">
-      <p>{{ $t("providers_empty") }}</p>
-    </div>
-    <div
-      v-for="provider in data"
-      :key="provider.ProviderUUID"
-      class="flex items-center gap-3"
-    >
-      <img
-        :src="provider.Provider.Button.button.logo"
-        class="w-14 h-14 p-1 rounded-full"
-        :style="`background-color: ${provider.Provider.Button.button['background-color']}`"
+        <div class="flex items-start">
+          <svg class="w-5 h-5 text-red-600 dark:text-red-400 mt-0.5 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+          </svg>
+          <p class="text-sm text-red-700 dark:text-red-300">
+            {{ $t("oauth2_error_user_oauth2_connection_exists") }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <div
+        v-if="data && data.length === 0"
+        class="py-6 sm:py-8 px-3 sm:px-4 text-center bg-fv-neutral-50 dark:bg-fv-neutral-700/30 rounded-lg border border-fv-neutral-200 dark:border-fv-neutral-700"
       >
-      <div>
-        <h3 class="text-xl">
-          {{ provider.Provider.Button.name }}
-          <small class="text-xs">({{ provider.ServiceID }})</small>
-        </h3>
-        <div class="flex gap-2 mt-1">
-          <button
-            class="btn danger small"
-            @click="
-              () => {
-                deleteOAuth2Connection(provider.ProviderUUID);
-              }
-            "
-          >
-            {{ $t("remove_oauth2_con_cta") }}
-          </button>
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-fv-neutral-400 dark:text-fv-neutral-500 mb-3" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+        </svg>
+        <p class="text-fv-neutral-700 dark:text-fv-neutral-300">
+          {{ $t("providers_empty") }}
+        </p>
+        <button
+          class="btn primary small mt-3"
+          @click="
+            () => {
+              $eventBus.emit('providersModal', true);
+            }
+          "
+        >
+          {{ $t("add_oauth2_con_cta") }}
+        </button>
+      </div>
+
+      <!-- Connected Providers List -->
+      <div v-else class="grid gap-3 sm:gap-4">
+        <div
+          v-for="provider in data"
+          :key="provider.ProviderUUID"
+          class="flex items-center p-3 sm:p-4 bg-fv-neutral-50 dark:bg-fv-neutral-700/30 rounded-lg border border-fv-neutral-200 dark:border-fv-neutral-700 transition-all duration-200 hover:shadow-sm"
+        >
+          <div class="flex-shrink-0 mr-4">
+            <div
+              class="w-14 h-14 rounded-full flex items-center justify-center p-0.5"
+              :style="`background-color: ${provider.Provider.Button.button['background-color']}`"
+            >
+              <img
+                :src="provider.Provider.Button.button.logo"
+                class="w-10 h-10 object-contain"
+                :alt="provider.Provider.Button.name"
+              >
+            </div>
+          </div>
+          <div class="flex-1 min-w-0">
+            <h3 class="text-lg font-medium text-fv-neutral-900 dark:text-white truncate">
+              {{ provider.Provider.Button.name }}
+            </h3>
+            <p class="text-sm text-fv-neutral-500 dark:text-fv-neutral-400 truncate">
+              {{ provider.ServiceID }}
+            </p>
+          </div>
+          <div class="ml-4">
+            <button
+              class="btn danger small flex items-center gap-1.5"
+              @click="
+                () => {
+                  deleteOAuth2Connection(provider.ProviderUUID);
+                }
+              "
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+              </svg>
+              {{ $t("remove_oauth2_con_cta") }}
+            </button>
+          </div>
         </div>
       </div>
     </div>

package/components/fws/UserProfile.vue

@@ -160,118 +160,176 @@ function selectFile(e: Event) {
 </script>
 
 <template>
-  <form @submit.prevent="patchUser">
-    <DefaultInput
-      id="usernameFWS"
-      v-model="state.userData.Username"
-      class="mb-4"
-      type="text"
-      :label="$t('fws_username_label')"
-      :help="$t('fws_username_help')"
-      :error-vuelidate="v$.userData.Username.$errors"
-      :disabled="userData?.UserProfile?.HasUsernameAndSlug ? true : false"
-    />
-    <div class="flex gap-2 items-center mb-4">
-      <img
-        v-if="userData?.UserProfile?.AvatarUUID"
-        :src="`${imageDomain}/${userData?.UserProfile?.AvatarUUID}?vars=format=png:resize=100x100`"
-        class="w-16 h-16 rounded-full flex-0 shrink-0 grow-0"
-      >
-      <div class="flex-1">
-        <label
-          class="block text-sm font-medium mb-2 text-neutral-900 dark:text-white"
-          for="file_input"
-        >{{ $t("fws_upload_av_label") }}</label>
-        <input
-          ref="uploadInput"
-          class="block text-sm w-full text-neutral-900 border border-neutral-300 rounded-lg cursor-pointer bg-neutral-50 dark:text-neutral-400 focus:outline-none dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400"
-          type="file"
-          accept="image/jpg, image/jpeg, image/png, image/gif"
-          @change="selectFile"
-        >
+  <form class="space-y-4" @submit.prevent="patchUser">
+    <div class="bg-white dark:bg-fv-neutral-900 p-4 sm:p-6 rounded-lg shadow-sm border border-fv-neutral-200 dark:border-fv-neutral-700">
+      <h3 class="text-lg font-semibold text-fv-neutral-900 dark:text-white mb-4 pb-2 border-b border-fv-neutral-200 dark:border-fv-neutral-700">
+        {{ $t('fws_profile_heading') || $t('fws_your_profile') }}
+      </h3>
+
+      <!-- Username and Avatar Section -->
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6">
+        <!-- Avatar Upload -->
+        <div class="flex flex-col">
+          <h4 class="font-medium text-fv-neutral-800 dark:text-white text-sm mb-3">
+            {{ $t("fws_profile_image") }}
+          </h4>
+          <div class="flex items-center gap-3 sm:gap-4">
+            <div class="relative group">
+              <img
+                v-if="userData?.UserProfile?.AvatarUUID"
+                :src="`${imageDomain}/${userData?.UserProfile?.AvatarUUID}?vars=format=png:resize=100x100`"
+                class="w-20 h-20 rounded-full object-cover border-2 border-fv-neutral-200 dark:border-fv-neutral-700 shadow-sm"
+                alt="Profile Avatar"
+              >
+              <div v-else class="w-20 h-20 rounded-full bg-fv-neutral-200 dark:bg-fv-neutral-700 flex items-center justify-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-fv-neutral-400 dark:text-fv-neutral-500" viewBox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+                </svg>
+              </div>
+            </div>
+
+            <div class="flex-1">
+              <label
+                class="block text-sm font-medium mb-2 text-fv-neutral-800 dark:text-white"
+                for="file_input"
+              >{{ $t("fws_upload_av_label") }}</label>
+              <div class="relative">
+                <input
+                  id="file_input"
+                  ref="uploadInput"
+                  class="block text-sm w-full text-fv-neutral-700 border border-fv-neutral-300 rounded-lg cursor-pointer bg-fv-neutral-50 dark:text-fv-neutral-400 focus:outline-none dark:bg-fv-neutral-700 dark:border-fv-neutral-600 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-medium file:bg-fv-primary-50 file:text-fv-primary-600 dark:file:bg-fv-primary-900 dark:file:text-fv-primary-300 hover:file:bg-fv-primary-100 dark:hover:file:bg-fv-primary-800"
+                  type="file"
+                  accept="image/jpg, image/jpeg, image/png, image/gif"
+                  @change="selectFile"
+                >
+              </div>
+              <p class="mt-1 text-xs text-fv-neutral-500 dark:text-fv-neutral-400">
+                {{ $t("fws_upload_av_help") || "JPG, JPEG, PNG or GIF (max 2MB)" }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Username -->
+        <div class="flex flex-col justify-center">
+          <DefaultInput
+            id="usernameFWS"
+            v-model="state.userData.Username"
+            type="text"
+            :label="$t('fws_username_label')"
+            :help="$t('fws_username_help')"
+            :error-vuelidate="v$.userData.Username.$errors"
+            :disabled="userData?.UserProfile?.HasUsernameAndSlug ? true : false"
+          />
+        </div>
       </div>
-    </div>
-    <DefaultModal id="avCrop" :title="$t('fws_crop_av_title')">
-      <button class="btn defaults primary" @click="getCropResult">
-        {{ $t("fws_crop_av_cta") }}
-      </button>
-      <div class="max-h-[80vh]">
-        <VuePictureCropper
-          :box-style="{
-            width: 'auto',
-            height: 'auto',
-            backgroundColor: '#f8f8f8',
-            margin: 'auto',
-          }"
-          :img="pic"
-          :options="{
-            viewMode: 1,
-            dragMode: 'crop',
-            aspectRatio: 1 / 1,
-          }"
-          class="max-h-[70vh] w-full"
+
+      <!-- Cropper Modal -->
+      <DefaultModal id="avCrop" :title="$t('fws_crop_av_title')">
+        <div class="flex flex-col gap-4">
+          <div class="max-h-[70vh] overflow-hidden rounded-lg border border-fv-neutral-200 dark:border-fv-neutral-700">
+            <VuePictureCropper
+              :box-style="{
+                width: 'auto',
+                height: 'auto',
+                backgroundColor: '#f8f8f8',
+                margin: 'auto',
+              }"
+              :img="pic"
+              :options="{
+                viewMode: 1,
+                dragMode: 'crop',
+                aspectRatio: 1 / 1,
+              }"
+              class="max-h-[70vh] w-full"
+            />
+          </div>
+          <button class="btn defaults primary self-end" @click="getCropResult">
+            {{ $t("fws_crop_av_cta") }}
+          </button>
+        </div>
+      </DefaultModal>
+
+      <!-- Profile Information -->
+      <div class="grid md:grid-cols-2 gap-x-4 sm:gap-x-6 gap-y-3 sm:gap-y-4 mb-4 sm:mb-6">
+        <DefaultInput
+          id="genderFWS"
+          v-model="state.userData.Gender"
+          type="select"
+          :options="[
+            ['female', $t('fws_persona_phys_appearance_opt_female')],
+            ['male', $t('fws_persona_phys_appearance_opt_male')],
+            ['non-binary', $t('fws_persona_phys_appearance_opt_non_binary')],
+          ]"
+          :label="$t('fws_gender_label')"
+          :error-vuelidate="v$.userData.Gender.$errors"
+        />
+
+        <DefaultInput
+          id="birthdateFWS"
+          v-model="state.userData.Birthdate"
+          type="datepicker"
+          :disable-dates-under18="true"
+          :label="$t('fws_birthdate_label')"
+          :error-vuelidate="v$.userData.Birthdate.$errors"
+        />
+      </div>
+
+      <!-- Bio -->
+      <div class="mb-4 sm:mb-6">
+        <DefaultInput
+          id="bioFWS"
+          v-model="state.userData.Bio"
+          type="textarea"
+          :label="$t('fws_bio_label')"
+          :error-vuelidate="v$.userData.Bio.$errors"
+          :dp-options="{ counterMax: 1000 }"
         />
       </div>
-    </DefaultModal>
-    <DefaultInput
-      id="genderFWS"
-      v-model="state.userData.Gender"
-      class="mb-4"
-      type="select"
-      :options="[
-        ['female', $t('fws_persona_phys_appearance_opt_female')],
-        ['male', $t('fws_persona_phys_appearance_opt_male')],
-        ['non-binary', $t('fws_persona_phys_appearance_opt_non_binary')],
-      ]"
-      :label="$t('fws_gender_label')"
-      :error-vuelidate="v$.userData.Gender.$errors"
-    />
-    <DefaultInput
-      id="birthdateFWS"
-      v-model="state.userData.Birthdate"
-      class="mb-4"
-      type="datepicker"
-      :disable-dates-under18="true"
-      :label="$t('fws_birthdate_label')"
-      :error-vuelidate="v$.userData.Birthdate.$errors"
-    />
-    <DefaultInput
-      id="bioFWS"
-      v-model="state.userData.Bio"
-      class="mb-4"
-      type="textarea"
-      :label="$t('fws_bio_label')"
-      :error-vuelidate="v$.userData.Bio.$errors"
-    />
-    <template v-if="!hidePublic">
-      <DefaultInput
-        v-if="!hideGender"
-        id="publicGenderFWS"
-        v-model:checkbox-value="state.userData.PublicGender"
-        type="toggle"
-        :label="$t('fws_public_gender')"
-        :error-vuelidate="v$.userData.PublicGender.$errors"
-      />
-      <DefaultInput
-        id="publicBioFWS"
-        v-model:checkbox-value="state.userData.PublicBio"
-        type="toggle"
-        :label="$t('fws_public_bio')"
-        :error-vuelidate="v$.userData.PublicBio.$errors"
-      />
-      <DefaultInput
-        v-if="!hideBirthdate"
-        id="publicBirthdateFWS"
-        v-model:checkbox-value="state.userData.PublicBirthdate"
-        type="toggle"
-        :label="$t('fws_public_birthdate')"
-        :error-vuelidate="v$.userData.PublicBirthdate.$errors"
-      />
-    </template>
-    <div class="flex">
-      <button type="submit" class="btn defaults primary">
-        {{ $t("fws_save_user_cta") }}
-      </button>
+
+      <!-- Privacy Settings -->
+      <template v-if="!hidePublic">
+        <div class="pt-3 sm:pt-4 border-t border-fv-neutral-200 dark:border-fv-neutral-700 mb-3 sm:mb-4">
+          <h4 class="font-medium text-fv-neutral-800 dark:text-white mb-3">
+            {{ $t('fws_privacy_settings') }}
+          </h4>
+          <div class="grid gap-2">
+            <DefaultInput
+              v-if="!hideGender"
+              id="publicGenderFWS"
+              v-model:checkbox-value="state.userData.PublicGender"
+              type="toggle"
+              :label="$t('fws_public_gender')"
+              :error-vuelidate="v$.userData.PublicGender.$errors"
+            />
+            <DefaultInput
+              id="publicBioFWS"
+              v-model:checkbox-value="state.userData.PublicBio"
+              type="toggle"
+              :label="$t('fws_public_bio')"
+              :error-vuelidate="v$.userData.PublicBio.$errors"
+            />
+            <DefaultInput
+              v-if="!hideBirthdate"
+              id="publicBirthdateFWS"
+              v-model:checkbox-value="state.userData.PublicBirthdate"
+              type="toggle"
+              :label="$t('fws_public_birthdate')"
+              :error-vuelidate="v$.userData.PublicBirthdate.$errors"
+            />
+          </div>
+        </div>
+      </template>
+
+      <!-- Save Button -->
+      <div class="flex justify-end pt-2">
+        <button type="submit" class="btn defaults primary flex items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+          </svg>
+          {{ $t("fws_save_user_cta") }}
+        </button>
+      </div>
     </div>
   </form>
 </template>

package/components/fws/UserProfileStrict.vue

@@ -110,57 +110,68 @@ async function patchUser() {
 </script>
 
 <template>
-  <form @submit.prevent="patchUser">
-    <DefaultInput
-      id="usernameFWS"
-      v-model="state.userData.Username"
-      class="mb-4"
-      type="text"
-      :label="$t('fws_username_label')"
-      :help="$t('fws_username_help')"
-      :error-vuelidate="v$.userData.Username.$errors"
-      :disabled="userData?.UserProfile?.HasUsernameAndSlug ? true : false"
-    />
-    <DefaultInput
-      id="birthdateFWS"
-      v-model="state.userData.Birthdate"
-      class="mb-4"
-      :disable-dates-under18="true"
-      type="datepicker"
-      :label="$t('fws_birthdate_label')"
-      :error-vuelidate="v$.userData.Birthdate.$errors"
-    />
+  <form class="space-y-4" @submit.prevent="patchUser">
+    <div class="bg-white dark:bg-fv-neutral-900 p-4 sm:p-6 rounded-lg shadow-sm border border-fv-neutral-200 dark:border-fv-neutral-700">
+      <h3 class="text-lg font-semibold text-fv-neutral-900 dark:text-white mb-4 pb-2 border-b border-fv-neutral-200 dark:border-fv-neutral-700">
+        {{ $t('fws_user_profile_title') || $t('fws_profile_settings') }}
+      </h3>
 
-    <DefaultInput
-      id="genderFWS"
-      v-model="state.userData.Gender"
-      class="mb-4"
-      type="select"
-      :options="[
-        ['female', $t('fws_persona_phys_appearance_opt_female')],
-        ['male', $t('fws_persona_phys_appearance_opt_male')],
-        ['non-binary', $t('fws_persona_phys_appearance_opt_non_binary')],
-      ]"
-      :label="$t('fws_gender_label')"
-      :error-vuelidate="v$.userData.Gender.$errors"
-    />
+      <div class="grid gap-4">
+        <DefaultInput
+          id="usernameFWS"
+          v-model="state.userData.Username"
+          type="text"
+          :label="$t('fws_username_label')"
+          :help="$t('fws_username_help')"
+          :error-vuelidate="v$.userData.Username.$errors"
+          :disabled="userData?.UserProfile?.HasUsernameAndSlug ? true : false"
+        />
 
-    <DefaultInput
-      id="acceptedTermsFWS"
-      v-model:checkbox-value="state.userData.AcceptedTerms"
-      type="toggle"
-      :label="$t('fws_accepted_terms_label')"
-      :help="$t('fws_accepted_terms_help')"
-      :error-vuelidate="v$.userData.AcceptedTerms.$errors"
-    />
-    <p v-if="props.termsText" class="terms-box">
-      {{ props.termsText }}
-    </p>
+        <DefaultInput
+          id="birthdateFWS"
+          v-model="state.userData.Birthdate"
+          :disable-dates-under18="true"
+          type="datepicker"
+          :label="$t('fws_birthdate_label')"
+          :error-vuelidate="v$.userData.Birthdate.$errors"
+        />
 
-    <div class="flex">
-      <button type="submit" class="btn defaults primary">
-        {{ $t("fws_save_user_cta") }}
-      </button>
+        <DefaultInput
+          id="genderFWS"
+          v-model="state.userData.Gender"
+          type="select"
+          :options="[
+            ['female', $t('fws_persona_phys_appearance_opt_female')],
+            ['male', $t('fws_persona_phys_appearance_opt_male')],
+            ['non-binary', $t('fws_persona_phys_appearance_opt_non_binary')],
+          ]"
+          :label="$t('fws_gender_label')"
+          :error-vuelidate="v$.userData.Gender.$errors"
+        />
+
+        <div class="mt-2 pt-3 border-t border-fv-neutral-200 dark:border-fv-neutral-700">
+          <DefaultInput
+            id="acceptedTermsFWS"
+            v-model:checkbox-value="state.userData.AcceptedTerms"
+            type="toggle"
+            :label="$t('fws_accepted_terms_label')"
+            :help="$t('fws_accepted_terms_help')"
+            :error-vuelidate="v$.userData.AcceptedTerms.$errors"
+          />
+          <p v-if="props.termsText" class="mt-2 p-2 sm:p-3 text-sm bg-fv-neutral-50 dark:bg-fv-neutral-700 rounded border border-fv-neutral-200 dark:border-fv-neutral-600 text-fv-neutral-700 dark:text-fv-neutral-300">
+            {{ props.termsText }}
+          </p>
+        </div>
+      </div>
+
+      <div class="mt-6 flex justify-end">
+        <button type="submit" class="btn defaults primary flex items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+          </svg>
+          {{ $t("fws_save_user_cta") }}
+        </button>
+      </div>
     </div>
   </form>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.3.36",
+  "version": "2.3.38",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",