') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); feat(clerk-js): Improve password error feedback animations by desiprisg · Pull Request #1776 · clerk/javascript · GitHub
Skip to content

feat(clerk-js): Improve password error feedback animations - #1776

Merged
desiprisg merged 3 commits into
mainfrom
george/usr-195-revisit-animations-and-debouncing-behavior-for-password
Oct 24, 2023
Merged

feat(clerk-js): Improve password error feedback animations#1776
desiprisg merged 3 commits into
mainfrom
george/usr-195-revisit-animations-and-debouncing-behavior-for-password

Conversation

@desiprisg

@desiprisgdesiprisg commented Sep 25, 2023•
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This PR aims to refactor the form error animations and some internal methods. It also adds debouncing to the password validation, along with some small changes to the types of feedback shown based on the different conditions.

Screen.Recording.2023-09-28.at.19.30.00.mov

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

@changeset-bot

changeset-botBot commented Sep 25, 2023•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 26ef242

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@desiprisg
desiprisgforce-pushed the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch 3 times, most recently from 1fd9157 to b6c7cbdCompareSeptember 27, 2023 16:23
@nikosdouvlis

nikosdouvlis commented Sep 28, 2023

Copy link
Copy Markdown
Member

@desiprisg can you please add a description and a couple of screenshots if needed?

@desiprisgdesiprisg self-assigned this Sep 28, 2023
@desiprisgdesiprisg changed the title feat(clerk-js): Improve password error feedbackfeat(clerk-js): Improve password error feedback animationsSep 28, 2023
@desiprisg
desiprisgforce-pushed the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch from 3d5378e to 16386f3CompareSeptember 28, 2023 16:29
@desiprisg
desiprisg marked this pull request as ready for review September 28, 2023 16:32
@desiprisg
desiprisg requested a review from a team as a code ownerSeptember 28, 2023 16:32
LekoArts
LekoArts reviewed Sep 29, 2023
View reviewed changes
Comment thread.changeset/slimy-singers-glow.md Outdated
panteliselef
panteliselef reviewed Sep 29, 2023
View reviewed changes
Comment threadpackages/clerk-js/src/ui/elements/FormControl.tsx Outdated
Comment threadpackages/clerk-js/src/ui/elements/FormControl.tsx Outdated
Comment threadpackages/clerk-js/src/ui/elements/FormControl.tsx Outdated
Comment threadpackages/clerk-js/src/ui/elements/FormControl.tsx Outdated
Comment threadpackages/clerk-js/src/ui/elements/FormControl.tsx Outdated
Comment threadpackages/clerk-js/src/ui/elements/PasswordInput.tsx Outdated
Comment threadpackages/clerk-js/src/ui/hooks/usePassword.ts
Comment threadpackages/clerk-js/src/ui/utils/useFormControl.ts
@desiprisg
desiprisgforce-pushed the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch 3 times, most recently from a053296 to 8d9d71aCompareOctober 3, 2023 16:39
brkalow
brkalow reviewed Oct 17, 2023
View reviewed changes

@brkalowbrkalow left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Nothing blocking, just some questions and observations.

Comment threadpackages/clerk-js/src/ui/elements/FormControl.tsx Outdated
Comment threadpackages/clerk-js/src/ui/elements/FormControl.tsx
Comment threadpackages/clerk-js/src/ui/elements/FormControl.tsx
Comment threadpackages/clerk-js/src/ui/elements/FormControl.tsx
Comment threadpackages/clerk-js/src/ui/elements/FormControl.tsx
Comment threadpackages/clerk-js/src/ui/elements/FormControl.tsx Outdated
Comment threadpackages/clerk-js/src/ui/elements/PasswordInput.tsx
Comment threadpackages/clerk-js/src/ui/elements/PasswordInput.tsx Outdated
Comment threadpackages/clerk-js/src/ui/elements/PasswordInput.tsx
Comment threadpackages/clerk-js/src/ui/utils/useFormControl.ts
@desiprisg
desiprisgforce-pushed the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch from 55cf3b0 to b629fd3CompareOctober 17, 2023 23:12
panteliselef
panteliselef reviewed Oct 18, 2023
View reviewed changes
Comment threadpackages/clerk-js/src/utils/passwords/password.ts
@panteliselef
panteliselef self-requested a review October 19, 2023 23:40
panteliselef
panteliselef approved these changes Oct 19, 2023
View reviewed changes

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's ship this !!

@desiprisg
desiprisgforce-pushed the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch from acef2d5 to 1ae3414CompareOctober 23, 2023 19:35
@desiprisg
desiprisg deleted the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch October 23, 2023 22:49
@desiprisg
desiprisg restored the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch October 23, 2023 22:55
@desiprisgdesiprisg reopened this Oct 23, 2023
@panteliselef
panteliselef self-requested a review October 24, 2023 14:52
@desiprisg
feat(clerk-js): Improve password error feedback
e186746
feat(clerk-js): Add PasswordInput validation debouncing
refactor(clerk-js): Remove unused props
fix(clerk-js): Add infoText for VerifyDomainPage
fix(clerk-js): Smooth error animation and min height
@desiprisg
fix(clerk-js): Form error animation polishing
8173f98
test(clerk-js): Fix tests for password validation
chore(clerk-js): Changeset
chore(clerk-js): Improve changeset
fix(clerk-js): Address PR comments
refactor(clerk-js): Avoid useEffect usage for feedbacks and maxHeight
fix(clerk-js): Add clearFeedback to types
fix(clerk-js): Delay feedback after focus/blur on input elements
@desiprisg
fix(clerk-js): Wait for zxcvbn before showing success message
26ef242
chore(clerk-js): Replace NodeJS.Timeout type
refactor(clerk-js): Extract inAnimation ternary into variable
refactor(clerk-js): Handle the undefined case in getElementProps
@desiprisg
desiprisgforce-pushed the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch from d14134d to 26ef242CompareOctober 24, 2023 19:03
@desiprisg
desiprisg added this pull request to the merge queue Oct 24, 2023
Merged via the queue into main with commit 9e57e94Oct 24, 2023
@desiprisg
desiprisg deleted the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch October 24, 2023 19:35
This was referenced Oct 24, 2023
Closed
Merged
@clerk-cookieclerk-cookie mentioned this pull request Nov 1, 2023
Merged
@clerk-cookie

clerk-cookie commented Oct 24, 2024

Copy link
Copy Markdown
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerkclerk locked as resolved and limited conversation to collaborators Oct 24, 2024
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@brkalowbrkalowbrkalow left review comments
+2 more reviewers
@LekoArtsLekoArtsLekoArts left review comments
@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@desiprisgdesiprisg

Labels

clerk-js

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@desiprisg@nikosdouvlis@clerk-cookie@brkalow@LekoArts@panteliselef