55{% endblock head_title %}
66
77{% block content %}
8- < div class ="flex justify-center items-center min-h-screen bg-base-200 ">
9- < div class ="card w-full max-w-md shadow-lg bg-base-100 ">
10- < div class ="card-body ">
11- < h1 class ="text-2xl font-bold text-center text-primary ">
12- {% trans "Sign Up" %}
13- </ h1 >
14- < p class ="text-sm text-center text-secondary mt-2 ">
15- {% blocktranslate %}
16- Already have an account? Then please
17- < a href ="{{ login_url }} " class ="link link-primary "> sign in</ a > .
18- {% endblocktranslate %}
19- </ p >
20-
21- {% if not SOCIALACCOUNT_ONLY %}
22- < form method ="post " action ="{% url 'account_signup' %} " class ="mt-6 space-y-4 ">
23- {% csrf_token %}
24- {% for field in form %}
25- < div class ="form-control relative ">
26- < input
27- type ="{% if field.name == 'password1' or field.name == 'password2' %}password{% else %}{{ field.type }}{% endif %} "
28- name ="{{ field.name }} "
29- id ="{{ field.id_for_label }} "
30- value ="{{ field.value|default:'' }} "
31- placeholder ="{{field.label}} "
32- class ="input input-bordered input-primary "
33- >
34- {% if field.name == 'password1' or field.name == 'password2' %}
35- < button
36- type ="button "
37- class ="absolute inset-y-0 right-2 flex items-center btn btn-sm btn-ghost transform -translate-y-1/2 top-1/2 "
38- onclick ="togglePasswordVisibility('{{ field.id_for_label }}') "
39- >
40- < svg xmlns ="http://www.w3.org/2000/svg " class ="h-5 w-5 " fill ="none " viewBox ="0 0 24 24 " stroke ="currentColor ">
41- < path stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " d ="M13.875 18.825l4.5-4.5M21 12a9 9 0 11-6-8.47 " />
42- </ svg >
43- </ button >
44- {% endif %}
45- {% for error in field.errors %}
46- < span class ="text-error text-sm "> {{ error }}</ span >
47- {% endfor %}
48- </ div >
49- {% endfor %}
50- {{ redirect_field }}
51-
52- < button type ="submit " class ="btn btn-primary btn-block ">
8+ < div class ="flex justify-center items-center min-h-screen bg-base-200 ">
9+ < div class ="card w-full max-w-md shadow-lg bg-base-100 ">
10+ < div class ="card-body ">
11+ < h1 class ="text-2xl font-bold text-center text-primary ">
5312 {% trans "Sign Up" %}
54- </ button >
55- </ form >
56- {% endif %}
13+ </ h1 >
14+ < p class ="text-sm text-center text-secondary mt-2 ">
15+ {% blocktranslate %}
16+ Already have an account? Then please
17+ < a href ="{{ login_url }} " class ="link link-primary "> sign in</ a > .
18+ {% endblocktranslate %}
19+ </ p >
5720
58- {% if PASSKEY_SIGNUP_ENABLED %}
59- < div class ="divider "> OR</ div >
60- < a href ="{{ signup_by_passkey_url }} " class ="btn btn-outline btn-primary btn-block ">
61- {% trans "Sign up using a passkey" %}
62- </ a >
63- {% endif %}
21+ {% if not SOCIALACCOUNT_ONLY %}
22+ < form method ="post " action ="{% url 'account_signup' %} " class ="mt-6 space-y-4 ">
23+ {% csrf_token %}
24+ {% for field in form %}
25+ < div class ="form-control relative ">
26+ < input
27+ type ="{% if field.name == 'password1' or field.name == 'password2' %}password{% else %}{{ field.type }}{% endif %} "
28+ name ="{{ field.name }} "
29+ id ="{{ field.id_for_label }} "
30+ value ="{{ field.value|default:'' }} "
31+ placeholder ="{{field.label}} "
32+ class ="input input-bordered input-primary "
33+ >
34+ {% if field.name == 'password1' or field.name == 'password2' %}
35+ < button
36+ type ="button "
37+ class ="absolute inset-y-0 right-2 flex items-center btn btn-sm btn-ghost transform -translate-y-1/2 top-1/2 "
38+ onclick ="togglePasswordVisibility('{{ field.id_for_label }}', this) "
39+ >
40+ < svg xmlns ="http://www.w3.org/2000/svg " class ="h-5 w-5 eye-icon " fill ="none " viewBox ="0 0 24 24 " stroke ="currentColor ">
41+ <!-- Open Eye Icon -->
42+ < path stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " d ="M15 12a3 3 0 11-6 0 3 3 0 016 0z " />
43+ < path stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " d ="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z " />
44+ </ svg >
45+ </ button >
46+ {% endif %}
47+ {% for error in field.errors %}
48+ < span class ="text-error text-sm "> {{ error }}</ span >
49+ {% endfor %}
50+ </ div >
51+ {% endfor %}
52+ {{ redirect_field }}
6453
65- {% if SOCIALACCOUNT_ENABLED %}
66- < div class ="divider "> Or Use a Third Party App</ div >
67- < div class ="text-center ">
68- {% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
54+ < button type ="submit " class ="btn btn-primary btn-block ">
55+ {% trans "Sign Up" %}
56+ </ button >
57+ </ form >
58+ {% endif %}
6959 </ div >
70- {% endif %}
7160 </ div >
7261 </ div >
73- </ div >
7462{% endblock content %}
7563
76- {% block extra_body %}
77- {{ block.super }}
78- {% endblock extra_body %}
79-
8064{% block scripts %}
81- < script >
82- function togglePasswordVisibility ( inputId ) {
83- const input = document . getElementById ( inputId ) ;
84- if ( input . type === "password" ) {
85- input . type = "text" ;
86- } else {
87- input . type = "password" ;
65+ < script >
66+ function togglePasswordVisibility ( inputId , button ) {
67+ const input = document . getElementById ( inputId ) ;
68+ const icon = button . querySelector ( ".eye-icon" ) ;
69+
70+ if ( input . type === "password" ) {
71+ input . type = "text" ;
72+ // Change to Closed Eye Icon
73+ icon . innerHTML = `
74+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12s3-5 9-5 9 5 9 5-3 5-9 5-9-5-9-5z" />
75+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.53 9.53a3 3 0 014.24 4.24" />
76+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1l22 22" />
77+ ` ;
78+ } else {
79+ input . type = "password" ;
80+ // Change to Open Eye Icon
81+ icon . innerHTML = `
82+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
83+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
84+ ` ;
85+ }
8886 }
89- }
90- </ script >
91- {% endblock %}
87+ </ script >
88+ {% endblock %}
0 commit comments