Devise styling

app/controllers/pages_controller.rb

@@ -0,0 +1,6 @@
+class PagesController < ApplicationController
+  before_action :authenticate_user!, only: [:home]
+
+  def home
+  end
+end

app/helpers/pages_helper.rb

@@ -0,0 +1,2 @@
+module PagesHelper
+end

app/views/devise/confirmations/new.html.erb

@@ -0,0 +1,20 @@
+<h2 class="mt-10 text-2xl font-bold leading-9 tracking-tight text-center text-gray-900">Resend confirmation instructions</h2>
+
+<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+  <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post, class: "space-y-6" }) do |f| %>
+    <%= render "devise/shared/error_messages", resource: resource %>
+
+    <div>
+      <%= f.label :email, class: 'block text-sm font-medium leading-6 text-gray-900' %>
+      <div class="mt-2">
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6' %>
+      </div>
+    </div>
+
+    <div>
+      <%= f.submit "Resend confirmation instructions", class: "flex w-full justify-center rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" %>
+    </div>
+  <% end %>
+
+  <%= render "devise/shared/links" %>
+</div>

app/views/devise/mailer/confirmation_instructions.html.erb

@@ -0,0 +1,5 @@
+<p>Welcome <%= @email %>!</p>
+
+<p>You can confirm your account email through the link below:</p>
+
+<p><%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %></p>

app/views/devise/mailer/email_changed.html.erb

@@ -0,0 +1,7 @@
+<p>Hello <%= @email %>!</p>
+
+<% if @resource.try(:unconfirmed_email?) %>
+  <p>We're contacting you to notify you that your email is being changed to <%= @resource.unconfirmed_email %>.</p>
+<% else %>
+  <p>We're contacting you to notify you that your email has been changed to <%= @resource.email %>.</p>
+<% end %>

app/views/devise/mailer/password_change.html.erb

@@ -0,0 +1,3 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>We're contacting you to notify you that your password has been changed.</p>

app/views/devise/mailer/reset_password_instructions.html.erb

@@ -0,0 +1,8 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>Someone has requested a link to change your password. You can do this through the link below.</p>
+
+<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
+
+<p>If you didn't request this, please ignore this email.</p>
+<p>Your password won't change until you access the link above and create a new one.</p>

app/views/devise/mailer/unlock_instructions.html.erb

@@ -0,0 +1,7 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>Your account has been locked due to an excessive number of unsuccessful sign in attempts.</p>
+
+<p>Click the link below to unlock your account:</p>
+
+<p><%= link_to 'Unlock my account', unlock_url(@resource, unlock_token: @token) %></p>

app/views/devise/passwords/edit.html.erb

@@ -0,0 +1,28 @@
+<h2 class="mt-10 text-2xl font-bold leading-9 tracking-tight text-center text-gray-900">Change your password</h2>
+
+<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, class: "space-y-6" }) do |f| %>
+    <%= render "devise/shared/error_messages", resource: resource %>
+    <%= f.hidden_field :reset_password_token %>
+
+    <div>
+      <%= f.label :password, class: 'block text-sm font-medium leading-6 text-gray-900' %>
+      <div class="mt-2">
+        <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6'%>
+      </div>
+    </div>
+
+    <div class="field">
+      <%= f.label :password_confirmation, class: 'block text-sm font-medium leading-6 text-gray-900' %>
+      <div class="mt-2">
+        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6' %>
+      </div>
+    </div>
+
+    <div>
+      <%= f.submit "Change my password", class: 'flex w-full justify-center rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600' %>
+    </div>
+  <% end %>
+
+  <%= render "devise/shared/links" %>
+</div>

app/views/devise/passwords/new.html.erb

@@ -0,0 +1,21 @@
+<h2 class="mt-10 text-2xl font-bold leading-9 tracking-tight text-center text-gray-900">Forgot your password?</h2>
+
+<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }, html: { class: "space-y-6" }) do |f| %>
+
+    <%= render "devise/shared/error_messages", resource: resource %>
+
+    <div>
+      <%= f.label :email, class: 'block text-sm font-medium leading-6 text-gray-900' %>
+      <div class="mt-2">
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6' %>
+      </div>
+    </div>
+
+    <div>
+      <%= f.submit "Send me password reset instructions", class: "flex w-full justify-center rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" %>
+    </div>
+  <% end %>
+
+  <%= render "devise/shared/links" %>
+</div>

