extras - stevendevs/joinjonb-rails-app GitHub Wiki
<% flash.each do |type, message| %>
<% alert_type = case type
when "notice" then "success"
when "alert" then "error"
when "warning" then "warning"
when "info" then "info"
else "info"
end %>
<%= render "shared/alert", type: alert_type, message: message %>
<% end %>
<!-- Success Alert -->
<div class="flex items-center p-4 mb-4 bg-green-100 border-l-4 border-green-500 rounded-standard dark:bg-green-900/30 dark:border-green-500">
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<div>
<span class="font-medium text-green-700 dark:text-green-400">Success!</span>
<p class="text-sm text-green-600 dark:text-green-300">Your account has been created successfully.</p>
</div>
<button class="ml-auto text-green-500 hover:text-green-700">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Error Alert -->
<div class="flex items-center p-4 mb-4 bg-red-100 border-l-4 border-red-500 rounded-standard dark:bg-red-900/30 dark:border-red-500 animate-move-down">
<svg class="w-5 h-5 text-red-500 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
<div>
<span class="font-medium text-red-700 dark:text-red-400">Error!</span>
<p class="text-sm text-red-600 dark:text-red-300">There was a problem with your submission.</p>
</div>
<button class="ml-auto text-red-500 hover:text-red-700">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Warning Alert (using amarillo-mostaza) -->
<div class="flex items-center p-4 mb-4 bg-amarillo-mostaza/20 border-l-4 border-amarillo-mostaza rounded-standard dark:bg-amarillo-mostaza/10 dark:border-amarillo-mostaza">
<svg class="w-5 h-5 text-amber-600 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
<div>
<span class="font-medium text-amber-700 dark:text-amber-400">Warning!</span>
<p class="text-sm text-amber-600 dark:text-amber-300">Your password will expire in 3 days.</p>
</div>
<button class="ml-auto text-amber-500 hover:text-amber-700">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Info Alert (using blue-sky) -->
<div class="flex items-center p-4 mb-4 bg-blue-sky-DEFAULT/10 border-l-4 border-blue-sky-DEFAULT rounded-standard dark:bg-blue-sky-DEFAULT/20 dark:border-blue-sky-light">
<svg class="w-5 h-5 text-blue-sky-DEFAULT mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zm-1 9a1 1 0 01-1-1v-4a1 1 0 112 0v4a1 1 0 01-1 1z" clip-rule="evenodd"></path>
</svg>
<div>
<span class="font-medium text-blue-sky-DEFAULT dark:text-blue-sky-light">Information!</span>
<p class="text-sm text-blue-600 dark:text-blue-300">Your profile has been updated.</p>
</div>
<button class="ml-auto text-blue-sky-DEFAULT hover:text-blue-700">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Custom Pink Alert (using onlypink) -->
<div class="flex items-center p-4 mb-4 bg-onlypink/20 border-l-4 border-onlypink rounded-complete dark:bg-onlypink/10 dark:border-onlypink-dark shadow-md">
<svg class="w-5 h-5 text-pink-600 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
</svg>
<div>
<span class="font-medium text-pink-700 dark:text-pink-400">Thank you!</span>
<p class="text-sm text-pink-600 dark:text-pink-300">Your feedback has been received.</p>
</div>
<button class="ml-auto text-pink-500 hover:text-pink-700">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Floating Alert with Animation -->
<div class="fixed bottom-4 right-4 flex items-center p-4 bg-white dark:bg-primary-dark border-l-4 border-blue-sky-DEFAULT rounded-standard shadow-lg animate-move-down">
<svg class="w-5 h-5 text-blue-sky-DEFAULT mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
</svg>
<div>
<span class="font-medium text-gray-800 dark:text-white">Notification</span>
<p class="text-sm text-gray-600 dark:text-gray-300">You have a new message.</p>
</div>
<button class="ml-auto text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<body class="min-h-screen p-6">
<div class="grid grid-cols-1 lg:grid-cols-[400px_1fr] gap-8">
<!-- Left Sidebar -->
<div class="space-y-8">
<!-- Profile Header -->
<div class="flex items-center gap-4">
<img src="/placeholder.svg" alt="Profile" width="60" height="60" class="rounded-full" />
<div>
<h1 class="text-2xl font-mono">TONY B.</h1>
<p class="text-gray-400">PRODUCT DESIGNER</p>
</div>
</div>
<!-- Bio -->
<div class="space-y-6">
<p class="text-gray-300 text-lg leading-relaxed">
I specialize in crafting visually striking and user-friendly digital experiences. With a passion for blending
aesthetics and functionality, I bring ideas to life, creating innovative solutions in the dynamic world of web
design.
</p>
<button class="border border-white text-white rounded-full px-4 py-2 hover:bg-white hover:text-black transition">More about Me</button>
</div>
<!-- Social Links -->
<div class="space-y-4">
<div class="flex gap-4">
<a href="#" class="p-2 hover:bg-gray-800 rounded-full">
<img src="/twitter-icon.svg" alt="Twitter" class="w-5 h-5" />
</a>
<a href="#" class="p-2 hover:bg-gray-800 rounded-full">
<img src="/linkedin-icon.svg" alt="LinkedIn" class="w-5 h-5" />
</a>
<a href="#" class="p-2 hover:bg-gray-800 rounded-full">
<img src="/youtube-icon.svg" alt="YouTube" class="w-5 h-5" />
</a>
</div>
<div class="text-gray-400 text-sm">
<p>© by UIhub in Framer</p>
<div class="flex gap-4">
<a href="#" class="hover:text-white">Licensing</a>
<a href="#" class="hover:text-white">404</a>
</div>
</div>
</div>
</div>
<!-- Right Content -->
<div class="space-y-8">
<!-- Mobile Menu -->
<div class="flex justify-end lg:hidden">
<button class="p-2 hover:bg-gray-800 rounded-full">
<svg class="w-6 h-6" fill="none" stroke="currentColor"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
<!-- Projects -->
<section>
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-mono">My Projects</h2>
<button class="hover:underline">→</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="relative aspect-square bg-gray-900 rounded-lg overflow-hidden">
<img src="/placeholder.svg" alt="Project 1" class="object-cover w-full h-full" />
</div>
<div class="relative aspect-square bg-gray-900 rounded-lg overflow-hidden">
<img src="/placeholder.svg" alt="Project 2" class="object-cover w-full h-full" />
</div>
<div class="relative aspect-square bg-gray-900 rounded-lg overflow-hidden">
<img src="/placeholder.svg" alt="Project 3" class="object-cover w-full h-full" />
</div>
</div>
</section>
<!-- Stack -->
<section class="bg-blue-600 rounded-xl p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-mono">My Stack</h2>
<button class="text-white hover:underline">→</button>
</div>
<div class="flex gap-4">
<div class="w-12 h-12 bg-white rounded-xl"></div>
<div class="w-12 h-12 bg-white rounded-xl"></div>
<div class="w-12 h-12 bg-white rounded-xl"></div>
<div class="w-12 h-12 bg-white rounded-xl"></div>
<div class="w-12 h-12 bg-white rounded-xl"></div>
</div>
</section>
<!-- Contact and Clients -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Contact -->
<section class="relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-900 to-gray-800 p-6">
<h2 class="text-2xl font-mono mb-4">Contact</h2>
<button class="absolute right-4 top-4 hover:underline">→</button>
</section>
<!-- Happy Clients -->
<section class="bg-gray-900 rounded-xl p-6">
<div class="flex items-center gap-2 mb-2">
<!-- Star Icons -->
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921..."/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921..."/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921..."/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921..."/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921..."/></svg>
</div>
<h3 class="text-4xl font-bold mb-4">100%</h3>
<p class="text-gray-400">Happy Clients</p>
<div class="flex -space-x-2 mt-4">
<img src="/placeholder.svg" alt="Client 1" class="w-10 h-10 rounded-full border-2 border-gray-900" />
<img src="/placeholder.svg" alt="Client 2" class="w-10 h-10 rounded-full border-2 border-gray-900" />
<img src="/placeholder.svg" alt="Client 3" class="w-10 h-10 rounded-full border-2 border-gray-900" />
</div>
</section>
</div>
</div>
</div>
</body>
<nav data-controller="mobile-menu" class="fixed top-0 w-full bg-joinjob-yellow flex flex-col sm:flex-row justify-between items-stretch h-auto sm:h-14 px-3 py-2 sm:py-0 z-10 shadow-lg ">
<!-- Logo + Toggle -->
<div class="flex justify-between items-center w-full sm:w-auto border-b sm:border-b-0 sm:border-r border-white/40 pb-2 sm:pb-0 sm:pr-3 mb-2 sm:mb-0">
<%= link_to root_path, class: "text-xl sm:text-2xl font-black text-white/80 hover:text-white transition-colors" do %>
<h1>JoinJob</h1>
<% end %>
<button data-mobile-menu-target="toggle" data-action="click->mobile-menu#toggleMenu" class="sm:hidden text-white/80 hover:text-white ">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- Menu principal -->
<div data-mobile-menu-target="menu" id="mobile-menu"
class="hidden sm:flex flex-col sm:flex-row items-stretch space-y-3 sm:space-y-0 sm:space-x-4 w-full sm:w-auto">
<!-- Search -->
<% if current_user && current_user.has_role?(:admin) %>
<div class="w-full sm:w-auto sm:flex sm:items-center">
<%= search_form_for @ransack_courses, as: :courses_search, url: courses_path, class: "flex" do |f| %>
<div class="flex w-full sm:w-auto">
<%= f.search_field :title_cont,
placeholder: 'Find a course',
autocomplete: :off,
class: "flex-1 sm:w-64 px-3 py-2 text-sm border border-white/30 rounded-l-lg bg-white/10 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-transparent" %>
<%= f.submit 'Search',
class: "px-4 py-2 text-sm font-medium text-yellow-600 bg-white rounded-r-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white/50 transition-colors cursor-pointer" %>
</div>
<% end %>
</div>
<% end %>
<!-- Dropdown -->
<div class="sm:flex sm:items-center ">
<% items = [
["JOINJOB", root_path],
["COURSES", courses_path],
["OPTIONS", edit_user_registration_path],
["USERS", users_path],
["MAP", explore_path],
["ACTIVITY", pages_activity_path]
].compact %>
<%= select_tag :navigation,
options_for_select(items, request.path),
onchange: "Turbo.visit(this.value)",
data: { turbo_frame: :main },
class: "bg-yellow-500 text-white font-medium text-sm focus:outline-none focus:ring-2 focus:ring-white/50 rounded-full px-2 py-1 cursor-pointer shadow-md sm:w-full md:w-full " %>
</div>
<!-- User Actions -->
<div class="sm:flex sm:items-center">
<% if user_signed_in? %>
<%= link_to 'Sign out',
destroy_user_session_path,
data: { turbo_method: :delete },
class: "text-white bg-red-600 hover:bg-red-700 rounded-full font-medium text-sm px-4 sm:px-5 py-2 sm:py-2.5 text-center transition-colors shadow-md hover:shadow-lg" %>
<% else %>
<%= link_to 'Sign in',
new_user_session_path,
class: "text-yellow-600 bg-white hover:bg-gray-100 rounded-full font-medium text-sm px-4 sm:px-5 py-2 sm:py-2.5 text-center transition-colors shadow-md hover:shadow-lg" %>
<% end %>
</div>
</div>
</nav>
import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label"
export function LoginForm({ className, ...props }: React.ComponentProps<"div">) { return ( <div className={cn("flex flex-col gap-6", className)} {...props}>
Email
Password
Forgot your password?
Or continue with
Login with Apple
Login with Google
Login with Meta
Don't have an account?{" "}
Sign up
By clicking continue, you agree to our Terms of Service and Privacy Policy.
)
}
<%= link_to root_path, class: "text-xl sm:text-2xl font-black text-white/80 hover:text-white transition-colors" do %>
<% end %>
<% if current_user && current_user.has_role?(:admin) %>
<%= search_form_for @ransack_courses, as: :courses_search, url: courses_path, class: "flex" do |f| %>
<% end %>
<%= f.search_field :title_cont,
placeholder: 'Find a course',
autocomplete: :off,
class: "flex-1 sm:w-64 px-3 py-2 text-sm border border-white/30 rounded-l-lg bg-white/10 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-transparent" %>
<%= f.submit 'Search',
class: "px-4 py-2 text-sm font-medium text-yellow-600 bg-white rounded-r-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white/50 transition-colors cursor-pointer" %>
<% end %>
<% items = [
["JOINJOB", root_path],
["COURSES", courses_path],
["OPTIONS", edit_user_registration_path],
["USERS", users_path],
["MAP", explore_path],
["ACTIVITY", pages_activity_path],
["LESSONS", lessons_path]
].compact %>
<%= select_tag :navigation, options_for_select(items, request.path), onchange: "Turbo.visit(this.value)", data: { turbo_frame: :main }, class: "bg-yellow-500 min-w-40 sm:w-20 text-white font-medium text-sm focus:outline-none focus:ring-2 focus:ring-white/50 rounded-full px-2 py-1 cursor-pointer shadow-md sm:w-full md:w-full " %>
<% if user_signed_in? %>
<%= link_to 'Sign out',
destroy_user_session_path,
data: { turbo_method: :delete },
class: "text-white bg-red-600 hover:bg-red-700 rounded-full font-medium text-sm px-4 sm:px-5 py-2 sm:py-2.5 text-center transition-colors shadow-md hover:shadow-lg" %>
<% else %>
<%= link_to 'Sign in',
new_user_session_path,
class: "text-yellow-600 bg-white hover:bg-gray-100 rounded-full font-medium text-sm px-4 sm:px-5 py-2 sm:py-2.5 text-center transition-colors shadow-md hover:shadow-lg" %>
<% end %>
<%= link_to root_path, class: "text-xl sm:text-2xl font-black text-white/80 hover:text-white transition-colors" do %>
<% end %>
<% if current_user && current_user.has_role?(:admin) %>
<%= search_form_for @ransack_courses, as: :courses_search, url: courses_path, class: "flex" do |f| %>
<% end %>
<%= f.search_field :title_cont,
placeholder: 'Find a course',
autocomplete: :off,
class: "flex-1 sm:w-64 px-3 py-2 text-sm border border-white/30 rounded-l-lg bg-white/10 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-transparent" %>
<%= f.submit 'Search',
class: "px-4 py-2 text-sm font-medium text-yellow-600 bg-white rounded-r-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white/50 transition-colors cursor-pointer" %>
<% end %>
<% items = [
["JOINJOB", root_path],
["COURSES", courses_path],
["OPTIONS", edit_user_registration_path],
["USERS", users_path],
["MAP", explore_path],
["ACTIVITY", pages_activity_path],
["LESSONS", lessons_path]
].compact %>
<%= select_tag :navigation, options_for_select(items, request.path), onchange: "Turbo.visit(this.value)", data: { turbo_frame: :main }, class: "bg-yellow-500 min-w-40 sm:w-20 text-white font-medium text-sm focus:outline-none focus:ring-2 focus:ring-white/50 rounded-full px-2 py-1 cursor-pointer shadow-md sm:w-full md:w-full " %>
<% if user_signed_in? %>
<%= link_to 'Sign out',
destroy_user_session_path,
data: { turbo_method: :delete },
class: "text-white bg-red-600 hover:bg-red-700 rounded-full font-medium text-sm px-4 sm:px-5 py-2 sm:py-2.5 text-center transition-colors shadow-md hover:shadow-lg" %>
<% else %>
<%= link_to 'Sign in',
new_user_session_path,
class: "text-yellow-600 bg-white hover:bg-gray-100 rounded-full font-medium text-sm px-4 sm:px-5 py-2 sm:py-2.5 text-center transition-colors shadow-md hover:shadow-lg" %>
<% end %>
register
<%= render "shared/frame_tab" %>
<div class="card-body">
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "w-full space-y-6" }) do |f| %>
<!-- Email -->
<div>
<label for="user_email" class="block text-sm font-medium text-gray-900">Email</label>
<%= f.input_field :email,
required: true,
autofocus: true,
class: "mt-2 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600",
placeholder: "Email",
autocomplete: "email" %>
</div>
<!-- Password -->
<div>
<label for="user_password" class="block text-sm font-medium text-gray-900">Password</label>
<%= f.input_field :password,
required: true,
class: "mt-2 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600",
placeholder: "Password",
autocomplete: "new-password" %>
<% if @minimum_password_length %>
<p class="mt-1 text-xs text-gray-500"><%= @minimum_password_length %> characters minimum</p>
<% end %>
</div>
<!-- Confirm Password -->
<div>
<label for="user_password_confirmation" class="block text-sm font-medium text-gray-900">Confirm Password</label>
<%= f.input_field :password_confirmation,
required: true,
class: "mt-2 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600",
placeholder: "Confirm Password",
autocomplete: "new-password" %>
</div>
<!-- Submit -->
<div>
<%= f.button :submit, "Sign up", class: "w-full inline-flex justify-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
</div>
<% end %>
<div class="mt-4 text-center text-sm">
<p class="text-gray-600">
Already have an account?
<%= link_to "Log in", new_session_path(resource_name), class: "text-indigo-600 hover:underline" %>
</p>
</div>
</div>
</div>
session
<%= render "shared/frame_tab" %>
<div class="card-body">
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: "w-full space-y-6" }) do |f| %>
<!-- Email -->
<div>
<label for="user_email" class="block text-sm font-medium text-gray-900">Email</label>
<%= f.input_field :email,
required: false,
autofocus: true,
class: "mt-2 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600",
placeholder: "Email",
autocomplete: "email" %>
</div>
<!-- Password -->
<div>
<label for="user_password" class="block text-sm font-medium text-gray-900">Password</label>
<%= f.input_field :password,
required: false,
class: "mt-2 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600",
placeholder: "Password",
autocomplete: "current-password" %>
</div>
<!-- Remember Me -->
<% if devise_mapping.rememberable? %>
<div class="flex items-center gap-x-2">
<%= f.check_box :remember_me, id: "remember_me", class: "h-4 w-4 text-indigo-600 border-gray-300 rounded" %>
<label for="remember_me" class="text-sm font-medium text-gray-700">Remember me</label>
</div>
<% end %>
<!-- Forgot password -->
<div class="text-right">
<a href="<%= new_password_path(resource_name) %>" class="text-sm text-indigo-600 hover:underline">Forgot password?</a>
</div>
<!-- Submit -->
<div>
<%= f.button :submit, "Login", class: "w-full inline-flex justify-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
</div>
<% end %>
</div>
</div>