[RUBY] [Rails] Fügen Sie einen Bestätigungsbildschirm und einen Abschlussbildschirm hinzu, um die Registrierung der Mitgliedschaft zu erstellen.

Umgebung

Ruby 2.5.7 Rails 5.2.4

gem gem 'devise'

Annahme

Das neue Registrierungsformular von devise kann angepasst werden (nicht der Standardstatus).

Was du machen willst

Wenn in der Standardeinstellung von devise Informationen auf der Seite sign_up eingegeben und gesendet werden, werden sie unverändert registriert und wechseln zur vorgegebenen (festgelegten) Seite. Ich denke, es wäre freundlicher, wenn es eine Seite gäbe, auf der Sie die vor der Registrierung eingegebenen Informationen überprüfen können, oder eine Seite, die Sie darüber informiert, dass die Registrierung abgeschlossen wurde. Diesmal also zusätzlich zum "Eingabeformular" "eingegeben". Wir werden einen "Informationsbestätigungsbildschirm" und einen "Registrierungsabschlussbildschirm" erstellen. Was den Seitenfluss betrifft, der durch diese Erstellung vervollständigt wurde, Eingabeformular für neue Mitgliedsinformationen "users / new.html.erb (neue Erstellung)" → Bestätigungsbildschirm für Eingabeinformationen "users / registrations / new.html.erb" → Bildschirm zum Abschluss der Registrierung "users / finish (neue Erstellung)" Der Bildschirm ändert sich in der Reihenfolge.

Es mag etwas seltsam erscheinen, aber die von devise bereitgestellten users / registrations / new.html.erb bestätigen nur die auf der vorherigen Seite eingegebenen Informationen und es sieht so aus, als wären sie auf der vorherigen Seite eingegeben worden. Es wird nur der angegebene Wert angezeigt.

Verfahren

  1. Bereiten Sie in Ansichten / Benutzern einen Eingabebildschirm (new.html.erb) und einen Abschlussbildschirm ( finish.html.erb) vor.
  2. Fügen Sie das Umleitungsziel (users / finish.html.erb) nach der Registrierung der Mitgliedschaft zu Controllern ( controller / users / registrations_controller.rb) hinzu.
  3. Das Routing der in 1. hinzugefügten Ansichtsdatei und die Verwendung von "registrations_controller.rb" zu "route.rb" hinzugefügt.
  4. Erstellen Sie eine neue und Fertigstellung für das Rendern in (controller / users_controller.rb)

1. Erstellung eines Bestätigungsbildschirms und eines Abschlussbildschirms

Wie eingangs erwähnt, ist der Bildschirmfluss zum Zeitpunkt der Neuregistrierung Neues Registrierungs-Eingabeformular "Benutzer / new.html.erb" → Eingabebestätigungsbildschirm "Benutzer / Registrierungen / new.html.erb" → Registrierungsabschlussbildschirm "Benutzer / Abschluss". Wenn Sie auf dem Bestätigungsbildschirm auf die Schaltfläche "Registrieren" klicken, werden Benutzerinformationen mit der Standardfunktion von devise registriert.

Eingabebildschirm

erb:users/new.html.erb


<div>

  <h2>Registrierung neuer Mitglieder</h2>

  <%= form_with url: new_user_registration_path, method: :get, local: true do |f| %>

    <%= f.label :name %>
    <%= f.text_field :name %>

    <%= f.label :phone_number %>
    <%= f.number_field :phone_number %>

    <%= f.label :email %>
    <%= f.email_field :email %>

    <%= f.label :password %>
    <% if @minimum_password_length %>
      (<%= @minimum_password_length %>Mehr als Briefe)
    <% end %>

    <%= f.password_field :password %>
    <%= f.password_field :password_confirmation %>

    <%= render "users/shared/links" %>

    <%= f.submit "Bestätigung" %>
  <% end %>
</div>