app/views/devise/registrations/edit.html.erb

@@ -0,0 +1,44 @@
+<h2 class="mt-10 text-2xl font-bold leading-9 tracking-tight text-center text-gray-900">Edit <%= resource_name.to_s.humanize %></h2>
+
+<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+  <%= 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">
+      <p><%= f.label :email %></p>
+      <p><%= f.email_field :email, autofocus: true, autocomplete: "email" %></p>
+    </div>
+
+    <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
+      <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
+    <% end %>
+
+    <div class="field">
+      <p><%= f.label :password %> <i>(leave blank if you don't want to change it)</i></p>
+      <p><%= f.password_field :password, autocomplete: "new-password" %></p>
+      <% if @minimum_password_length %>
+        <p><em><%= @minimum_password_length %> characters minimum</em></p>
+      <% end %>
+    </div>
+
+    <div class="field">
+      <p><%= f.label :password_confirmation %></p>
+      <p><%= f.password_field :password_confirmation, autocomplete: "new-password" %></p>
+    </div>
+
+    <div class="field">
+      <p><%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i></p>
+      <p><%= f.password_field :current_password, autocomplete: "current-password" %></p>
+    </div>
+
+    <div class="actions">
+      <%= f.submit "Update" %>
+    </div>
+  <% end %>
+
+  <h3>Cancel my account</h3>
+
+  <div>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?", turbo_confirm: "Are you sure?" }, method: :delete %></div>
+
+  <%= link_to "Back", :back %>
+</div>

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

@@ -0,0 +1,35 @@
+<h2 class="mt-10 text-2xl font-bold leading-9 tracking-tight text-center text-gray-900">Create a Maybe account</h2>
+
+<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+  <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "space-y-6" }) do |f| %>
+
+    <%= render "devise/shared/error_messages", resource: resource %>
+
+    <div>
+      <%= f.label :email, class: 'block text-sm font-medium leading-6 text-gray-900' %>
+      <div class="mt-2">
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6' %>
+      </div>
+    </div>
+
+    <div>
+      <%= f.label :password, class: 'block text-sm font-medium leading-6 text-gray-900' %>
+      <div class="mt-2">
+        <%= f.password_field :password, autocomplete: "new-password", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6' %>
+      </div>
+    </div>
+
+    <div>
+      <%= f.label :password_confirmation, class: 'block text-sm font-medium leading-6 text-gray-900' %>
+      <div class="mt-2">
+        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6' %>
+      </div>
+    </div>
+
+    <div>
+      <%= f.submit "Sign up", class: "flex w-full justify-center rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" %>
+    </div>
+  <% end %>
+
+  <%= render "devise/shared/links" %>
+</div>

app/views/devise/sessions/new.html.erb

@@ -0,0 +1,35 @@
+<h2 class="mt-10 text-2xl font-bold leading-9 tracking-tight text-center text-gray-900">Log in to your account</h2>
+
+<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+  <%= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: "space-y-6" }) do |f| %>
+
+    <%= render "devise/shared/error_messages", resource: resource %>
+
+    <div>
+      <%= f.label :email, class: 'block text-sm font-medium leading-6 text-gray-900' %>
+      <div class="mt-2">
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6' %>
+      </div>
+    </div>
+
+    <div>
+      <%= f.label :password, class: 'block text-sm font-medium leading-6 text-gray-900' %>
+      <div class="mt-2">
+        <%= f.password_field :password, autocomplete: "current-password", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6' %>
+      </div>
+    </div>
+
+    <% if devise_mapping.rememberable? %>
+      <div class="flex items-center gap-x-3">
+        <%= f.check_box :remember_me, class: 'h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-600' %>
+        <%= f.label :remember_me, class: 'block text-sm font-medium leading-6 text-gray-900' %>
+      </div>
+    <% end %>
+
+    <div>
+      <%= f.submit "Log in", class: "flex w-full justify-center rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" %>
+    </div>
+  <% end %>
+
+  <%= render "devise/shared/links" %>
+</div>

app/views/devise/shared/_error_messages.html.erb

