analytics/lib/plausible_web/templates/auth/_onboarding_steps.html.heex
Adrian Gruntkowski 51c1138d0d
Implement better user password validation (#3344)
* Add zxcvbn dependency

* Change password length range requirement from 6-64 to 12-128

* Reimplement register form in LV

* Implement server-side check for password strength

* Add rudimentary strength meter

* Make password input with strength a separate component and improve it

* Fix existing tests to provide strong enough password

* Apply formatting

* Replace existing registration form with new one

* Hide built-in label in `.input` component when none provided

* Crop password to first 32 chars for analysis by zxcvbn

* Add tests for new form components

* Integrate hCaptcha into LV

* Fix existing AuthController tests

* Add tests for Live.RegisterForm

* Hide strength meter when password input is empty

* Randomize client IP in headers during tests to avoid hitting rate limit

* Apply auxilliary formatting fixes to AuthController

* Integrate registration from invitation into LV registration logic

* Fix existing password set and reset forms

* Make `password_length_hint` component more customizable

* Optimize `Auth.User.set_password/2`

* Remove unnecessary attribute from registration form

* Move password set and reset forms to LV

* Add tests for SetPasswordForm LV component

* Add tests for password checks in `Auth.User`

* Document code a bit

* Implement simpler approach to hCaptcha integration

* Update CHANGELOG.md

* Improve consistency of color scheme

* Introduce debounce across all text inputs in registration and password forms

* Fix email input background in register form

* Ensure only single error is rendered for empty password confirmation case

* Remove `/password` form entirely in favor of preferred password reset

* Remove unnecessary `router` option from `live_render` calls

* Make expensive assigns in LV with `assign_new` (h/t @aerosol)

* Accept passwords longer than 32 bytes uniformly as very strong

* Avoid displaying blank error side by side with weak password error

* Make register actions handle errors gracefully

* Render only a single piece of feedback to reduce noise

* Make register and password reset forms pw manager friendly (h/t @cnkk)

* Move registration forms to live routes

* Delete no longer used deadviews

* Adjust registration form in accordance to changes in #3290

* Reintroduce dogfood page path for invitation form from #3290

* Use alternative approach to submitting plausible metrics from LV form

* Rename metrics events and extend tests to account for them
2023-09-25 10:27:29 +02:00

53 lines
2.2 KiB
Plaintext

<div class="pt-6 px-4 sm:px-6 lg:px-8">
<nav class="flex justify-center">
<ol class="space-y-6">
<%= for {step, index} <- Enum.with_index(["Register", "Activate account", "Add site info", "Install snippet"]) do %>
<%= if index < @current_step do %>
<!-- Complete Step -->
<li class="flex items-start">
<span class="flex-shrink-0 relative h-5 w-5 flex items-center justify-center">
<svg
class="h-full w-full text-indigo-600 dark:text-indigo-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
</span>
<span class="ml-3 text-sm font-medium text-gray-500 dark:text-gray-300">
<%= step %>
</span>
</li>
<% end %>
<%= if index == @current_step do %>
<!-- Current Step -->
<li class="flex items-start">
<span class="flex-shrink-0 h-5 w-5 relative flex items-center justify-center">
<span class="absolute h-4 w-4 rounded-full bg-indigo-200 dark:bg-indigo-100"></span>
<span class="relative block w-2 h-2 bg-indigo-600 dark:bg-indigo-500 rounded-full">
</span>
</span>
<span class="ml-3 text-sm font-medium text-indigo-600 dark:text-indigo-500">
<%= step %>
</span>
</li>
<% end %>
<%= if index > @current_step do %>
<!-- Upcoming Step -->
<li class="flex items-start">
<div class="flex-shrink-0 h-5 w-5 relative flex items-center justify-center">
<div class="h-2 w-2 bg-gray-300 dark:bg-gray-700 rounded-full"></div>
</div>
<p class="ml-3 text-sm font-medium text-gray-500 dark:text-gray-300"><%= step %></p>
</li>
<% end %>
<% end %>
</ol>
</nav>
</div>