diff options
| -rw-r--r-- | docs/topics/browsable-api.md | 11 | ||||
| -rw-r--r-- | rest_framework/templates/rest_framework/login.html | 54 | ||||
| -rw-r--r-- | rest_framework/templates/rest_framework/login_base.html | 55 |
3 files changed, 68 insertions, 52 deletions
diff --git a/docs/topics/browsable-api.md b/docs/topics/browsable-api.md index 5f80c4f9..8ee01824 100644 --- a/docs/topics/browsable-api.md +++ b/docs/topics/browsable-api.md @@ -60,6 +60,17 @@ All of the [Bootstrap components][bcomponents] are available. The browsable API makes use of the Bootstrap tooltips component. Any element with the `js-tooltip` class and a `title` attribute has that title content displayed in a tooltip on hover after a 1000ms delay. +### Login Template + +To add branding and customize the look-and-feel of the auth login template, create a template called `login.html` and add it to your project, eg: `templates/rest_framework/login.html`, that extends the `rest_framework/base_login.html` template. + +You can add your site name or branding by including the branding block: + + {% block branding %} + <h3 style="margin: 0 0 20px;">My Site Name</h3> + {% endblock %} + +You can also customize the style by adding the `bootstrap_theme` or `style` block similar to `api.html`. ### Advanced Customization diff --git a/rest_framework/templates/rest_framework/login.html b/rest_framework/templates/rest_framework/login.html index e10ce20f..b7629327 100644 --- a/rest_framework/templates/rest_framework/login.html +++ b/rest_framework/templates/rest_framework/login.html @@ -1,53 +1,3 @@ -{% load url from future %} -{% load rest_framework %} -<html> +{% extends "rest_framework/login_base.html" %} - <head> - <link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap.min.css" %}"/> - <link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap-tweaks.css" %}"/> - <link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/default.css" %}"/> - </head> - - <body class="container"> - -<div class="container-fluid" style="margin-top: 30px"> - <div class="row-fluid"> - - <div class="well" style="width: 320px; margin-left: auto; margin-right: auto"> - <div class="row-fluid"> - <div> - <h3 style="margin: 0 0 20px;">Django REST framework</h3> - </div> - </div><!-- /row fluid --> - - <div class="row-fluid"> - <div> - <form action="{% url 'rest_framework:login' %}" class=" form-inline" method="post"> - {% csrf_token %} - <div id="div_id_username" class="clearfix control-group"> - <div class="controls"> - <Label class="span4">Username:</label> - <input style="height: 25px" type="text" name="username" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_username"> - </div> - </div> - <div id="div_id_password" class="clearfix control-group"> - <div class="controls"> - <Label class="span4">Password:</label> - <input style="height: 25px" type="password" name="password" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_password"> - </div> - </div> - <input type="hidden" name="next" value="{{ next }}" /> - <div class="form-actions-no-box"> - <input type="submit" name="submit" value="Log in" class="btn btn-primary" id="submit-id-submit"> - </div> - </form> - </div> - </div><!-- /row fluid --> - </div><!--/span--> - - </div><!-- /.row-fluid --> - </div> - - </div> - </body> -</html> +{# Override this template in your own templates directory to customize #} diff --git a/rest_framework/templates/rest_framework/login_base.html b/rest_framework/templates/rest_framework/login_base.html new file mode 100644 index 00000000..380d5820 --- /dev/null +++ b/rest_framework/templates/rest_framework/login_base.html @@ -0,0 +1,55 @@ +{% load url from future %} +{% load rest_framework %} +<html> + + <head> + {% block style %} + {% block bootstrap_theme %}<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap.min.css" %}"/>{% endblock %} + <link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap-tweaks.css" %}"/> + <link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/default.css" %}"/> + {% endblock %} + </head> + + <body class="container"> + +<div class="container-fluid" style="margin-top: 30px"> + <div class="row-fluid"> + + <div class="well" style="width: 320px; margin-left: auto; margin-right: auto"> + <div class="row-fluid"> + <div> + {% block branding %}<h3 style="margin: 0 0 20px;">Django REST framework</h3>{% endblock %} + </div> + </div><!-- /row fluid --> + + <div class="row-fluid"> + <div> + <form action="{% url 'rest_framework:login' %}" class=" form-inline" method="post"> + {% csrf_token %} + <div id="div_id_username" class="clearfix control-group"> + <div class="controls"> + <Label class="span4">Username:</label> + <input style="height: 25px" type="text" name="username" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_username"> + </div> + </div> + <div id="div_id_password" class="clearfix control-group"> + <div class="controls"> + <Label class="span4">Password:</label> + <input style="height: 25px" type="password" name="password" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_password"> + </div> + </div> + <input type="hidden" name="next" value="{{ next }}" /> + <div class="form-actions-no-box"> + <input type="submit" name="submit" value="Log in" class="btn btn-primary" id="submit-id-submit"> + </div> + </form> + </div> + </div><!-- /row fluid --> + </div><!--/span--> + + </div><!-- /.row-fluid --> + </div> + + </div> + </body> +</html> |