Erstellen Sie eine neue, indem Sie auf das ursprünglich vorbereitete Formular "registrations / new.html.erb" verweisen. Ich werde weglassen, wie Name und Telefonnummer zu den Registrierungsinformationen hinzugefügt werden. Wenn Sie es hinzufügen möchten, legen Sie es zuerst fest und überprüfen Sie den Vorgang. Versuchen Sie dann diese Methode oder versuchen Sie es mit den Standardeinstellungen (nur E-Mail-Adresse, Kennwort), ohne die Anzahl der Spalten zu erhöhen.

Der Punkt ist das Formular-Tag.

erb:users/new.html.erb



  ...

  <%= form_with url: new_user_registration_path, method: :get, local: true do |f| %>

    ...

  <% end %>

Hier wird das zu speichernde Modell nicht angegeben, sondern nur die URL. Mit anderen Worten, wenn der Beitrag im Formular gesendet wird, erfolgt der Übergang zu der hier angegebenen URL, und der im Formular eingegebene Wert wird auch als "Parameter" an das Übergangsziel übergeben. Geben Sie für die hier angegebene URL im nächsten Bestätigungsbildschirm "url: new_user_registration_path" an. Diese URL ist "registrations / new.html.erb" und wird standardmäßig von devise bereitgestellt.

Die HTTP-Methode gibt "GET" anstelle von "POST" an, da in diesem Formular nur die URL übergeht. Die HTTP-Methode des Formulars ist standardmäßig "POST", daher müssen Sie "method :: get" angeben.

Das diesmal verwendete Formular-Tag ist "form_with". Da die Standardübertragungsmethode von "form_with" Ajax ("remote: true") ist und der Bildschirmübergang nicht ausgeführt wird, muss auch "local: true" angegeben werden. Im Fall von form_for ist der Standardwert local: true, sodass Sie sich dessen normalerweise nicht bewusst sein müssen.

Bestätigungsbildschirm

erb:users/registration/new.html.erb


<div>

  <h2>Bestätigung der Eingabeinformationen</h2>

  <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>

    <p><%= params[:name] %></p>
    <p><%= params[:phone_number] %></p>
    <p><%= params[:email] %></p>
    <p><%= @password %></p>

    <%#Parameter, die tatsächlich gesendet werden sollen%>
    <%= f.hidden_field :name, value: params[:name] %>
    <%= f.hidden_field :phone_number, value: params[:phone_number] %>
    <%= f.hidden_field :email, value: params[:email] %>
    <%= f.hidden_field :password, value: params[:password] %>

    <%= f.submit "zu registrieren" %>

  <% end %>
</div>

Dieser Bildschirm ist "users / registrations / new.html.erb" und wurde von devise erstellt. Ursprünglich hat diese Seite ein Eingabeformular, aber diesmal ist es nur eine Bestätigung, daher werde ich das Formular nicht anzeigen. Die ursprünglichen Formular-Tags, die mit form_for beginnen, werden unverändert verwendet.

Holen Sie sich die von der vorherigen Seite übergebenen Parameter mit params [: name] usw. und zeigen Sie sie zur Bestätigung an.

Da <p> <% = @ password%> </ p> das Passwort blind macht, werden die von der vorherigen Seite übergebenen params [: password] zuerst auf der Controllerseite verarbeitet. Das Verfahren zum Blenden ist wie folgt. (Obwohl es in den Parametern aufgeführt ist, wusste ich nicht, wie ich es hier verstecken sollte, daher würde ich es begrüßen, wenn Sie mir eine detaillierte Person beibringen könnten.)

users/registrations_controller.rb


class Users::RegistrationsController < Devise::RegistrationsController

  ...

  #Kommentieren Sie die neue Aktion aus und fügen Sie Folgendes hinzu
  def new
    i = 0
    @password = ""
    while i < params[:password].length
      @password += "*"
      i += 1
    end
    super
  end

  ...

end

