├── .gitignore
├── LICENSE
├── README.md
├── requirements.txt
├── rest-server-v2.py
├── rest-server.py
├── setup.bat
├── setup.sh
└── static
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
 1 | *.py[cod]
 2 | 
 3 | # C extensions
 4 | *.so
 5 | 
 6 | # Packages
 7 | *.egg
 8 | *.egg-info
 9 | dist
10 | build
11 | eggs
12 | parts
13 | bin
14 | var
15 | sdist
16 | develop-eggs
17 | .installed.cfg
18 | lib
19 | lib64
20 | 
21 | # Installer logs
22 | pip-log.txt
23 | 
24 | # Unit test / coverage reports
25 | .coverage
26 | .tox
27 | nosetests.xml
28 | 
29 | # Translations
30 | *.mo
31 | 
32 | # Mr Developer
33 | .mr.developer.cfg
34 | .project
35 | .pydevproject
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 Miguel Grinberg
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | REST-tutorial
 2 | =============
 3 | 
 4 | Files for my REST API tutorials featuring a server written in Python and a web client written in Javascript. Here are the articles:
 5 | 
 6 | - [Designing a RESTful API with Python and Flask](http://blog.miguelgrinberg.com/post/designing-a-restful-api-with-python-and-flask)
 7 | - [Writing a Javascript REST client](http://blog.miguelgrinberg.com/post/writing-a-javascript-rest-client)
 8 | - [Designing a RESTful API using Flask-RESTful](http://blog.miguelgrinberg.com/post/designing-a-restful-api-using-flask-restful)
 9 | 
10 | Setup
11 | -----
12 | 
13 | - Install Python 3 and git.
14 | - Run `setup.sh` (Linux, OS X, Cygwin) or `setup.bat` (Windows)
15 | - Run `./rest-server.py` to start the server (on Windows use `flask\Scripts\python rest-server.py` instead)
16 | - Alternatively, run `./rest-server-v2.py` to start the Flask-RESTful version of the server.
17 | - Open `http://localhost:5000/index.html` on your web browser to run the client
18 | 
19 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
 1 | aniso8601==9.0.1
 2 | click==8.0.3
 3 | Flask==2.0.2
 4 | Flask-HTTPAuth==4.5.0
 5 | Flask-RESTful==0.3.9
 6 | itsdangerous==2.0.1
 7 | Jinja2==3.0.3
 8 | MarkupSafe==2.0.1
 9 | pytz==2021.3
10 | six==1.16.0
11 | Werkzeug==2.2.3
12 | 


--------------------------------------------------------------------------------
/rest-server-v2.py:
--------------------------------------------------------------------------------
  1 | #!flask/bin/python
  2 | 
  3 | """Alternative version of the ToDo RESTful server implemented using the
  4 | Flask-RESTful extension."""
  5 | 
  6 | from flask import Flask, jsonify, abort, make_response
  7 | from flask_restful import Api, Resource, reqparse, fields, marshal
  8 | from flask_httpauth import HTTPBasicAuth
  9 | 
 10 | app = Flask(__name__, static_url_path="")
 11 | api = Api(app)
 12 | auth = HTTPBasicAuth()
 13 | 
 14 | 
 15 | @auth.get_password
 16 | def get_password(username):
 17 |     if username == 'miguel':
 18 |         return 'python'
 19 |     return None
 20 | 
 21 | 
 22 | @auth.error_handler
 23 | def unauthorized():
 24 |     # return 403 instead of 401 to prevent browsers from displaying the default
 25 |     # auth dialog
 26 |     return make_response(jsonify({'message': 'Unauthorized access'}), 403)
 27 | 
 28 | tasks = [
 29 |     {
 30 |         'id': 1,
 31 |         'title': u'Buy groceries',
 32 |         'description': u'Milk, Cheese, Pizza, Fruit, Tylenol',
 33 |         'done': False
 34 |     },
 35 |     {
 36 |         'id': 2,
 37 |         'title': u'Learn Python',
 38 |         'description': u'Need to find a good Python tutorial on the web',
 39 |         'done': False
 40 |     }
 41 | ]
 42 | 
 43 | task_fields = {
 44 |     'title': fields.String,
 45 |     'description': fields.String,
 46 |     'done': fields.Boolean,
 47 |     'uri': fields.Url('task')
 48 | }
 49 | 
 50 | 
 51 | class TaskListAPI(Resource):
 52 |     decorators = [auth.login_required]
 53 | 
 54 |     def __init__(self):
 55 |         self.reqparse = reqparse.RequestParser()
 56 |         self.reqparse.add_argument('title', type=str, required=True,
 57 |                                    help='No task title provided',
 58 |                                    location='json')
 59 |         self.reqparse.add_argument('description', type=str, default="",
 60 |                                    location='json')
 61 |         super(TaskListAPI, self).__init__()
 62 | 
 63 |     def get(self):
 64 |         return {'tasks': [marshal(task, task_fields) for task in tasks]}
 65 | 
 66 |     def post(self):
 67 |         args = self.reqparse.parse_args()
 68 |         task = {
 69 |             'id': tasks[-1]['id'] + 1 if len(tasks) > 0 else 1,
 70 |             'title': args['title'],
 71 |             'description': args['description'],
 72 |             'done': False
 73 |         }
 74 |         tasks.append(task)
 75 |         return {'task': marshal(task, task_fields)}, 201
 76 | 
 77 | 
 78 | class TaskAPI(Resource):
 79 |     decorators = [auth.login_required]
 80 | 
 81 |     def __init__(self):
 82 |         self.reqparse = reqparse.RequestParser()
 83 |         self.reqparse.add_argument('title', type=str, location='json')
 84 |         self.reqparse.add_argument('description', type=str, location='json')
 85 |         self.reqparse.add_argument('done', type=bool, location='json')
 86 |         super(TaskAPI, self).__init__()
 87 | 
 88 |     def get(self, id):
 89 |         task = [task for task in tasks if task['id'] == id]
 90 |         if len(task) == 0:
 91 |             abort(404)
 92 |         return {'task': marshal(task[0], task_fields)}
 93 | 
 94 |     def put(self, id):
 95 |         task = [task for task in tasks if task['id'] == id]
 96 |         if len(task) == 0:
 97 |             abort(404)
 98 |         task = task[0]
 99 |         args = self.reqparse.parse_args()
100 |         for k, v in args.items():
101 |             if v is not None:
102 |                 task[k] = v
103 |         return {'task': marshal(task, task_fields)}
104 | 
105 |     def delete(self, id):
106 |         task = [task for task in tasks if task['id'] == id]
107 |         if len(task) == 0:
108 |             abort(404)
109 |         tasks.remove(task[0])
110 |         return {'result': True}
111 | 
112 | 
113 | api.add_resource(TaskListAPI, '/todo/api/v1.0/tasks', endpoint='tasks')
114 | api.add_resource(TaskAPI, '/todo/api/v1.0/tasks/<int:id>', endpoint='task')
115 | 
116 | 
117 | if __name__ == '__main__':
118 |     app.run(debug=True)
119 | 


--------------------------------------------------------------------------------
/rest-server.py:
--------------------------------------------------------------------------------
  1 | #!flask/bin/python
  2 | from flask import Flask, jsonify, abort, request, make_response, url_for
  3 | from flask_httpauth import HTTPBasicAuth
  4 | 
  5 | app = Flask(__name__, static_url_path="")
  6 | auth = HTTPBasicAuth()
  7 | 
  8 | 
  9 | @auth.get_password
 10 | def get_password(username):
 11 |     if username == 'miguel':
 12 |         return 'python'
 13 |     return None
 14 | 
 15 | 
 16 | @auth.error_handler
 17 | def unauthorized():
 18 |     # return 403 instead of 401 to prevent browsers from displaying the default
 19 |     # auth dialog
 20 |     return make_response(jsonify({'error': 'Unauthorized access'}), 403)
 21 | 
 22 | 
 23 | @app.errorhandler(400)
 24 | def bad_request(error):
 25 |     return make_response(jsonify({'error': 'Bad request'}), 400)
 26 | 
 27 | 
 28 | @app.errorhandler(404)
 29 | def not_found(error):
 30 |     return make_response(jsonify({'error': 'Not found'}), 404)
 31 | 
 32 | 
 33 | tasks = [
 34 |     {
 35 |         'id': 1,
 36 |         'title': u'Buy groceries',
 37 |         'description': u'Milk, Cheese, Pizza, Fruit, Tylenol',
 38 |         'done': False
 39 |     },
 40 |     {
 41 |         'id': 2,
 42 |         'title': u'Learn Python',
 43 |         'description': u'Need to find a good Python tutorial on the web',
 44 |         'done': False
 45 |     }
 46 | ]
 47 | 
 48 | 
 49 | def make_public_task(task):
 50 |     new_task = {}
 51 |     for field in task:
 52 |         if field == 'id':
 53 |             new_task['uri'] = url_for('get_task', task_id=task['id'],
 54 |                                       _external=True)
 55 |         else:
 56 |             new_task[field] = task[field]
 57 |     return new_task
 58 | 
 59 | 
 60 | @app.route('/todo/api/v1.0/tasks', methods=['GET'])
 61 | @auth.login_required
 62 | def get_tasks():
 63 |     return jsonify({'tasks': [make_public_task(task) for task in tasks]})
 64 | 
 65 | 
 66 | @app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['GET'])
 67 | @auth.login_required
 68 | def get_task(task_id):
 69 |     task = [task for task in tasks if task['id'] == task_id]
 70 |     if len(task) == 0:
 71 |         abort(404)
 72 |     return jsonify({'task': make_public_task(task[0])})
 73 | 
 74 | 
 75 | @app.route('/todo/api/v1.0/tasks', methods=['POST'])
 76 | @auth.login_required
 77 | def create_task():
 78 |     if not request.json or 'title' not in request.json:
 79 |         abort(400)
 80 |     task = {
 81 |         'id': tasks[-1]['id'] + 1 if len(tasks) > 0 else 1,
 82 |         'title': request.json['title'],
 83 |         'description': request.json.get('description', ""),
 84 |         'done': False
 85 |     }
 86 |     tasks.append(task)
 87 |     return jsonify({'task': make_public_task(task)}), 201
 88 | 
 89 | 
 90 | @app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['PUT'])
 91 | @auth.login_required
 92 | def update_task(task_id):
 93 |     task = [task for task in tasks if task['id'] == task_id]
 94 |     if len(task) == 0:
 95 |         abort(404)
 96 |     if not request.json:
 97 |         abort(400)
 98 |     if 'title' in request.json and \
 99 |             not isinstance(request.json['title'], str):
100 |         abort(400)
101 |     if 'description' in request.json and \
102 |             not isinstance(request.json['description'], str):
103 |         abort(400)
104 |     if 'done' in request.json and type(request.json['done']) is not bool:
105 |         abort(400)
106 |     task[0]['title'] = request.json.get('title', task[0]['title'])
107 |     task[0]['description'] = request.json.get('description',
108 |                                               task[0]['description'])
109 |     task[0]['done'] = request.json.get('done', task[0]['done'])
110 |     return jsonify({'task': make_public_task(task[0])})
111 | 
112 | 
113 | @app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['DELETE'])
114 | @auth.login_required
115 | def delete_task(task_id):
116 |     task = [task for task in tasks if task['id'] == task_id]
117 |     if len(task) == 0:
118 |         abort(404)
119 |     tasks.remove(task[0])
120 |     return jsonify({'result': True})
121 | 
122 | 
123 | if __name__ == '__main__':
124 |     app.run(debug=True)
125 | 


