Feature/input password #55

thomasowow · 2022-04-19T12:26:06Z

Implements InputPassword component.

TimDirks · 2022-04-19T13:02:42Z

src/components/InputPassword/InputPassword.vue

+                <svg
+                    v-if="type === 'password'"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="input-password-icon"
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                >
+                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
+                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
+                </svg>
+
+                <svg
+                    v-else
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="input-password-icon"
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                >
+                    <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" />
+                    <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" />
+                    <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z" />
+                </svg>


Suggested change

<svg

v-if="type === 'password'"

xmlns="http://www.w3.org/2000/svg"

class="input-password-icon"

fill="currentColor"

height="1em"

viewBox="0 0 16 16"

>

<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />

<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />

</svg>

<svg

v-else

xmlns="http://www.w3.org/2000/svg"

class="input-password-icon"

fill="currentColor"

height="1em"

viewBox="0 0 16 16"

>

<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" />

<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" />

<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z" />

</svg>

<svg

xmlns="http://www.w3.org/2000/svg"

class="input-password-icon"

fill="currentColor"

height="1em"

viewBox="0 0 16 16"

>

<g v-if="type === 'password'">

<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />

<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />

</g>

<g v-else>

<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" />

<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" />

<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z" />

</g>

</svg>

albertpratomo · 2022-04-20T09:33:49Z

src/components/ButtonState/ButtonState.test.ts

+    it('is true when disabled and not loading', () => {
+        const wrapper = shallowMount(ButtonState, {props: {disabled: true, loading: false}});
+
+        expect(wrapper.vm.disabled).toBe(true);
+    });


Feels like this is already tested by the previous test above.
I think 'is false when disabled and loading' is a better test.

Wait, maybe it should also be disabled when loading haha

albertpratomo · 2022-04-20T09:36:52Z

src/components/InputPassword/InputPassword.vue

+                <svg
+                    v-if="type === 'password'"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="input-password-icon"
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                >
+                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
+                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
+                </svg>
+
+                <svg
+                    v-else
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="input-password-icon"
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                >
+                    <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" />
+                    <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" />
+                    <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z" />
+                </svg>


Should we separate this into other components? Feels more organized and more reusable for other things

barisbora · 2022-04-22T07:51:19Z

src/components/InputPassword/InputPassword.vue

+
+export interface Rule {
+    feedback: string;
+    rule: RegExp;


I think good to have pass custom validation function for edge cases. For example can't be same as old password or checking same as password_confirm field..

Also I think should be async thus we can do some api call etc for validation.

export interface Rule { feedback: string; rule: RegExp | (value: string) => Promise<boolean>; valid?: boolean; }

PayamOWOW · 2022-05-02T07:06:06Z

src/components/ButtonState/ButtonState.vue

@@ -69,9 +70,10 @@ const props = defineProps({
        default: false,
    },
    successVariant: variantProp('success'),
+    ...disabledProps


Suggested change

...disabledProps

...disabledProps,

thomasowow · 2023-01-24T13:51:10Z

Re-open if we still want this.

thomasowow added 9 commits December 3, 2021 16:21

WIP input password

e927d14

Merge branch 'master' into feature/input-password

18b1117

feat(InputPassword): password input with toggle preview

589044d

test(InputPassword): tests for input password

334f8bf

Merge branch 'master' into feature/input-password

26c1682

Added rules to input password

80cdc51

Remove list unstyled

d303a23

Move button props to external composable to be able to build

c1645de

feat(InputPassword): adds component

4dd2afa

thomasowow requested review from barisbora, albertpratomo, PayamOWOW and TimDirks April 19, 2022 12:26

TimDirks approved these changes Apr 19, 2022

View reviewed changes

thomasowow added 3 commits April 19, 2022 15:10

Fix feedback property in story

9b48c03

Emit isValid

362cec3

feat(ButtonState): disabled

a36a2c5

albertpratomo approved these changes Apr 20, 2022

View reviewed changes

barisbora approved these changes Apr 22, 2022

View reviewed changes

PayamOWOW approved these changes May 2, 2022

View reviewed changes

thomasowow closed this Jan 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/input password #55

Feature/input password #55

thomasowow commented Apr 19, 2022

TimDirks Apr 19, 2022

albertpratomo Apr 20, 2022

albertpratomo Apr 20, 2022

albertpratomo Apr 20, 2022

barisbora Apr 22, 2022 •

edited

Loading

PayamOWOW May 2, 2022

thomasowow commented Jan 24, 2023

Feature/input password #55

Feature/input password #55

Conversation

thomasowow commented Apr 19, 2022

TimDirks Apr 19, 2022

Choose a reason for hiding this comment

albertpratomo Apr 20, 2022

Choose a reason for hiding this comment

albertpratomo Apr 20, 2022

Choose a reason for hiding this comment

albertpratomo Apr 20, 2022

Choose a reason for hiding this comment

barisbora Apr 22, 2022 • edited Loading

Choose a reason for hiding this comment

PayamOWOW May 2, 2022

Choose a reason for hiding this comment

thomasowow commented Jan 24, 2023

barisbora Apr 22, 2022 •

edited

Loading