bidouillages avec Devise + Tailwind
This commit is contained in:
parent
e74c99d4a3
commit
dbfbd69a31
|
|
@ -1,3 +1,17 @@
|
|||
class ApplicationController < ActionController::Base
|
||||
before_action :authenticate_user!
|
||||
before_action :authenticate_user!
|
||||
before_action :configure_permitted_parameters, if: :devise_controller?
|
||||
|
||||
protected
|
||||
|
||||
def configure_permitted_parameters
|
||||
devise_parameter_sanitizer.permit(:sign_up, keys: [:display_name])
|
||||
devise_parameter_sanitizer.permit(:account_update, keys: [:display_name])
|
||||
end
|
||||
|
||||
# Uncomment for redirect after login
|
||||
def after_sign_in_path_for(resource)
|
||||
# return the path based on resource
|
||||
'/checks'
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,43 +1,181 @@
|
|||
<h2>Edit <%= resource_name.to_s.humanize %></h2>
|
||||
<div class="w-full">
|
||||
|
||||
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
|
||||
<%= render "devise/shared/error_messages", resource: resource %>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :email %><br />
|
||||
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="font-bold text-4xl">Edit <%= resource_name.to_s.humanize %></h1>
|
||||
<%= link_to "Back", :back, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
|
||||
</div>
|
||||
|
||||
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
|
||||
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
|
||||
<% end %>
|
||||
<div class="py-5 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<!-- We've used 3xl here, but feel free to try other max-widths based on your needs -->
|
||||
<div class="max-w-3xl mx-auto shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
||||
<div class="px-4 py-5 bg-white space-y-8 divide-y divide-gray-200">
|
||||
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
|
||||
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
|
||||
<div>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
|
||||
<%= f.password_field :password, autocomplete: "new-password" %>
|
||||
<% if @minimum_password_length %>
|
||||
<br />
|
||||
<em><%= @minimum_password_length %> characters minimum</em>
|
||||
<% end %>
|
||||
<%= render "devise/shared/error_messages", resource: resource %>
|
||||
|
||||
<div>
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Profile
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<%= f.label :email, class: "block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" %>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex rounded-md shadow-sm">
|
||||
<%= f.email_field :email, autofocus: false, autocomplete: "email", class: "flex-1 block w-full focus:ring-indigo-500 focus:border-indigo-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300", placeholder: "foo@example.com" %>
|
||||
</div>
|
||||
<% if true or devise_mapping.confirmable? && resource.pending_reconfirmation? %>
|
||||
<p class="mt-2 text-sm text-gray-500">Currently waiting confirmation for: <%= resource.email %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6 sm:space-y-5">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="first-name" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
|
||||
First name
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="last-name" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
|
||||
Last name
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="email" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
|
||||
Email address
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input id="email" name="email" type="email" autocomplete="email" class="block max-w-lg w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-5">
|
||||
<div class="flex justify-end">
|
||||
<button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :password_confirmation %><br />
|
||||
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
|
||||
|
||||
|
||||
<div class="py-6 md:grid md:grid-cols-3 md:gap-6">
|
||||
<div class="md:col-span-1">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">Profile</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
This information will be displayed publicly so be careful what you share.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<%= render "devise/shared/error_messages", resource: resource %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<%= f.label :email, class: "block text-sm font-medium text-gray-700" %>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<%= f.email_field :email, autofocus: false, autocomplete: "email", class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300", placeholder: "foo@example.com" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% if true or devise_mapping.confirmable? && resource.pending_reconfirmation? %>
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
Currently waiting confirmation for: <%= resource.email %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<%= f.label :display_name, class: "block text-sm font-medium text-gray-700" %>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<%= f.text_field :display_name, autocomplete: "name", class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<div class="flex justify-between">
|
||||
<%= f.label :password, class: "block text-sm font-medium text-gray-700" %>
|
||||
<span class="text-sm text-gray-500">(leave blank if you don't want to change it)</span>
|
||||
</div>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<%= f.password_field :password, autocomplete: "new-password", class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" %>
|
||||
</div>
|
||||
<% if @minimum_password_length %>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
<em><%= @minimum_password_length %> characters minimum</em>
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<%= f.label :password_confirmation, class: "block text-sm font-medium text-gray-700" %>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<div class="flex justify-between">
|
||||
<%= f.label :current_password, class: "block text-sm font-medium text-gray-700" %>
|
||||
<span class="text-sm text-gray-500">(we need your current password to confirm your changes)</span>
|
||||
</div>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<%= f.password_field :current_password, autocomplete: "current-password", class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
|
||||
<%= f.password_field :current_password, autocomplete: "current-password" %>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<%= f.submit "Update" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<h3>Cancel my account</h3>
|
||||
|
||||
<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>
|
||||
|
||||
<%= link_to "Back", :back %>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,31 @@
|
|||
<% if resource.errors.any? %>
|
||||
<div id="error_explanation">
|
||||
<h2>
|
||||
<%= I18n.t("errors.messages.not_saved",
|
||||
count: resource.errors.count,
|
||||
resource: resource.class.model_name.human.downcase)
|
||||
%>
|
||||
</h2>
|
||||
<ul>
|
||||
<% resource.errors.full_messages.each do |message| %>
|
||||
<li><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<div id="error_explanation" class="rounded-md bg-red-50 p-4" data-controller="notification" data-notification-target="notificationWrapper">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<%= heroicon "check-circle", variant: :solid, options: { class: "h-5 w-5 text-red-400" } %>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h2>
|
||||
<%= I18n.t("errors.messages.not_saved",
|
||||
count: resource.errors.count,
|
||||
resource: resource.class.model_name.human.downcase)
|
||||
%>
|
||||
</h2>
|
||||
<ul>
|
||||
<% resource.errors.full_messages.each do |message| %>
|
||||
<li><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ml-auto pl-3">
|
||||
<div class="-mx-1.5 -my-1.5">
|
||||
<button type="button" class="inline-flex bg-red-50 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600" data-action="click->notification#dismiss">
|
||||
<span class="sr-only">Dismiss</span>
|
||||
<%= heroicon "x", variant: :solid, options: { class: "h-5 w-5" } %>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -13,117 +13,13 @@
|
|||
|
||||
<body class="h-full">
|
||||
<div class="min-h-full">
|
||||
<nav class="bg-white shadow-sm" data-controller="main-nav">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
<img class="block lg:hidden h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="Workflow">
|
||||
<img class="hidden lg:block h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-600-mark-gray-800-text.svg" alt="Workflow">
|
||||
</div>
|
||||
<div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
|
||||
<!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
|
||||
<%= render partial: "shared/main_menu",
|
||||
locals: {
|
||||
active_classes: "border-indigo-500 text-gray-900",
|
||||
inactive_classes: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
|
||||
common_classes: "inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
|
||||
} %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:items-center">
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div class="ml-3 relative">
|
||||
<div>
|
||||
<button type="button" class="bg-white flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="user-menu-button" data-action="click->main-nav#toggle_user_menu" data-main-nav-target="userButton" aria-controls="user-menu" aria-expanded="false" aria-haspopup="true">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Dropdown menu, show/hide based on menu state.
|
||||
|
||||
Entering: "transition ease-out duration-200"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div id="user-menu" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" data-main-nav-target="userMenu" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
|
||||
<%= render partial: "shared/user_menu",
|
||||
locals: {
|
||||
active_classes: "",
|
||||
inactive_classes: "",
|
||||
common_classes: "block px-4 py-2 text-sm text-gray-700 hover:text-gray-800 hover:bg-gray-100"
|
||||
} %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-mr-2 flex items-center sm:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button type="button" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" data-action="click->main-nav#toggle_mobile_menu" data-main-nav-target="mobileButton" aria-controls="mobile-menu" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!--
|
||||
Heroicon name: outline/menu
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
-->
|
||||
<%= heroicon "menu", variant: :outline, options: { class: "block h-6 w-6", "data-main-nav-target": "mobileOpenButton" } %>
|
||||
<!--
|
||||
Heroicon name: outline/x
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<%= heroicon "x", variant: :outline, options: { class: "hidden h-6 w-6", "data-main-nav-target": "mobileCloseButton" } %>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="hidden sm:hidden" id="mobile-menu" data-main-nav-target="mobileMenu">
|
||||
<div class="pt-2 pb-3 space-y-1">
|
||||
<!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" -->
|
||||
<%= render partial: "shared/main_menu",
|
||||
locals: {
|
||||
active_classes: "bg-indigo-50 border-indigo-500 text-indigo-700",
|
||||
inactive_classes: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800",
|
||||
common_classes: "block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
|
||||
} %>
|
||||
</div>
|
||||
<div class="pt-4 pb-3 border-t border-gray-200">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-gray-800">Tom Cook 2</div>
|
||||
<div class="text-sm font-medium text-gray-500">tom@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
<%= render partial: "shared/user_menu",
|
||||
locals: {
|
||||
active_classes: "",
|
||||
inactive_classes: "",
|
||||
common_classes: "block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
|
||||
} %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<% if user_signed_in? %>
|
||||
<%= render partial: "shared/main_nav_signed_in" %>
|
||||
<% else %>
|
||||
<%= render partial: "shared/main_nav_signed_out" %>
|
||||
<% end %>
|
||||
|
||||
<div class="py-10">
|
||||
<header>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-3xl font-bold leading-tight text-gray-900">
|
||||
<%= yield :main_header %>
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<% if notice.present? %>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
<nav class="bg-white shadow-sm" data-controller="main-nav">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
<img class="block lg:hidden h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="Workflow">
|
||||
<img class="hidden lg:block h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-600-mark-gray-800-text.svg" alt="Workflow">
|
||||
</div>
|
||||
<div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
|
||||
<!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
|
||||
<%= render partial: "shared/main_menu",
|
||||
locals: {
|
||||
active_classes: "border-indigo-500 text-gray-900",
|
||||
inactive_classes: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
|
||||
common_classes: "inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
|
||||
} %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:items-center">
|
||||
<!-- Profile dropdown -->
|
||||
<div class="ml-3 relative">
|
||||
<div>
|
||||
<button type="button" class="bg-white flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="user-menu-button" data-action="click->main-nav#toggle_user_menu" data-main-nav-target="userButton" aria-controls="user-menu" aria-expanded="false" aria-haspopup="true">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<%= user_gravatar current_user, class: "h-10 w-10 rounded-full", size: 80 %>
|
||||
</button>
|
||||
</div>
|
||||
<!--
|
||||
Dropdown menu, show/hide based on menu state.
|
||||
|
||||
Entering: "transition ease-out duration-200"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div id="user-menu" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" data-main-nav-target="userMenu" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
|
||||
<%= render partial: "shared/user_menu",
|
||||
locals: {
|
||||
active_classes: "",
|
||||
inactive_classes: "",
|
||||
common_classes: "block px-4 py-2 text-sm text-gray-700 hover:text-gray-800 hover:bg-gray-100"
|
||||
} %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-mr-2 flex items-center sm:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button type="button" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" data-action="click->main-nav#toggle_mobile_menu" data-main-nav-target="mobileButton" aria-controls="mobile-menu" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!--
|
||||
Heroicon name: outline/menu
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
-->
|
||||
<%= heroicon "menu", variant: :outline, options: { class: "block h-6 w-6", "data-main-nav-target": "mobileOpenButton" } %>
|
||||
<!--
|
||||
Heroicon name: outline/x
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<%= heroicon "x", variant: :outline, options: { class: "hidden h-6 w-6", "data-main-nav-target": "mobileCloseButton" } %>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="hidden sm:hidden" id="mobile-menu" data-main-nav-target="mobileMenu">
|
||||
<div class="pt-2 pb-3 space-y-1">
|
||||
<!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" -->
|
||||
<%= render partial: "shared/main_menu",
|
||||
locals: {
|
||||
active_classes: "bg-indigo-50 border-indigo-500 text-indigo-700",
|
||||
inactive_classes: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800",
|
||||
common_classes: "block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
|
||||
} %>
|
||||
</div>
|
||||
<div class="pt-4 pb-3 border-t border-gray-200">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="flex-shrink-0">
|
||||
<%= user_gravatar current_user, class: "h-10 w-10 rounded-full", size: 80 %>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-gray-800"><%= current_user.display_name.presence || "Anonymous" %></div>
|
||||
<div class="text-sm font-medium text-gray-500"><%= current_user.email %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
<%= render partial: "shared/user_menu",
|
||||
locals: {
|
||||
active_classes: "",
|
||||
inactive_classes: "",
|
||||
common_classes: "block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
|
||||
} %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<nav class="bg-white shadow-sm">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-16">
|
||||
<div class="flex items-center">
|
||||
<img class="sm:block h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-600-mark-gray-800-text.svg" alt="Workflow">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
<%= link_to "Your Profile", "#", class: common_classes + " " + active_classes %>
|
||||
<%= link_to "Your Profile", edit_user_registration_path(@user), class: common_classes + " " + active_classes %>
|
||||
<%= link_to "Settings", "#", class: common_classes + " " + active_classes %>
|
||||
<%= button_to "Sign out", destroy_user_session_path(@user), method: :delete, class: common_classes + " " + active_classes + " inline" %>
|
||||
<div data-turbo="false">
|
||||
<%= button_to "Sign out", destroy_user_session_path(@user), method: :delete, class: common_classes + " " + active_classes + " inline" %>
|
||||
</div>
|
||||
|
|
@ -4,7 +4,9 @@
|
|||
<p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
|
||||
<% end %>
|
||||
|
||||
<%= render @user %>
|
||||
<div id="<%= dom_id @user %>">
|
||||
|
||||
</div>
|
||||
|
||||
<%= link_to 'Edit this user', edit_user_path(@user), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
|
||||
<div class="inline-block ml-2">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
Rails.application.routes.draw do
|
||||
devise_for :users, :path_prefix => 'my'
|
||||
resources :users
|
||||
devise_for :users
|
||||
# devise_for :users, skip: [:sessions]
|
||||
# as :user do
|
||||
# get 'signin', to: 'devise/sessions#new', as: :new_user_session
|
||||
# post 'signin', to: 'devise/sessions#create', as: :user_session
|
||||
# delete 'signout', to: 'devise/sessions#destroy', as: :destroy_user_session
|
||||
# end
|
||||
scope '/admin' do
|
||||
resources :users
|
||||
end
|
||||
resources :checks
|
||||
|
||||
# Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
|
||||
|
||||
# Defines the root path route ("/")
|
||||
|
|
|
|||
Loading…
Reference in New Issue