Django3.2 | クラウドソーシングアプリの構築 | 09 | サインアップ - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

【08 | サインイン】 << 【ホーム】 >> 【10 | Facebook認証】

「crowdsource/urls.py」ファイルにパスを追加します。

記述追加　【Desktop/crowdsource/crowdsource/urls.py】12行目

from django.contrib import admin
from django.urls import path
from django.contrib.auth import views as auth_views
from core import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home),

    path('sign-in/', auth_views.LoginView.as_view(template_name="sign_in.html")),
    path('sign-out/', auth_views.LogoutView.as_view(next_page="/")),
    path('sign-up/', views.sign_up),
    
    path('customer/', views.customer_page),
    path('courier/', views.courier_page),

]

「core/views.py」ファイルに記述を追加します。

記述追加【Desktop/crowdsource/core/views.py】16行目

from django.shortcuts import render, redirect
from django.contrib.auth import login
from django.contrib.auth.decorators import login_required

from . import forms

# Create your views here.
def home(request):
    return render(request, 'home.html')

@login_required()
def customer_page(request):
    return render(request, 'home.html')

@login_required()
def courier_page(request):
    return render(request, 'home.html')

def sign_up(request):
    form = forms.SignUpForm()

    if request.method == 'POST':
        form = forms.SignUpForm(request.POST)

        if form.is_valid():
            email = form.cleaned_data.get('email').lower()

            user = form.save(commit=False)
            user.username = email
            user.save()

            login(request, user)
            return redirect('/')


    return render(request, 'sign_up.html', {
        'form': form
    })

「core/templates」フォルダに「sign_up.html」ファイルを新規作成します。
作成した「sign_up.html」ファイルを以下のように編集します。

新規作成　【Desktop/crowdsource/core/templates/sign_up.html】

{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}
<div class="container-fluid mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header bg-primary text-light">
                    <div class="text-center pt-2">
                        <h4>
                        {% if request.GET.next != '/courier/' %}
                        依頼人 | 新規ユーザ登録
                        {% else %}
                        配達人 | 新規ユーザ登録
                        {% endif %}
                        </h4>
                        
                    </div>
                </div>
                <div class="card-body">
                    <form method="POST">
                        {% csrf_token %}
                        {% bootstrap_form form %}
                        <button type="submit" class="btn btn-primary btn-block">
                            新規ユーザ登録
                        </button>
                        <p class="text-center mt-3">
                            登録がお済みの方<a href="/sign-in/?next={{ request.GET.next }}"><span class="btn btn-outline-success btn-sm ml-2">ログイン</span></a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

「templates/sign_in.html」ファイルを編集します。

記述編集　【Desktop/crowdsource/core/templates/sign_in.html】

{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}
<div class="container-fluid mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header bg-info text-light">
                    <div class="text-center pt-2">
                        <h4>
                        {% if request.GET.next != '/courier/' %}
                        依頼人
                        {% else %}
                        配達人
                        {% endif %}
                        </h4>
                        
                    </div>
                </div>
                <div class="card-body">
                    <form method="POST">
                        {% csrf_token %}
                        {% bootstrap_form_errors form %}
                        {% bootstrap_label "メールアドレス" %}
                        {% bootstrap_field form.username show_label=False placeholder="メールアドレス" %}
                        {% bootstrap_label "パスワード" %}
                        {% bootstrap_field form.password show_label=False placeholder="パスワード" %}
                        <button class="btn btn-info btn-block">
                            サインイン
                        </button>
                        <p class="text-center mt-3">
                            登録がお済みでない方<a href="/sign-up/?next={{ request.GET.next }}"><span class="btn btn-outline-success btn-sm ml-2">新規登録</span></a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

「crowdsource/core」フォルダに「forms.py」ファイルを新規作成します。
作成した「forms.py」ファイルを以下のように編集します。

新規作成　【Desktop/crowdsource/core/forms.py】

from django.db import models
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from django.core.exceptions import ValidationError

class SignUpForm(UserCreationForm):
  email = models.EmailField(max_length=250)
  first_name = models.CharField(max_length=150)
  last_name = models.CharField(max_length=150)

  class Meta:
    model = User
    fields = ('email', 'last_name', 'first_name', 'password1', 'password2')

  def clean_email(self):
    email = self.cleaned_data['email'].lower()
    if User.objects.filter(email=email):
      raise ValidationError("このメールアドレスはすでに登録されています。")
    return email