root / snf-astakos-app / astakos / im / static / im / cloudbar / README.rst @ fb9d96e9
History | View | Annotate | Download (2 kB)
1 |
Cloudbar |
---|---|
2 |
======== |
3 |
|
4 |
Cloudbar is a project to provide common navigation user experience |
5 |
between services that share common authentication mechanism and user |
6 |
entries but get deployed on different domains and may not share |
7 |
common frontend themes/templates. |
8 |
|
9 |
The project consists of a javascript file which once imported in a |
10 |
html page handles the automatic creation and styling of a bar that |
11 |
is placed on top of the page (first body element absolutely |
12 |
positioned on top). |
13 |
The bar contains links to the refered services application urls, and |
14 |
depending on if the user is authenticated links to account pages |
15 |
(login, change profile, logout etc.). |
16 |
|
17 |
To identify if a user is authenticated the script checks of a |
18 |
specific cookie which can be configured using ``CLOUDBAR_COOKIE_NAME`` setting |
19 |
contains valid data which should match the following format:: |
20 |
|
21 |
<username or email>|<authentication token> |
22 |
|
23 |
|
24 |
Usage |
25 |
----- |
26 |
|
27 |
Each page that wants to display the navigation bar should: |
28 |
|
29 |
- Include one of the latest jquery builds. |
30 |
- Set the ``CLOUDBAR_COOKIE_NAME`` variable containing info about the username |
31 |
and the authentication status of the current visitor of the page. |
32 |
- Set the ``CLOUDBAR_LOCATION`` to the url where bar files are served from. |
33 |
- Include the servicesbar.js script. |
34 |
|
35 |
|
36 |
Example |
37 |
******* |
38 |
|
39 |
.. codeblock:: javascript |
40 |
|
41 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
42 |
<script> |
43 |
var CLOUDBAR_COOKIE_NAME = '_pithos2_a'; |
44 |
var CLOUDBAR_LOCATION = "https://accounts.cloud.grnet.gr/cloudbar/"; |
45 |
|
46 |
$(document).ready(function(){ |
47 |
$.getScript(CLOUDBAR_LOC + 'cloudbar.js'); |
48 |
}) |
49 |
</script> |
50 |
|
51 |
|
52 |
Build styles |
53 |
------------ |
54 |
|
55 |
Cloudbar uses `less-css <http://www.lesscss.org>`_ for css styles |
56 |
definitions. To build the less file you need the bootstrap less files |
57 |
available on |
58 |
`bootstrap github repository <https://github.com/twitter/bootstrap/>`. |
59 |
|
60 |
You can build the styles using the following command:: |
61 |
|
62 |
$ lessc --include-path=<path/to/bootstrap> cloudbar.less > cloudbar.css |
63 |
|