feat(login): custimizable login buttons

gitsindonesia · Jun 21, 2022 · 735ac7e · 735ac7e
1 parent 81120d8
commit 735ac7e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/packages/pages/src/Login.stories.ts b/packages/pages/src/Login.stories.ts
@@ -16,11 +16,18 @@ const Template: Story<{}> = (args) => ({
   },
   template: `
     <Auth>
-      <Login/>
+      <Login v-bind="args"/>
     </Auth>
   `,
 });
 
 export const Default = Template.bind({});
 Default.args = {};
 Default.storyName = 'Login';
+
+export const Custom = Template.bind({});
+Custom.args = {
+  btnProps: {
+    color: 'secondary',
+  },
+};
diff --git a/packages/pages/src/Login.vue b/packages/pages/src/Login.vue
@@ -63,6 +63,14 @@ const props = defineProps({
     type: String,
     default: 'off',
   },
+  btnProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  btnRegisterProps: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 
 const {message} = toRefs(props);
@@ -160,6 +168,7 @@ const onSubmit = handleSubmit((values) => {
           uppercase
           :disabled="loading || disabled"
           :loading="loading"
+          v-bind="btnProps"
         >
           {{ loginText }}
         </VBtn>
@@ -168,7 +177,14 @@ const onSubmit = handleSubmit((values) => {
         <slot name="register">
           <div class="mt-4">
             Already have an account?
-            <v-btn text color="primary" :to="register">Register</v-btn>
+            <v-btn
+              text
+              color="primary"
+              :to="register"
+              v-bind="btnRegisterProps"
+            >
+              Register
+            </v-btn>
           </div>
         </slot>
       </template>