Merge pull request #35 from crab85193/dev_crab

add: パスワード変更機能を追加

main_app/forms/password_change.py

@@ -0,0 +1,16 @@
+from django.contrib.auth.forms import PasswordChangeForm
+from django.contrib.auth.models import User
+
+class PasswordChange(PasswordChangeForm):
+    class Meta:
+        model = User
+        fields = ["old_password", "new_password1", "new_password2"]
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        for field in self.fields.values():
+            field.widget.attrs['class'] = 'form-control form-control-user'
+
+        self.fields['old_password'].widget.attrs['placeholder']  = 'Old Password'
+        self.fields['new_password1'].widget.attrs['placeholder'] = 'New Password'
+        self.fields['new_password2'].widget.attrs['placeholder'] = 'Retype New Password'

main_app/urls.py

@@ -19,6 +19,7 @@
 from .views.logout import Logout
 from .views.register import RegisterRequestView, RegisterDoneView, RegisterCompleteView, RegisterErrorView
 from .views.top import TopView
+from .views.password_change import PasswordChangeView, PasswordChangeDoneView
 
 from .views.dev.charts import ChartsApexChartsView, ChartsChartjsView, ChartsEchartsView
 from .views.dev.components import ComponentsAccordionView, ComponentsAlertsView, ComponentsBadgesView, ComponentsBreadcrumbsView, ComponentsButtonsView, ComponentsCardsView, ComponentsCarouselView, ComponentsListGroupView, ComponentsModalView, ComponentsPaginationView, ComponentsProgressView, ComponentsSpinnersView, ComponentsTabsView, ComponentsTooltipsView
@@ -41,6 +42,9 @@
 
     path("top/", TopView.as_view(), name="top"),
 
+    path("settings/password/change/"     , PasswordChangeView.as_view()    , name="password_change"     ),
+    path("settings/password/change/done/", PasswordChangeDoneView.as_view(), name="password_change_done"),
+
     path("reservation/"     , ReservationView.as_view()    , name="reservation"     ),
     path("reservation/done/", ReservationDoneView.as_view(), name="reservation_done"),
 

main_app/views/password_change.py

@@ -0,0 +1,13 @@
+from django.contrib.auth.views import PasswordChangeView, PasswordChangeDoneView
+from django.contrib.auth.mixins import LoginRequiredMixin
+from django.urls import reverse_lazy
+from ..forms.password_change import PasswordChange
+
+class PasswordChangeView(LoginRequiredMixin, PasswordChangeView):
+    form_class = PasswordChange
+    success_url = reverse_lazy('main_app:password_change_done')
+    template_name = 'main_app/password_change/password_change.html' 
+
+class PasswordChangeDoneView(PasswordChangeDoneView):
+    template_name = 'main_app/password_change/password_change_done.html'
+

templates/main_app/base.html

@@ -227,40 +227,40 @@ <h6>{{ request.user.username }}</h6>
                 <hr class="dropdown-divider">
               </li>
 
-              <li>
+              {% comment %} <li>
                 <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
                   <i class="bi bi-person"></i>
                   <span>My Profile</span>
                 </a>
               </li>
               <li>
                 <hr class="dropdown-divider">
-              </li>
+              </li> {% endcomment %}
 
               <li>
-                <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
+                <a class="dropdown-item d-flex align-items-center" href="{% url 'main_app:password_change' %}">
                   <i class="bi bi-gear"></i>
-                  <span>Account Settings</span>
+                  <span>パスワード変更</span>
                 </a>
               </li>
               <li>
                 <hr class="dropdown-divider">
               </li>
 
-              <li>
+              {% comment %} <li>
                 <a class="dropdown-item d-flex align-items-center" href="pages-faq.html">
                   <i class="bi bi-question-circle"></i>
                   <span>Need Help?</span>
                 </a>
               </li>
               <li>
                 <hr class="dropdown-divider">
-              </li>
+              </li> {% endcomment %}
 
               <li>
                 <a class="dropdown-item d-flex align-items-center" href="{% url 'main_app:logout' %}">
                   <i class="bi bi-box-arrow-right"></i>
-                  <span>Sign Out</span>
+                  <span>ログアウト</span>
                 </a>
               </li>
 

templates/main_app/password_change/base.html

