Skip to content

Fix buttons problems in 'Change Email' section. #5219

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 13, 2019
Merged

Fix buttons problems in 'Change Email' section. #5219

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
888c12e
use javascript
dojutsu-user Feb 3, 2019
e7e0e46
Merge branch 'master' into change-buttons-style
dojutsu-user May 9, 2019
3e8a642
small lint fixes
dojutsu-user May 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 91 additions & 55 deletions readthedocs/templates/account/email.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,68 +9,104 @@
{% block edit_content_header %} {% trans "Change Email" %} {% endblock %}

{% block edit_content %}
{% if user.emailaddress_set.all %}
<p>{% trans 'The following email addresses are associated with your account:' %}</p>

<form action="{% url 'account_email' %}" class="email_list" method="post">
{% csrf_token %}
<fieldset class="blockLabels">

{% for emailaddress in user.emailaddress_set.all %}
<div class="ctrlHolder">
<label for="email_radio_{{forloop.counter}}" class="{% if emailaddress.primary %}primary_email{%endif%}">

<input id="email_radio_{{forloop.counter}}" type="radio" name="email" {% if emailaddress.primary %}checked="checked"{%endif %} value="{{emailaddress.email}}"/>

{{ emailaddress.email }}
{% if emailaddress.verified %}
<span class="verified">{% trans "Verified" %}</span>
{% else %}
<span class="unverified">{% trans "Unverified" %}</span>
{% endif %}
{% if emailaddress.primary %}<span class="primary">{% trans "Primary" %}</span>{% endif %}
</label>
</div>
{% endfor %}

<div class="buttonHolder">
<button class="secondaryAction" type="submit" name="action_primary" >{% trans 'Make Primary' %}</button>
<button class="secondaryAction" type="submit" name="action_send" >{% trans 'Re-send Verification' %}</button>
<button class="primaryAction" type="submit" name="action_remove" >{% trans 'Remove' %}</button>
</div>
{% if user.emailaddress_set.all %}
<p>{% trans 'The following email addresses are associated with your account:' %}</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I think we have been using " for these blocks.


<form action="{% url 'account_email' %}" class="email_list" method="post">
{% csrf_token %}
<fieldset class="blockLabels">

{% for emailaddress in user.emailaddress_set.all %}
<div class="ctrlHolder">
<label for="email_radio_{{forloop.counter}}" class="{% if emailaddress.primary %}primary_email{%endif%}">
<input id="email_radio_{{forloop.counter}}" type="radio" name="email" {% if emailaddress.primary %}checked="checked"{%endif %} value="{{emailaddress.email}}"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a good practice to use spaces around {{ and {%. For example, {{ forloop.counter }}.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you.
I have pushed the changes.


{{ emailaddress.email }}
{% if emailaddress.verified %}
<span class="verified">{% trans "Verified" %}</span>
{% else %}
<span class="unverified">{% trans "Unverified" %}</span>
{% endif %}
{% if emailaddress.primary %}<span class="primary">{% trans "Primary" %}</span>{% endif %}
</label>
</div>
{% endfor %}

<div class="buttonHolder">
<button class="secondaryAction" type="submit" name="action_primary" >{% trans 'Make Primary' %}</button>
<button class="secondaryAction" type="submit" name="action_send" >{% trans 'Re-send Verification' %}</button>
<button class="primaryAction" type="submit" name="action_remove" >{% trans 'Remove' %}</button>
</div>

</fieldset>
</form>

</fieldset>
</form>
{% else %}

{% else %}
<p><strong>{% trans 'Warning:'%}</strong> {% trans "You currently do not have any email address set up. You should really add an email address so you can receive notifications, reset your password, etc." %}</p>
<p><strong>{% trans 'Warning:'%}</strong>{% trans "You currently do not have any email address set up. You should really add an email address so you can receive notifications, reset your password, etc." %}</p>

{% endif %}
{% endif %}

<h2>{% trans "Add E-mail Address" %}</h2>

<h2>{% trans "Add E-mail Address" %}</h2>

<form method="post" action="{% url 'account_email' %}" class="add_email">
{% csrf_token %}
{{ form.as_p}}
<button name="action_add" type="submit">{% trans "Add E-mail" %}</button>
</form>
<form method="post" action="{% url 'account_email' %}" class="add_email">
{% csrf_token %}
{{ form.as_p }}
<button name="action_add" type="submit">{% trans "Add E-mail" %}</button>
</form>

{% endblock %}

{% block footerjs %}

(function() {
var message = "{% trans 'Do you really want to remove the selected email address?' %}";
var actions = document.getElementsByName('action_remove');
if (actions.length) {
actions[0].addEventListener("click", function(e) {
if (! confirm(message)) {
e.preventDefault();
}
});
}
})();

(function() {
var primaryButton = document.querySelector("button[name=action_primary]");
var sendVerificationButton = document.querySelector("button[name=action_send");

{% if user.emailaddress_set.all %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: use .exists here instead of .all.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you.
I have pushed the changes.

{% for emailaddress in user.emailaddress_set.all %}
var email_{{ forloop.counter }} = document.querySelector("input[value='{{ emailaddress.email }}']")
if (email_{{ forloop.counter }}.checked == true) {
{% if emailaddress.primary %}
primaryButton.style.display = 'None';
{% else %}
primaryButton.style.display = 'block';
{% endif %}
{% if emailaddress.verified %}
sendVerificationButton.style.display = 'None';
{% else %}
sendVerificationButton.style.display = 'block';
primaryButton.style.display = 'None';
{% endif %}
}

email_{{ forloop.counter }}.addEventListener('change', function() {
{% if emailaddress.primary %}
primaryButton.style.display = 'None';
{% else %}
primaryButton.style.display = 'block';
{% endif %}
{% if emailaddress.verified %}
sendVerificationButton.style.display = 'None';
{% else %}
sendVerificationButton.style.display = 'block';
primaryButton.style.display = 'None';
{% endif %}
})
{% endfor %}
{% endif %}
})();

{% block extra_body %}
<script type="text/javascript">
(function() {
var message = "{% trans 'Do you really want to remove the selected email address?' %}";
var actions = document.getElementsByName('action_remove');
if (actions.length) {
actions[0].addEventListener("click", function(e) {
if (! confirm(message)) {
e.preventDefault();
}
});
}
})();
</script>
{% endblock %}