refactor: follow bem methodology

Author: skranee

src/components/LoginForm.vue

@@ -165,15 +165,17 @@ export default defineComponent({
 @use '@/assets/styles/settings/_colors.scss';
 @use 'vuetify/settings';
 
-.v-text-field {
-  &:deep(.v-field__append-inner) {
-    padding-left: 0;
-    margin-left: -28px; // compensate the append-inner icon
-  }
+.login-form {
+  &__textfield {
+    &:deep(.v-field__append-inner) {
+      padding-left: 0;
+      margin-left: -28px; // compensate the append-inner icon
+    }
 
-  &:deep(.v-field__input) {
-    width: 100%;
-    padding-right: 0;
+    &:deep(.v-field__input) {
+      width: 100%;
+      padding-right: 0;
+    }
   }
 }
 

src/components/LoginPasswordForm.vue

@@ -1,11 +1,12 @@
 <template>
-  <v-form ref="form" class="login-form" @submit.prevent="submit">
+  <v-form ref="form" :class="classes.root" @submit.prevent="submit">
     <v-row no-gutters>
       <v-text-field
         ref="passwordInput"
         v-model="password"
         autocomplete="new-password"
         autofocus
+        :class="classes.textField"
         :label="$t('login_via_password.user_password_title')"
         :name="Date.now()"
         :type="showPassword ? 'text' : 'password'"
@@ -58,6 +59,12 @@ import { isAllNodesDisabledError, isAllNodesOfflineError } from '@/lib/nodes/uti
 import { mdiEye, mdiEyeOff } from '@mdi/js'
 import { useSaveCursor } from '@/hooks/useSaveCursor'
 
+const className = 'login-form'
+const classes = {
+  root: className,
+  textField: `${className}__textfield`
+}
+
 export default defineComponent({
   props: {
     modelValue: {
@@ -131,6 +138,7 @@ export default defineComponent({
       passwordInput,
       showSpinner,
       password,
+      classes,
       showPassword,
       mdiEye,
       mdiEyeOff,
@@ -143,19 +151,21 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.v-text-field {
-  &:deep(.v-field__append-inner) {
-    padding-left: 0;
-    margin-left: -28px; // compensate the append-inner icon
-  }
+.login-form {
+  &__textfield {
+    &:deep(.v-field__append-inner) {
+      padding-left: 0;
+      margin-left: -28px; // compensate the append-inner icon
+    }
 
-  &:deep(.v-field__input) {
-    width: 100%;
-    padding-right: 0;
-  }
+    &:deep(.v-field__input) {
+      width: 100%;
+      padding-right: 0;
+    }
 
-  :deep(input) {
-    font-size: 16px !important;
+    :deep(input) {
+      font-size: 16px !important;
+    }
   }
 }
 </style>