philo/contrib/gilbert/templates/gilbert/login.html

   1 {% extends 'gilbert/base.html' %}
   2
   3 {% block css %}{{ block.super }}
   4         <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}gilbert/extjs/examples/ux/statusbar/css/statusbar.css" />
   5         <style type="text/css">
   6                 .icon-door-open-in {
   7                         background: url({{ STATIC_URL }}gilbert/fugue-icons/icons-shadowless/door-open-in.png) no-repeat !important;
   8                 }
   9                 .x-statusbar .x-status-error {
  10                         cursor: help;
  11                         background-image: url({{ STATIC_URL }}gilbert/fugue-icons/icons-shadowless/exclamation-red.png) !important;
  12                 }
  13         </style>
  14 {% endblock %}
  15
  16 {% block js %}{{ block.super }}
  17         <script type="text/javascript" src="{{ STATIC_URL }}gilbert/extjs/examples/ux/statusbar/StatusBar.js"></script>
  18         <script type="text/javascript" charset="utf-8">
  19                 Ext.onReady(function () {
  20
  21                         var login_form = new Ext.FormPanel({
  22                                 border: false,{% if request.GET.theme %}
  23                                 bodyStyle: 'padding: 10px',{% else %}
  24                                 bodyStyle: 'padding: 0px 10px 0px;',{% endif %}
  25                                 items: [
  26                                         {
  27                                                 xtype: 'hidden',
  28                                                 name: 'csrfmiddlewaretoken',
  29                                                 value: '{{ csrf_token }}',
  30                                         },
  31                                         {
  32                                                 xtype: 'textfield',
  33                                                 anchor: '100%',
  34                                                 fieldLabel: 'Username',
  35                                                 name: 'username',
  36                                         },
  37                                         {
  38                                                 xtype: 'textfield',
  39                                                 inputType: 'password',
  40                                                 anchor: '100%',
  41                                                 fieldLabel: 'Password',
  42                                                 name: 'password',
  43                                         }
  44                                 ],
  45                                 url: '{{ form_url }}',
  46                                 standardSubmit: true,
  47                                 keys: [
  48                                         {
  49                                                 key: [Ext.EventObject.ENTER],
  50                                                 handler: function () {
  51                                                         var form = login_form.getForm();
  52                                                         form.submit();
  53                                                 },
  54                                         },
  55                                 ],
  56                         });
  57
  58                         var login_status_bar = window.status_bar = new Ext.ux.StatusBar({
  59                                 items: [
  60                                         {
  61                                                 xtype: 'button',
  62                                                 text: 'Log in',
  63                                                 iconCls: 'icon-door-open-in',
  64                                                 handler: function () {
  65                                                         var form = login_form.getForm();
  66                                                         form.submit();
  67                                                 },
  68                                         },
  69                                 ],
  70                         });
  71                         var login_window = new Ext.Window({
  72                                 header: false,
  73                                 closable: false,
  74                                 resizable: false,
  75                                 draggable: false,
  76                                 frame: true,
  77                                 autoHeight: true,
  78                                 width: 320,
  79                                 items: login_form,
  80                                 bbar: login_status_bar,
  81                         });
  82
  83                         login_window.show();
  84                         {% if error_message %}
  85                         login_status_bar.setStatus({
  86                                 iconCls: 'x-status-error',
  87                                 text: '{{ error_message_short }}',
  88                         });
  89
  90                         new Ext.ToolTip({
  91                                 target: login_status_bar.statusEl.el,
  92                                 anchor: 'top',
  93                                 title: '{{ error_message_short }}',
  94                                 html: '{{ error_message }}',
  95                         });
  96
  97                         Ext.QuickTips.init();
  98                         {% endif %}
  99                 });
 100         </script>
 101 {% endblock %}