portal/templates/fed4fire/fed4fire_registration_view.html

   1 {% extends "layout.html" %}
   2
   3 {% block content %}
   4
   5 <div class="row">
   6         <h1><img src="{{ STATIC_URL }}icons/user-xs.png" alt="User Registration" />User sign-up</h1>
   7 </div>
   8 <div class="row">
   9                 <p></p>
  10                 <p><strong>Questions? <a href="/portal/contact" >Contact us.</a></strong></p>
  11 </div>
  12 {% if errors %}
  13 <ul>
  14   {% for error in errors %}
  15   <li>{{ error }}</li>
  16   {% endfor %}
  17 </ul>
  18 {% endif %}
  19 <div class="row"><div class="col-sm-12">
  20 <form class="cmxform form-horizontal" id="registrationForm" method="post" enctype="multipart/form-data" role="form">
  21 {% csrf_token %}
  22         <div class="form-group">
  23                 <label for="authority_hrn" class="control-label">Authority</label>
  24                 <p></p>
  25                 <input id="authority_hrn" name="authority_hrn" class="form-control" style="width:530px" value="{{ authority_hrn }}" placeholder="fed4fire.global" required>
  26                 <p class="help-block">If your organization does not deploy a Fed4FIRE authority itself, you can use the<br> default one called "fed4fire.global".
  27                 If your organization however does provide a<br> Fed4FIRE authority itself, please make sure to select it here. If you start typing<br> your organization's
  28                  name, it will pop up.
  29                 </p>
  30         </div>
  31
  32         <div class="row">
  33         <div class="col-md-4">
  34
  35             <div class="form-group">
  36                         <label for="firstname" class="control-label">Personal information</label>
  37                         <p></p>
  38                         <input type="text" name="firstname" class="form-control" style="width:200px" minlength="2" value="{{ first_name }}" placeholder="First name" required />
  39             </div>
  40             <div class="form-group">
  41                         <input type="text" name="lastname" size="25" class="form-control" style="width:200px" minlength="2" value="{{ last_name }}" placeholder="Last name" required />
  42             </div>
  43                 <div class="form-group">
  44                 <input type="email" name="email" size="25"  class="form-control" style="width:200px" value="{{ email }}"
  45                         title="Your e-mail address will be your identifier for logging in. We contact you to verify your account and then, occasionally, for important issues."
  46                         placeholder="Email" required/>
  47                 </div>
  48         </div>
  49
  50         <!-- LOGIN
  51         TODO: Login should be suggested from user email or first/last name, and
  52         checked for existence. In addition, the full HRN should be shown to the
  53         user.
  54     <div class="form-group">
  55       <label for="login" class="col-xs-2 control-label">Login</label>
  56       <div class="col-xs-4">
  57           <input type="text" name="login" size="25" class="form-control" minlength="2" value="{{ login }}" placeholder="Login" required />
  58       </div>
  59       <div class="col-xs-6"><p class="form-hint">Enter your login</p></div>
  60     </div>
  61         -->
  62         <div class="col-md-4">
  63             <div class="form-group">
  64               <label for="password" class="control-label">Authentication</label>
  65                   <p></p>
  66               <input type="password"  id="password" name="password"   class="form-control" style="width:200px" minlength="4" value="{{ password }}"
  67                         title="Your password allows you to log in to this portal."
  68                         placeholder="Password" required/>
  69             </div>
  70             <div class="form-group">
  71                         <input type="password"  id="confirmpassword" name="confirmpassword" style="width:200px"  minlength="4" class="form-control" value=""
  72                                 placeholder="Confirm password" required/>
  73             </div>
  74             <div class="form-group">
  75                 <!--<label for="question" class="control-label">Keys</label> -->
  76                         <select name="question" class="form-control" style="width:200px" id="key-policy"
  77                                 title="Your public/private key pair allows you to access the testbeds." required>
  78                                 <option value="generate">Generate my keys for me (recommended)</option>
  79                                 <option value="upload">Upload my public key (advanced users only)</option>
  80                         </select>
  81             </div>
  82             <div class="form-group" style="display:none;" id="upload_key">
  83                 <label for="file" class="control-label">Upload public key</label>
  84                 <input type="file" name="user_public_key" class="form-control" style="width:200px" id="user_public_key" required/>
  85                 <br />
  86                         <div class="alert alert-danger" id="pkey_del_msg">
  87                                 In order for the portal to contact testbeds on your behalf, so as to list and reserve resources, you will need to
  88                                 <a href="http://trac.myslice.info/wiki/InstallSfa" target="_blank">delegate your public key to the portal.</a>
  89                         </div>
  90             </div>
  91         </div>
  92         </div>
  93
  94         <div class="form-group">
  95                 <p></p>
  96                 <input type="checkbox" name="agreement" value="agreement" required/> I agree to the
  97                 <button class="btn btn-default btn-xs" data-toggle="modal" data-target="#myModal">terms and conditions.</button>
  98         </div>
  99         <!-- Modal - columns selector -->
 100                 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 101                         <div class="modal-dialog">
 102                         <div class="modal-content">
 103                                 <div class="modal-header">
 104                                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 105                                                 <h4 class="modal-title" id="myModalLabel">Terms & Conditions</h4>
 106                                 </div>
 107                                 <div class="modal-body">
 108                                                 <p>The exact terms and conditions for Fed4FIRE are currently under development.</p>
 109                                 </div>
 110                                 <div class="modal-footer">
 111                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 112                                 </div>
 113                         </div>
 114                         </div>
 115                 </div>
 116
 117     <div class="form-group" id="register">
 118                 <p></p>
 119         <button class="submit btn btn-primary" type="submit">Sign up</button>
 120     </div>
 121 </form>
 122 </div>
 123 <script>
 124 jQuery(document).ready(function(){
 125     //this .load is useless here
 126     $("#authority_hrn").load("/rest/user/", {"fields" : ["parent_authority"], "filters": {"user_hrn": "{{ user_hrn }}"}}, function(data) {
 127         $(this).attr("value", 'fed4fire.global');
 128     });
 129     var availableTags = [
 130     {% if authorities %}
 131         {% for authority in authorities %}
 132             {% if authority.name %}
 133                 {value:"{{ authority.authority_hrn }}",label:"{{authority.name}}"},
 134             {% else %}
 135                 {value:"{{ authority.authority_hrn }}",label:"{{authority.authority_hrn}}"},
 136             {% endif %}
 137         {% endfor %}
 138     {% else %}
 139         {value:"",label:"No authority found !!!"}
 140     {% endif %}
 141     ];
 142     jQuery( "#authority_hrn" ).autocomplete({
 143       source: availableTags,
 144       minLength: 0,
 145       change: function (event, ui) {
 146           if(!ui.item){
 147               //http://api.jqueryui.com/autocomplete/#event-change -
 148               // The item selected from the menu, if any. Otherwise the property is null
 149               //so clear the item for force selection
 150               jQuery("#authority_hrn").val("");
 151           }
 152       }
 153       //select: function( event, ui ) {console.log(jQuery(this))}
 154     });
 155 });
 156 </script>
 157 {% endblock %}
 158