@licklist/design 0.78.7-stage.64 → 0.78.7-stage.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/v2/components/FormField/FormField.scss.js +1 -1
- package/dist/v2/pages/auth/CreatePassword/CreatePasswordPage.d.ts +10 -0
- package/dist/v2/pages/auth/CreatePassword/CreatePasswordPage.d.ts.map +1 -0
- package/dist/v2/pages/auth/Login/LoginPage.d.ts +11 -0
- package/dist/v2/pages/auth/Login/LoginPage.d.ts.map +1 -0
- package/dist/v2/pages/auth/ResetPassword/ResetPasswordPage.d.ts +12 -0
- package/dist/v2/pages/auth/ResetPassword/ResetPasswordPage.d.ts.map +1 -0
- package/package.json +2 -2
- package/src/v2/components/FormField/FormField.scss +1 -0
- package/src/v2/pages/auth/AuthLayout/AuthLayout.scss +140 -0
- package/src/v2/pages/auth/CreatePassword/CreatePasswordPage.tsx +179 -0
- package/src/v2/pages/auth/Login/LoginPage.tsx +98 -0
- package/src/v2/pages/auth/ResetPassword/ResetPasswordPage.scss +84 -0
- package/src/v2/pages/auth/ResetPassword/ResetPasswordPage.tsx +109 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ":root{--blue-50:#e7f4fc;--blue-100:#b4dbf6;--blue-200:#90caf2;--blue-300:#5eb2ec;--blue-400:#3ea3e8;--blue-500:#0e8ce2;--blue-600:#0d7fce;--blue-700:#0a63a0;--blue-800:#084d7c;--blue-900:#063b5f;--cyan-50:#eafbff;--cyan-75:#bdf3ff;--cyan-100:#aff1ff;--cyan-200:#9deeff;--cyan-300:#71e6ff;--cyan-400:#55e1ff;--cyan-500:#2bd9ff;--cyan-600:#27c5e8;--cyan-700:#1f9ab5;--cyan-800:#18778c;--cyan-900:#125b6b;--indigo-50:#efeffe;--indigo-100:#cdccfc;--indigo-200:#b4b4fa;--indigo-300:#9291f8;--indigo-400:#7c74ff;--indigo-500:#5d5bf4;--indigo-600:#5553de;--indigo-700:#4241ad;--indigo-800:#333286;--indigo-900:#272666;--green-50:#eef9ea;--green-100:#c9ecbd;--green-200:#afe39d;--green-300:#8bd671;--green-400:#75ce55;--green-500:#52c22b;--green-600:#4bb127;--green-700:#3a8a1f;--green-800:#2d6b18;--green-900:#225112;--red-50:#fceceb;--red-100:#f5c4c2;--red-200:#f1a8a4;--red-300:#ea807b;--red-400:#e66861;--red-500:#e0423a;--red-600:#cc3c35;--red-700:#9f2f29;--red-800:#7b2420;--red-900:#5e1c18;--purple-50:#efe6fd;--purple-100:#ceb0fa;--purple-200:#b78af7;--purple-300:#965ff4;--purple-400:#8133f1;--purple-500:#6200ee;--purple-600:#5900d9;--purple-700:#4600a9;--purple-800:#360083;--purple-900:#290064;--orange-50:#fff2e8;--orange-100:#fed7b6;--orange-200:#fec493;--orange-300:#fea962;--orange-400:#fd9843;--orange-500:#fd7e14;--orange-600:#e67312;--orange-700:#b4590e;--orange-800:#8b450b;--orange-900:#6a3508;--yellow-50:#fcf6e7;--yellow-100:#f6e3b4;--yellow-200:#f2d68f;--yellow-300:#ecc35c;--yellow-400:#fcc741;--yellow-500:#fbb912;--yellow-600:#e4a810;--yellow-700:#a07509;--yellow-800:#7c5b07;--yellow-900:#5f4505;--pink-50:#fdecf4;--pink-100:#f8c3db;--pink-200:#f4a6ca;--pink-300:#f07eb2;--pink-400:#ed65a3;--pink-500:#e83e8c;--pink-600:#d33874;--pink-700:#a52c63;--pink-800:#80224d;--pink-900:#611a3b;--teal-50:#e9faf7;--teal-100:#baf0e7;--teal-200:#99e8db;--teal-300:#6bdecb;--teal-400:#4ed8c1;--teal-500:#22ceb1;--teal-600:#1fbba1;--teal-700:#18927e;--teal-800:#137161;--teal-900:#0e574a;--neutral-white:#fff;--neutral-25:#f8f8fa;--neutral-50:#e8e9ef;--neutral-75:#d2d5e3;--neutral-100:#b6bacc;--neutral-200:#9399b3;--neutral-300:#626a90;--neutral-400:#433d7b;--neutral-500:#14215a;--neutral-600:#121e52;--neutral-700:#0e1740;--neutral-800:#0b1232;--neutral-900:#080e26;--neutral-black:#000;--purple-lightest:var(--purple-50);--purple-lighter:var(--purple-100);--purple-light:var(--purple-300);--purple-regular:var(--purple-500);--purple-dark:var(--purple-600);--purple-darker:var(--purple-800);--purple-darkest:var(--purple-900);--blue-lightest:var(--blue-50);--blue-lighter:var(--blue-100);--blue-light:var(--blue-300);--blue-regular:var(--blue-500);--blue-dark:var(--blue-600);--blue-darker:var(--blue-800);--blue-darkest:var(--blue-900);--indigo-lightest:var(--indigo-50);--indigo-lighter:var(--indigo-100);--indigo-light:var(--indigo-300);--indigo-regular:var(--indigo-500);--indigo-dark:var(--indigo-600);--indigo-darker:var(--indigo-800);--indigo-darkest:var(--indigo-900);--cyan-lightest:var(--cyan-50);--cyan-lighter:var(--cyan-100);--cyan-light:var(--cyan-300);--cyan-regular:var(--cyan-500);--cyan-dark:var(--cyan-700);--cyan-darker:var(--cyan-800);--cyan-darkest:var(--cyan-900);--red-lightest:var(--red-50);--red-lighter:var(--red-100);--red-light:var(--red-400);--red-regular:var(--red-500);--red-dark:var(--red-600);--red-darker:var(--red-800);--red-darkest:var(--red-900);--orange-lightest:var(--orange-50);--orange-lighter:var(--orange-100);--orange-light:var(--orange-300);--orange-regular:var(--orange-500);--orange-dark:var(--orange-600);--orange-darker:var(--orange-700);--orange-darkest:var(--orange-800);--yellow-lightest:var(--yellow-50);--yellow-lighter:var(--yellow-100);--yellow-light:var(--yellow-300);--yellow-regular:var(--yellow-500);--yellow-dark:var(--yellow-600);--yellow-darker:var(--yellow-800);--yellow-darkest:var(--yellow-900);--pink-lightest:var(--pink-50);--pink-lighter:var(--pink-100);--pink-light:var(--pink-300);--pink-regular:var(--pink-500);--pink-dark:var(--pink-600);--pink-darker:var(--pink-700);--pink-darkest:var(--pink-800);--green-lightest:var(--green-50);--green-lighter:var(--green-100);--green-light:var(--green-300);--green-regular:var(--green-500);--green-dark:var(--green-600);--green-darker:var(--green-800);--green-darkest:var(--green-900);--teal-lightest:var(--teal-50);--teal-lighter:var(--teal-100);--teal-light:var(--teal-300);--teal-regular:var(--teal-500);--teal-dark:var(--teal-600);--teal-darker:var(--teal-700);--teal-darkest:var(--teal-800);--tone-lightest:var(--neutral-white);--tone-lighter:var(--neutral-25);--tone-light:var(--neutral-50);--tone-regular:var(--neutral-75);--tone-dark:var(--neutral-100);--tone-darker:var(--neutral-200);--tone-darkest:var(--neutral-300);--shade-lightest:var(--neutral-400);--shade-lighter:var(--neutral-500);--shade-light:var(--neutral-600);--shade-regular:var(--neutral-700);--shade-dark:var(--neutral-800);--shade-darker:var(--neutral-900);--shade-darkest:var(--neutral-black);--highlight-lightest:var(--cyan-lightest);--highlight-lighter:var(--cyan-lighter);--highlight-light:var(--cyan-light);--highlight-regular:var(--blue-regular);--highlight-dark:var(--blue-dark);--highlight-darker:var(--blue-darker);--highlight-darkest:var(--blue-darkest);--success-lightest:var(--green-lightest);--success-lighter:var(--green-lighter);--success-light:var(--green-light);--success-regular:var(--green-regular);--success-dark:var(--green-dark);--success-darker:var(--green-darker);--success-darkest:var(--green-darkest);--errors-lightest:var(--red-lightest);--errors-lighter:var(--red-lighter);--errors-light:var(--red-light);--errors-regular:var(--red-regular);--errors-dark:var(--red-dark);--errors-darker:var(--red-darker);--errors-darkest:var(--red-darkest);--actions-lightest:var(--purple-50);--actions-lighter:var(--purple-lighter);--actions-light:var(--purple-light);--actions-regular:var(--purple-regular);--actions-dark:var(--purple-dark);--actions-darker:var(--purple-darker);--actions-darkest:var(--purple-darkest);--information-lightest:var(--blue-lightest);--information-lighter:var(--blue-lighter);--information-light:var(--blue-light);--information-regular:var(--blue-regular);--information-dark:var(--blue-dark);--information-darker:var(--blue-darker);--information-darkest:var(--blue-darkest);--alert-lightest:var(--yellow-lightest);--alert-lighter:var(--yellow-lighter);--alert-light:var(--orange-light);--alert-regular:var(--orange-regular);--alert-darker:var(--yellow-darker);--alert-darkest:var(--yellow-darkest);--danger-lightest:var(--red-lightest);--danger-lighter:var(--red-lighter);--danger-light:var(--red-light);--danger-regular:var(--red-regular);--danger-dark:var(--red-dark);--danger-darker:var(--red-darker);--danger-darkest:var(--red-darkest);--disabled-lightest:var(--tone-light);--disabled-lighter:var(--tone-regular);--disabled-light:var(--tone-dark);--disabled-regular:var(--tone-darker);--disabled-dark:var(--shade-lighter);--disabled-darker:var(--shade-light);--disabled-darkest:var(--shade-regular);--label-primary:var(--shade-light);--label-primary-alt:var(--tone-lighter);--label-secondary:var(--tone-darkest);--label-secondary-hover:var(--shade-lighter);--label-white:var(--tone-lightest);--label-highlight:var(--highlight-dark);--label-action:var(--actions-regular);--label-danger:var(--danger-dark);--label-status-error:var(--errors-dark);--label-status-success:var(--success-darker);--label-status-info:var(--information-dark);--label-status-alert:var(--alert-regular);--label-status-disabled:var(--disabled-regular);--surface-primary:var(--tone-lightest);--surface-primary-hover:var(--tone-lighter);--surface-primary-pressed:var(--tone-light);--surface-secondary:var(--neutral-25);--surface-secondary-hover:var(--tone-light);--surface-secondary-pressed:var(--tone-regular);--surface-tertiary:var(--tone-light);--surface-tertiary-hover:var(--tone-lighter);--surface-tertiary-pressed:var(--tone-lightest);--surface-status-success:var(--success-lightest);--surface-status-error:var(--errors-lightest);--surface-status-alert:var(--alert-lightest);--surface-status-info:var(--information-lightest);--surface-status-disabled:var(--disabled-lighter);--surface-action:var(--actions-regular);--surface-action-hover:var(--actions-dark);--surface-action-soft:var(--actions-lightest);--surface-action-soft-hover:var(--actions-lighter);--surface-action-soft-pressed:var(--actions-light);--surface-danger-soft:var(--danger-lightest);--surface-danger-soft-hover:var(--danger-lighter);--surface-danger-soft-pressed:var(--danger-light);--surface-highlight-soft:var(--highlight-lightest);--surface-colour-red-soft:var(--red-lightest);--surface-colour-green-soft:var(--green-lightest);--surface-colour-blue-soft:var(--blue-lightest);--surface-colour-orange-soft:var(--orange-lightest);--surface-colour-yellow-soft:var(--yellow-lightest);--surface-colour-purple-soft:var(--purple-lightest);--surface-colour-indigo-soft:var(--indigo-lightest);--surface-colour-cyan-soft:var(--cyan-lightest);--surface-colour-pink-soft:var(--pink-lightest);--surface-colour-teal-soft:var(--teal-lightest);--border-primary:var(--tone-light);--border-secondary:var(--tone-regular);--border-selected:var(--neutral-600);--border-action:var(--actions-regular);--border-status-error:var(--errors-lighter);--border-status-success:var(--success-lighter);--border-status-alert:var(--alert-lighter);--border-status-info:var(--information-lighter);--border-status-disabled:var(--disabled-lightest);--border-colour-overlay:#121e521a;--fill-primary:var(--shade-lighter);--fill-secondary:var(--tone-darkest);--fill-white:var(--tone-lightest);--fill-action:var(--actions-regular);--fill-highlight:var(--highlight-dark);--fill-danger:var(--danger-dark);--fill-status-success:var(--success-darker);--fill-status-error:var(--errors-dark);--fill-status-alert:var(--alert-regular);--fill-status-info:var(--information-regular);--fill-status-disabled:var(--disabled-light);--gradient-stop1:var(--purple-500);--gradient-stop2:var(--indigo-500);--gradient-stop3:var(--blue-500)}[data-theme=dark]{--label-primary:var(--tone-lighter);--label-primary-alt:var(--shade-light);--label-secondary:var(--tone-darker);--label-secondary-hover:var(--tone-lighter);--label-white:var(--tone-lightest);--label-highlight:var(--highlight-light);--label-action:var(--actions-lighter);--label-danger:var(--danger-light);--label-status-error:var(--errors-light);--label-status-success:var(--success-light);--label-status-info:var(--information-light);--label-status-alert:var(--alert-light);--label-status-disabled:var(--disabled-regular);--surface-primary:var(--shade-darker);--surface-primary-hover:var(--shade-dark);--surface-primary-pressed:var(--shade-regular);--surface-secondary:var(--shade-dark);--surface-secondary-hover:var(--shade-darker);--surface-secondary-pressed:var(--shade-darkest);--surface-tertiary:var(--shade-regular);--surface-tertiary-hover:var(--shade-dark);--surface-tertiary-pressed:var(--shade-darker);--surface-status-success:var(--success-darkest);--surface-status-error:var(--errors-darkest);--surface-status-alert:var(--alert-darkest);--surface-status-info:var(--information-darkest);--surface-status-disabled:var(--disabled-darkest);--surface-action:var(--actions-regular);--surface-action-hover:var(--actions-light);--surface-action-soft:var(--actions-darkest);--surface-action-soft-hover:var(--actions-darker);--surface-action-soft-pressed:var(--actions-dark);--surface-danger-soft:var(--danger-darkest);--surface-danger-soft-hover:var(--danger-darker);--surface-danger-soft-pressed:var(--danger-dark);--surface-highlight-soft:var(--highlight-darkest);--surface-colour-red-soft:var(--red-darkest);--surface-colour-green-soft:var(--green-darkest);--surface-colour-blue-soft:var(--blue-darkest);--surface-colour-orange-soft:var(--orange-darkest);--surface-colour-yellow-soft:var(--yellow-darkest);--surface-colour-purple-soft:var(--purple-darkest);--surface-colour-indigo-soft:var(--indigo-darkest);--surface-colour-cyan-soft:var(--cyan-darkest);--surface-colour-pink-soft:var(--pink-darkest);--surface-colour-teal-soft:var(--teal-darkest);--border-primary:var(--shade-light);--border-secondary:var(--shade-dark);--border-selected:var(--tone-light);--border-action:var(--actions-light);--border-status-error:var(--errors-darker);--border-status-success:var(--success-darker);--border-status-alert:var(--alert-darker);--border-status-info:var(--information-darker);--border-status-disabled:var(--disabled-dark);--border-colour-overlay:#ffffff1a;--fill-primary:var(--tone-lighter);--fill-secondary:var(--tone-darker);--fill-white:var(--tone-lightest);--fill-action:var(--actions-lighter);--fill-highlight:var(--highlight-light);--fill-danger:var(--danger-light);--fill-status-success:var(--success-light);--fill-status-error:var(--errors-light);--fill-status-alert:var(--alert-light);--fill-status-info:var(--information-light);--fill-status-disabled:var(--disabled-dark);--gradient-stop1:var(--indigo-400);--gradient-stop2:var(--cyan-500);--gradient-stop3:var(--cyan-100)}.text-primary{color:var(--label-primary)}.text-secondary{color:var(--label-secondary)}.text-white{color:var(--label-white)}.text-action{color:var(--label-action)}.text-danger{color:var(--label-danger)}.text-success{color:var(--label-status-success)}.text-error{color:var(--label-status-error)}.text-info{color:var(--label-status-info)}.text-warning{color:var(--label-status-alert)}.text-disabled{color:var(--label-status-disabled)}.bg-primary{background-color:var(--surface-primary)}.bg-secondary{background-color:var(--surface-secondary)}.bg-tertiary{background-color:var(--surface-tertiary)}.bg-success{background-color:var(--surface-status-success)}.bg-error{background-color:var(--surface-status-error)}.bg-warning{background-color:var(--surface-status-alert)}.bg-info{background-color:var(--surface-status-info)}.bg-action-soft{background-color:var(--surface-action-soft)}.bg-danger-soft{background-color:var(--surface-danger-soft)}.border-primary{border-color:var(--border-primary)}.border-secondary{border-color:var(--border-secondary)}.border-selected{border-color:var(--border-selected)}.border-action{border-color:var(--border-action)}.border-success{border-color:var(--border-status-success)}.border-error{border-color:var(--border-status-error)}.border-warning{border-color:var(--border-status-alert)}.border-info{border-color:var(--border-status-info)}:root{--radius-zero:0px;--radius-xs:1px;--radius-sm:2px;--radius-md:4px;--radius-reg:8px;--radius-lg:16px;--radius-xl:24px;--spacing-zero:0px;--spacing-xxs:1px;--spacing-xs:2px;--spacing-sm:4px;--spacing-md:8px;--spacing-reg:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-xxl:64px;--spacing-super:128px;--container-padding-mobile:16px;--opacity-0:0;--opacity-10:0.1;--opacity-20:0.2;--opacity-30:0.3;--opacity-40:0.4;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-80:0.8;--opacity-90:0.9;--opacity-100:1;--color-success-fill:#2d6b18;--color-success-background:#eef9ea;--color-success-border:#c9ecbd;--color-error-fill:#cc3c35;--color-error-background:#fceceb;--color-error-border:#f5c4c2;--color-alert-fill:#fd7e14;--color-alert-background:#fcf6e7;--color-alert-border:#f6e3b4;--color-info-fill:#0e8ce2;--color-info-background:#e7f4fc;--color-info-border:#b4dbf6;--surfaces-status-background-success:var(--color-success-background);--surfaces-status-background-error:var(--color-error-background);--surfaces-status-background-alert:var(--color-alert-background);--surfaces-status-background-info:var(--color-info-background);--borders-status-border-success:var(--color-success-border);--borders-status-border-error:var(--color-error-border);--borders-status-border-alert:var(--color-alert-border);--borders-status-border-info:var(--color-info-border);--fills-status-fill-success:var(--color-success-fill);--fills-status-fill-error:var(--color-error-fill);--fills-status-fill-alert:var(--color-alert-fill);--fills-status-fill-info:var(--color-info-fill);--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600}.waiver-template-form-section{gap:var(--padding-reg,16px)}.waiver-template-form-group,.waiver-template-form-section{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column}.waiver-template-form-group{gap:var(--padding-lg,24px)}.text-description{color:var(--label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:16px;font-style:normal;line-height:24px}.form-field{align-items:flex-start;display:flex;flex-direction:column;gap:var(--spacing-xs,4px);width:100%}.form-field__label{align-items:center;align-self:stretch;color:var(--label-primary,#121e52);display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-weight:600;gap:4px;line-height:20px;margin:0}.form-field__required{color:var(--label-status-error,#ef4444);margin-left:2px}.form-field__input{align-items:center;align-self:stretch;background-color:var(--surface-secondary,#f8f8fa);border:2px solid var(--border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--label-primary,#121e52);display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,16px);gap:8px;height:40px;line-height:var(--text-regular-line,20px);outline:none;padding:8px 10px;transition:all .2s ease;width:100%}.form-field__input::placeholder{color:var(--label-secondary,#626a90)}.form-field__input:focus{background-color:var(--surface-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee)}.form-field__input--error,.form-field__input--error:focus{border-color:var(--borders-status-border-error,#ef4444)}.form-field__input:disabled{background:var(--surface-status-disabled,#f8f8fa);color:var(--label-secondary,#626a90);cursor:not-allowed;opacity:.6}.form-field__input--on-surface,.form-field__input--on-surface:focus{background-color:var(--surface-primary,#fff)}.form-field__help-text{color:var(--label-secondary,#626a90);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}.form-field__error-text{color:var(--label-status-error,#ef4444);font-size:var(--text-xs-size,11px);line-height:var(--text-xs-line,14px)}.surface-context--secondary .form-field__input,.surface-context--secondary .form-field__input:focus{background-color:var(--surface-primary,#fff)}";
|
|
3
|
+
var css_248z = ":root{--blue-50:#e7f4fc;--blue-100:#b4dbf6;--blue-200:#90caf2;--blue-300:#5eb2ec;--blue-400:#3ea3e8;--blue-500:#0e8ce2;--blue-600:#0d7fce;--blue-700:#0a63a0;--blue-800:#084d7c;--blue-900:#063b5f;--cyan-50:#eafbff;--cyan-75:#bdf3ff;--cyan-100:#aff1ff;--cyan-200:#9deeff;--cyan-300:#71e6ff;--cyan-400:#55e1ff;--cyan-500:#2bd9ff;--cyan-600:#27c5e8;--cyan-700:#1f9ab5;--cyan-800:#18778c;--cyan-900:#125b6b;--indigo-50:#efeffe;--indigo-100:#cdccfc;--indigo-200:#b4b4fa;--indigo-300:#9291f8;--indigo-400:#7c74ff;--indigo-500:#5d5bf4;--indigo-600:#5553de;--indigo-700:#4241ad;--indigo-800:#333286;--indigo-900:#272666;--green-50:#eef9ea;--green-100:#c9ecbd;--green-200:#afe39d;--green-300:#8bd671;--green-400:#75ce55;--green-500:#52c22b;--green-600:#4bb127;--green-700:#3a8a1f;--green-800:#2d6b18;--green-900:#225112;--red-50:#fceceb;--red-100:#f5c4c2;--red-200:#f1a8a4;--red-300:#ea807b;--red-400:#e66861;--red-500:#e0423a;--red-600:#cc3c35;--red-700:#9f2f29;--red-800:#7b2420;--red-900:#5e1c18;--purple-50:#efe6fd;--purple-100:#ceb0fa;--purple-200:#b78af7;--purple-300:#965ff4;--purple-400:#8133f1;--purple-500:#6200ee;--purple-600:#5900d9;--purple-700:#4600a9;--purple-800:#360083;--purple-900:#290064;--orange-50:#fff2e8;--orange-100:#fed7b6;--orange-200:#fec493;--orange-300:#fea962;--orange-400:#fd9843;--orange-500:#fd7e14;--orange-600:#e67312;--orange-700:#b4590e;--orange-800:#8b450b;--orange-900:#6a3508;--yellow-50:#fcf6e7;--yellow-100:#f6e3b4;--yellow-200:#f2d68f;--yellow-300:#ecc35c;--yellow-400:#fcc741;--yellow-500:#fbb912;--yellow-600:#e4a810;--yellow-700:#a07509;--yellow-800:#7c5b07;--yellow-900:#5f4505;--pink-50:#fdecf4;--pink-100:#f8c3db;--pink-200:#f4a6ca;--pink-300:#f07eb2;--pink-400:#ed65a3;--pink-500:#e83e8c;--pink-600:#d33874;--pink-700:#a52c63;--pink-800:#80224d;--pink-900:#611a3b;--teal-50:#e9faf7;--teal-100:#baf0e7;--teal-200:#99e8db;--teal-300:#6bdecb;--teal-400:#4ed8c1;--teal-500:#22ceb1;--teal-600:#1fbba1;--teal-700:#18927e;--teal-800:#137161;--teal-900:#0e574a;--neutral-white:#fff;--neutral-25:#f8f8fa;--neutral-50:#e8e9ef;--neutral-75:#d2d5e3;--neutral-100:#b6bacc;--neutral-200:#9399b3;--neutral-300:#626a90;--neutral-400:#433d7b;--neutral-500:#14215a;--neutral-600:#121e52;--neutral-700:#0e1740;--neutral-800:#0b1232;--neutral-900:#080e26;--neutral-black:#000;--purple-lightest:var(--purple-50);--purple-lighter:var(--purple-100);--purple-light:var(--purple-300);--purple-regular:var(--purple-500);--purple-dark:var(--purple-600);--purple-darker:var(--purple-800);--purple-darkest:var(--purple-900);--blue-lightest:var(--blue-50);--blue-lighter:var(--blue-100);--blue-light:var(--blue-300);--blue-regular:var(--blue-500);--blue-dark:var(--blue-600);--blue-darker:var(--blue-800);--blue-darkest:var(--blue-900);--indigo-lightest:var(--indigo-50);--indigo-lighter:var(--indigo-100);--indigo-light:var(--indigo-300);--indigo-regular:var(--indigo-500);--indigo-dark:var(--indigo-600);--indigo-darker:var(--indigo-800);--indigo-darkest:var(--indigo-900);--cyan-lightest:var(--cyan-50);--cyan-lighter:var(--cyan-100);--cyan-light:var(--cyan-300);--cyan-regular:var(--cyan-500);--cyan-dark:var(--cyan-700);--cyan-darker:var(--cyan-800);--cyan-darkest:var(--cyan-900);--red-lightest:var(--red-50);--red-lighter:var(--red-100);--red-light:var(--red-400);--red-regular:var(--red-500);--red-dark:var(--red-600);--red-darker:var(--red-800);--red-darkest:var(--red-900);--orange-lightest:var(--orange-50);--orange-lighter:var(--orange-100);--orange-light:var(--orange-300);--orange-regular:var(--orange-500);--orange-dark:var(--orange-600);--orange-darker:var(--orange-700);--orange-darkest:var(--orange-800);--yellow-lightest:var(--yellow-50);--yellow-lighter:var(--yellow-100);--yellow-light:var(--yellow-300);--yellow-regular:var(--yellow-500);--yellow-dark:var(--yellow-600);--yellow-darker:var(--yellow-800);--yellow-darkest:var(--yellow-900);--pink-lightest:var(--pink-50);--pink-lighter:var(--pink-100);--pink-light:var(--pink-300);--pink-regular:var(--pink-500);--pink-dark:var(--pink-600);--pink-darker:var(--pink-700);--pink-darkest:var(--pink-800);--green-lightest:var(--green-50);--green-lighter:var(--green-100);--green-light:var(--green-300);--green-regular:var(--green-500);--green-dark:var(--green-600);--green-darker:var(--green-800);--green-darkest:var(--green-900);--teal-lightest:var(--teal-50);--teal-lighter:var(--teal-100);--teal-light:var(--teal-300);--teal-regular:var(--teal-500);--teal-dark:var(--teal-600);--teal-darker:var(--teal-700);--teal-darkest:var(--teal-800);--tone-lightest:var(--neutral-white);--tone-lighter:var(--neutral-25);--tone-light:var(--neutral-50);--tone-regular:var(--neutral-75);--tone-dark:var(--neutral-100);--tone-darker:var(--neutral-200);--tone-darkest:var(--neutral-300);--shade-lightest:var(--neutral-400);--shade-lighter:var(--neutral-500);--shade-light:var(--neutral-600);--shade-regular:var(--neutral-700);--shade-dark:var(--neutral-800);--shade-darker:var(--neutral-900);--shade-darkest:var(--neutral-black);--highlight-lightest:var(--cyan-lightest);--highlight-lighter:var(--cyan-lighter);--highlight-light:var(--cyan-light);--highlight-regular:var(--blue-regular);--highlight-dark:var(--blue-dark);--highlight-darker:var(--blue-darker);--highlight-darkest:var(--blue-darkest);--success-lightest:var(--green-lightest);--success-lighter:var(--green-lighter);--success-light:var(--green-light);--success-regular:var(--green-regular);--success-dark:var(--green-dark);--success-darker:var(--green-darker);--success-darkest:var(--green-darkest);--errors-lightest:var(--red-lightest);--errors-lighter:var(--red-lighter);--errors-light:var(--red-light);--errors-regular:var(--red-regular);--errors-dark:var(--red-dark);--errors-darker:var(--red-darker);--errors-darkest:var(--red-darkest);--actions-lightest:var(--purple-50);--actions-lighter:var(--purple-lighter);--actions-light:var(--purple-light);--actions-regular:var(--purple-regular);--actions-dark:var(--purple-dark);--actions-darker:var(--purple-darker);--actions-darkest:var(--purple-darkest);--information-lightest:var(--blue-lightest);--information-lighter:var(--blue-lighter);--information-light:var(--blue-light);--information-regular:var(--blue-regular);--information-dark:var(--blue-dark);--information-darker:var(--blue-darker);--information-darkest:var(--blue-darkest);--alert-lightest:var(--yellow-lightest);--alert-lighter:var(--yellow-lighter);--alert-light:var(--orange-light);--alert-regular:var(--orange-regular);--alert-darker:var(--yellow-darker);--alert-darkest:var(--yellow-darkest);--danger-lightest:var(--red-lightest);--danger-lighter:var(--red-lighter);--danger-light:var(--red-light);--danger-regular:var(--red-regular);--danger-dark:var(--red-dark);--danger-darker:var(--red-darker);--danger-darkest:var(--red-darkest);--disabled-lightest:var(--tone-light);--disabled-lighter:var(--tone-regular);--disabled-light:var(--tone-dark);--disabled-regular:var(--tone-darker);--disabled-dark:var(--shade-lighter);--disabled-darker:var(--shade-light);--disabled-darkest:var(--shade-regular);--label-primary:var(--shade-light);--label-primary-alt:var(--tone-lighter);--label-secondary:var(--tone-darkest);--label-secondary-hover:var(--shade-lighter);--label-white:var(--tone-lightest);--label-highlight:var(--highlight-dark);--label-action:var(--actions-regular);--label-danger:var(--danger-dark);--label-status-error:var(--errors-dark);--label-status-success:var(--success-darker);--label-status-info:var(--information-dark);--label-status-alert:var(--alert-regular);--label-status-disabled:var(--disabled-regular);--surface-primary:var(--tone-lightest);--surface-primary-hover:var(--tone-lighter);--surface-primary-pressed:var(--tone-light);--surface-secondary:var(--neutral-25);--surface-secondary-hover:var(--tone-light);--surface-secondary-pressed:var(--tone-regular);--surface-tertiary:var(--tone-light);--surface-tertiary-hover:var(--tone-lighter);--surface-tertiary-pressed:var(--tone-lightest);--surface-status-success:var(--success-lightest);--surface-status-error:var(--errors-lightest);--surface-status-alert:var(--alert-lightest);--surface-status-info:var(--information-lightest);--surface-status-disabled:var(--disabled-lighter);--surface-action:var(--actions-regular);--surface-action-hover:var(--actions-dark);--surface-action-soft:var(--actions-lightest);--surface-action-soft-hover:var(--actions-lighter);--surface-action-soft-pressed:var(--actions-light);--surface-danger-soft:var(--danger-lightest);--surface-danger-soft-hover:var(--danger-lighter);--surface-danger-soft-pressed:var(--danger-light);--surface-highlight-soft:var(--highlight-lightest);--surface-colour-red-soft:var(--red-lightest);--surface-colour-green-soft:var(--green-lightest);--surface-colour-blue-soft:var(--blue-lightest);--surface-colour-orange-soft:var(--orange-lightest);--surface-colour-yellow-soft:var(--yellow-lightest);--surface-colour-purple-soft:var(--purple-lightest);--surface-colour-indigo-soft:var(--indigo-lightest);--surface-colour-cyan-soft:var(--cyan-lightest);--surface-colour-pink-soft:var(--pink-lightest);--surface-colour-teal-soft:var(--teal-lightest);--border-primary:var(--tone-light);--border-secondary:var(--tone-regular);--border-selected:var(--neutral-600);--border-action:var(--actions-regular);--border-status-error:var(--errors-lighter);--border-status-success:var(--success-lighter);--border-status-alert:var(--alert-lighter);--border-status-info:var(--information-lighter);--border-status-disabled:var(--disabled-lightest);--border-colour-overlay:#121e521a;--fill-primary:var(--shade-lighter);--fill-secondary:var(--tone-darkest);--fill-white:var(--tone-lightest);--fill-action:var(--actions-regular);--fill-highlight:var(--highlight-dark);--fill-danger:var(--danger-dark);--fill-status-success:var(--success-darker);--fill-status-error:var(--errors-dark);--fill-status-alert:var(--alert-regular);--fill-status-info:var(--information-regular);--fill-status-disabled:var(--disabled-light);--gradient-stop1:var(--purple-500);--gradient-stop2:var(--indigo-500);--gradient-stop3:var(--blue-500)}[data-theme=dark]{--label-primary:var(--tone-lighter);--label-primary-alt:var(--shade-light);--label-secondary:var(--tone-darker);--label-secondary-hover:var(--tone-lighter);--label-white:var(--tone-lightest);--label-highlight:var(--highlight-light);--label-action:var(--actions-lighter);--label-danger:var(--danger-light);--label-status-error:var(--errors-light);--label-status-success:var(--success-light);--label-status-info:var(--information-light);--label-status-alert:var(--alert-light);--label-status-disabled:var(--disabled-regular);--surface-primary:var(--shade-darker);--surface-primary-hover:var(--shade-dark);--surface-primary-pressed:var(--shade-regular);--surface-secondary:var(--shade-dark);--surface-secondary-hover:var(--shade-darker);--surface-secondary-pressed:var(--shade-darkest);--surface-tertiary:var(--shade-regular);--surface-tertiary-hover:var(--shade-dark);--surface-tertiary-pressed:var(--shade-darker);--surface-status-success:var(--success-darkest);--surface-status-error:var(--errors-darkest);--surface-status-alert:var(--alert-darkest);--surface-status-info:var(--information-darkest);--surface-status-disabled:var(--disabled-darkest);--surface-action:var(--actions-regular);--surface-action-hover:var(--actions-light);--surface-action-soft:var(--actions-darkest);--surface-action-soft-hover:var(--actions-darker);--surface-action-soft-pressed:var(--actions-dark);--surface-danger-soft:var(--danger-darkest);--surface-danger-soft-hover:var(--danger-darker);--surface-danger-soft-pressed:var(--danger-dark);--surface-highlight-soft:var(--highlight-darkest);--surface-colour-red-soft:var(--red-darkest);--surface-colour-green-soft:var(--green-darkest);--surface-colour-blue-soft:var(--blue-darkest);--surface-colour-orange-soft:var(--orange-darkest);--surface-colour-yellow-soft:var(--yellow-darkest);--surface-colour-purple-soft:var(--purple-darkest);--surface-colour-indigo-soft:var(--indigo-darkest);--surface-colour-cyan-soft:var(--cyan-darkest);--surface-colour-pink-soft:var(--pink-darkest);--surface-colour-teal-soft:var(--teal-darkest);--border-primary:var(--shade-light);--border-secondary:var(--shade-dark);--border-selected:var(--tone-light);--border-action:var(--actions-light);--border-status-error:var(--errors-darker);--border-status-success:var(--success-darker);--border-status-alert:var(--alert-darker);--border-status-info:var(--information-darker);--border-status-disabled:var(--disabled-dark);--border-colour-overlay:#ffffff1a;--fill-primary:var(--tone-lighter);--fill-secondary:var(--tone-darker);--fill-white:var(--tone-lightest);--fill-action:var(--actions-lighter);--fill-highlight:var(--highlight-light);--fill-danger:var(--danger-light);--fill-status-success:var(--success-light);--fill-status-error:var(--errors-light);--fill-status-alert:var(--alert-light);--fill-status-info:var(--information-light);--fill-status-disabled:var(--disabled-dark);--gradient-stop1:var(--indigo-400);--gradient-stop2:var(--cyan-500);--gradient-stop3:var(--cyan-100)}.text-primary{color:var(--label-primary)}.text-secondary{color:var(--label-secondary)}.text-white{color:var(--label-white)}.text-action{color:var(--label-action)}.text-danger{color:var(--label-danger)}.text-success{color:var(--label-status-success)}.text-error{color:var(--label-status-error)}.text-info{color:var(--label-status-info)}.text-warning{color:var(--label-status-alert)}.text-disabled{color:var(--label-status-disabled)}.bg-primary{background-color:var(--surface-primary)}.bg-secondary{background-color:var(--surface-secondary)}.bg-tertiary{background-color:var(--surface-tertiary)}.bg-success{background-color:var(--surface-status-success)}.bg-error{background-color:var(--surface-status-error)}.bg-warning{background-color:var(--surface-status-alert)}.bg-info{background-color:var(--surface-status-info)}.bg-action-soft{background-color:var(--surface-action-soft)}.bg-danger-soft{background-color:var(--surface-danger-soft)}.border-primary{border-color:var(--border-primary)}.border-secondary{border-color:var(--border-secondary)}.border-selected{border-color:var(--border-selected)}.border-action{border-color:var(--border-action)}.border-success{border-color:var(--border-status-success)}.border-error{border-color:var(--border-status-error)}.border-warning{border-color:var(--border-status-alert)}.border-info{border-color:var(--border-status-info)}:root{--radius-zero:0px;--radius-xs:1px;--radius-sm:2px;--radius-md:4px;--radius-reg:8px;--radius-lg:16px;--radius-xl:24px;--spacing-zero:0px;--spacing-xxs:1px;--spacing-xs:2px;--spacing-sm:4px;--spacing-md:8px;--spacing-reg:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-xxl:64px;--spacing-super:128px;--container-padding-mobile:16px;--opacity-0:0;--opacity-10:0.1;--opacity-20:0.2;--opacity-30:0.3;--opacity-40:0.4;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-80:0.8;--opacity-90:0.9;--opacity-100:1;--color-success-fill:#2d6b18;--color-success-background:#eef9ea;--color-success-border:#c9ecbd;--color-error-fill:#cc3c35;--color-error-background:#fceceb;--color-error-border:#f5c4c2;--color-alert-fill:#fd7e14;--color-alert-background:#fcf6e7;--color-alert-border:#f6e3b4;--color-info-fill:#0e8ce2;--color-info-background:#e7f4fc;--color-info-border:#b4dbf6;--surfaces-status-background-success:var(--color-success-background);--surfaces-status-background-error:var(--color-error-background);--surfaces-status-background-alert:var(--color-alert-background);--surfaces-status-background-info:var(--color-info-background);--borders-status-border-success:var(--color-success-border);--borders-status-border-error:var(--color-error-border);--borders-status-border-alert:var(--color-alert-border);--borders-status-border-info:var(--color-info-border);--fills-status-fill-success:var(--color-success-fill);--fills-status-fill-error:var(--color-error-fill);--fills-status-fill-alert:var(--color-alert-fill);--fills-status-fill-info:var(--color-info-fill);--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600}.waiver-template-form-section{gap:var(--padding-reg,16px)}.waiver-template-form-group,.waiver-template-form-section{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column}.waiver-template-form-group{gap:var(--padding-lg,24px)}.text-description{color:var(--label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:16px;font-style:normal;line-height:24px}.form-field{align-items:flex-start;display:flex;flex-direction:column;gap:var(--spacing-xs,4px);width:100%}.form-field__label{align-items:center;align-self:stretch;color:var(--label-primary,#121e52);display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-weight:600;gap:4px;line-height:20px;margin:0}.form-field__required{color:var(--label-status-error,#ef4444);margin-left:2px}.form-field__input{align-items:center;align-self:stretch;background-color:var(--surface-secondary,#f8f8fa);border:2px solid var(--border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--label-primary,#121e52);display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,16px);gap:8px;height:40px;line-height:var(--text-regular-line,20px);outline:none;padding:8px 10px;transition:all .2s ease;width:100%}.form-field__input::placeholder{color:var(--label-secondary,#626a90)}.form-field__input:focus{background-color:var(--surface-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee)}.form-field__input--error,.form-field__input--error:focus{border-color:var(--borders-status-border-error,#ef4444)}.form-field__input:disabled{background:var(--surface-status-disabled,#f8f8fa);color:var(--label-secondary,#626a90);cursor:not-allowed;opacity:.6}.form-field__input--on-surface,.form-field__input--on-surface:focus{background-color:var(--surface-primary,#fff)}.form-field__help-text{color:var(--label-secondary,#626a90);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}.form-field__error-text{color:var(--label-status-error,#ef4444);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-xs-size,11px);line-height:var(--text-xs-line,14px)}.surface-context--secondary .form-field__input,.surface-context--secondary .form-field__input:focus{background-color:var(--surface-primary,#fff)}";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './CreatePasswordPage.scss';
|
|
3
|
+
export interface CreatePasswordPageProps {
|
|
4
|
+
onSubmit: (password: string) => Promise<void> | void;
|
|
5
|
+
onResetInstead?: () => void;
|
|
6
|
+
isLoading?: boolean;
|
|
7
|
+
error?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare const CreatePasswordPage: React.FC<CreatePasswordPageProps>;
|
|
10
|
+
//# sourceMappingURL=CreatePasswordPage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CreatePasswordPage.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/auth/CreatePassword/CreatePasswordPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,2BAA2B,CAAA;AAOlC,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACpD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA6JhE,CAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './LoginPage.scss';
|
|
3
|
+
export interface LoginPageProps {
|
|
4
|
+
onSubmit: (email: string, password: string) => Promise<void> | void;
|
|
5
|
+
onForgotPassword?: () => void;
|
|
6
|
+
isLoading?: boolean;
|
|
7
|
+
error?: string;
|
|
8
|
+
version?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const LoginPage: React.FC<LoginPageProps>;
|
|
11
|
+
//# sourceMappingURL=LoginPage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoginPage.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/auth/Login/LoginPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,kBAAkB,CAAA;AAOzB,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACnE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0E9C,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './ResetPasswordPage.scss';
|
|
3
|
+
export interface ResetPasswordPageProps {
|
|
4
|
+
onSubmit: (email: string) => Promise<void> | void;
|
|
5
|
+
onBackToLogin?: () => void;
|
|
6
|
+
isLoading?: boolean;
|
|
7
|
+
error?: string;
|
|
8
|
+
successMessage?: string;
|
|
9
|
+
version?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const ResetPasswordPage: React.FC<ResetPasswordPageProps>;
|
|
12
|
+
//# sourceMappingURL=ResetPasswordPage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ResetPasswordPage.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/auth/ResetPassword/ResetPasswordPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,0BAA0B,CAAA;AAMjC,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqF9D,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@licklist/design",
|
|
3
|
-
"version": "0.78.7-stage.
|
|
3
|
+
"version": "0.78.7-stage.65",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
]
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
|
-
"@licklist/core": "0.36.3-stage.
|
|
45
|
+
"@licklist/core": "0.36.3-stage.18",
|
|
46
46
|
"@licklist/eslint-config": "0.5.6",
|
|
47
47
|
"@licklist/plugins": "0.36.4-stage.18",
|
|
48
48
|
"clsx": "2.1.1",
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
.auth-layout {
|
|
2
|
+
position: relative;
|
|
3
|
+
width: 100%;
|
|
4
|
+
min-height: 100vh;
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: flex-start;
|
|
9
|
+
background-color: var(--surface-secondary);
|
|
10
|
+
padding: 0 16px;
|
|
11
|
+
|
|
12
|
+
&__alert {
|
|
13
|
+
width: 846px;
|
|
14
|
+
max-width: 100%;
|
|
15
|
+
margin-top: 24px;
|
|
16
|
+
position: relative;
|
|
17
|
+
z-index: 1;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&__bg-decoration {
|
|
21
|
+
position: fixed;
|
|
22
|
+
top: 0;
|
|
23
|
+
left: 0;
|
|
24
|
+
width: 489px;
|
|
25
|
+
height: 588px;
|
|
26
|
+
pointer-events: none;
|
|
27
|
+
z-index: 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&__card {
|
|
31
|
+
position: relative;
|
|
32
|
+
z-index: 10;
|
|
33
|
+
width: 846px;
|
|
34
|
+
max-width: 100%;
|
|
35
|
+
min-height: 400px;
|
|
36
|
+
background-color: var(--surface-primary);
|
|
37
|
+
border-radius: 16px;
|
|
38
|
+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
|
39
|
+
overflow: hidden;
|
|
40
|
+
margin-top: 80px;
|
|
41
|
+
|
|
42
|
+
@media (max-width: 768px) {
|
|
43
|
+
margin-top: 40px;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&__alert + &__card {
|
|
48
|
+
margin-top: 16px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&__header {
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
justify-content: space-between;
|
|
55
|
+
padding: 16px;
|
|
56
|
+
border-bottom: 1px solid var(--border-primary);
|
|
57
|
+
|
|
58
|
+
.new-badge {
|
|
59
|
+
padding: 6px 10px;
|
|
60
|
+
font-size: 11px;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&__body {
|
|
65
|
+
padding: 42px;
|
|
66
|
+
|
|
67
|
+
@media (max-width: 768px) {
|
|
68
|
+
padding: 20px;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&__content {
|
|
73
|
+
display: flex;
|
|
74
|
+
width: 100%;
|
|
75
|
+
gap: 64px;
|
|
76
|
+
flex-wrap: wrap;
|
|
77
|
+
|
|
78
|
+
@media (max-width: 768px) {
|
|
79
|
+
gap: 32px;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&__info {
|
|
84
|
+
min-width: 240px;
|
|
85
|
+
flex: 1;
|
|
86
|
+
flex-shrink: 0;
|
|
87
|
+
flex-basis: 0;
|
|
88
|
+
max-width: 260px;
|
|
89
|
+
color: var(--label-primary);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&__icon {
|
|
93
|
+
width: 64px;
|
|
94
|
+
height: 64px;
|
|
95
|
+
color: var(--fill-primary);
|
|
96
|
+
|
|
97
|
+
svg {
|
|
98
|
+
width: 100%;
|
|
99
|
+
height: 100%;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&__title {
|
|
104
|
+
font-family: var(--font-family-sans, 'Geist', sans-serif);
|
|
105
|
+
font-size: 32px;
|
|
106
|
+
font-weight: 700;
|
|
107
|
+
line-height: 1;
|
|
108
|
+
color: var(--label-primary);
|
|
109
|
+
margin: 8px 0 0;
|
|
110
|
+
padding: 0;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&__subtitle {
|
|
114
|
+
font-family: var(--font-family-sans, 'Geist', sans-serif);
|
|
115
|
+
font-size: 18px;
|
|
116
|
+
font-weight: 400;
|
|
117
|
+
line-height: 1;
|
|
118
|
+
color: var(--label-secondary);
|
|
119
|
+
margin: 16px 0 0;
|
|
120
|
+
padding: 0;
|
|
121
|
+
|
|
122
|
+
@media (max-width: 768px) {
|
|
123
|
+
margin-top: 4px;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&__form-area {
|
|
128
|
+
display: flex;
|
|
129
|
+
min-width: 240px;
|
|
130
|
+
flex-direction: column;
|
|
131
|
+
align-items: stretch;
|
|
132
|
+
flex: 1;
|
|
133
|
+
flex-shrink: 0;
|
|
134
|
+
flex-basis: 0;
|
|
135
|
+
|
|
136
|
+
@media (max-width: 768px) {
|
|
137
|
+
max-width: 100%;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { useForm } from 'react-hook-form'
|
|
3
|
+
import { useTranslation } from 'react-i18next'
|
|
4
|
+
import { AuthLayout } from '../AuthLayout'
|
|
5
|
+
import { FormField } from '../../../components/FormField'
|
|
6
|
+
import { Button } from '../../../components/Button'
|
|
7
|
+
import { PasswordTypeIcon, PasswordRequirementIcon } from '../../../icons'
|
|
8
|
+
import './CreatePasswordPage.scss'
|
|
9
|
+
|
|
10
|
+
type FormValues = {
|
|
11
|
+
password: string
|
|
12
|
+
confirmPassword: string
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export interface CreatePasswordPageProps {
|
|
16
|
+
onSubmit: (password: string) => Promise<void> | void
|
|
17
|
+
onResetInstead?: () => void
|
|
18
|
+
isLoading?: boolean
|
|
19
|
+
error?: string
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export const CreatePasswordPage: React.FC<CreatePasswordPageProps> = ({
|
|
23
|
+
onSubmit,
|
|
24
|
+
onResetInstead,
|
|
25
|
+
isLoading = false,
|
|
26
|
+
error,
|
|
27
|
+
}) => {
|
|
28
|
+
const { t } = useTranslation(['Validation', 'User'])
|
|
29
|
+
const { register, handleSubmit, watch, formState: { errors } } = useForm<FormValues>({ mode: 'onChange' })
|
|
30
|
+
|
|
31
|
+
const password = watch('password', '')
|
|
32
|
+
const confirmPassword = watch('confirmPassword', '')
|
|
33
|
+
|
|
34
|
+
const hasNumber = /\d/.test(password)
|
|
35
|
+
const hasCapital = /[A-Z]/.test(password)
|
|
36
|
+
const hasMinLength = password.length >= 8
|
|
37
|
+
|
|
38
|
+
const criteriaCount = [hasNumber, hasCapital, hasMinLength].filter(Boolean).length
|
|
39
|
+
|
|
40
|
+
const getStrengthColor = () => {
|
|
41
|
+
if (password.length === 0) return 'transparent'
|
|
42
|
+
if (criteriaCount <= 1) return 'var(--red-600)'
|
|
43
|
+
if (criteriaCount === 2) return 'var(--orange-500)'
|
|
44
|
+
return 'var(--green-600)'
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const getStrengthWidth = () => {
|
|
48
|
+
if (password.length === 0) return '0%'
|
|
49
|
+
if (criteriaCount <= 1) return '33%'
|
|
50
|
+
if (criteriaCount === 2) return '66%'
|
|
51
|
+
return '100%'
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
const getStrengthLabel = () => {
|
|
55
|
+
if (password.length === 0) return ''
|
|
56
|
+
if (criteriaCount <= 1) return t('User:passwordStrengthWeak')
|
|
57
|
+
if (criteriaCount === 2) return t('User:passwordStrengthMedium')
|
|
58
|
+
return t('User:passwordStrengthStrong')
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const passwordsMatch = password === confirmPassword && confirmPassword.length > 0
|
|
62
|
+
const showMatchIndicator = confirmPassword.length > 0
|
|
63
|
+
|
|
64
|
+
const onFormSubmit = async (data: FormValues) => {
|
|
65
|
+
await onSubmit(data.password)
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
return (
|
|
69
|
+
<AuthLayout
|
|
70
|
+
badgeLabel={t('User:newPassword')}
|
|
71
|
+
icon={<PasswordTypeIcon />}
|
|
72
|
+
title={t('User:newPassword')}
|
|
73
|
+
subtitle={t('User:newPasswordSubtitle')}
|
|
74
|
+
error={error}
|
|
75
|
+
>
|
|
76
|
+
<form className="auth-create-password" onSubmit={handleSubmit(onFormSubmit)} noValidate>
|
|
77
|
+
|
|
78
|
+
<div className="auth-create-password__requirements">
|
|
79
|
+
<p className="auth-create-password__requirements-title">
|
|
80
|
+
{t('User:passwordsMustContain')}
|
|
81
|
+
</p>
|
|
82
|
+
<ul className="auth-create-password__requirements-list">
|
|
83
|
+
<li className="auth-create-password__requirement-item">
|
|
84
|
+
<PasswordRequirementIcon met={hasNumber} visible={password.length > 0} />
|
|
85
|
+
{t('User:passwordRequireNumber')}
|
|
86
|
+
</li>
|
|
87
|
+
<li className="auth-create-password__requirement-item">
|
|
88
|
+
<PasswordRequirementIcon met={hasCapital} visible={password.length > 0} />
|
|
89
|
+
{t('User:passwordRequireCapital')}
|
|
90
|
+
</li>
|
|
91
|
+
<li className="auth-create-password__requirement-item">
|
|
92
|
+
<PasswordRequirementIcon met={hasMinLength} visible={password.length > 0} />
|
|
93
|
+
{t('User:passwordRequireMinLength')}
|
|
94
|
+
</li>
|
|
95
|
+
</ul>
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
<div className="auth-create-password__field">
|
|
99
|
+
<FormField
|
|
100
|
+
label={t('User:password')}
|
|
101
|
+
type="password"
|
|
102
|
+
disabled={isLoading}
|
|
103
|
+
error={errors.password?.message}
|
|
104
|
+
{...register('password', {
|
|
105
|
+
required: t('Validation:fieldRequired', { attribute: t('User:password') }) as string,
|
|
106
|
+
minLength: {
|
|
107
|
+
value: 8,
|
|
108
|
+
message: t('Validation:fieldMinLength', { attribute: t('User:password'), min: 8 }) as string,
|
|
109
|
+
},
|
|
110
|
+
})}
|
|
111
|
+
/>
|
|
112
|
+
{password.length > 0 && (
|
|
113
|
+
<div className="auth-create-password__strength">
|
|
114
|
+
<div className="auth-create-password__strength-header">
|
|
115
|
+
<span>{t('User:passwordStrength')}</span>
|
|
116
|
+
<span>{getStrengthLabel()}</span>
|
|
117
|
+
</div>
|
|
118
|
+
<div className="auth-create-password__strength-bar-track">
|
|
119
|
+
<div
|
|
120
|
+
className="auth-create-password__strength-bar-fill"
|
|
121
|
+
style={{
|
|
122
|
+
width: getStrengthWidth(),
|
|
123
|
+
backgroundColor: getStrengthColor(),
|
|
124
|
+
}}
|
|
125
|
+
/>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
)}
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<div className="auth-create-password__field--last">
|
|
132
|
+
<FormField
|
|
133
|
+
label={t('User:confirmPassword')}
|
|
134
|
+
type="password"
|
|
135
|
+
disabled={isLoading}
|
|
136
|
+
error={errors.confirmPassword?.message}
|
|
137
|
+
{...register('confirmPassword', {
|
|
138
|
+
required: t('Validation:fieldRequired', { attribute: t('User:confirmPassword') }) as string,
|
|
139
|
+
validate: (value) =>
|
|
140
|
+
value === password ||
|
|
141
|
+
(t('Validation:fieldDoesntMatchField', {
|
|
142
|
+
field1: t('User:confirmPassword'),
|
|
143
|
+
field2: t('User:password'),
|
|
144
|
+
}) as string),
|
|
145
|
+
})}
|
|
146
|
+
/>
|
|
147
|
+
{showMatchIndicator && (
|
|
148
|
+
<div className={`auth-create-password__match auth-create-password__match--${passwordsMatch ? 'match' : 'no-match'}`}>
|
|
149
|
+
<PasswordRequirementIcon met={passwordsMatch} />
|
|
150
|
+
{passwordsMatch ? t('User:passwordsMatch') : t('User:passwordsDoNotMatch')}
|
|
151
|
+
</div>
|
|
152
|
+
)}
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<div className="auth-create-password__actions">
|
|
156
|
+
<Button
|
|
157
|
+
type="submit"
|
|
158
|
+
variant="primary"
|
|
159
|
+
isLoading={isLoading}
|
|
160
|
+
disabled={isLoading}
|
|
161
|
+
>
|
|
162
|
+
{t('User:submit')}
|
|
163
|
+
</Button>
|
|
164
|
+
|
|
165
|
+
{onResetInstead && (
|
|
166
|
+
<button
|
|
167
|
+
type="button"
|
|
168
|
+
className="auth-create-password__reset-link"
|
|
169
|
+
onClick={onResetInstead}
|
|
170
|
+
disabled={isLoading}
|
|
171
|
+
>
|
|
172
|
+
{t('User:resetPasswordInstead')}
|
|
173
|
+
</button>
|
|
174
|
+
)}
|
|
175
|
+
</div>
|
|
176
|
+
</form>
|
|
177
|
+
</AuthLayout>
|
|
178
|
+
)
|
|
179
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { useForm } from 'react-hook-form'
|
|
3
|
+
import { useTranslation } from 'react-i18next'
|
|
4
|
+
import { AuthLayout } from '../AuthLayout'
|
|
5
|
+
import { FormField } from '../../../components/FormField'
|
|
6
|
+
import { Button } from '../../../components/Button'
|
|
7
|
+
import { SecurityIcon } from '../../../icons'
|
|
8
|
+
import emailRule from '@licklist/plugins/dist/validation/Rules/emailRule'
|
|
9
|
+
import './LoginPage.scss'
|
|
10
|
+
|
|
11
|
+
type FormValues = {
|
|
12
|
+
email: string
|
|
13
|
+
password: string
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export interface LoginPageProps {
|
|
17
|
+
onSubmit: (email: string, password: string) => Promise<void> | void
|
|
18
|
+
onForgotPassword?: () => void
|
|
19
|
+
isLoading?: boolean
|
|
20
|
+
error?: string
|
|
21
|
+
version?: string
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const LoginPage: React.FC<LoginPageProps> = ({
|
|
25
|
+
onSubmit,
|
|
26
|
+
onForgotPassword,
|
|
27
|
+
isLoading = false,
|
|
28
|
+
error,
|
|
29
|
+
version,
|
|
30
|
+
}) => {
|
|
31
|
+
const { t } = useTranslation(['Validation', 'User'])
|
|
32
|
+
const { register, handleSubmit, formState: { errors } } = useForm<FormValues>({ mode: 'onChange' })
|
|
33
|
+
|
|
34
|
+
const onFormSubmit = async (data: FormValues) => {
|
|
35
|
+
await onSubmit(data.email, data.password)
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<AuthLayout
|
|
40
|
+
badgeLabel={t('User:login')}
|
|
41
|
+
icon={<SecurityIcon />}
|
|
42
|
+
title={t('User:login')}
|
|
43
|
+
subtitle={t('User:loginSubtitle')}
|
|
44
|
+
version={version}
|
|
45
|
+
error={error}
|
|
46
|
+
>
|
|
47
|
+
<form className="auth-login" onSubmit={handleSubmit(onFormSubmit)} noValidate>
|
|
48
|
+
<FormField
|
|
49
|
+
className="auth-login__field"
|
|
50
|
+
label={t('User:emailAddress')}
|
|
51
|
+
type="email"
|
|
52
|
+
disabled={isLoading}
|
|
53
|
+
error={errors.email?.message}
|
|
54
|
+
{...register('email', {
|
|
55
|
+
required: t('Validation:fieldRequired', { attribute: t('User:email') }) as string,
|
|
56
|
+
pattern: {
|
|
57
|
+
value: emailRule,
|
|
58
|
+
message: t('Validation:fieldValidEmail', { attribute: t('User:email') }) as string,
|
|
59
|
+
},
|
|
60
|
+
})}
|
|
61
|
+
/>
|
|
62
|
+
|
|
63
|
+
<div className="auth-login__field--last">
|
|
64
|
+
<FormField
|
|
65
|
+
label={t('User:password')}
|
|
66
|
+
type="password"
|
|
67
|
+
disabled={isLoading}
|
|
68
|
+
error={errors.password?.message}
|
|
69
|
+
{...register('password', {
|
|
70
|
+
required: t('Validation:fieldRequired', { attribute: t('User:password') }) as string,
|
|
71
|
+
})}
|
|
72
|
+
/>
|
|
73
|
+
{onForgotPassword && (
|
|
74
|
+
<button
|
|
75
|
+
type="button"
|
|
76
|
+
className="auth-login__forgot"
|
|
77
|
+
onClick={onForgotPassword}
|
|
78
|
+
disabled={isLoading}
|
|
79
|
+
>
|
|
80
|
+
{t('User:forgotPassword')}
|
|
81
|
+
</button>
|
|
82
|
+
)}
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div className="auth-login__actions">
|
|
86
|
+
<Button
|
|
87
|
+
type="submit"
|
|
88
|
+
variant="primary"
|
|
89
|
+
isLoading={isLoading}
|
|
90
|
+
disabled={isLoading}
|
|
91
|
+
>
|
|
92
|
+
{t('User:login')}
|
|
93
|
+
</Button>
|
|
94
|
+
</div>
|
|
95
|
+
</form>
|
|
96
|
+
</AuthLayout>
|
|
97
|
+
)
|
|
98
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
.auth-reset {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 0;
|
|
5
|
+
|
|
6
|
+
&__description {
|
|
7
|
+
font-family: var(--font-family-sans, 'Geist', sans-serif);
|
|
8
|
+
font-size: 15px;
|
|
9
|
+
font-weight: 400;
|
|
10
|
+
line-height: 1.4;
|
|
11
|
+
color: var(--label-primary);
|
|
12
|
+
margin: 0 0 24px;
|
|
13
|
+
padding: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&__field {
|
|
17
|
+
margin-bottom: 24px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&__actions {
|
|
21
|
+
margin-bottom: 16px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&__footer {
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
gap: 8px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&__footer-text {
|
|
31
|
+
font-family: var(--font-family-sans, 'Geist', sans-serif);
|
|
32
|
+
font-size: 15px;
|
|
33
|
+
font-weight: 400;
|
|
34
|
+
color: var(--label-primary);
|
|
35
|
+
margin: 0;
|
|
36
|
+
padding: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&__link {
|
|
40
|
+
color: var(--label-action);
|
|
41
|
+
text-decoration: underline;
|
|
42
|
+
background: none;
|
|
43
|
+
border: none;
|
|
44
|
+
padding: 0;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
font-family: inherit;
|
|
47
|
+
font-size: inherit;
|
|
48
|
+
font-weight: inherit;
|
|
49
|
+
|
|
50
|
+
&:hover {
|
|
51
|
+
color: var(--label-action);
|
|
52
|
+
text-decoration: none;
|
|
53
|
+
opacity: 0.8;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&__error {
|
|
58
|
+
display: flex;
|
|
59
|
+
align-items: center;
|
|
60
|
+
gap: 8px;
|
|
61
|
+
padding: 10px 12px;
|
|
62
|
+
border-radius: 8px;
|
|
63
|
+
background-color: var(--surface-status-error);
|
|
64
|
+
border: 1px solid var(--border-status-error);
|
|
65
|
+
font-family: var(--font-family-sans, 'Geist', sans-serif);
|
|
66
|
+
font-size: 13px;
|
|
67
|
+
color: var(--label-status-error);
|
|
68
|
+
margin-bottom: 16px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&__success {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
gap: 8px;
|
|
75
|
+
padding: 10px 12px;
|
|
76
|
+
border-radius: 8px;
|
|
77
|
+
background-color: var(--surface-status-success);
|
|
78
|
+
border: 1px solid var(--border-status-success);
|
|
79
|
+
font-family: var(--font-family-sans, 'Geist', sans-serif);
|
|
80
|
+
font-size: 13px;
|
|
81
|
+
color: var(--label-status-success);
|
|
82
|
+
margin-bottom: 16px;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { useForm } from 'react-hook-form'
|
|
3
|
+
import { useTranslation } from 'react-i18next'
|
|
4
|
+
import { AuthLayout } from '../AuthLayout'
|
|
5
|
+
import { FormField } from '../../../components/FormField'
|
|
6
|
+
import { Button } from '../../../components/Button'
|
|
7
|
+
import { RefreshIcon } from '../../../icons'
|
|
8
|
+
import emailRule from '@licklist/plugins/dist/validation/Rules/emailRule'
|
|
9
|
+
import './ResetPasswordPage.scss'
|
|
10
|
+
|
|
11
|
+
type FormValues = {
|
|
12
|
+
email: string
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export interface ResetPasswordPageProps {
|
|
16
|
+
onSubmit: (email: string) => Promise<void> | void
|
|
17
|
+
onBackToLogin?: () => void
|
|
18
|
+
isLoading?: boolean
|
|
19
|
+
error?: string
|
|
20
|
+
successMessage?: string
|
|
21
|
+
version?: string
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const ResetPasswordPage: React.FC<ResetPasswordPageProps> = ({
|
|
25
|
+
onSubmit,
|
|
26
|
+
onBackToLogin,
|
|
27
|
+
isLoading = false,
|
|
28
|
+
error,
|
|
29
|
+
successMessage,
|
|
30
|
+
version,
|
|
31
|
+
}) => {
|
|
32
|
+
const { t } = useTranslation(['Validation', 'User'])
|
|
33
|
+
const { register, handleSubmit, formState: { errors } } = useForm<FormValues>({ mode: 'onChange' })
|
|
34
|
+
|
|
35
|
+
const onFormSubmit = async (data: FormValues) => {
|
|
36
|
+
await onSubmit(data.email)
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<AuthLayout
|
|
41
|
+
badgeLabel={t('User:resetPasswordTitle')}
|
|
42
|
+
icon={<RefreshIcon />}
|
|
43
|
+
title={t('User:resetPasswordTitle')}
|
|
44
|
+
subtitle={t('User:resetPasswordSubtitle')}
|
|
45
|
+
version={version}
|
|
46
|
+
error={error}
|
|
47
|
+
successMessage={successMessage}
|
|
48
|
+
>
|
|
49
|
+
<form className="auth-reset" onSubmit={handleSubmit(onFormSubmit)} noValidate>
|
|
50
|
+
<p className="auth-reset__description">
|
|
51
|
+
{t('User:resetPasswordDescription')}
|
|
52
|
+
</p>
|
|
53
|
+
|
|
54
|
+
<FormField
|
|
55
|
+
className="auth-reset__field"
|
|
56
|
+
label={t('User:emailAddress')}
|
|
57
|
+
type="email"
|
|
58
|
+
disabled={isLoading}
|
|
59
|
+
error={errors.email?.message}
|
|
60
|
+
{...register('email', {
|
|
61
|
+
required: t('Validation:fieldRequired', { attribute: t('User:email') }) as string,
|
|
62
|
+
pattern: {
|
|
63
|
+
value: emailRule,
|
|
64
|
+
message: t('Validation:fieldValidEmail', { attribute: t('User:email') }) as string,
|
|
65
|
+
},
|
|
66
|
+
})}
|
|
67
|
+
/>
|
|
68
|
+
|
|
69
|
+
<div className="auth-reset__actions">
|
|
70
|
+
<Button
|
|
71
|
+
type="submit"
|
|
72
|
+
variant="primary"
|
|
73
|
+
isLoading={isLoading}
|
|
74
|
+
disabled={isLoading}
|
|
75
|
+
>
|
|
76
|
+
{t('User:resetPasswordTitle')}
|
|
77
|
+
</Button>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div className="auth-reset__footer">
|
|
81
|
+
{onBackToLogin && (
|
|
82
|
+
<p className="auth-reset__footer-text">
|
|
83
|
+
{t('User:resetPasswordAlreadyAccount')}{' '}
|
|
84
|
+
<button
|
|
85
|
+
type="button"
|
|
86
|
+
className="auth-reset__link"
|
|
87
|
+
onClick={onBackToLogin}
|
|
88
|
+
disabled={isLoading}
|
|
89
|
+
>
|
|
90
|
+
{t('User:login')}
|
|
91
|
+
</button>
|
|
92
|
+
.
|
|
93
|
+
</p>
|
|
94
|
+
)}
|
|
95
|
+
<p className="auth-reset__footer-text">
|
|
96
|
+
{t('User:forFurtherSupport')}{' '}
|
|
97
|
+
<a
|
|
98
|
+
href="mailto:support@booked.it"
|
|
99
|
+
className="auth-reset__link"
|
|
100
|
+
>
|
|
101
|
+
{t('User:contactUs')}
|
|
102
|
+
</a>
|
|
103
|
+
.
|
|
104
|
+
</p>
|
|
105
|
+
</div>
|
|
106
|
+
</form>
|
|
107
|
+
</AuthLayout>
|
|
108
|
+
)
|
|
109
|
+
}
|