update for Vue style of login, create-account, password cards

Author: GoodDayForSurf

packages/devextreme-cli/src/templates/vue-v3/application/src/views/create-account-form.vue

@@ -46,13 +46,6 @@
         >
         </dx-button-options>
       </dx-button-item>
-      <dx-item>
-        <template #default>
-          <div class="login-link">
-            Have an account? <router-link to="/login-form">Sign In</router-link>
-          </div>
-        </template>
-      </dx-item>
       <template #createAccount>
         <div>
           <span class="dx-button-text">
@@ -62,6 +55,9 @@
         </div>
       </template>
     </dx-form>
+    <div class="login-link">
+      Have an account? <router-link to="/login-form">Sign In</router-link>
+    </div>
   </form>
 </template>
 
@@ -104,28 +100,28 @@ export default {
     });
 
     const onSubmit = async () => {
-    const { email, password } = formData;
-    loading.value = true;
+      const { email, password } = formData;
+      loading.value = true;
 
-    const result = await auth.createAccount(email, password);
-    loading.value = false;
+      const result = await auth.createAccount(email, password);
+      loading.value = false;
 
-    if (result.isOk) {
-      router.push("/login-form");
-    } else {
-      notify(result.message, 'error', 2000);
-    }
-  };
+      if (result.isOk) {
+        router.push("/login-form");
+      } else {
+        notify(result.message, 'error', 2000);
+      }
+    };
 
     function confirmPassword(e) {
       return e.value === formData.password;
     }
 
     return {
-        formData,
-        loading,
-        onSubmit,
-        confirmPassword
+      formData,
+      loading,
+      onSubmit,
+      confirmPassword
     }
   }
 }
@@ -134,9 +130,8 @@ export default {
 <style lang="scss">
 .create-account-form {
   .policy-info {
-    margin: 10px 0;
     color: var(--base-text-color-alpha-7);
-    font-size: 14px;
+    font-size: 12px;
     font-style: normal;
 
     a {
@@ -146,8 +141,10 @@ export default {
 
   .login-link {
     color: var(--base-accent);
-    font-size: 16px;
+    font-size: 12px;
     text-align: center;
+    padding: 6px 0 32px 0;
+    border-bottom: 1px solid var(--border-color);
   }
 }
 </style>

packages/devextreme-cli/src/templates/vue-v3/application/src/views/login-form.vue

@@ -34,20 +34,6 @@
         >
         </dx-button-options>
       </dx-button-item>
-      <dx-item>
-        <template #default>
-          <div class="link">
-            <router-link to="/reset-password">Forgot password?</router-link>
-          </div>
-        </template>
-      </dx-item>
-      <dx-button-item>
-        <dx-button-options
-          text="Create an account"
-          width="100%"
-          :on-click="onCreateAccountClick"
-        />
-      </dx-button-item>
       <template #signInTemplate>
         <div>
           <span class="dx-button-text">
@@ -57,6 +43,14 @@
         </div>
       </template>
     </dx-form>
+    <div class="link">
+      <router-link to="/reset-password">Forgot password?</router-link>
+    </div>
+    <dx-button
+      text="Create an account"
+      width="100%"
+      @click="onCreateAccountClick"
+    />
   </form>
 </template>
 
@@ -70,6 +64,7 @@ import DxForm, {
   DxButtonItem,
   DxButtonOptions
 } from "devextreme-vue/form";
+import { DxButton } from 'devextreme-vue';
 import notify from 'devextreme/ui/notify';
 
 import auth from "../auth";
@@ -119,26 +114,23 @@ export default {
     DxItem,
     DxLabel,
     DxButtonItem,
-    DxButtonOptions
+    DxButtonOptions,
+    DxButton
   }
 };
 </script>
 
 <style lang="scss">
 .login-form {
+  :deep(.form-text) {
+    color: var(--base-text-color-alpha-7);
+  }
+
   .link {
     text-align: center;
-    font-size: 16px;
+    font-size: 12px;
     font-style: normal;
-
-    a {
-      text-decoration: none;
-    }
-  }
-
-  .form-text {
-    margin: 10px 0;
-    color: var(--base-text-color-alpha-7);
+    margin: 6px 0 50px;
   }
 }
 </style>

packages/devextreme-cli/src/templates/vue-v3/application/src/views/reset-password-form.vue

@@ -20,13 +20,6 @@
         >
         </dx-button-options>
       </dx-button-item>
-      <dx-item>
-        <template #default>
-          <div class="login-link">
-            Return to <router-link to="/login-form">Sign In</router-link>
-          </div>
-        </template>
-      </dx-item>
       <template #resetTemplate>
         <div>
           <span class="dx-button-text">
@@ -36,6 +29,9 @@
         </div>
       </template>
     </dx-form>
+    <div class="login-link">
+      Return to <router-link to="/login-form">Sign In</router-link>
+    </div>
   </form>
 </template>
 
@@ -103,13 +99,14 @@ export default {
 <style lang="scss">
 .reset-password-form {
   .submit-button {
-    margin-top: 10px;
+    margin-top: 18px;
   }
 
   .login-link {
     color: var(--base-accent);
-    font-size: 16px;
+    font-size: 12px;
     text-align: center;
+    margin-top: 6px;
   }
 }
 </style>