{% extends 'base.html' %}

{% block content %}
<!-- this overrides the django.contrib.auth default  form
and it must be placed in 
troggle/templates/login/register.html
because magic.

This is because Django is Opinionated and does lots of Invisible Defaults
see 
https://docs.djangoproject.com/en/5.0/topics/auth/customizing/#using-a-custom-user-model-when-starting-a-project
-->
<script>
function myFunction() {
  var x = document.getElementById("id_password1");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
  var x = document.getElementById("id_password2");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>
<style>
input, textarea {font-family: monospace; font-weight: bold; text-align:right; font-size: 100%; padding: 0.5em;  }
textarea {text-align:left }
input[type="checkbox"] {
	transform: scale(1.7);
	margin: 10px;
	}
li {color:red}
</style> 
	
<div class='middle'>
<h2>{% if newuser %}
New User Registration <br />for someone who has never attended Expo
{% else %}
User Registration - for a personal login to Troggle by a known caver
{%endif %}</h2>
<!--using template login/register.html -->
</div>
<!-- This is really TWO forms, depending on whether the 'new_user' is set or not.

ALSO it behaves differently if a username is specified in the URL, when username becomes readonly

-->
<span style="color:blue; font-weight: bold;">
{{ admin_notice }}
</span>
<h3>Register your email address</h3>

{% if newuser %}
<p>You need to register on the website before you can fill out the 'signup' form to request to attend Expo 
(not in 2025: this is for future Expos).
{% else %}
<p>For previous expoers, your username must be your 'troggle id' as listed on the <a href='/people_ids'>past expoers list</a>
e.g. "<a href="/person/rover-richardson">rover-richardson</a>".
<p>For new people wanting to come to expo for the first time, please use the <a href="/accounts/newregister/">New User</a> registration form
{%endif %}
<p>This will also eventually sign you up automatically to the 
<a href="https://lists.wookware.org/cgi-bin/mailman/roster/expo">expo email list</a>. 
So type in the same email address that you use there if you have already signed up to that.
<p>
<span style="color:red; font-weight: bold;">
{{ warning }} </span>
<span style="color:red">
{{ form.errors }} </span>


<div style='width: 700px; font-family: monospace; font-weight: bold; font-size: 150%; text-align: right; '>
    <form  method="post" accept-charset="utf-8">{% csrf_token %}
<p>
{% if newuser %}
    <label for="id_username">Your name:</label>
	   {{form.fullname}}
{% else %}
	{% if email_stored %}
    <label for="id_username">Username <span style="color:blue">(checked)</span>:</label>
	{% else %}
    <label for="id_username">Username:</label>
	{% endif %}
	   {{form.username}}
{%endif %}

 
</p>
<p>
	{% if email_stored %}
    <label for="id_email">email <span style="color:blue">(stored)</span>:</label>
	{% else %}
    <label for="id_email">email:</label>
	{% endif %}
	{{form.email}}
</p>
{% if newuser %}
{% else %}
	{% if logged_in  %}<!-- once we have initially logged in,
	all later password changes are done ONLY via email token password re-set-->
	{% else %}
	<p>
		<label for="id_password1">Troggle password:</label>
		{{form.password1}}
	</p>
	<p>
		<label for="id_password2">Re-type your troggle password:</label>
		{{form.password2}}
	</p>
	{%endif %}
{%endif %}

<div class='align-right'>
{% if newuser %}
{% else %}
	{% if logged_in  %}
	{% else %}
	<input type="checkbox" checked name="visible-passwords" onclick="myFunction()">Make Passwords visible (on this form only)
	{%endif %}
{%endif %}
	<br /><br />
{% if newuser %}
	
	<button  class="fancybutton"  style="padding: 0.5em 25px; font-size: 100%;" 
		onclick="window.location.href='/accounts/password_reset/'" value = "Go to" >
		Get login token by email &rarr;
	</button>
{% else %}
	<button  class="fancybutton"  type="button"
	{% if logged_in or email_stored %}
		style="padding: 0.5em 25px; font-size: 100%;" 
	{% else %}
		style="padding: 0.5em 25px; font-size: 100%; background: silver;"  
	    disabled 	
	{% endif %}
		onclick="window.location.href='/accounts/password_reset/'" value = "Go to" >
		Confirm email
	</button>
	&nbsp;&nbsp;&nbsp;

	{% if logged_in  %}
	<button  class="fancybutton"  style="padding: 0.5em 25px; font-size: 100%;" type = "submit" >
	Change or confirm email &rarr;
	</button>
	{% else %}
		{% if email_stored %}
		{% else %}
		<button  class="fancybutton"  style="padding: 0.5em 25px; font-size: 100%;" type = "submit" >
		Register &rarr;
		</button>
		{% endif %}
	{% endif %}

{%endif %}
{% if email_stored %}
	<button  class="fancybutton"  type="button"
		style="padding: 0.5em 25px; font-size: 100%;" 
		onclick="window.location.href='/accounts/login/'" value = "Go to" >
	Login &rarr;
	</button>
{% endif %}
</div>
</form>
</div>
<div style='width: 50em' align="left">
<p>The "Register" button will take you to a form where you will have to <em>re-type in the email address</em> you enter above.

{% include 'login/register_text.html' %}


<span style="color:red">
{{ form.non_field_errors }} <!-- form validation errors appear here, and also at the top of the form-->
</span>
</div>

{% endblock %}