Added css elipsing for API keys

rhodecode/templates/admin/users/user_edit_my_account_form.html

@@ -1,94 +1,95
 <div>
     ${h.form(url('admin_settings_my_account_update'),method='put')}
         <div class="form">
 
              <div class="field">
                 <div class="gravatar_box">
                     <div class="gravatar"><img alt="gravatar" src="${h.gravatar_url(c.user.email)}"/></div>
                     <p>
                     %if c.use_gravatar:
                     <strong>${_('Change your avatar at')} <a href="http://gravatar.com">gravatar.com</a></strong>
                     <br/>${_('Using')} ${c.user.email}
                     %else:
                     <br/>${c.user.email}
                     %endif
                     </p>
                 </div>
              </div>
             <div class="field">
-                <div class="label">
-                    <label>${_('API key')}</label> ${c.user.api_key}
+                <div class="field">
+                    <div class="label">
+                        <label>${_('Current IP')}:</label> ${c.perm_user.ip_addr or "?"}
+                    </div>
                 </div>
-            </div>
-            <div class="field">
                 <div class="label">
-                    <label>${_('Current IP')}:</label> ${c.perm_user.ip_addr or "?"}
+                    <label>${_('API key - keep this in secret, change your password to generate new key')}</label>
+                    <div class="truncate autoexpand" style="width:120px;font-size:16px;font-family: monospace">${c.user.api_key}</div>
                 </div>
             </div>
             <div class="fields">
                  <div class="field">
                     <div class="label">
                         <label for="username">${_('Username')}:</label>
                     </div>
                     <div class="input">
                       %if c.ldap_dn:
                           ${h.text('username',class_='medium disabled', readonly="readonly")}
                       %else:
                           ${h.text('username',class_='medium')}
                       %endif:
                     </div>
                  </div>
 
                  <div class="field">
                     <div class="label">
                         <label for="new_password">${_('New password')}:</label>
                     </div>
                     <div class="input">
                         ${h.password('new_password',class_="medium",autocomplete="off")}
                     </div>
                  </div>
 
                  <div class="field">
                     <div class="label">
                         <label for="password_confirmation">${_('New password confirmation')}:</label>
                     </div>
                     <div class="input">
                         ${h.password('password_confirmation',class_="medium",autocomplete="off")}
                     </div>
                  </div>
 
                  <div class="field">
                     <div class="label">
                         <label for="name">${_('First Name')}:</label>
                     </div>
                     <div class="input">
                         ${h.text('firstname',class_="medium")}
                     </div>
                  </div>
 
                  <div class="field">
                     <div class="label">
                         <label for="lastname">${_('Last Name')}:</label>
                     </div>
                     <div class="input">
                         ${h.text('lastname',class_="medium")}
                     </div>
                  </div>
 
                  <div class="field">
                     <div class="label">
                         <label for="email">${_('Email')}:</label>
                     </div>
                     <div class="input">
                         ${h.text('email',class_="medium")}
                     </div>
                  </div>
 
                 <div class="buttons">
                   ${h.submit('save',_('Save'),class_="ui-btn large")}
                   ${h.reset('reset',_('Reset'),class_="ui-btn large")}
                 </div>
             </div>
         </div>
     ${h.end_form()}
     </div>