vault171/app/views/registrations/new.html.erb

<!-- <h1>Sign up</h1>

<%= form_with(url: sign_up_path) do |form| %>
  <% if @user.errors.any? %>
    <div style="color: red">
      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
        <% @user.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div>
    <%= form.label :email, style: "display: block" %>
    <%= form.email_field :email, value: @user.email, required: true, autofocus: true, autocomplete: "email" %>
  </div>

  <div>
    <%= form.label :password, style: "display: block" %>
    <%= form.password_field :password, required: true, autocomplete: "new-password" %>
    <div>12 characters minimum.</div>
  </div>

  <div>
    <%= form.label :password_confirmation, style: "display: block" %>
    <%= form.password_field :password_confirmation, required: true, autocomplete: "new-password" %>
  </div>

  <div>
    <%= form.submit "Sign up" %>
  </div>
<% end %>
-->
<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto w-full max-w-md">
    <!-- App Logo (Paket) -->
    <div class="flex justify-center text-blue-600">
      <svg class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM3 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 019.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
      </svg>
    </div>
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">Konto erstellen</h2>
    <p class="mt-2 text-center text-sm text-gray-600">
      Oder <%= link_to "mit bestehendem Konto anmelden", sign_in_path, class: "font-medium text-blue-600 hover:text-blue-500 transition-colors" %>
    </p>
  </div>

  <div class="mt-8 sm:mx-auto w-full max-w-md">
    <div class="bg-white py-8 px-4 shadow sm:rounded-xl sm:px-10 border border-gray-200">

      <%= form_with(url: sign_up_path, class: "space-y-6") do |form| %>
        
        <!-- Fehlermeldungen bei Validierungsfehlern -->
        <% if @user.errors.any? %>
          <div class="p-4 text-sm text-red-800 rounded-lg bg-red-50 border border-red-200" role="alert">
            <div class="flex items-center gap-2 font-bold mb-2">
              <svg class="h-5 w-5 text-red-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
              </svg>
              <span>Registrierung fehlgeschlagen:</span>
            </div>
            <ul class="list-disc list-inside space-y-0.5 text-xs">
            <% @user.errors.each do |error| %>
              <li><%= error.full_message %></li>
            <% end %>
            </ul>
          </div>
        <% end %>

        <!-- Feld 1: E-Mail-Adresse -->
        <div>
          <%= form.label :email, "E-Mail-Adresse", class: "block text-sm font-medium text-gray-700 mb-1.5" %>
          <div class="relative rounded-md shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0l-7.5-4.615a2.25 2.25 0 01-1.07-1.916V6.75" />
              </svg>
            </div>
            <%= form.email_field :email, required: true, autofocus: true, autocomplete: "email", class: "block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-50/50" %>
          </div>
        </div>

        <!-- Feld 2: Passwort -->
        <div>
          <%= form.label :password, "Passwort", class: "block text-sm font-medium text-gray-700 mb-1.5" %>
          <div class="relative rounded-md shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
              </svg>
            </div>
            <%= form.password_field :password, required: true, autocomplete: "new-password", class: "block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-50/50" %>
          </div>
          <p class="mt-1.5 text-xs text-gray-400">Das Passwort muss mindestens 8 Zeichen lang sein.</p>
        </div>

        <!-- Feld 3: Passwort bestätigen -->
        <div>
          <%= form.label :password_confirmation, "Passwort bestätigen", class: "block text-sm font-medium text-gray-700 mb-1.5" %>
          <div class="relative rounded-md shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
              </svg>
            </div>
            <%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", class: "block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-50/50" %>
          </div>
        </div>

        <!-- Submit Button -->
        <div>
          <%= form.submit "Konto registrieren", class: "w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors cursor-pointer" %>
        </div>
      <% end %>

    </div>
  </div>
</div>