regluit/frontend/templates/manage_account.html

{% extends "basedocumentation.html" %}
{% block title %}Your Unglue.it Account{% endblock %}
{% block extra_extra_head %}
<link type="text/css" rel="stylesheet" href="/static/css/pledge.css"  />
{% include "stripe_stuff.html" %}
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
    $j('#show_cc_form').click(function(){
        $j('#cc_pledge').toggle();
    });
});
</script>
{% endblock %}
{% block doccontent %}
<h2>Your Pledges</h2>
<dl>
{% for transaction in request.user.profile.pledges %}
    <dt><i><a href="{% url work transaction.campaign.work.id %}">{{ transaction.campaign.work.title }}</a></i> (<a href="{% url pledge_modify transaction.campaign.work.id %}">modify pledge</a>)</dt>
    <dd><div class="modify_notification">
	{% include "trans_summary.html" %}
    </div></dd>
{% empty %}
<dt>You don't have any active pledges.  To make one, click on a book you'd like to support among our <a href="{% url campaign_list facet="ending" %}">active campaigns</a>.  There's a "Support" button on every campaign page, or just click on your favorite premium to get started.</dt>
{% endfor %}
</dl>
<h2 id="your_payment_info">Your Payment Info</h2>
{% if request.user.profile.account %}
    <p>Unglue.it has a credit card on file for you. We'll use this to fund your pledges.</p>
    <b>Card type:</b> {{ request.user.profile.account.card_type }}<br />
    <b>Number:</b> ************{{ request.user.profile.account.card_last4 }}<br />
    <b>Expiration date:</b> {{ request.user.profile.account.card_exp_month }}/{{ request.user.profile.account.card_exp_year }}.<br />
    <p>We use <a href="https://stripe.com/">Stripe</a> to keep your information secure.</p><br />
    <p><a class="fakeinput" id="show_cc_form">Update Card</a></p>
{% else %}
    {% if request.user.profile.old_account %}
        <p>The card you previously gave us has become inactive; for example, because of its expiration date. You'll need to provide a current one before you can support ungluing campaigns.</p>
        <p>We use <a href="https://stripe.com/">Stripe</a> to keep your information secure.</p><br />
        <p><a class="fakeinput" id="show_cc_form">Update Card</a></p>
    {% else %}
        <p>Unglue.it has no active credit card on file for you.  You'll need to provide one before you can support ungluing campaigns.</p>
        <p>We use <a href="https://stripe.com/">Stripe</a> to keep your information secure.</p><br />
        <p><a class="fakeinput" id="show_cc_form">Add A Card</a></p>
    {% endif %}
{% endif %}
<div id="cc_pledge" style="display: none;">
    <div id="authorize" class="clearfix">

        <form action="#" method="POST" id="payment-form">
            <div class="innards">
                <div class="clearfix">
                    {% csrf_token %}
                    {{ form.non_field_errors }}
                    {{ form.as_p }}	
                </div>
                <div class="form-row clearfix">
                    <label>Card Number:</label>
                    <input id="card_Number" type="text" class="card-number" />
                </div>
                <div class="form-row clearfix cvc">
                    <label>CVC:</label>
                    <input id="card_CVC" type="text" size="4" autocomplete="off" class="card-cvc" /> <span id="cvc_help">(what is this?)</span>
                    <div id="cvc_answer"><img src="/static/images/cvcimage.jpeg" alt="a typical credit card with CVC">For most cards, this is a 3-digit number at the end of the signature strip on the back.  For American Express, it's a four-digit number in small print on the front.</div>
                </div>
                <div class="form-row clearfix initial_values">
                    <label>Expiration:</label>
                    <input id="card_ExpiryMonth" type="text" size="2" value="MM" class="card-expiry-month" />
                    <input id="card_ExpiryYear" type="text" size="4" value="YYYY" class="card-expiry-year" />
                </div>
                <div class="form-row clearfix">
                    <label>Name:</label>
                    <input id="card_Name" type="text" class="address" />
                </div>
                <div class="form-row clearfix">
                    <label>Address Line 1:</label>
                    <input id="card_AddressLine1" type="text" class="address" />
                </div>
                <div class="form-row clearfix">
                    <label>Address Line 2:</label>
                    <input id="card_AddressLine2" type="text" class="address" />
                </div>
                <div class="form-row clearfix">
                    <label>City:</label>
                    <input id="card_AddressCity" type="text" class="address" />
                </div>
                <div class="form-row clearfix">
                    <label>State/Province :</label>
                    <input id="card_AddressState" type="text" class="address" />
                </div>
                <div class="form-row clearfix">
                    <label>ZIP/Postal Code:</label>
                    <input id="card_AddressZip" type="text" class="address" />
                </div>
                <div class="form-row clearfix">
                    <label>Country:</label>
                    <input id="card_AddressCountry" type="text" class="address" />
                </div>
            </div>
    
            <div class="payment-errors"></div>
            <input id="cc_submit" type="submit" class="submit-button loader-gif" value="Save Credit Card" />
    
        </form>
    </div>
</div>

<h2> Other Account Management Tools </h2>
<ul>
<li>Want to <a href="{% url auth_password_change %}">change your password</a>?</li>
<li>Want to <a href="/accounts/edit/">change your username or email address</a>?</li>
</ul>
{% endblock %}