Ich erhalte die Anzahl der Zeichen im Passwort mit params [: password] .length. Mit while i <params [: password] .length ... end zählt i dabei um 1 auf. Gleichzeitig wird "*" zu der unmittelbar zuvor definierten Variablen "@ password =" "hinzugefügt, und der Vorgang endet, wenn die Anzahl der Zeichen erreicht ist. Zeigen Sie dann den Inhalt der Variablen <% = @ password%> in der Ansicht an.

Super bedeutet, dass die Einstellungen in Devise :: RegistrationsController unverändert vererbt werden. Ohne diese Beschreibung können resource und resource_name in form_for nicht verwendet werden. Achten Sie daher darauf, sie nicht zu löschen. ..

erb:users/registration/new.html.erb


<%= f.hidden_field :name_family, value: params[:name] %>
...

f.hidden_field wird nicht angezeigt, aber der dort angegebene value: params [: name] wird als Formular gesendet. In diesem Formular wird auch das zu speichernde Modell angegeben (das Gerät wird automatisch durch "Ressource" angegeben), sodass der durch dieses "f.hidden_field" angegebene Wert der zu speichernde Wert ist.

Abschlussbildschirm

erb:users/completion.html.erb


<div>
  <% if request.referrer.include?('users/sign_up') %>
    <p>Die Registrierung ist abgeschlossen!</p>
  <% else %>
    <p>schon benutzt.</p>
  <% end %>
</div>

Wenn Sie auf der vorherigen Seite auf "Registrieren" klicken, werden die bestätigten Mitgliedsinformationen gespeichert und Sie werden gleichzeitig zu diesem Bildschirm weitergeleitet.

Sie können request.referrer verwenden, um die URL der vorherigen Seite abzurufen, von der Sie hierher gezogen sind. Die include? -Methode von request.referrer.include? ('Users / sign_up') ist eine Methode, die zurückgibt, ob der Wert in () dort enthalten ist oder nicht. Hier bestimmen wir, ob users / sign_up in der URL der vorherigen Seite enthalten war, und ändern den auf dieser Seite angezeigten Text. Wenn es sich um einen Übergang von "users / registrations / new.html.erb" handelt, wird er als registriert angezeigt. Wenn Sie versuchen, ihn anzuzeigen, wenn er nicht registriert (nicht angemeldet) ist, wird er "before_action: authenticate_user!" Des Geräts usw. angezeigt. Die Seite wird umgeleitet.

2. Fügen Sie users_controller.rb neue und vollständige hinzu

Im vorherigen Schritt haben Sie eine Ansichtsdatei erstellt, aber Sie können den Bildschirm nicht so anzeigen, wie er ist. Daher müssen Sie die Aktion auf dem Controller beschreiben.

users_controller.rb


class UsersController < ApplicationController

  before_action :authenticate_user!, except: %i[new]

  ...

  def new
  end

  def completion
  end

  ...

end

Da es sich bei der neuen Seite um ein Registrierungsformular für neue Mitglieder handelt, muss Folgendes beschrieben werden. before_action :authenticate_user!, except: %i[new] before_action :authenticate_user!, except: [:new] before_action :authenticate_user!, except: :new Sie haben alle die gleiche Bedeutung, aber wenn Sie mehr Aktionen schreiben, wird der Code in der ersten Zeile kürzer.

Übrigens, wenn Sie mehr als eins mit % i angeben, trennen Sie diese einfach durch ein Leerzeichen wie before_action: authenticate_user !, Außer:% i [new action1 action2 action3].

Wenn Sie sich nicht angemeldet haben, möchten Sie die Fertigstellung umleiten. Fügen Sie sie daher nicht in "außer" ein.

3. Beschreiben Sie die neu erstellte Ansicht und users / registrations_controller.rb in route.rb

routes.rb


Rails.application.routes.draw do

  ...

  # registrations_controller.Aktivieren Sie rb.
  devise_for :users, controllers: {
    ...
    registrations: 'users/registrations'
  }

  #Benutzer erstellt/new.html.erb und Benutzer/completion.html.Fügen Sie dem Routing erb hinzu.
  resources :users, only: %i[new] do
    get 'completion', to: 'users#completion'
  end

