FIBRE: updated to the new version, wip on institution page
[myslice.git] / portal / templates / fibre / fibre_registration_view.html
1 {% extends "layout.html" %}
2
3 {% block content %}        
4
5 <div class="row">
6         <div class="col-md-12">
7         <h1><img src="{{ STATIC_URL }}icons/user-xs.png" alt="User Registration" />User sign-up</h1>
8         </div>
9 </div>
10 <div class="row">
11         <div class="col-md-12">
12                 <p><strong>Questions? <a href="/portal/contact" >Contact us.</a></strong></p>
13   </div>
14 </div>
15 {% if errors %}
16 <ul>
17   {% for error in errors %}
18   <li>{{ error }}</li>
19   {% endfor %}
20 </ul>
21 {% endif %}
22
23
24 <form action="/register" class="cmxform form-horizontal" method="post" enctype="multipart/form-data">
25 <div class="row">
26         
27         <div class="col-md-12">
28                         
29                         <div class="form-group">
30                                 {% csrf_token %}
31                                 <label for="authority_hrn" class="control-label">Organization</label>
32                                 <p></p>
33                                 <input id="authority_hrn" name="org_name" class="form-control" style="width:590px" value="{{ organization }}" 
34                                 title="Choose your organization (company/university) from the list that apears when you click in the field and start to type.
35                                  Use the arrow keys to scroll through the list; type part of the name to narrow down the list. If it is not in the list, 
36                                 please request its addition by clicking the link below. We will send an email to the managers that we have on record for 
37                                 your organization, asking them to validate your sign-up request." required />
38                                 <p></p>
39                                 <p>Organization not listed? <a href="/portal/join">Request its addition now.</a></p>
40                         </div>
41         </div>
42 </div>
43
44 <div class="row">
45         <div class="col-md-6">
46         
47             <div class="form-group">
48                         <label for="firstname" class="control-label">Personal information</label>
49                         <p></p>
50                         <input type="text" name="firstname" class="form-control" style="width:350px" minlength="2" value="{{ first_name }}" placeholder="First name" required />
51             </div>
52             <div class="form-group">
53                         <input type="text" name="lastname" size="25" class="form-control" style="width:350px" minlength="2" value="{{ last_name }}" placeholder="Last name" required />
54             </div>
55                 <div class="form-group">
56                 <input type="email" name="email" size="25"  class="form-control" style="width:350px" value="{{ email }}" 
57                         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."
58                         placeholder="Email" required />
59                 </div>
60         </div>  
61
62         <div class="col-md-6">
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:250px" 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:250px"  minlength="4" class="form-control" value="" 
72                                 placeholder="Confirm password" required />
73             </div>
74             <div class="form-group">
75                         <select name="question" class="form-control" style="width:350px" id="key-policy" 
76                                 title="Your public/private key pair allows you to access the testbeds." required >        
77                                 <option value="generate">Generate my keys for me (recommended)</option>
78                                 <option value="upload">Upload my public key (advanced users only)</option>
79                         </select>
80             </div>
81             <div class="form-group" style="display:none;" id="upload_key">
82                 <label for="file" class="control-label">Upload public key</label>
83                 <input type="file" name="user_public_key" class="form-control" style="width:200px" id="user_public_key" />
84                 <br />
85                         <div class="alert alert-danger" id="pkey_del_msg">
86                                 In order for the portal to contact testbeds on your behalf, so as to list and reserve resources, you will need to 
87                                 <a href="http://trac.myslice.info/wiki/InstallSfa" target="_blank">delegate your public key to the portal.</a>
88                         </div>
89             </div>
90         </div>
91 </div>
92 <div class="row">
93         <div class="col-md-12">
94                 <div class="form-group">
95                         <p></p>
96                         <input type="checkbox" name="agreement" value="agreement" required />&nbsp;&nbsp; I agree to the 
97                         <a href="#" data-toggle="modal" data-target="#myModal">terms and conditions.</a> 
98                 </div>
99         </div>
100 </div>
101 <div class="row">
102         <div class="col-md-12">
103                 <div class="form-group" id="register">
104                         <p></p> 
105                 <input class="submit btn btn-onelab" type="submit" value="Sign up" />
106
107             </div>
108         </div>
109 </div>
110 </form>
111
112         <!-- Modal - columns selector -->
113 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
114                         <div class="modal-dialog">
115                         <div class="modal-content">
116                                 <div class="modal-header">
117                                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
118                                                 <h4 class="modal-title" id="myModalLabel">Terms & Conditions</h4>
119                                 </div>
120                                 <div class="modal-body">
121                                                 <p align="left">
122                                         Fibre: Future Internet testbeds experimentation between Brazil and Europe
123                                         <br/>
124                                                 <a href="/portal/terms" target="_blank">[Printable format]</a>
125                                                 </p>
126                                         <h1 align="left">1 Context</h1>
127                                         <p align="left">
128                     The main goal of the FIBRE project is the design, implementation and validation of a shared Future Internet research facility, supporting the joint experimentation of European and Brazilian researchers. In order to achieve this goal the project will carry out four main activities:
129                     </p>
130                                         <p align="left">
131                     The development and operation of a new experimental facility in Brazil, including the setup of equipment to support experimentation with various technologies (fixed layer 2 and layer 3, wireless, optical) as well as the design and implementation of a control framework to automate the use and operation of the testbed.
132                     </p>
133                                         <p align="left">
134                     The development and operation of a Future Internet facility in Europe based on enhancements and the federation of two existing infrastructures: OFELIA and OneLab. Two OFELIA islands (i2CAT and University of Bristol (UNIVBRIS)) and the UTH's NITOS testbed will be enhanced by i) adding more physical resources (servers, OpenFlow-enabled switches and access points) to be able to cope with a bigger number ofusers and different use cases, ii) improving its respective control frameworks (based on the OFELIA control framework and OMF) and iii) adding more manpower to operate the facilities.
135                     </p>
136                                         <p align="left">
137                     The federation of the Brazilian and European experimental facilities, both at the physical connectivity and control framework level, to support the provisioning of slices using resources from both testbeds.
138                     </p>
139 <h2>PROCEDURE OVERVIEW</h2>
140 <p>If your institution is willing to join the FIBRE Consortium, you are kindly requested to follow the steps below:<br></p>
141 <p>1. <a mce_href="http://www.fibre-ict.eu/images/stories/docs/fibre_mou_v0.3.doc" href="http://www.fibre-ict.eu/images/stories/docs/fibre_mou_v0.3.doc">Download the MoU model</a>  to understand the framework of collaboration between your institution and FIBRE project. The content of the MoU shall be discussed in case-by-case basis between the two parties.&nbsp;<span style="line-height: 1.3em;" mce_style="line-height: 1.3em;">&nbsp;</span></p>
142 <p>2. Contact the Project office at <a href="mailto:info@fibre.org.br">info@fibre.org.br</a> to schedule a call to clarify all your questions concerning the duties, responsibilities and advantages of joining the FIBRE project.</p>
143 <p>3. If your institution understand and agree on the commitment stated in the MoU, please submit the application by editing the <a href="http://www.fibre-ict.eu/images/fibre_mou_v0.2_ff.doc" mce_href="http://www.fibre-ict.eu/images/fibre_mou_v0.2_ff.doc" style="style" mce_style="style">MoU template</a> and sending it to 
144  <a href="mailto:info@fibre.org.br">info@fibre.org.br</a></p>
145 <p>4. Application Approval: the FIBRE General Assembly will decide based on the application and information gathered during the call. The approval process will normally take around one month.</p><p>5. By mutual agreement of both parties, MoU will be prepared and signed.</p>
146 <p><span style="line-height: 1.3em;" mce_style="line-height: 1.3em;">6. Testbed usage / island installation: FIBRE will provide instructions and support to help your institution to carry out the activities described in the MoU.</span></p>
147 <p><br></p>
148 <p><span style="line-height: 1.3em;" mce_style="line-height: 1.3em;"><a mce_href="http://webconf2.rnp.br/p27egdf20y7/" href="http://webconf2.rnp.br/p27egdf20y7/">Watch the webconference meeting about the MoU details</a><br> (Held on 5/July 2013, in Portuguese)<br></span></p>
149 <p><br></p>
150                                 </div>
151                                 <div class="modal-footer">
152                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
153                                 </div>
154                         </div>
155                         </div>
156 </div>
157
158     
159 <script>
160 $(document).ready(function(){
161     var availableTags = [
162     {% if authorities %}
163         {% for authority in authorities %}
164             {% if authority.name %}
165                 {value:"{{ authority.name }}",label:"{{authority.name}}"},
166             {% else %}
167                 {value:"{{ authority.authority_hrn }}",label:"{{authority.authority_hrn}}"},
168             {% endif %}
169         {% endfor %}    
170     {% else %}
171         {value:"",label:"No authority found !!!"}
172     {% endif %}
173     ];
174         // sorting the list
175         availableTags.sort(function(a,b){
176                 var nameA=a.value.toLowerCase(), nameB=b.value.toLowerCase();
177                 if (nameA < nameB) {
178                 return -1;
179                 }
180                 if (nameA > nameB) {
181                 return 1;
182                 }
183         return 0;
184         }); 
185         // auto-complete the form
186     $( "#authority_hrn" ).autocomplete({
187       source: availableTags,
188       minLength: 0,
189       change: function (event, ui) {
190           if(!ui.item){
191               //http://api.jqueryui.com/autocomplete/#event-change -
192               // The item selected from the menu, if any. Otherwise the property is null
193               //so clear the item for force selection
194               jQuery("#authority_hrn").val("");
195           }
196       }
197       //select: function( event, ui ) {console.log(jQuery(this))}
198     });
199         // for hover texts
200         $('[title!=""]').qtip();
201         $("form").validate();
202         $("form").submit(function() {
203                 if ($('select option:selected').val() == 'upload') {
204                         if ($('input[name=user_public_key]').val() == '') {
205                                 alert('Please specify the key file to upload');
206                                 return false;
207                         }
208                 }
209         });
210 });
211 </script>
212 {% endblock %}
213