fix: styling improvements, removed thiccness

.prettierrc.json

@@ -3,5 +3,18 @@
   "singleQuote": true,
   "jsxSingleQuote": false,
   "arrowParens": "avoid",
-  "tabWidth": 2
-}
+  "tabWidth": 2,
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "svelteBracketNewLine": false,
+        "svelteAllowShorthand": true,
+        "plugins": [
+          "prettier-plugin-svelte"
+        ]
+      }
+    }
+  ]
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fancy-password-input",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "A kinda cool fancy password input",
   "license": "MIT",
   "svelte": "index.js",
@@ -19,6 +19,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.10",
     "prettier": "^2.7.1",
+    "prettier-plugin-svelte": "^2.7.1",
     "rollup": "^2.44.0",
     "rollup-plugin-copy2": "^0.3.1",
     "rollup-plugin-json": "^4.0.0",

schema.json

@@ -12,6 +12,11 @@
         "key": "field",
         "label": "Field"
       },
+      {
+        "type": "text",
+        "key": "label",
+        "label": "Label"
+      },
       {
         "type": "number",
         "key": "greenThreshold",
@@ -22,11 +27,6 @@
         "key": "max",
         "label": "Max"
       },
-      {
-        "type": "number",
-        "key": "thiccness",
-        "label": "Bar thiccness"
-      },
       {
         "type": "text",
         "key": "poorMessage",
@@ -39,4 +39,4 @@
       }
     ]
   }
-}
+}

src/Component.svelte

@@ -1,51 +1,67 @@
 <script>
-    import {getContext, onDestroy} from "svelte"
-    import FancyPassword from "./components/FancyPassword.svelte";
+  import { getContext, onDestroy } from 'svelte';
+  import FancyPassword from './components/FancyPassword.svelte';
 
-    let secret;
+  export let field;
+  export let label;
+  export let greenThreshold = 15;
+  export let max = 30;
+  export let poorMessage = '💩';
+  export let goodMessage = '✅';
 
-    export let field;
+  const { styleable } = getContext('sdk');
+  const component = getContext('component');
+  const formContext = getContext('form');
+  const formStepContext = getContext('form-step');
 
-    export let thiccness;
-    export let greenThreshold;
-    export let max;
-    export let poorMessage = '💩';
-    export let goodMessage = '✅';
+  let secret;
 
-    const {styleable} = getContext("sdk")
-    const component = getContext("component")
-    const formContext = getContext("form");
-    const formStepContext = getContext("form-step");
+  const formApi = formContext?.formApi;
+  $: formStep = $formStepContext ?? 1;
+  $: formField = formApi?.registerField(
+    field,
+    'text',
+    '',
+    false,
+    null,
+    formStep
+  );
 
-    const formApi = formContext?.formApi;
-    $: formStep = formStepContext ? $formStepContext ?? 1 : 1;
-    $: formField = formApi?.registerField(field, "text", "", false, null, formStep);
+  let fieldApi;
 
-    let fieldApi;
-    let fieldState;
+  $: unsubscribe = formField?.subscribe(value => {
+    fieldApi = value?.fieldApi;
+  });
 
-    $: unsubscribe = formField?.subscribe((value) => {
-        fieldState = value?.fieldState;
-        fieldApi = value?.fieldApi;
-    });
+  $: fieldApi?.setValue(secret);
 
-    onDestroy(() => {
-        fieldApi?.deregister();
-        unsubscribe?.();
-    });
-
-    $: {
-        fieldApi?.setValue(secret);
-    }
+  onDestroy(() => {
+    fieldApi?.deregister();
+    unsubscribe?.();
+  });
 </script>
 
 <div use:styleable={$component.styles}>
   <FancyPassword
-      bind:secret={secret}
-      {thiccness}
-      {greenThreshold}
-      {max}
-      {poorMessage}
-      {goodMessage}
-  />
+    bind:secret
+    {label}
+    {greenThreshold}
+    {max}
+    {poorMessage}
+    {goodMessage} />
 </div>
+
+<style>
+  :root {
+    --grey-3: #eeeeee;
+    --grey-4: #e0e0e0;
+    --grey-7: #757575;
+
+    --red: #e26d69;
+
+    --green: #84c991;
+
+    --border-grey: 1px var(--grey-4) solid;
+    --border-blue: 2px var(--blue) solid;
+  }
+</style>

src/components/ComplexityBar.svelte

@@ -1,27 +1,30 @@
 <script>
-    import clamp from "./utils/clamp";
+  import clamp from './utils/clamp';
 