@@ -0,0 +1,24 @@
+<% if resource.errors.any? %>
+  <div class="p-4 rounded-md bg-red-50" data-turbo-cache="false">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <svg class="w-5 h-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+        </svg>
+      </div>
+      <div class="ml-3">
+        <h3 class="text-sm font-medium text-red-800"><%= I18n.t("errors.messages.not_saved",
+                 count: resource.errors.count,
+                 resource: resource.class.model_name.human.downcase)
+       %></h3>
+        <div class="mt-2 text-sm text-red-700">
+          <ul role="list" class="pl-5 space-y-1 list-disc">
+            <% resource.errors.full_messages.each do |message| %>
+              <li><%= message %></li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

app/views/devise/shared/_links.html.erb

@@ -0,0 +1,39 @@
+<div>
+  <div class="relative mt-10">
+    <div class="absolute inset-0 flex items-center" aria-hidden="true">
+      <div class="w-full border-t border-gray-200"></div>
+    </div>
+    <div class="relative flex justify-center text-sm font-medium leading-6">
+      <span class="px-6 text-gray-900 bg-gray-50">Other options</span>
+    </div>
+  </div>
+  <div class="text-sm prose">
+    <ul>
+    <%- if controller_name != 'sessions' %>
+      <li><%= link_to "Log in", new_session_path(resource_name) %></li>
+    <% end %>
+
+    <%- if devise_mapping.registerable? && controller_name != 'registrations' %>
+      <li><%= link_to "Sign up", new_registration_path(resource_name) %></li>
+    <% end %>
+
+    <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
+      <li><%= link_to "Forgot your password?", new_password_path(resource_name) %></li>
+    <% end %>
+
+    <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
+      <li><%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %></li>
+    <% end %>
+
+    <%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
+      <li><%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %></li>
+    <% end %>
+
+    <%- if devise_mapping.omniauthable? %>
+      <%- resource_class.omniauth_providers.each do |provider| %>
+        <li><%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false } %></li>
+      <% end %>
+    <% end %>
+    </ul>
+  </div>
+</div>

app/views/devise/unlocks/new.html.erb

@@ -0,0 +1,20 @@
+<h2 class="mt-10 text-2xl font-bold leading-9 tracking-tight text-center text-gray-900">Resend unlock instructions</h2>
+
+<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+  <%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post, class: "space-y-6" }) do |f| %>
+    <%= render "devise/shared/error_messages", resource: resource %>
+
+    <div>
+      <%= f.label :email, class: 'block text-sm font-medium leading-6 text-gray-900' %>
+      <div class="mt-2">
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6' %>
+      </div>
+    </div>
+
+    <div>
+      <%= f.submit "Resend unlock instructions", class: "flex w-full justify-center rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" %>
+    </div>
+  <% end %>
+
+  <%= render "devise/shared/links" %>
+</div>

app/views/layouts/application.html.erb

@@ -9,10 +9,12 @@
 
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
+
+    <%= hotwire_livereload_tags if Rails.env.development? %>
   </head>
 
   <body>
-    <main class="container mx-auto mt-28 px-5 flex">
+    <main class="container flex px-5 mx-auto mt-28">
       <%= yield %>
     </main>
   </body>

app/views/layouts/devise.html.erb

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="h-full bg-gray-50">
+  <head>
+    <title>Maybe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
+
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= javascript_importmap_tags %>
+
+    <%= hotwire_livereload_tags if Rails.env.development? %>
+  </head>
+
+  <body class="h-full">
+    <div class="flex flex-col justify-center min-h-full px-6 py-12 lg:px-8">
+
+      <div class="sm:mx-auto sm:w-full sm:max-w-md">
+        <%= yield %>
+      </div>
+
+    </div>
+
+  </body>
+</html>

config/routes.rb

@@ -1,11 +1,10 @@
 Rails.application.routes.draw do
   devise_for :users
-  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
-
+
   # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
   # Can be used by load balancers and uptime monitors to verify that the app is live.
   get "up" => "rails/health#show", as: :rails_health_check
 
   # Defines the root path route ("/")
-  # root "posts#index"
+  root "pages#home"
 end

test/controllers/pages_controller_test.rb

@@ -0,0 +1,7 @@
+require "test_helper"
+
+class PagesControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end