end

4. Ändern Sie das Umleitungsziel nach der Registrierung

Wenn auf dem Bestätigungsbildschirm "Registrieren" gedrückt wird, muss zu der im vorherigen Schritt vorbereiteten "Benutzer / Vervollständigung.html.erb" gewechselt werden.

users/registrations_controller.rb


class Users::RegistrationsController < Devise::RegistrationsController

  ...

  def after_sign_up_path_for(resource)
    user_completion_path(resource)
  end

  ...

end

Ich denke, dass das Umleitungsziel die Standard- oder optional eine andere Seite ist, aber setzen Sie diesen Pfad auf den im vorherigen Schritt erstellten "user_completion_path (resource)" (Pfad in users / vervollständigung.html.erb). Ich werde.

Zusammenfassung

Für eine praktischere Verwendung habe ich die Datei, die ich tatsächlich verwende, auf meinem GitHub veröffentlicht. Bitte beachten Sie dies auch! GitHub - MasaoSasaki/matchi

Wenn Sie Fragen haben, unterschiedliche Interpretationen haben oder wenn Sie der Meinung sind, dass etwas mit der Beschreibungsmethode nicht stimmt, würden wir uns freuen, wenn Sie in den Kommentaren darauf hinweisen könnten.

Vielen Dank für das Lesen bis zum Ende.

Recommended Posts

[Rails] Fügen Sie einen Bestätigungsbildschirm und einen Abschlussbildschirm hinzu, um die Registrierung der Mitgliedschaft zu erstellen.
[Schienen] Spalte zum Entwickeln hinzufügen
[Schienen] Fügen Sie starke Parameter hinzu, um sie zu entwickeln
[Rails] [Hinweis] Wann = zu <%%> hinzugefügt werden soll und wann nicht
[Rails] Führen Sie einen einfachen Kalender ein und fügen Sie in zusätzliche Ereignisse einen "Bestätigungsbildschirm" ein
[Schienen] So erstellen Sie eine Tabelle, fügen eine Spalte hinzu und ändern den Spaltentyp
Implementieren Sie ein Reservierungssystem mit Rails und einfachem Kalender! Fügen wir datetime eine Validierung hinzu!
[Rails] Bearbeiten und Anpassen von Geräteansichten und Controllern
[Rails] Verarbeitung nach Hinzufügen einer Spalte zur Entwicklertabelle
Fügen Sie dem Swift-Button (und auch dem Kreis) einen Schatten hinzu.
Implementieren Sie die Benutzerregistrierungsfunktion und die Unternehmensregistrierungsfunktion separat in Rails devise
[Rails 6] So erstellen Sie mit cocoon einen dynamischen Formular-Eingabebildschirm
Ich möchte Geräte in Rails hinzufügen, kann die Installation jedoch nicht bündeln
[Achtung !!] Vorsichtsmaßnahmen beim Konvertieren von Rails-Geräten und Anzeigen von Dateien in haml
[Rails 5] Anzeigen des Bildschirms zum Ändern des Kennworts bei Verwendung von devise
[Rails] Wie man Edelstein "devise" benutzt
Fügen Sie eine Suchfunktion in Rails hinzu.
Vorbereiten der Erstellung einer Rails-Anwendung
[Rails] Implementierung des Anmeldebildschirms in Devise
[Schienen] So verhindern Sie den Bildschirmübergang
[Schienen] So fügen Sie neue Seiten hinzu
So erstellen Sie einen Begrüßungsbildschirm
[Schienen] "Eingabe" -> "Bestätigungsbildschirm" -> "Speichern" -> "Ansicht"
So aktualisieren Sie Benutzeränderungen in Rails Devise, ohne ein Kennwort einzugeben
[Rails 6] cocoon_ Fügen Sie dem hinzuzufügenden Formular ID- und Datenattribute hinzu