Changeset 5691

Show
Ignore:
Timestamp:
08/14/12 14:02:49 (7 years ago)
Author:
gpress
Message:

tickets #1072, #1073. This commit redesigns and expands the look and features of profile.html page. Also reformats the website to be a static width instead of a % and page contents will now be centered in a browser window. Also adds help tooltips and removes the need for the api_info and change_key pages as their functionality is added to profile.html.

Location:
seattle/trunk/seattlegeni/website/html
Files:
2 added
5 modified

Legend:

Unmodified
Added
Removed
  • seattle/trunk/seattlegeni/website/html/media/css/common.css

    r5496 r5691  
    4343        font-family: "Segoe UI", "Lucida Grande", "Helvetica" , sans-serif; 
    4444        font-size: 12pt; 
     45          min-width: 1000px; /* ADDED July 2012 */ 
     46          margin: 0px auto; /* ADDED Aug 14, 2012 */ 
    4547} 
    4648 
     
    7476 
    7577#header { 
    76     width: 70%; 
     78    width: 900px;   /* Edited Aug 14, 2012  prev width:70%*/ 
    7779    margin: 30px auto 20px auto; 
    7880} 
     
    100102 
    101103#navigator { 
     104    border-bottom: 3px solid #222; 
    102105    width: 100%; 
    103     border-bottom: 3px solid #222; 
     106    margin: 0 auto;  /* ADDED Aug 14, 2012 */ 
    104107} 
    105108 
    106109#tabs { 
    107     width: 70%; 
    108     margin: 0 auto; 
     110    margin: 0 auto;  
     111    width: 900px; /* Editied Aug 14, 2012 prev width: 70% */ 
    109112} 
    110113 
     
    157160 
    158161#middle { 
    159     margin: 0 auto; 
    160     width: 70%; 
    161         padding-bottom: 60px; 
     162   margin: 0 auto; 
     163   width: 900px;  /* Edited Aug 14, 2012 prev width:70% */ 
     164  padding-bottom: 60px; 
    162165} 
    163166 
     
    175178.warning2 { 
    176179        border: 1px solid red; 
    177         max-width : 60%; 
    178180        margin: 20px 60px; 
    179181        padding: 10px 20px; 
     
    184186.message { 
    185187        border: 1px solid green; 
     188           max-width : 682px;  /* ADDED July 2012 */ 
    186189        margin: 20px 60px; 
    187190        padding: 10px 20px; 
     
    211214 
    212215#learn-about-seattle { 
    213     max-width : 70%; 
     216   /* max-width : 70%;*/ 
    214217    text-align : center; 
    215218    background-color : #ded; 
  • seattle/trunk/seattlegeni/website/html/media/css/profile.css

    r5611 r5691  
    44*******************************/ 
    55 
    6 h1 {  /* ADDED July 27, 2012 */ 
     6h1 {  
    77  font-size: 1.8em;  
    88  border-bottom: 1px solid #bbb;  
    9   width: 70%; min-width: 688px; 
    10 } 
    11  
    12 table.profile {   
    13   border-collapse: collapse; 
    14   border-spacing: 0; 
    15   width: 70%; 
    16     min-width: 688px; /* ADDED July 27, 2012 to fix the table collapsing on itself when the browser is below a certain size */ 
     9  width: 70%;  
     10  min-width: 688px; 
    1711} 
    1812 
     
    2418} 
    2519 
     20#error_msg { 
     21  background-color : #f2dbdb; 
     22  border : 1px solid red; 
     23  padding : 1em; 
     24  margin-bottom : 1em; 
     25} 
     26 
     27ul.errorlist li { 
     28        font-size: 12pt; 
     29  padding: 0px; 
     30} 
     31 
     32/* ADDED July 27, 2012 to fix the table collapsing on itself when the browser is below a certain size */ 
     33table.profile {   
     34  border-collapse: collapse; 
     35  border-spacing: 0; 
     36  width: 70%; 
     37  min-width: 688px;  
     38} 
     39 
    2640table.profile tr td.key { 
    2741  text-align: right; 
    2842  height: 30px; 
     43        font-size: 16px; 
    2944  font-weight: bold; 
    30     min-width: 150px; /* CHANGED July 27, 2012 (Prev. width 150px)*/ 
     45  width: 145px; 
    3146} 
    3247 
    3348table.profile tr td.value { 
    34   padding-left: 15px;    
     49  padding-left: 20px;    
    3550    min-width: 500px; /* ADDED July 27, 2012 */ 
    3651} 
     
    4964 
    5065table.profile form{  
    51         display: inline; 
     66        display:inline; 
    5267} 
    5368 
     
    7489  display : inline;      
    7590} 
     91/* ADDED(everything below) Aug 14, 2012 */ 
     92#generate_api { 
     93  width: 175px; 
     94} 
     95 
     96#change_key form { 
     97  display: inline; 
     98  width: 688px;  
     99} 
     100 
     101#generate_keypair { 
     102  position:relative; 
     103  width: 175px; 
     104  float: right; 
     105  margin-right: 15px; 
     106 
     107} 
     108#edit_password table { 
     109 display:inline; 
     110 margin: auto; 
     111  border-collapse: collapse; 
     112  border-spacing: 0; 
     113  padding-left: 5px; 
     114  width: 100%; 
     115} 
     116 
     117#edit_password td.field { 
     118  padding-left: 5px; 
     119 
     120} 
     121 
     122.wide_button { 
     123  width: 175px; 
     124} 
     125 
     126.api_cell { 
     127  color:red; 
     128} 
     129 
     130.api_cell:hover { 
     131  text-decoration: underline;  
     132} 
     133 
     134img.help { 
     135  position: relative; 
     136  float: left; 
     137  left: 147px; 
     138  display: none; 
     139  /* when a negative margin is applied to right or bottom 
     140  it allows the element to overlap 
     141  */ 
     142  margin-bottom: -50px; 
     143} 
     144 
     145#id_email { 
     146  width: 200px;  
     147} 
     148 
     149#id_affiliation { 
     150  width: 200px; 
     151} 
     152 
     153#up_arrow { 
     154  height: 36px; 
     155  width: 36px; 
     156  float: right; 
     157  position: relative; 
     158  margin-right: 132px; 
     159  /*when a negative margin is applied to right or bottom 
     160  it allows the element to overlap 
     161  */ 
     162  margin-bottom:-50px; 
     163} 
  • seattle/trunk/seattlegeni/website/html/media/scripts/edit_profile.js

    r5611 r5691  
    11/* 
    2         JQuery to enable various interactions in profile.html 
     2        JQuery functions to enable various interactions in profile.html 
    33        Author: Gaetano Pressimone 
    4         Last Modified: July 27, 2012 
     4        Last Modified: Aug 13, 2012 
    55*/ 
    66 
    77/* 
    8         make sure the page is ready before using 
     8makes sure the page is loaded before using and dont load mouseover_table fn 
     9 if a mobile device 
    910*/ 
    10 $(document).ready(onclick_edit); 
     11$(document).ready(function() { 
     12  $("button.edit").click(on_edit_button_click); 
     13  show_keyform(); 
     14  show_api_key(); 
     15  if (!(navigator.userAgent.match(/(iphone|ipod|ipad|android|blackberry|windows ce|palm|symbian)/i))) { 
     16  mouseover_table();} 
     17}); 
    1118/* 
    12 When the edit button is pushed, the cell's hidden content is revealed and hides all other cells content (if previously revealed) 
     19When a Edit button is pushed, the cell's hidden content is revealed and hides  
     20all other table cells content (if previously revealed).  Also changes the text of  
     21the edit button from "Edit' to "Cancel" and vice versa. 
    1322*/ 
    14 function onclick_edit(){         
    15         $("button.edit").click(function(){ 
     23function on_edit_button_click(){ 
    1624                if ($(this).text()=='Edit'){ 
    17                         $("#middle").find("button.edit") 
    18                                 .text('Edit') 
     25                        $("#middle").find("button.edit").text('Edit') 
    1926                                .siblings('span').hide() 
    2027                                .siblings('span.value').show(); 
    21                         $(this).siblings('span').show().siblings('span.value').hide(); 
    22                 $(this).text('Cancel');     
     28 
     29                        $(this).siblings('span').show() 
     30                                          .siblings('span.value').hide(); 
     31                        $(this).text('Cancel'); 
    2332                } else { 
    2433                        $(this).siblings('span').hide().siblings('span.value').show(); 
    2534                        $(this).text('Edit'); 
    2635                } 
     36} 
     37 
     38/* 
     39When the upload button is pushed, the upload pubkey form and cancel button 
     40are shown while the download button is hidden. 
     41When the cancel button is pushed the upload pubkey form and cnacel button 
     42are hidden and the download button is shown.  
     43*/ 
     44function show_keyform(){ 
     45        $("button#show_keyform").click(function(){ 
     46                $(this).hide() 
     47                                        .siblings('span').show() 
     48                                        .siblings('span.value').hide(); 
     49                $('button.download').hide(); 
     50        }); 
     51  $("button.cancel").click(function(){ 
     52                $("button#show_keyform").siblings('span').hide() 
     53                                                                .siblings('span.value').show(); 
     54                $('button.download,button#show_keyform').show(); 
    2755        }); 
    2856} 
     57/* 
     58show/hide the api key when clicked  
     59*/ 
     60function show_api_key(){ 
     61        $("span.api_cell").click(function(){ 
     62                $("#api_key").show(); 
     63                $(this).hide(); 
     64        });                                 
     65        $("span#api_key").click(function(){ 
     66                $("span.api_cell").show(); 
     67                $(this).hide(); 
     68        }); 
     69} 
     70/* 
     71shows the "?" help img tooltip in the table row on mouseover and hides it 
     72when mouse leaves row  
     73*/ 
     74function mouseover_table(){ 
     75  $(".profile tr").not(':first').hover( 
     76                function () { 
     77                        $(this).contents().find("img.help").show();      
     78                },  
     79                function () { 
     80                        $(this).find("img.help:last").hide(); 
     81                } 
     82        ); 
     83} 
  • seattle/trunk/seattlegeni/website/html/templates/control/profile.html

    r5611 r5691  
    2828                         
    2929                   <table class="profile">           
    30                                 {% if info or msg %} 
     30                                {% if info %} 
    3131                                <tr class="even"> 
    3232                                        <td colspan="2"> 
    33                                                 <div id="info">{{ info }} {{ msg }}</div> 
     33                                                <div id="info">{{ info }}</div> 
    3434                                        </td> 
    3535                                </tr> 
    3636                                {% endif %} 
    37                                 {% if password_form.non_field_errors or email_form.errors or affiliation_form.errors %} 
     37                                {% if password_form.non_field_errors or email_form.errors or affiliation_form.errors or error_msg %} 
    3838                                <tr class="even"> 
    3939                                        <td colspan="2"> 
    40                                                 <div class="warning"> 
     40                                                <div id="error_msg"> 
    4141                                                        {{ password_form.non_field_errors }} 
    4242                                                        {{ email_form.email.errors }} 
    4343                                                        {{ affiliation_form.affiliation.errors }} 
     44                                                        {{ error_msg }} 
    4445                                                </div> 
    4546                                        </td> 
     
    5253                            <tr class="even"> 
    5354                                        <td class="key">Password</td> 
    54                                         <td class="value"> 
     55                                        <td class="value"> <button class="edit" type="button" title="Password">Edit</button> 
    5556                                                <span class="value">********</span> 
    5657                                                <span class="hide_this"> 
    5758                                                        <form action="{% url profile %}" method="POST"> 
    58                                                                 1. {{ password_form.password1 }} <br/> 
    59                                                                 2. {{ password_form.password2 }} 
    60                                                                 <input type="submit" value="Save"/> 
     59                                                                <table id="edit_password"> 
     60                                                                        <tr> 
     61                                                                                <td>Enter password: </td> 
     62                                                                                <td class="field"> {{ password_form.password1 }}</td> 
     63                                                                        </tr> 
     64                                                                        <tr> 
     65                                                                                <td>Confirm password: </td> 
     66                                                                                <td class="field"> {{ password_form.password2 }} <input type="submit" value="Save"/> </td> 
     67                                                                        </tr> 
     68                                                                </table> 
    6169                                                        </form> 
    62                                                 </span> 
    63                                                 <button class="edit" type="button" title="Password">Edit</button> 
     70                                                </span>  
    6471                                        </td> 
    6572                            </tr> 
     
    7885                                </tr> 
    7986                                <tr class="even"> 
    80                                         <td class="key">E-mail Address</td> 
     87                                        <td class="key">E-mail Address<img class="help" src="{{ MEDIA_URL }}images/help-icon.png"title="If you forget your password this email will be used to recover your account."/></td> 
    8188                                        <td class="value"> 
    82                                                 <span class="value">{{ email }} </span> 
     89                                                <span class="value" >{{ email }} </span> 
    8390                                                <span class="hide_this"> 
    8491                                                        <form action="{% url profile %}" method="POST"> 
     
    9198                                </tr> 
    9299                                <tr class="odd"> 
    93                                         <td class="key">Port</td> 
     100                                        <td class="key">API Key 
     101                                                <img class="help" src="{{ MEDIA_URL }}images/help-icon.png"title="The Clearinghouse offers an API key that allows applications to perform actions on your behalf, such as acquiring, releasing, and renewing vessels.  If this key is lost or stolen, you can reset it at any time."/></td> 
     102                                        <td class="value api_cell">  
     103                                                        <span class="api_cell" title="Click to show"><i>click to show</i></span> 
     104                                                        <span id="api_key" class="hide_this" title="Click to hide"> {{ api_key }}  
     105                                                        </span> 
     106                                                        <form action="{% url api_info %}" method="post"> 
     107                                                        <input type="hidden" name="generate_api_key" value="yes"/> 
     108                                                        <button id="generate_api" type="submit"title="In some cases you may want to generate a new API key (for example, if you accidentally left your old one in a file that you shared publicly). Generating a new API key will make your old API key no longer work.">Generate new API Key</button> 
     109                                                        </form> 
     110                                        </td> 
     111                                </tr> 
     112                                <tr class="even"> 
     113                                        <td class="key">Port <img class="help" src="{{ MEDIA_URL }}images/help-icon.png"title="This indicates a port number that by default will be available for TCP / UDP on all of your acquired vessels."/></td> 
    94114                                        <td class="value">{{ port }}</td> 
    95115                                </tr> 
    96                                 <tr class="even"> 
    97                                         <td class="key">API Key</td> 
    98                                         <td class="value"><a href="{% url api_info %}">View or change your API key</a></td> 
    99                                 </tr> 
    100                                 <tr class="odd"> 
    101                                         <td class="key">Public Key</td> 
    102                                         <td class="value"> 
    103                                                 <form method="POST" action="{% url pub_key %}" id="download_pubkey_form"> 
    104                                                         <input type="submit" value="Download"/> 
     116                                 
     117                        </table> <br/> 
     118                <table class="profile"> 
     119                        <tr> 
     120                                <td><h3>Your Keys</h3></td> 
     121                                <td> <form id="change_key" action="{% url change_key %}" method="post"style="display:inline;"> 
     122                                        <input type="hidden" name="generate" value="yes"/> 
     123                                        <button id="generate_keypair" type="submit" title="The Clearinghouse can generate a new key pair for you. After it is generated, you will need to download your public and private keys again." style=""> Generate new Key Pair</button> 
    105124                                                </form> 
    106                                                 <a href="{% url change_key %}">Generate or upload a new key</a> 
    107                                         </td> 
    108                                 </tr> 
     125                        </td>  
     126                        </tr> 
     127                </table> 
     128        <h1></h1> 
     129                <table class="profile"> 
     130                        <tr class="odd"> 
     131                                <td class="key">Public Key 
     132                                        <img class="help" src="{{ MEDIA_URL }}images/help-icon.png" 
     133                                                                title="If you have generated a key pair on your own computer(for example, using Seash), you can upload your public key here. Do not upload your private key."/></td> 
     134                                <td class="value"> 
     135                                        <span class="value">********</span> 
     136                                        <span class="hide_this"> 
     137                                                <button type="button" class="cancel" title="Cancel"> Cancel </button> 
     138                                                <form action="{% url change_key %}" method="post" enctype="multipart/form-data"> 
     139                                                        <input type="file" name="pubkey"/> <button type="submit" title="Upload a public key">Upload</button> 
     140                                                </form> 
     141                                        </span> 
     142                                        <form method="POST" action="{% url pub_key %}" id="download_pubkey_form">  
     143                                                <button type="submit" class="download" title="Download your public key"> Download </button> 
     144                                         </form> 
     145                                                <button id="show_keyform" type="button" title="Upload a public key"> Upload </button> 
     146                                </td> 
     147                        </tr> 
    109148                                {% if has_privkey %} 
    110149                                <tr class="even"> 
    111                                         <td class="key">Private Key</td> 
    112                                         <td class="value"><a href="#"/> 
     150                                        <td class="key">Private Key <img class="help" src="{{ MEDIA_URL }}images/red-help-icon.png"title="The Clearinghouse does not need your private key to provide you access to vessels.  You may wish to download this key and then delete it from the server."/></td> 
     151                                        <td class="value">********<a href="#"> 
    113152                                                <form class="inline" method="POST" action="{% url priv_key %}"> 
    114                                                         <input type="submit" value="Download"/> 
     153                                                        <button type="submit" title="Download your private key">Download </button> 
     154                                                </form> 
     155                                                <form class="inline" method="POST" action="{% url del_priv %}"> 
     156                                                        <input type="hidden" name="keyToDelete" value={{ username }}/> 
     157                                                        <button id="delete" type="submit" title="Delete your private key">Delete </button> 
    115158                                                </form> 
    116159                                        </td> 
    117160                                </tr> 
    118161                                <tr class="odd"> 
    119                                         <td class="key">Delete your private key</td> 
    120                                         <td class="value"> 
    121                                                 <form class="inline" method="POST" action="{% url del_priv %}"> 
    122                                                         <input type="hidden" name="keyToDelete" value={{ username }}> </input> 
    123                                                         <input id="delete" type="submit" value="Delete"> </input> 
    124                                                 </form> 
    125                                         </td> 
    126                                 </tr> 
    127                                 <tr class="even"> 
    128162                                        <td colspan="2"> 
     163            <img id="up_arrow" src="{{ MEDIA_URL }}/images/red-up-arrow.png" /> 
    129164                                                <p class="warning"> For better 
    130165                                                security we recommend that you 
     
    140175                </div> 
    141176        </div> 
    142          
    143177{% endblock content %} 
    144  
  • seattle/trunk/seattlegeni/website/html/views.py

    r5611 r5691  
    104104@log_function_call_without_return 
    105105@login_required 
    106 def profile(request, info=""): 
     106def profile(request, info="", error_msg=""): 
    107107  """ 
    108108  <Purpose> 
     
    116116      An HTTP request object.   
    117117    info: 
    118       Additional message to display at the top of the page. 
     118      Additional message to display at the top of the page in a green box. 
     119    error_msg: 
     120      Additional message to display at top of the page in a red box. 
    119121  <Exceptions> 
    120122    None 
     
    128130  except LoggedInButFailedGetGeniUserError: 
    129131    return _show_failed_get_geniuser_page(request) 
    130   msg = '' 
     132   
    131133  email_form = forms.gen_edit_user_form(instance=user) 
    132134  affiliation_form = forms.gen_edit_user_form(instance=user) 
     
    139141         new_affiliation = affiliation_form.cleaned_data['affiliation'] 
    140142         interface.change_user_affiliation(user, new_affiliation) 
    141          msg ="Affiliation has been successfully changed to %s." % (user.affiliation) 
     143         info ="Affiliation has been successfully changed to %s." % (user.affiliation) 
    142144    elif 'email' in request.POST: 
    143145       email_form = forms.gen_edit_user_form(('email',), request.POST, instance=user) 
     
    145147         new_email = email_form.cleaned_data['email'] 
    146148         interface.change_user_email(user, new_email) 
    147          msg ="Email has been successfully changed to %s." % (user.email) 
     149         info ="Email has been successfully changed to %s." % (user.email) 
    148150    elif 'password1' in request.POST: 
    149151       password_form = forms.EditUserPasswordForm( request.POST, instance=user) 
     
    151153         new_password = password_form.cleaned_data['password1'] 
    152154         interface.change_user_password(user, new_password) 
    153          msg ="Password has been successfully changed" 
     155         info ="Password has been successfully changed" 
    154156   
    155157  username = user.username 
     
    175177                             #'port_range_min' : port_range_min, 
    176178                             #'port_range_max' : port_range_max, 
    177                              'msg' : msg, 
    178                              'info' : info}) 
     179                             'info' : info, 
     180                             'error_msg' : error_msg}) 
    179181 
    180182 
     
    638640  except LoggedInButFailedGetGeniUserError: 
    639641    return _show_failed_get_geniuser_page(request) 
    640    
     642  info = "" 
    641643  if request.method == 'GET': 
    642644    return direct_to_template(request, 'control/change_key.html', 
     
    654656    file = request.FILES.get('pubkey', None) 
    655657    if file is None: 
    656       msg = "You didn't select a public key file to upload." 
    657       return direct_to_template(request, 'control/change_key.html', 
    658                                 {'username' : user.username, 
    659                                  'error_msg' : msg}) 
     658      msg = "You didn't select a public key file to upload."  
     659      return profile(request, info, msg) 
     660      #return direct_to_template(request, 'control/change_key.html', 
     661      #                          {'username' : user.username, 
     662      #                           'error_msg' : msg}) 
    660663     
    661664    if file.size == 0 or file.size > forms.MAX_PUBKEY_UPLOAD_SIZE: 
    662665      msg = "Invalid file uploaded. The file size limit is "  
    663666      msg += str(forms.MAX_PUBKEY_UPLOAD_SIZE) + " bytes." 
    664       return direct_to_template(request, 'control/change_key.html', 
    665                                 {'username' : user.username, 
    666                                  'error_msg' : msg}) 
     667      return profile(request, info, msg)  
     668      #direct_to_template(request, 'control/change_key.html', 
     669      #                          {'username' : user.username, 
     670      #                           'error_msg' : msg}) 
    667671     
    668672    pubkey = file.read() 
     
    672676    except ValidationError: 
    673677      msg = "Invalid public key uploaded." 
    674       return direct_to_template(request, 'control/change_key.html', 
    675                                 {'username' : user.username, 
    676                                  'error_msg' : msg}) 
     678      return profile(request, info, msg) 
     679      #direct_to_template(request, 'control/change_key.html', 
     680      #                          {'username' : user.username, 
     681      #                           'error_msg' : msg}) 
    677682     
    678683    # If we made it here, the uploaded key is good. 
     
    701706  if not request.POST.get('generate_api_key', False): 
    702707    msg = "Sorry, we didn't understand your request." 
    703     return direct_to_template(request, 'control/api_info.html', 
    704                               {'username' : user.username, 
    705                                'api_key' : user.api_key, 
    706                                'msg' : msg}) 
     708    return profile(request, info, msg)  
     709    #direct_to_template(request, 'control/api_info.html', 
     710    #                          {'username' : user.username, 
     711    #                           'api_key' : user.api_key, 
     712    #                           'msg' : msg}) 
    707713     
    708714  interface.regenerate_api_key(user) 
     
    710716  msg += " You should update any places you are using the API key" 
    711717  msg += " (e.g. in programs using the XML-RPC client)." 
    712   return direct_to_template(request, 'control/api_info.html', 
    713                             {'username' : user.username, 
    714                              'api_key' : user.api_key, 
    715                              'msg' : msg}) 
     718  return profile(request,msg) 
     719  #direct_to_template(request, 'control/api_info.html', 
     720  #                         {'username' : user.username, 
     721  #                           'api_key' : user.api_key, 
     722  #                           'msg' : msg}) 
    716723 
    717724