-    export let secret = '';
-    export let greenThreshold = 15;
-    export let max = 30;
-    export let thiccness = 5;
-    let color;
-    let width;
-    let styles;
+  export let secret = '';
+  export let greenThreshold = 15;
+  export let max = 30;
+  export let thiccness = 5;
+  let color;
+  let width;
 
-    $: {
-        color = 'red';
-        if (secret.length > greenThreshold) {
-            color = 'green';
-        }
-        width = `${clamp(secret.length, 0, max) / max * 100}%`;
+  $: {
+    color = 'var(--red)';
+    if (secret.length > greenThreshold) {
+      color = 'var(--green)';
     }
+    width = `${(clamp(secret.length, 0, max) / max) * 100}%`;
+  }
 </script>
 
-<div class="container" style="background-color: {color}; height: {thiccness}px; width: {width};"></div>
+<div
+  class="container"
+  style="background-color: {color}; height: {thiccness}px; width: {width};" />
 
 <style>
-    .container {
-        transition: 100ms;
-    }
+  .container {
+    transition: 100ms;
+    border-bottom-left-radius: 0.5em;
+    border-bottom-right-radius: 0.5em;
+  }
 </style>

src/components/FancyPassword.svelte

@@ -1,50 +1,81 @@
 <script>
-    import ComplexityBar from "./ComplexityBar.svelte";
+  import ComplexityBar from './ComplexityBar.svelte';
 
-    export let secret = '';
+  export let secret = '';
+  export let label = '';
+  export let greenThreshold = 15;
+  export let max = 30;
+  export let poorMessage = '💩';
+  export let goodMessage = '✅';
 
-    export let greenThreshold = 15;
-    export let max = 30;
-    export let thiccness = 5;
-    export let poorMessage = '💩';
-    export let goodMessage = '✅';
+  $: notEmpty = secret.length > 0;
 </script>
 
 <div class="container">
-  <input type="password" class="password-input" bind:value={secret}>
-  <ComplexityBar {secret} {greenThreshold} {max} {thiccness}/>
+  <div class="input-container">
+    {#if label}
+      <div class="label">{label}</div>
+    {/if}
+    <input
+      type="password"
+      class="password-input {notEmpty && 'password-input-not-empty'}"
+      bind:value={secret} />
+  </div>
+
+  <ComplexityBar {secret} {greenThreshold} {max} thiccness={5} />
+
   <div class="error-message">
     {#if secret === ''}
+      <div />
     {:else if secret.length > greenThreshold}
-      <span style="color: green;">{goodMessage}</span>
+      <span style="color: var(--green);">{goodMessage}</span>
     {:else}
-      <span style="color: red;">{poorMessage}</span>
+      <span style="color: var(--red);">{poorMessage}</span>
     {/if}
   </div>
 </div>
 
 <style>
-    .container {
-        display: flex;
-        flex-direction: column;
-        padding: 0.5rem;
-        border-radius: 0.5rem;
-    }
-
-    .password-input {
-        padding: 0.5rem;
-        font-size: x-large;
-        border-style: none;
-        outline: none;
-        transition: 100ms;
-    }
-
-
-    .password-input:focus {
-        box-shadow: 0.2em 0.2em 0 rgba(0, 0, 0, 0.1);
-    }
-
-    .error-message {
-        text-align: center;
-    }
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .input-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .label {
+    font-size: small;
+    color: var(--grey-7);
+  }
+
+  .password-input {
+    padding: 0.5rem;
+    font-size: x-large;
+    color: var(--grey-9);
+    border-style: none;
+    outline: none;
+    border-radius: 0.5em;
+    transition: 100ms;
+    border: var(--border-grey);
+  }
+
+  .password-input-not-empty {
+    border-radius: 0;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+  }
+
+  .password-input:focus {
+    border-bottom: var(--border-blue);
+  }
+
+  .error-message {
+    text-align: center;
+    font-size: x-small;
+    padding-top: 0.5rem;
+  }
 </style>

yarn.lock

@@ -1331,6 +1331,11 @@ postcss@^8.2.10:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+prettier-plugin-svelte@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.7.1.tgz#c04a32eeba95916d1c7a82243f7a8f8cb822ed46"
+  integrity sha512-H33qjhCBZyd9Zr1A5hUAYDh7j0Mf97uvy7XcA7CP4nNSYrNcPvBUf7wI8K9NptWTIs0S41QtgTWmJIUiGlEBtw==
+
 prettier@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"