--------------------------------------------------------------------------------
/setup.bat:
--------------------------------------------------------------------------------
1 | python -m venv venv
2 | venv\Scripts\pip install -r requirements.txt
3 | 


--------------------------------------------------------------------------------
/setup.sh:
--------------------------------------------------------------------------------
1 | python -m venv venv
2 | venv/bin/pip install -r requirements.txt
3 | 


--------------------------------------------------------------------------------
/static/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <title>ToDo API Client Demo</title>
  5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 | <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
  7 | <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
  8 | <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  9 | <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
 10 | </head>
 11 | <body>
 12 |     <div class="navbar">
 13 |         <div class="navbar-inner">
 14 |             <a class="brand" href="#">ToDo API Client Demo</a>
 15 |         </div>
 16 |     </div>
 17 |     <div id="main" class="container">
 18 |         <table class="table table-striped">
 19 |             <tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
 20 |             <!-- ko foreach: tasks -->
 21 |             <tr>
 22 |                 <td>
 23 |                     <span data-bind="visible: done" class="label label-success">Done</span>
 24 |                     <span data-bind="visible: !done()" class="label label-important">In Progress</span>
 25 |                 </td>
 26 |                 <td><p><b data-bind="text: title"></b></p><p data-bind="text: description"></p></td>
 27 |                 <td>
 28 |                     <button data-bind="click: $parent.beginEdit" class="btn">Edit</button>
 29 |                     <button data-bind="click: $parent.remove" class="btn">Delete</button>
 30 |                     <span data-bind="visible: done">
 31 |                         <button data-bind="click: $parent.markInProgress" class="btn">Mark In Progress</button>
 32 |                     </span>
 33 |                     <span data-bind="visible: !done()">
 34 |                         <button data-bind="click: $parent.markDone" class="btn">Mark Done</button>
 35 |                     </span>
 36 |                 </td>
 37 |             </tr>
 38 |             <!-- /ko -->
 39 |         </table>
 40 |         <button data-bind="click: beginAdd" class="btn">Add Task</button>
 41 |     </div>
 42 |     <div id="add" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="addDialogLabel" aria-hidden="true">
 43 |         <div class="modal-header">
 44 |             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 45 |             <h3 id="addDialogLabel">Add Task</h3>
 46 |         </div>
 47 |         <div class="modal-body">
 48 |             <form class="form-horizontal">
 49 |                 <div class="control-group">
 50 |                     <label class="control-label" for="inputTask">Task</label>
 51 |                     <div class="controls">
 52 |                         <input data-bind="value: title" type="text" id="inputTask" placeholder="Task title" style="width: 150px;">
 53 |                     </div>
 54 |                 </div>
 55 |                 <div class="control-group">
 56 |                     <label class="control-label" for="inputDescription">Description</label>
 57 |                     <div class="controls">
 58 |                         <input data-bind="value: description" type="text" id="inputDescription" placeholder="Description" style="width: 300px;">
 59 |                     </div>
 60 |                 </div>
 61 |             </form>
 62 |         </div>
 63 |         <div class="modal-footer">
 64 |             <button data-bind="click: addTask" class="btn btn-primary">Add Task</button>
 65 |             <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
 66 |         </div>
 67 |     </div>
 68 |     <div id="edit" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="editDialogLabel" aria-hidden="true">
 69 |         <div class="modal-header">
 70 |             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 71 |             <h3 id="editDialogLabel">Edit Task</h3>
 72 |         </div>
 73 |         <div class="modal-body">
 74 |             <form class="form-horizontal">
 75 |                 <div class="control-group">
 76 |                     <label class="control-label" for="inputTask">Task</label>
 77 |                     <div class="controls">
 78 |                         <input data-bind="value: title" type="text" id="inputTask" placeholder="Task title" style="width: 150px;">
 79 |                     </div>
 80 |                 </div>
 81 |                 <div class="control-group">
 82 |                     <label class="control-label" for="inputDescription">Description</label>
 83 |                     <div class="controls">
 84 |                         <input data-bind="value: description" type="text" id="inputDescription" placeholder="Description" style="width: 300px;">
 85 |                     </div>
 86 |                 </div>
 87 |                 <div class="control-group">
 88 |                     <div class="controls">
 89 |                         <label class="checkbox">
 90 |                             <input data-bind="checked: done" type="checkbox"> Done
 91 |                         </label>
 92 |                     </div>
 93 |                 </div>
 94 |             </form>
 95 |         </div>
 96 |         <div class="modal-footer">
 97 |             <button data-bind="click:editTask" class="btn btn-primary">Update Task</button>
 98 |             <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
 99 |         </div>
