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" required>
  26                 <p class="help-block">If your organization does not deploy a Fed4FIRE authority itself,<br> you can use the default one called "fed4fire".</p>
  27         </div>
  28
  29         <div class="row">
  30         <div class="col-md-4">
  31
  32             <div class="form-group">
  33                         <label for="firstname" class="control-label">Personal information</label>
  34                         <p></p>
  35                         <input type="text" name="firstname" class="form-control" style="width:200px" minlength="2" value="{{ first_name }}" placeholder="First name" required />
  36             </div>
  37             <div class="form-group">
  38                         <input type="text" name="lastname" size="25" class="form-control" style="width:200px" minlength="2" value="{{ last_name }}" placeholder="Last name" required />
  39             </div>
  40                 <div class="form-group">
  41                 <input type="email" name="email" size="25"  class="form-control" style="width:200px" value="{{ email }}"
  42                         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."
  43                         placeholder="Email" required/>
  44                 </div>
  45         </div>
  46
  47         <!-- LOGIN
  48         TODO: Login should be suggested from user email or first/last name, and
  49         checked for existence. In addition, the full HRN should be shown to the
  50         user.
  51     <div class="form-group">
  52       <label for="login" class="col-xs-2 control-label">Login</label>
  53       <div class="col-xs-4">
  54           <input type="text" name="login" size="25" class="form-control" minlength="2" value="{{ login }}" placeholder="Login" required />
  55       </div>
  56       <div class="col-xs-6"><p class="form-hint">Enter your login</p></div>
  57     </div>
  58         -->
  59         <div class="col-md-4">
  60             <div class="form-group">
  61               <label for="password" class="control-label">Authentication</label>
  62                   <p></p>
  63               <input type="password"  id="password" name="password"   class="form-control" style="width:200px" minlength="4" value="{{ password }}"
  64                         title="Your password allows you to log in to this portal."
  65                         placeholder="Password" required/>
  66             </div>
  67             <div class="form-group">
  68                         <input type="password"  id="confirmpassword" name="confirmpassword" style="width:200px"  minlength="4" class="form-control" value=""
  69                                 placeholder="Confirm password" required/>
  70             </div>
  71             <div class="form-group">
  72                 <!--<label for="question" class="control-label">Keys</label> -->
  73                         <select name="question" class="form-control" style="width:200px" id="key-policy"
  74                                 title="Your public/private key pair allows you to access the testbeds." required>
  75                                 <option value="generate">Generate my keys for me (recommended)</option>
  76                                 <option value="upload">Upload my public key (advanced users only)</option>
  77                         </select>
  78             </div>
  79             <div class="form-group" style="display:none;" id="upload_key">
  80                 <label for="file" class="control-label">Upload public key</label>
  81                 <input type="file" name="user_public_key" class="form-control" style="width:200px" id="user_public_key" required/>
  82                 <br />
  83                         <div class="alert alert-danger" id="pkey_del_msg">
  84                                 In order for the portal to contact testbeds on your behalf, so as to list and reserve resources, you will need to
  85                                 <a href="http://trac.myslice.info/wiki/InstallSfa" target="_blank">delegate your public key to the portal.</a>
  86                         </div>
  87             </div>
  88         </div>
  89         </div>
  90
  91         <div class="form-group">
  92                 <p></p>
  93                 <input type="checkbox" name="agreement" value="agreement" required/> I agree to the
  94                 <button class="btn btn-default btn-xs" data-toggle="modal" data-target="#myModal">terms and conditions.</button>
  95         </div>
  96         <!-- Modal - columns selector -->
  97                 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  98                         <div class="modal-dialog">
  99                         <div class="modal-content">
 100                                 <div class="modal-header">
 101                                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 102                                                 <h4 class="modal-title" id="myModalLabel">Terms & Conditions</h4>
 103                                 </div>
 104                                 <div class="modal-body">
 105                                                 <p>The exact terms and conditions for Fed4FIRE are currently under development.</p>
 106                                 </div>
 107                                 <div class="modal-footer">
 108                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 109                                 </div>
 110                         </div>
 111                         </div>
 112                 </div>
 113
 114     <div class="form-group" id="register">
 115                 <p></p>
 116         <button class="submit btn btn-primary" type="submit">Sign up</button>
 117     </div>
 118 </form>
 119 </div>
 120 <script>
 121 jQuery(document).ready(function(){
 122     var availableTags = [
 123     {% if authorities %}
 124         {% for authority in authorities %}
 125             {% if authority.name %}
 126                 {value:"{{ authority.authority_hrn }}",label:"{{authority.name}}"},
 127             {% else %}
 128                 {value:"{{ authority.authority_hrn }}",label:"{{authority.authority_hrn}}"},
 129             {% endif %}
 130         {% endfor %}
 131     {% else %}
 132         {value:"",label:"No authority found !!!"}
 133     {% endif %}
 134     ];
 135     jQuery( "#authority_hrn" ).autocomplete({
 136       source: availableTags,
 137       minLength: 0,
 138       change: function (event, ui) {
 139           if(!ui.item){
 140               //http://api.jqueryui.com/autocomplete/#event-change -
 141               // The item selected from the menu, if any. Otherwise the property is null
 142               //so clear the item for force selection
 143               jQuery("#authority_hrn").val("");
 144           }
 145       }
 146       //select: function( event, ui ) {console.log(jQuery(this))}
 147     });
 148 });
 149 </script>
 150 {% endblock %}
 151