💄 Optimized UI

pkg/views/src/views/auth/connect.vue

@@ -8,7 +8,7 @@
           <p>One Solarpass, entire internet.</p>
         </div>
 
-        <v-window :model-value="panel" class="pa-2 mx-[-0.5rem]">
+        <v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
           <v-window-item value="confirm">
             <div class="flex flex-col gap-2">
               <v-expand-transition>
@@ -141,12 +141,12 @@ async function approve() {
   loading.value = true
   const res = await request(
     "/api/auth/o/connect?" +
-      new URLSearchParams({
+    new URLSearchParams({
-        client_id: route.query["client_id"] as string,
+      client_id: route.query["client_id"] as string,
-        redirect_uri: encodeURIComponent(route.query["redirect_uri"] as string),
+      redirect_uri: encodeURIComponent(route.query["redirect_uri"] as string),
-        response_type: "code",
+      response_type: "code",
-        scope: route.query["scope"] as string,
+      scope: route.query["scope"] as string,
-      }),
+    }),
     {
       method: "POST",
       headers: { Authorization: `Bearer ${getAtk()}` },

pkg/views/src/views/auth/sign-in.vue

@@ -10,11 +10,8 @@
           <div v-if="challenge" class="flex items-center gap-4">
             <v-tooltip>
               <template v-slot:activator="{ props }">
-                <v-progress-circular
+                <v-progress-circular v-bind="props" size="large"
-                  v-bind="props"
+                  :model-value="(challenge?.progress / challenge?.requirements) * 100" />
-                  size="large"
-                  :model-value="(challenge?.progress / challenge?.requirements) * 100"
-                />
               </template>
               <p><b>Risk: </b> {{ challenge?.risk_level }}</p>
               <p><b>Progress: </b> {{ challenge?.progress }}/{{ challenge?.requirements }}</p>
@@ -24,16 +21,10 @@
           <p v-else>Sign in via your Solar ID to access the entire Solar Network.</p>
         </div>
 
-        <v-window :model-value="panel" class="pa-2 mx-[-0.5rem]">
+        <v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
           <v-window-item v-for="k in Object.keys(panels)" :value="k">
-            <component
+            <component :is="panels[k]" @swap="(val: string) => (panel = val)" v-model:loading="loading"
-              :is="panels[k]"
+              v-model:factors="factors" v-model:currentFactor="currentFactor" v-model:challenge="challenge" />
-              @swap="(val: string) => (panel = val)"
-              v-model:loading="loading"
-              v-model:factors="factors"
-              v-model:currentFactor="currentFactor"
-              v-model:challenge="challenge"
-            />
           </v-window-item>
         </v-window>
       </v-card-text>

pkg/views/src/views/confirm.vue

@@ -8,7 +8,7 @@
           <p>Confirm your account to keep your account longer than 48 hours.</p>
         </div>
 
-        <v-window :model-value="panel" class="pa-2 mx-[-0.5rem]">
+        <v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
           <v-window-item value="confirm">
             <div>
               <v-expand-transition>

pkg/views/src/views/personalize.vue

@@ -5,60 +5,28 @@
         <v-form class="mt-1" @submit.prevent="submit">
           <v-row dense>
             <v-col :xs="12" :md="6">
-              <v-text-field
+              <v-text-field readonly hide-details label="Username" density="comfortable" variant="outlined"
-                readonly
+                v-model="data.name" />
-                hide-details
-                label="Username"
-                density="comfortable"
-                variant="outlined"
-                v-model="data.name"
-              />
             </v-col>
             <v-col :xs="12" :md="6">
-              <v-text-field
+              <v-text-field hide-details label="Nickname" density="comfortable" variant="outlined"
-                hide-details
+                v-model="data.nick" />
-                label="Nickname"
-                density="comfortable"
-                variant="outlined"
-                v-model="data.nick"
-              />
             </v-col>
             <v-col :cols="12">
-              <v-textarea
+              <v-textarea hide-details label="Description" density="comfortable" variant="outlined"
-                hide-details
+                v-model="data.description" />
-                label="Description"
-                density="comfortable"
-                variant="outlined"
-                v-model="data.description"
-              />
             </v-col>
             <v-col :xs="12" :md="6" :lg="4">
-              <v-text-field
+              <v-text-field hide-details label="First Name" density="comfortable" variant="outlined"
-                hide-details
+                v-model="data.first_name" />
-                label="First Name"
-                density="comfortable"
-                variant="outlined"
-                v-model="data.first_name"
-              />
             </v-col>
             <v-col :xs="12" :md="6" :lg="4">
-              <v-text-field
+              <v-text-field hide-details label="Last Name" density="comfortable" variant="outlined"
-                hide-details
+                v-model="data.last_name" />
-                label="Last Name"
-                density="comfortable"
-                variant="outlined"
-                v-model="data.last_name"
-              />
             </v-col>
             <v-col :xs="12" :lg="4">
-              <v-text-field
+              <v-text-field hide-details label="Birthday" density="comfortable" variant="outlined" type="datetime-local"
-                hide-details
+                v-model="data.birthday" />
-                label="Birthday"
-                density="comfortable"
-                variant="outlined"
-                type="datetime-local"
-                v-model="data.birthday"
-              />
             </v-col>
           </v-row>
 
@@ -71,42 +39,17 @@
 
     <v-card>
       <v-card-text class="flex items-center gap-3">
-        <v-avatar
+        <v-avatar color="grey-lighten-2" icon="mdi-account-circle" class="rounded-card" size="large"
-          color="grey-lighten-2"
+          :image="'/api/avatar/' + id.userinfo.data.avatar" />
-          icon="mdi-account-circle"
+        <v-file-input clearable hide-details label="Upload another avatar" variant="outlined" density="comfortable"
-          class="rounded-card"
+          accept="image/*" prepend-icon="" append-icon="mdi-upload" v-model="avatar" @click:append="applyAvatar" />
-          size="large"
-          :image="'/api/avatar/' + id.userinfo.data.avatar"
-        />
-        <v-file-input
-          clearable
-          hide-details
-          label="Upload another avatar"
-          variant="outlined"
-          density="comfortable"
-          accept="image/*"
-          prepend-icon=""
-          append-icon="mdi-upload"
-          v-model="avatar"
-          @click:append="applyAvatar"
-        />
       </v-card-text>
 
       <v-img cover class="bg-grey-lighten-2" :height="320" :src="'/api/avatar/' + id.userinfo.data.banner" />
 
       <v-card-text>
-        <v-file-input
+        <v-file-input clearable hide-details label="Update your banner" variant="solo-filled" density="comfortable"
-          clearable
+          accept="image/*" prepend-icon="" append-icon="mdi-upload" v-model="banner" @click:append="applyBanner" />
-          hide-details
-          label="Update your banner"
-          variant="outlined"
-          density="compact"
-          accept="image/*"
-          prepend-icon=""
-          append-icon="mdi-upload"
-          v-model="banner"
-          @click:append="applyBanner"
-        />
       </v-card-text>
     </v-card>