copy the bot challenge here

app/controllers/registrations_controller.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+class RegistrationsController < Devise::RegistrationsController
+  # before_action :configure_sign_up_params, only: [:create]
+  # before_action :configure_account_update_params, only: [:update]
+  prepend_before_action :authenticate_scope!, only: [:edit_email]
+
+
+  def new
+    build_resource
+    super
+  end
+  # POST /resource
+  def create
+    if message = math_check
+      flash.now.alert = message
+    end
+    super
+  end
+
+  # GET /resource/edit
+  def edit_email
+    build_resource
+    puts "EDIT"
+  end
+
+  def edit
+    build_resource
+    super
+  end
+  # PUT /resource
+  def update
+    puts "UPDATE"
+    super
+  end
+
+  # DELETE /resource
+  # def destroy
+  #   super
+  # end
+
+  protected
+
+  def math_check
+    return "no cheatin" unless bot = params[:bot]
+    return "No food" unless fudder = bot[:fudder]
+    key = fudder.to_i / 2
+    answer = bot[:challenge]
+    return "Plase enter the bot challenge" if answer.blank?
+    if( (2*key + 1).to_s != answer )
+      return "Check the maths, tip, it wasn't #{answer}"
+    end
+    nil
+  end
+
+  # If you have extra params to permit, append them to the sanitizer.
+  # def configure_sign_up_params
+  #   devise_parameter_sanitizer.permit(:sign_up, keys: [:attribute])
+  # end
+
+  # If you have extra params to permit, append them to the sanitizer.
+  # def configure_account_update_params
+  #   devise_parameter_sanitizer.permit(:account_update, keys: [:attribute])
+  # end
+
+  # The path used after sign up.
+  def after_sign_up_path_for(resource)
+    puts "after sign up"
+    super(resource)
+  end
+
+  # The path used after sign up for inactive accounts.
+  # def after_inactive_sign_up_path_for(resource)
+  #   super(resource)
+  # end
+end

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

@@ -1,5 +1,5 @@
 .flex.justify-center