100 |     </div>
101 |     <div id="login" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true">
102 |         <div class="modal-header">
103 |             <h3 id="loginLabel">Sign In</h3>
104 |         </div>
105 |         <div class="modal-body">
106 |             <form class="form-horizontal">
107 |                 <div class="control-group">
108 |                     <label class="control-label" for="inputUsername">Username</label>
109 |                     <div class="controls">
110 |                         <input data-bind="value: username" type="text" id="inputUsername" placeholder="Username">
111 |                     </div>
112 |                 </div>
113 |                 <div class="control-group">
114 |                     <label class="control-label" for="inputPassword">Password</label>
115 |                     <div class="controls">
116 |                         <input data-bind="value: password" type="password" id="inputPassword" placeholder="Password">
117 |                     </div>
118 |                 </div>
119 |             </form>
120 |         </div>
121 |         <div class="modal-footer">
122 |             <button data-bind="click: login" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Sign In</button>
123 |         </div>
124 |     </div>
125 |     <script type="text/javascript">
126 |         function TasksViewModel() {
127 |             var self = this;
128 |             self.tasksURI = 'http://localhost:5000/todo/api/v1.0/tasks';
129 |             self.username = "";
130 |             self.password = "";
131 |             self.tasks = ko.observableArray();
132 | 
133 |             self.ajax = function(uri, method, data) {
134 |                 var request = {
135 |                     url: uri,
136 |                     type: method,
137 |                     contentType: "application/json",
138 |                     accepts: "application/json",
139 |                     cache: false,
140 |                     dataType: 'json',
141 |                     data: JSON.stringify(data),
142 |                     beforeSend: function (xhr) {
143 |                         xhr.setRequestHeader("Authorization", 
144 |                             "Basic " + btoa(self.username + ":" + self.password));
145 |                     },
146 |                     error: function(jqXHR) {
147 |                         console.log("ajax error " + jqXHR.status);
148 |                     }
149 |                 };
150 |                 return $.ajax(request);
151 |             }
152 |             self.updateTask = function(task, newTask) {
153 |                 var i = self.tasks.indexOf(task);
154 |                 self.tasks()[i].uri(newTask.uri);
155 |                 self.tasks()[i].title(newTask.title);
156 |                 self.tasks()[i].description(newTask.description);
157 |                 self.tasks()[i].done(newTask.done);
158 |             }
159 | 
160 |             self.beginAdd = function() {
161 |                 $('#add').modal('show');
162 |             }
163 |             self.add = function(task) {
164 |                 self.ajax(self.tasksURI, 'POST', task).done(function(data) {
165 |                     self.tasks.push({
166 |                         uri: ko.observable(data.task.uri),
167 |                         title: ko.observable(data.task.title),
168 |                         description: ko.observable(data.task.description),
169 |                         done: ko.observable(data.task.done)
170 |                     });
171 |                 });
172 |             }
173 |             self.beginEdit = function(task) {
174 |                 editTaskViewModel.setTask(task);
175 |                 $('#edit').modal('show');
176 |             }
177 |             self.edit = function(task, data) {
178 |                 self.ajax(task.uri(), 'PUT', data).done(function(res) {
179 |                     self.updateTask(task, res.task);
180 |                 });
181 |             }
182 |             self.remove = function(task) {
183 |                 self.ajax(task.uri(), 'DELETE').done(function() {
184 |                     self.tasks.remove(task);
185 |                 });
186 |             }
187 |             self.markInProgress = function(task) {
188 |                 self.ajax(task.uri(), 'PUT', { done: false }).done(function(res) {
189 |                     self.updateTask(task, res.task);
190 |                 });
191 |             }
192 |             self.markDone = function(task) {
193 |                 self.ajax(task.uri(), 'PUT', { done: true }).done(function(res) {
194 |                     self.updateTask(task, res.task);
195 |                 });
196 |             }
197 |             self.beginLogin = function() {
198 |                 $('#login').modal('show');
199 |             }
200 |             self.login = function(username, password) {
201 |                 self.username = username;
202 |                 self.password = password;
203 |                 self.ajax(self.tasksURI, 'GET').done(function(data) {
204 |                     for (var i = 0; i < data.tasks.length; i++) {
205 |                         self.tasks.push({
206 |                             uri: ko.observable(data.tasks[i].uri),
207 |                             title: ko.observable(data.tasks[i].title),
208 |                             description: ko.observable(data.tasks[i].description),
209 |                             done: ko.observable(data.tasks[i].done)
210 |                         });
211 |                     }
212 |                 }).fail(function(jqXHR) {
213 |                     if (jqXHR.status == 403)
214 |                         setTimeout(self.beginLogin, 500);
215 |                 });
216 |             }
217 |             
218 |             self.beginLogin();
219 |         }
220 |         function AddTaskViewModel() {
221 |             var self = this;
222 |             self.title = ko.observable();
223 |             self.description = ko.observable();
224 |  
225 |             self.addTask = function() {
226 |                 $('#add').modal('hide');
227 |                 tasksViewModel.add({
228 |                     title: self.title(),
229 |                     description: self.description()
230 |                 });
231 |                 self.title("");
232 |                 self.description("");
233 |             }
234 |         }
235 |         function EditTaskViewModel() {
236 |             var self = this;
237 |             self.title = ko.observable();
238 |             self.description = ko.observable();
239 |             self.done = ko.observable();
240 |  
241 |             self.setTask = function(task) {
242 |                 self.task = task;
243 |                 self.title(task.title());
244 |                 self.description(task.description());
245 |                 self.done(task.done());
246 |                 $('edit').modal('show');
247 |             }
248 |  
249 |             self.editTask = function() {
250 |                 $('#edit').modal('hide');
251 |                 tasksViewModel.edit(self.task, {
252 |                     title: self.title(),
253 |                     description: self.description() ,
254 |                     done: self.done()
255 |                 });
256 |             }
257 |         }
258 |         function LoginViewModel() {
259 |             var self = this;
260 |             self.username = ko.observable();
261 |             self.password = ko.observable();
262 |  
263 |             self.login = function() {
264 |                 $('#login').modal('hide');
265 |                 tasksViewModel.login(self.username(), self.password());
266 |             }
267 |         }
268 |         
269 |         var tasksViewModel = new TasksViewModel();
270 |         var addTaskViewModel = new AddTaskViewModel();
271 |         var editTaskViewModel = new EditTaskViewModel();
272 |         var loginViewModel = new LoginViewModel();
273 |         ko.applyBindings(tasksViewModel, $('#main')[0]);
274 |         ko.applyBindings(addTaskViewModel, $('#add')[0]);
275 |         ko.applyBindings(editTaskViewModel, $('#edit')[0]);
276 |         ko.applyBindings(loginViewModel, $('#login')[0]);
277 |     </script>
278 | </body>
279 | </html>
280 | 


--------------------------------------------------------------------------------