1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-18 20:59:39 +02:00
Maybe/app/views/registrations/new.html.erb
neo773 65e1bc6edd
Feature: Implement Mobile Responsiveness (#2092)
* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* format

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* fix conflict

* fix conflict

* chore: run rubocop

* fix test

* update PWA logo

* fix tests

* chore: lint

* fix test

* Refactor: Remove duplicate data attribute in activity partial and add chat form rendering in chats index

---------

Co-authored-by: Josh Pigford <josh@joshpigford.com>
2025-04-18 08:23:10 -05:00

97 lines
4.1 KiB
Text

<%
header_title @invitation ? t(".join_family_title", family: @invitation.family.name) : t(".title")
%>
<% if self_hosted_first_login? %>
<div class="fixed inset-0 w-full h-fit bg-gray-25 p-5 border-b border-secondary flex flex-col gap-3 items-center text-center mb-12">
<h2 class="font-bold text-xl"><%= t(".welcome_title") %></h2>
<p class="text-secondary text-sm"><%= t(".welcome_body") %></p>
</div>
<% elsif @invitation %>
<div class="space-y-1 mb-6 text-center">
<p class="text-secondary">
<%= t(".invitation_message",
inviter: @invitation.inviter.display_name,
role: t(".role_#{@invitation.role}")) %>
</p>
</div>
<% end %>
<% if @user.errors.present? %>
<div class="text-red-600 flex items-center gap-2">
<%= lucide_icon "circle-alert", class: "w-5 h-5" %>
<p class="text-sm"><%= @user.errors.full_messages.to_sentence %></p>
</div>
<% end %>
<%= styled_form_with model: @user, url: registration_path, class: "space-y-4" do |form| %>
<%= form.email_field :email,
autofocus: false,
autocomplete: "email",
required: "required",
placeholder: "you@example.com",
label: true,
disabled: @invitation.present? %>
<% if invite_code_required? && !@invitation %>
<%= form.text_field :invite_code, required: "required", label: true, value: params[:invite] %>
<% end %>
<%= form.hidden_field :invitation, value: @invitation&.token %>
<div data-controller="password-validator">
<div data-controller="password-visibility" class="relative">
<%= form.password_field :password,
autocomplete: "new-password",
required: "required",
placeholder: t(".password_placeholder"),
label: true,
maxlength: 72,
data: {
password_validator_target: "input",
password_visibility_target: "input",
action: "input->password-validator#validate"
} %>
<button type="button"
class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none"
data-action="click->password-visibility#toggle">
<div data-password-visibility-target="showIcon">
<%= lucide_icon "eye", class: "w-5 h-5 text-gray" %>
</div>
<div data-password-visibility-target="hideIcon">
<%= lucide_icon "eye-off", class: "w-5 h-5 text-gray" %>
</div>
</button>
</div>
<div class="flex gap-4 my-4">
<div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="length"></div>
<div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="case"></div>
<div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="number"></div>
<div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="special"></div>
</div>
<div class="space-y-1 my-4">
<div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="length">
<%= lucide_icon "check", class: "w-4 h-4" %>
<span>Minimum 8 characters</span>
</div>
<div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="case">
<%= lucide_icon "check", class: "w-4 h-4" %>
<span>Upper and lowercase letters</span>
</div>
<div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="number">
<%= lucide_icon "check", class: "w-4 h-4" %>
<span>A number (0-9)</span>
</div>
<div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="special">
<%= lucide_icon "check", class: "w-4 h-4" %>
<span>A special character (!, @, #, $, %, etc)</span>
</div>
</div>
</div>
<%= form.submit t(".submit") %>
<% end %>