-  .w-full.max-w-xs
+  .w-full.max-w-xs.md:max-w-md
     %h1.font-hairline.mb-6.text-center Resend Confirmation Instructions
     = form_for(resource, as: resource_name,
         url: confirmation_path(resource_name),
@@ -15,6 +15,6 @@
           class: "appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none shadow focus:shadow-outline" |
       .mb-4
         = f.submit "Resend Confirmation Info",                                                                                                |
-          class: "button bg-blue-500 hover:bg-blue-700 font-bold text-white focus:outline-none py-2 px-4 rounded focus:shadow-outline w-full" |
+          class: "button bg-cyan-700 hover:bg-cyan-500 font-bold text-white focus:outline-none py-2 px-4 rounded focus:shadow-outline w-full" |
       = render "devise/shared/links"
     = render "devise/shared/form_footer"

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

@@ -1,5 +1,5 @@
 .flex.justify-center
-  .w-full.max-w-xs
+  .w-full.max-w-xs.md:max-w-md
     %h2.font-hairline.mb-6.text-center Change Your Password
     = form_for(resource,
              as: resource_name,
@@ -27,6 +27,6 @@
           class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
       .mb-4
         = f.submit "Change My Password",                                                                                                      |
-          class: "button bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
+          class: "button bg-cyan-700 hover:bg-cyan-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
       = render "devise/shared/links"
     = render "devise/shared/form_footer"

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

@@ -1,5 +1,5 @@
 .flex.justify-center
-  .w-full.max-w-xs
+  .w-full.max-w-xs.md:max-w-md
     %h1.font-hairline.mb-6.text-center Forgot your password?
     = form_for(resource, as: resource_name,
       html: { method: :post,
@@ -12,6 +12,6 @@
           class: "appearance-none border leading-tight focus:outline-none px-3 py-2 rounded shadow focus:shadow-outline text-gray-700 w-full" |
       .mb-4
         = f.submit "Send Password Reset Info",                                                                                                |
-          class: "button bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full" |
+          class: "button bg-cyan-700 hover:bg-cyan-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full" |
       = render "devise/shared/links"
     = render "devise/shared/form_footer"

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

@@ -1,26 +1,17 @@
 .flex.justify-center
-  .w-full.max-w-xs
+  .w-full.max-w-xs.md:max-w-md
-    %h1.font-hairline.mb-6.text-center
+    %h1.font-hairline.mb-6.text-center.text-2xl
-      Edit #{resource_name.to_s.humanize}
+      Change password
     = form_for(resource, as: resource_name,
                html: { class: "bg-white mb-4 px-8 pt-6 pb-8 rounded shadow-md",
                        method: :put }   ,
                url: registration_path(resource_name) ) do |f|
       = render "devise/shared/error_messages", resource: resource
-      .mb-4
-        = f.label :email, class: "block font-bold mb-2 text-gray-700 text-sm"
-        %br/
-        = f.email_field :email,                                                                                                               |
-          autofocus: true,                                                                                                                    |
-          autocomplete: "email",                                                                                                              |
-          class: "appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none shadow focus:shadow-outline" |
       - if devise_mapping.confirmable? && resource.pending_reconfirmation?
         %div
           Currently waiting confirmation for: #{resource.unconfirmed_email}
       .mb-4
-        = f.label :password, class: "block font-bold mb-2 text-gray-700 text-sm"
+        = f.label :new_password, class: "block font-bold mb-2 text-gray-700 text-sm"
-        %i (leave blank if you don't want to change it)
-        %br/
         = f.password_field :password, autocomplete: "new-password", class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
       .mb-4
         = f.label :password_confirmation, class: "block font-bold mb-2 text-gray-700 text-sm"
@@ -33,8 +24,9 @@
           autocomplete: "current-password",                                                                                                        |
           class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" |
       .actions
-        = f.submit "Update", class: "button bg-blue-500 hover:bg-blue-700 font-bold text-white focus:outline-none py-2 px-4 rounded focus:shadow-outline w-full"
+        = f.submit "Update", class: "button bg-cyan-700 hover:bg-cyan-500 font-bold text-white focus:outline-none py-2 px-4 rounded focus:shadow-outline w-full"
-    %p
+    .flex.justify-between
-      Unhappy?
+      %p
-      %span= button_to "Delete my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete
+        %span= button_to "Delete my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete , class: button_classes
-    = link_to "Back", :back
+      %button{class: button_classes}
+        = link_to "Back", :back

app/views/devise/registrations/edit_email.html.haml

@@ -0,0 +1,32 @@
+.flex.justify-center
+  .w-full.max-w-xs.md:max-w-md
+    %h1.font-hairline.mb-6.text-center.text-2xl
+      Change your email
+    .text-center.text-lg
+      (requires confirmation)
+    = form_for(resource, as: resource_name,
+               html: { class: "bg-white mb-4 px-8 pt-6 pb-8 rounded shadow-md",
+                       method: :put }   ,
+               url: registration_path(resource_name) ) do |f|
+      = render "devise/shared/error_messages", resource: resource
+      .mb-4
+        = f.label :new_email, class: "block font-bold mb-2 text-gray-700 text-sm"
+        %br/
+        = f.email_field :email,                                                                                                               |
+          autofocus: true,                                                                                                                    |
+          autocomplete: "email",                                                                                                              |
+          class: "appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none shadow focus:shadow-outline" |
+      - if devise_mapping.confirmable? && resource.pending_reconfirmation?
+        %div
+          Currently waiting confirmation for: #{resource.unconfirmed_email}
+      .mb-4
+        = f.label :current_password, class: "block font-bold mb-2 text-gray-700 text-sm"
+        = f.password_field :current_password,                                                                                                      |
+          autocomplete: "current-password",                                                                                                        |
+          class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" |
+      .actions
+        = f.submit "Update", class: "button bg-cyan-700 hover:bg-cyan-500 font-bold text-white focus:outline-none py-2 px-4 rounded focus:shadow-outline w-full"
+
+    = link_to :back do
+      %button{class: button_classes}
+        Back

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

@@ -1,16 +1,10 @@
 .flex.justify-center
-  .w-full.max-w-xs
+  .w-full.max-w-xs.md:max-w-md
-    %h1.font-hairline.mb-6.text-center Sign Up
+    %h1.font-hairline.mb-6.text-center.text-2xl Sign Up
     = form_for(resource, as: resource_name,
                html: { class: "bg-white mb-4 px-8 pt-6 pb-8 rounded shadow-md"  } ,
                url: registration_path(resource_name) ) do |f|
       = render "devise/shared/error_messages", resource: resource
-      .mb-4
-        = f.label :name, class: "block font-bold mb-2 text-gray-700 text-sm"
-        = f.text_field :name,
-          autocomplete: "name",
-          placeholder: "Pekka Juustonen",
-          class: "appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none shadow focus:shadow-outline"
       .mb-4
         = f.label :email, class: "block font-bold mb-2 text-gray-700 text-sm"
         = f.email_field :email,
@@ -23,16 +17,22 @@
           %small
             %em.text-gray-600
               (#{@minimum_password_length} characters minimum)
-        = f.password_field :password,                                                                                                              |
+        = f.password_field :password,
-          autocomplete: "new-password",                                                                                                            |
+          autocomplete: "new-password",
-          class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" |
+          class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
       .mb-4
         = f.label :password_confirmation, class: "block font-bold mb-2 text-gray-700 text-sm"
-        = f.password_field :password_confirmation,                                                                                            |
+        = f.password_field :password_confirmation,
-          autocomplete: "new-password",                                                                                                       |
+          autocomplete: "new-password",
-          class: "appearance-none border leading-tight focus:outline-none px-3 py-2 rounded shadow focus:shadow-outline text-gray-700 w-full" |
+          class: "appearance-none border leading-tight focus:outline-none px-3 py-2 rounded shadow focus:shadow-outline text-gray-700 w-full"
-      .mb-4
+      .mt-4
-        = f.submit "Sign Up",                                                                                                                 |
+        - challenge = rand(8)
-          class: "button bg-blue-500 hover:bg-blue-700 font-bold text-white focus:outline-none py-2 px-4 rounded focus:shadow-outline w-full" |
+        = simple_fields_for :bot do |n|
+          = n.input :fudder , as: :hidden , input_html: { value: "#{challenge*2}" }
+          = n.input :challenge, placeholder: "Anti bot question: #{challenge} + #{challenge + 1} == " ,
+            class: " border leading-tight focus:outline-none px-3 py-2 rounded shadow focus:shadow-outline text-gray-700 w-full"
+      .my-4
+        = f.submit "Sign Up",
+          class: "button bg-cyan-700 hover:bg-cyan-700 font-bold text-white focus:outline-none py-2 px-4 rounded focus:shadow-outline w-full"
       = render "devise/shared/links"
     = render "devise/shared/form_footer"

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

@@ -1,5 +1,5 @@
 .flex.justify-center
-  .w-full.max-w-xs
+  .w-full.max-w-xs.md:max-w-md
     %h1.font-hairline.mb-6.text-center Log In
     = form_for(resource, url: session_path(resource_name),
               html: { class: "bg-white mb-4 px-8 pt-6 pb-8 rounded shadow-md"  },
@@ -21,6 +21,6 @@
             class: "align-baseline inline-block text-gray-700 text-sm"
       .mb-4
         = f.submit "Log in",
-          class: "button bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
+          class: "button bg-cyan-700 hover:bg-cyan-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
       = render "devise/shared/links"
     = render "devise/shared/form_footer"

config/routes.rb

@@ -1,7 +1,10 @@
 Rails.application.routes.draw do
   resources :stories
 
-  devise_for :members
+  devise_for :members ,controllers: { registrations: 'registrations' }
+  devise_scope :member do
+    get "/members/edit_email" , to: "registrations#edit_email"
+  end
 
   resources  :members