@@ -0,0 +1,69 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+  <meta charset="utf-8">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport">
+
+  <title>{% block title %}{% endblock %} - Tely</title>
+  <meta content="" name="description">
+  <meta content="" name="keywords">
+
+  <!-- Favicons -->
+  <link href="{% static 'img/favicon.png' %}" rel="icon">
+  <link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
+
+  <!-- Google Fonts -->
+  <link href="https://fonts.gstatic.com" rel="preconnect">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
+
+  <!-- Vendor CSS Files -->
+  <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
+  <link href="{% static 'vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
+  <link href="{% static 'vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
+  <link href="{% static 'vendor/quill/quill.snow.css' %}" rel="stylesheet">
+  <link href="{% static 'vendor/quill/quill.bubble.css' %}" rel="stylesheet">
+  <link href="{% static 'vendor/remixicon/remixicon.css' %}" rel="stylesheet">
+  <link href="{% static 'vendor/simple-datatables/style.css' %}" rel="stylesheet">
+
+  <!-- Template Main CSS File -->
+  <link href="{% static 'css/style.css' %}" rel="stylesheet">
+
+  {% block head %}{% endblock %}
+
+  <!-- =======================================================
+  * Template Name: NiceAdmin
+  * Updated: Sep 18 2023 with Bootstrap v5.3.2
+  * Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
+  * Author: BootstrapMade.com
+  * License: https://bootstrapmade.com/license/
+  ======================================================== -->
+</head>
+
+<body>
+
+  <main>
+    {% block main %}{% endblock %}
+  </main><!-- End #main -->
+
+  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
+
+  <!-- Vendor JS Files -->
+  <script src="{% static 'vendor/apexcharts/apexcharts.min.js' %}"></script>
+  <script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+  <script src="{% static 'vendor/chart.js/chart.umd.js' %}"></script>
+  <script src="{% static 'vendor/echarts/echarts.min.js' %}"></script>
+  <script src="{% static 'vendor/quill/quill.min.js' %}"></script>
+  <script src="{% static 'vendor/simple-datatables/simple-datatables.js' %}"></script>
+  <script src="{% static 'vendor/tinymce/tinymce.min.js' %}"></script>
+  <script src="{% static 'vendor/php-email-form/validate.js' %}"></script>
+
+  <!-- Template Main JS File -->
+  <script src="{% static 'js/main.js' %}"></script>
+
+  {% block script %}{% endblock %}
+
+</body>
+
+</html>

templates/main_app/password_change/password_change.html

@@ -0,0 +1,85 @@
+{% extends 'main_app/password_change/base.html' %}
+{% load static %}
+
+{% block title %}
+パスワード変更
+{% endblock%}
+
+{% block main %}
+<div class="container">
+
+    <section class="section register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-lg-4 col-md-6 d-flex flex-column align-items-center justify-content-center">
+
+            <div class="d-flex justify-content-center py-4">
+              <a href="{% url 'main_app:login' %}" class="logo d-flex align-items-center w-auto">
+                <img src="{% static 'img/logo.png' %}" alt="">
+                <span class="d-none d-lg-block">Tely</span>
+              </a>
+            </div><!-- End Logo -->
+
+            <div class="card mb-3">
+
+              <div class="card-body">
+
+                <div class="pt-4 pb-2">
+                  <h5 class="card-title text-center pb-0 fs-4">パスワード変更</h5>
+                  <p class="text-center small">現在のパスワードと新しいパスワードを入力してください</p>
+                </div>
+
+                <form class="row g-3 needs-validation" method="POST">
+                  {% csrf_token %}
+                  {% for field in form %}
+                  <div class="col-12">
+                    <label for="id_{{ field.name }}" class="form-label">{{ field.label }}</label>
+                    <div class="input-group has-validation">
+                      {{ field }}
+                    </div>
+
+                    {% if field.errors %}
+                    <div class="alert alert-danger" role="alert">
+                      {% for error in field.errors %}
+                      <p>{{ error }}</p>
+                      {% endfor %}
+                    </div>
+                    {% endif %}
+                  </div>
+                  {% endfor %}  
+                  <div class="col-12">
+                    {% for error in form.non_field_errors %}
+                    <div class="alert alert-danger" role="alert">
+                        <p>{{ error }}</p>
+                    </div>
+                    {% endfor %}
+                  </div>
+
+                  <div class="col-12">
+                    <button class="btn btn-primary w-100" type="submit">パスワード変更</button>
+                  </div>
+
+                  <div class="col-12">
+                    <p class="small mb-0"><a href="{% url 'main_app:top' %}">←トップへ戻る</a></p>
+                  </div>
+                </form>
+
+              </div>
+            </div>
+
+            <div class="credits">
+              <!-- All the links in the footer should remain intact. -->
+              <!-- You can delete the links only if you purchased the pro version. -->
+              <!-- Licensing information: https://bootstrapmade.com/license/ -->
+              <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
+              Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+    </section>
+
+  </div>
+{% endblock %}

templates/main_app/password_change/password_change_done.html

@@ -0,0 +1,56 @@
+{% extends 'main_app/password_change/base.html' %}
+{% load static %}
+
+{% block title %}
+パスワード変更 完了
+{% endblock%}
+
+{% block main %}
+<div class="container">
+
+    <section class="section register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-lg-4 col-md-6 d-flex flex-column align-items-center justify-content-center">
+
+            <div class="d-flex justify-content-center py-4">
+              <a href="{% url 'main_app:login' %}" class="logo d-flex align-items-center w-auto">
+                <img src="{% static 'img/logo.png' %}" alt="">
+                <span class="d-none d-lg-block">Tely</span>
+              </a>
+            </div><!-- End Logo -->
+
+            <div class="card mb-3">
+
+              <div class="card-body">
+
+                <div class="pt-4 pb-2">
+                  <h5 class="card-title text-center pb-0 fs-4">パスワード変更 完了</h5>
+                  <p class="text-center small">パスワードの変更が完了しました</p>
+                </div>
+
+                <form class="row g-3 needs-validation">
+                  <div class="col-12">
+                    <a href="{% url 'main_app:top' %}" class="btn btn-primary w-100" type="submit">トップページへ</a>
+                  </div>
+                </form>
+
+              </div>
+            </div>
+
+            <div class="credits">
+              <!-- All the links in the footer should remain intact. -->
+              <!-- You can delete the links only if you purchased the pro version. -->
+              <!-- Licensing information: https://bootstrapmade.com/license/ -->
+              <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
+              Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+    </section>
+
+  </div>
+{% endblock %}