Removed Roles and Added Admin Pages

Old roles systems was not practical and too complicated.
That is why I have removed the old system and starting new one.
Meantime I have added a new admin application for admin functions.

dash/__init__.py

@@ -54,4 +54,8 @@ def create_app(config_name):
     from .profile import profile as profile_blueprint
     dash.register_blueprint(profile_blueprint, url_prefix='/profile')
     
+    # admin application
+    from .admin import admin as admin_blueprint
+    dash.register_blueprint(admin_blueprint, url_prefix='/admin')
+    
     return dash

dash/admin/__init__.py

@@ -0,0 +1,5 @@
+from flask import Blueprint
+
+admin = Blueprint('admin', __name__)
+
+from . import views

dash/admin/forms.py

@@ -0,0 +1,5 @@
+from flask_wtf import Form
+from flask import flash
+from wtforms import StringField, PasswordField, BooleanField, SubmitField, ValidationError
+from wtforms.validators import Required, Length, Email, Regexp, EqualTo
+from ..models import User

dash/admin/views.py

@@ -0,0 +1,15 @@
+import datetime
+
+from flask import render_template, redirect, request, url_for, flash
+from flask_login import login_user, logout_user, login_required, \
+    current_user
+    
+from . import admin
+from .. import db
+from ..models import User
+from ..email import send_email
+
+@admin.route('/')
+@login_required
+def for_admins_only():
+    return render_template('admin/index.html')

dash/auth/views.py

@@ -50,7 +50,8 @@ def register():
                     full_name=form.full_name.data,
                     password=form.password.data,
                     avatar="/static/img/user2-160x160.jpg",
-                    created_at=datetime.datetime.now())
+                    created_at=datetime.datetime.now(),
+                    role_id=2)
         db.session.add(user)
         db.session.commit()
         token = user.generate_confirmation_token()

dash/decorators.py

@@ -2,18 +2,3 @@ from functools import wraps
 from flask import abort
 from flask_login import current_user
 
-from .models import Permission
-
-def permission_required(permission):
-    def decorator(f):
-        @wraps(f)
-        def decorated_function(*args, **kwargs):
-            if not current_user.can(permission):
-                abort(403)
-            return f(*args, **kwargs)
-        return decorated_function
-    return decorator
-    
-def admin_required(f):
-    return permission_required(Permission.ADMINISTER)(f)
-    

dash/flask_adminlte/templates/adminlte/base.html

@@ -55,8 +55,8 @@
                 <header class="main-header">
                     {% block brand %}
                       <a href="#" class="logo">
-                          <span class="logo-mini"><strong>LTE</strong></span>
-                          <span class="logo-lg">Admin<strong>LTE</strong></span>
+                          <span class="logo-mini"><strong>- dash</strong></span>
+                          <span class="logo-lg"><strong>- </strong>stack</span>
                       </a>
                     {% endblock %}
 

dash/main/__init__.py

@@ -1,11 +1,5 @@
 from flask import Blueprint
 
-from ..models import Permission
-
 main = Blueprint('main', __name__)
 
-@main.app_context_processor
-def inject_permissions():
-    return dict(Permission=Permission)
-
 from . import views, errors

dash/main/views.py

@@ -6,11 +6,10 @@ from flask_login import login_required
 
 
 from .. import db
-from ..models import User, Permission
+from ..models import User
 from ..email import send_email
 from . import main
 from .forms import NameForm
-from ..decorators import admin_required, permission_required
 
 
 @main.route('/', methods=['GET', 'POST'])
@@ -23,14 +22,7 @@ def lockscreen():
     current_user = User()
     return render_template('lockscreen.html', current_user=current_user)
     
-@main.route('/admin')
-@login_required
-@admin_required
-def for_admins_only():
-    return "For administrators only!"
-    
 @main.route('/reseller')
 @login_required
-@permission_required(Permission.LIST_USER)
 def for_resellers_only():
     return "For resellers only! We mean it..."

dash/models.py

@@ -10,35 +10,6 @@ from flask_login import UserMixin, AnonymousUserMixin
 from . import db
 from . import login_manager
 
-# user roles
-class Permission:
-    ## user permissions
-    # instance management
-    LAUNCH_INSTANCE = 0x1A
-    REMOVE_INSTANCE = 0x2A
-    MANAGE_INSTANCE = 0x3A
-    LIST_INSTANCE = 0x4A
-    
-    ## reseller permissions
-    # Users Management
-    CREATE_USER = 0x1B
-    MANAGE_USER = 0x2B
-    DELETE_USER = 0x3B
-    LIST_USER = 0x4B
-    SUSPEND_USER = 0x5B
-    UNSUSPEND_USER = 0x6B
-    
-    # Tenant Management
-    CREATE_TENANT = 0x7B
-    MANAGE_TENANT = 0x8B
-    DELETE_TENANT = 0x9B
-    LIST_TENANT = 0xB1
-    SUSPEND_TENANT = 0xB2
-    UNSUSPEND_TENANT = 0xB3
-    MODIFY_TENANT_QUOTA = 0xB4
-    
-    # administrator permissions
-    ADMINISTER = 0xff
 
 class Role(db.Model):
     __tablename__ = 'roles'
@@ -48,39 +19,6 @@ class Role(db.Model):
     default = db.Column(db.Boolean, default=False, index=True)
     permissions = db.Column(db.Integer)
     users = db.relationship('User', backref='role', lazy='dynamic')
-    
-    # creates roles and permissions in db
-    @staticmethod
-    def insert_roles():
-        roles = {
-            'User': (Permission.LAUNCH_INSTANCE |
-                     Permission.REMOVE_INSTANCE |
-                     Permission.MANAGE_INSTANCE |
-                     Permission.LIST_INSTANCE, True),
-            'Reseller': (Permission.CREATE_USER |
-                          Permission.MANAGE_USER |
-                          Permission.DELETE_USER |
-                          Permission.LIST_USER |
-                          Permission.SUSPEND_USER |
-                          Permission.UNSUSPEND_USER |
-                          # tenant management
-                          Permission.CREATE_TENANT |
-                          Permission.MANAGE_TENANT |
-                          Permission.DELETE_TENANT |
-                          Permission.LIST_TENANT |
-                          Permission.SUSPEND_TENANT |
-                          Permission.UNSUSPEND_TENANT |
-                          Permission.MODIFY_TENANT_QUOTA, False),
-            'Administrator': (0xff, False)
-        }
-        for r in roles:
-            role = Role.query.filter_by(name=r).first()
-            if role is None:
-                role = Role(name=r)
-            role.permissions = roles[r][0]
-            role.default = roles[r][1]
-            db.session.add(role)
-        db.session.commit()
         
     def __repr__(self):
         return '<Role %r>' % self.name
@@ -166,35 +104,10 @@ class User(UserMixin, db.Model):
         self.email = new_email
         db.session.add(self)
         return True
-        
-    # Role assignment
-    def __init__(self, **kwargs):
-        super(User, self).__init__(**kwargs)
-        if self.role is None:
-            if self.email == current_app.config['DASH_ADMIN']:
-                self.role = Role.query.filter_by(permissions=0xff).first()
-            if self.role is None:
-                self.role = Role.query.filter_by(default=True).first()
-                
-    def can(self, permissions):
-        return self.role is not None and \
-            (self.role.permissions & permissions) == permissions
-        
-        def is_administrator(self):
-            return self.can(Permission.ADMINISTER)
                 
     def __repr__(self):
         return '<User %r>' % self.username
 
-class AnonymousUser(AnonymousUserMixin):
-    def can(self, permissions):
-        return False
-    
-    def is_administrator():
-        return False
-
-login_manager.anonymous_user = AnonymousUser
-
 @login_manager.user_loader
 def load_user(user_id):
     return User.query.get(int(user_id))

dash/templates/admin/content_header.html

@@ -0,0 +1,8 @@
+<h1>
+  Admin Dashboard
+  <small>Dashboard for Administrators</small>
+</h1>
+<ol class="breadcrumb">
+  <li><a href="#"><i class="fa fa-dashboard"></i>Home</a></li>
+  <li>Admin Dashboard</li>
+</ol>

dash/templates/admin/index.html

@@ -0,0 +1,23 @@
+{% extends "adminlte/base.html" %}
+{% import "adminlte/layout.html" as layout with context %}
+{% import "adminlte/widgets.html" as widgets with context %}
+
+{% block navbar %}
+
+  {% include "navbar.html" %}
+
+{%- endblock navbar %}
+
+
+{% block sidebar -%}
+
+  {% include 'sidebar.html' %}
+
+  {% include 'admin/sidebar_menu.html' %}
+
+{%- endblock sidebar %}
+
+
+{% block content_header -%}
+  {% include 'admin/content_header.html' %}
+{%- endblock content_header %}

dash/templates/admin/sidebar_menu.html

@@ -0,0 +1,36 @@
+<ul class="sidebar-menu">
+<li class="header">Admin Menu</li>
+  <li>
+    <a href="">
+      <i class="fa fa-dashboard"></i> <span>Admin Dashboard</span>
+    </a>
+  </li>
+
+  <li class="treeview">
+    <a href="#">
+      <i class="fa fa-users"></i>
+      <span>Users</span>
+      <i class="fa fa-angle-left pull-right"></i>
+    </a>
+    <ul class="treeview-menu">
+      <li>
+        <a href="">
+          <i class="fa fa-user-plus"></i>
+          Create User
+        </a>
+      </li>
+      <li>
+        <a href="">
+          <i class="fa fa-list"></i>
+          List Users
+        </a>
+      </li>
+      <li>
+        <a href="">
+          <i class="fa fa-user-secret"></i>
+          List Resellers
+        </a>
+      </li>
+    </ul>
+  </li>
+</ul>

dash/templates/content_header.html

@@ -0,0 +1,8 @@
+          <h1>
+            Dashboard
+            <small>Preview page</small>
+          </h1>
+          <ol class="breadcrumb">
+            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+            <li>Dashboard</li>
+          </ol>

dash/templates/index.html

@@ -3,304 +3,28 @@
 {% import "adminlte/widgets.html" as widgets with context %}
 
 {% block navbar %}
-        <!-- Sidebar toggle button-->
-        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
-          <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </a>
-        <div class="navbar-custom-menu">
-          <ul class="nav navbar-nav">
-            <!-- Messages: style can be found in dropdown.less-->
-            <li class="dropdown messages-menu">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="fa fa-envelope"></i>
-                <span class="label label-success">4</span>
-              </a>
-              <ul class="dropdown-menu">
-                <li class="header">You have 4 messages</li>
-                <li>
-                  <!-- inner menu: contains the actual data -->
-                  <ul class="menu">
-                    <li><!-- start message -->
-                      <a href="#">
-                        <div class="pull-left">
-                          <img src="{{ current_user.avatar }}" class="img-circle" alt="User Image"/>
-                        </div>
-                        <h4>
-                          Support Team
-                          <small><i class="fa fa-clock-o"></i> 5 mins</small>
-                        </h4>
-                        <p>Why not buy a new awesome theme?</p>
-                      </a>
-                    </li><!-- end message -->
-                    <li>
-                      <a href="#">
-                        <div class="pull-left">
-                          <img src="{{ url_for('static', filename='img/avatar2.png') }}" class="img-circle" alt="user image"/>
-                        </div>
-                        <h4>
-                          AdminLTE Design Team
-                          <small><i class="fa fa-clock-o"></i> 2 hours</small>
-                        </h4>
-                        <p>Why not buy a new awesome theme?</p>
-                      </a>
-                    </li>
-                    <li>
-                      <a href="#">
-                        <div class="pull-left">
-                          <img src="{{ url_for('static', filename='img/avatar.png') }}" class="img-circle" alt="user image"/>
-                        </div>
-                        <h4>
-                          Developers
-                          <small><i class="fa fa-clock-o"></i> Today</small>
-                        </h4>
-                        <p>Why not buy a new awesome theme?</p>
-                      </a>
-                    </li>
-                    <li>
-                      <a href="#">
-                        <div class="pull-left">
-                          <img src="{{ url_for('static', filename='img/avatar2.png') }}" class="img-circle" alt="user image"/>
-                        </div>
-                        <h4>
-                          Sales Department
-                          <small><i class="fa fa-clock-o"></i> Yesterday</small>
-                        </h4>
-                        <p>Why not buy a new awesome theme?</p>
-                      </a>
-                    </li>
-                    <li>
-                      <a href="#">
-                        <div class="pull-left">
-                          <img src="{{ url_for('static', filename='img/avatar.png') }}" class="img-circle" alt="user image"/>
-                        </div>
-                        <h4>
-                          Reviewers
-                          <small><i class="fa fa-clock-o"></i> 2 days</small>
-                        </h4>
-                        <p>Why not buy a new awesome theme?</p>
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="footer"><a href="#">See All Messages</a></li>
-              </ul>
-            </li>
-            <!-- Notifications: style can be found in dropdown.less -->
-            <li class="dropdown notifications-menu">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="fa fa-warning"></i>
-                <span class="label label-warning">10</span>
-              </a>
-              <ul class="dropdown-menu">
-                <li class="header">You have 10 notifications</li>
-                <li>
-                  <!-- inner menu: contains the actual data -->
-                  <ul class="menu">
-                    <li>
-                      <a href="#">
-                        <i class="ion ion-ios7-people info"></i> 5 new members joined today
-                      </a>
-                    </li>
-                    <li>
-                      <a href="#">
-                        <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
-                      </a>
-                    </li>
-                    <li>
-                      <a href="#">
-                        <i class="fa fa-users warning"></i> 5 new members joined
-                      </a>
-                    </li>
 
-                    <li>
-                      <a href="#">
-                        <i class="ion ion-ios7-cart success"></i> 25 sales made
-                      </a>
-                    </li>
-                    <li>
-                      <a href="#">
-                        <i class="ion ion-ios7-person danger"></i> You changed your username
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="footer"><a href="#">View all</a></li>
-              </ul>
-            </li>
-            <!-- Tasks: style can be found in dropdown.less -->
-            <li class="dropdown tasks-menu">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="fa fa-tasks"></i>
-                <span class="label label-danger">9</span>
-              </a>
-              <ul class="dropdown-menu">
-                <li class="header">You have 9 tasks</li>
-                <li>
-                  <!-- inner menu: contains the actual data -->
-                  <ul class="menu">
-                    <li><!-- Task item -->
-                      <a href="#">
-                        <h3>
-                          Design some buttons
-                          <small class="pull-right">20%</small>
-                        </h3>
-                        <div class="progress xs">
-                          <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                            <span class="sr-only">20% Complete</span>
-                          </div>
-                        </div>
-                      </a>
-                    </li><!-- end task item -->
-                    <li><!-- Task item -->
-                      <a href="#">
-                        <h3>
-                          Create a nice theme
-                          <small class="pull-right">40%</small>
-                        </h3>
-                        <div class="progress xs">
-                          <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                            <span class="sr-only">40% Complete</span>
-                          </div>
-                        </div>
-                      </a>
-                    </li><!-- end task item -->
-                    <li><!-- Task item -->
-                      <a href="#">
-                        <h3>
-                          Some task I need to do
-                          <small class="pull-right">60%</small>
-                        </h3>
-                        <div class="progress xs">
-                          <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                            <span class="sr-only">60% Complete</span>
-                          </div>
-                        </div>
-                      </a>
-                    </li><!-- end task item -->
-                    <li><!-- Task item -->
-                      <a href="#">
-                        <h3>
-                          Make beautiful transitions
-                          <small class="pull-right">80%</small>
-                        </h3>
-                        <div class="progress xs">
-                          <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                            <span class="sr-only">80% Complete</span>
-                          </div>
-                        </div>
-                      </a>
-                    </li><!-- end task item -->
-                  </ul>
-                </li>
-                <li class="footer">
-                  <a href="#">View all tasks</a>
-                </li>
-              </ul>
-            </li>
-            <!-- User Account: style can be found in dropdown.less -->
-            <li class="dropdown user user-menu">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="glyphicon glyphicon-user"></i>
-                <span>{{ current_user.full_name }} <i class="caret"></i></span>
-              </a>
-              <ul class="dropdown-menu">
-                <!-- User image -->
-                <li class="user-header bg-light-blue">
-                  <img src="{{ current_user.avatar }}" class="img-circle" alt="User Image" />
-                  <p>
-                    {{ current_user.full_name }} - Web Developer
-                    <small>Member since {{ current_user.created_at.strftime("%b. %Y") }}</small>
-                  </p>
-                </li>
-                <!-- Menu Body -->
-                <li class="user-body">
-                  <div class="col-xs-4 text-center">
-                    <a href="#">Followers</a>
-                  </div>
-                  <div class="col-xs-4 text-center">
-                    <a href="#">Sales</a>
-                  </div>
-                  <div class="col-xs-4 text-center">
-                    <a href="#">Friends</a>
-                  </div>
-                </li>
-                <!-- Menu Footer-->
-                <li class="user-footer">
-                  <div class="pull-left">
-                    <a href="{{ url_for('profile.index') }}" class="btn btn-default btn-flat">Profile</a>
-                  </div>
-                  <div class="pull-right">
-                    {% if current_user.is_authenticated %}
-                    <a href="{{ url_for('auth.logout') }}" class="btn btn-default btn-flat">Sign out</a>
-                    {% endif %}
-                  </div>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </div>
+  {% include "navbar.html" %}
+
 {%- endblock navbar %}
+
+
 {% block sidebar -%}
-        <!-- sidebar: style can be found in sidebar.less -->
-        <!-- sidebar menu: : style can be found in sidebar.less -->
-          <div class="user-panel">
-            <div class="pull-left image">
-              <img src="{{ current_user.avatar }}" alt="User Image" class="img-circle">
-            </div>
-            <div class="pull-left info">
-              <p>{{ current_user.full_name }}</p>
-              <a href="#">
-                <i class="fa fa-circle text-success"></i>
-                Online
-              </a>
-            </div>
-          </div>
-          <ul class="sidebar-menu">
-          <li class="header">HEADER</li>
-            <li class="active">
-              <a href="{{ url_for('.index') }}">
-                <i class="fa fa-dashboard"></i> <span>Dashboard</span>
-              </a>
-            </li>
 
-            <li class="treeview">
-              <a href="#">
-                <i class="fa fa-folder"></i>
-                <span>Examples</span>
-                <i class="fa fa-angle-left pull-right"></i>
-              </a>
-              <ul class="treeview-menu">
-                <li>
-                  <a href="{{ url_for('auth.login') }}">
-                    <i class="fa fa-circle-o"></i>
-                    Login
-                  </a>
-                </li>
-                <li>
-                  <a href="{{ url_for('.lockscreen') }}">
-                    <i class="fa fa-circle-o"></i>
-                    Lockscreen
-                  </a>
-                </li>
-              </ul>
-            </li>
+  {% include 'sidebar.html' %}
+  
+  {% if current_user.role_id == 1 %}
+    {% include 'admin/sidebar_menu.html' %}
+  {% endif %}
 
-          </ul>
-        <!-- /.sidebar -->
 {%- endblock sidebar %}
+
+
 {% block content_header -%}
-          <h1>
-            Dashboard
-            <small>Preview page</small>
-          </h1>
-          <ol class="breadcrumb">
-            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
-            <li class="active">Dashboard</li>
-          </ol>
+  {% include 'content_header.html' %}
 {%- endblock content_header %}
+
+
 {% block content -%}
           <h4 class="page-header">
             AdminLTE Small Boxes

dash/templates/navbar.html

@@ -0,0 +1,239 @@
+        <!-- Sidebar toggle button-->
+        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </a>
+        <div class="navbar-custom-menu">
+          <ul class="nav navbar-nav">
+            <!-- Messages: style can be found in dropdown.less-->
+            <li class="dropdown messages-menu">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                <i class="fa fa-envelope"></i>
+                <span class="label label-success">4</span>
+              </a>
+              <ul class="dropdown-menu">
+                <li class="header">You have 4 messages</li>
+                <li>
+                  <!-- inner menu: contains the actual data -->
+                  <ul class="menu">
+                    <li><!-- start message -->
+                      <a href="#">
+                        <div class="pull-left">
+                          <img src="{{ current_user.avatar }}" class="img-circle" alt="User Image"/>
+                        </div>
+                        <h4>
+                          Support Team
+                          <small><i class="fa fa-clock-o"></i> 5 mins</small>
+                        </h4>
+                        <p>Why not buy a new awesome theme?</p>
+                      </a>
+                    </li><!-- end message -->
+                    <li>
+                      <a href="#">
+                        <div class="pull-left">
+                          <img src="{{ url_for('static', filename='img/avatar2.png') }}" class="img-circle" alt="user image"/>
+                        </div>
+                        <h4>
+                          AdminLTE Design Team
+                          <small><i class="fa fa-clock-o"></i> 2 hours</small>
+                        </h4>
+                        <p>Why not buy a new awesome theme?</p>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#">
+                        <div class="pull-left">
+                          <img src="{{ url_for('static', filename='img/avatar.png') }}" class="img-circle" alt="user image"/>
+                        </div>
+                        <h4>
+                          Developers
+                          <small><i class="fa fa-clock-o"></i> Today</small>
+                        </h4>
+                        <p>Why not buy a new awesome theme?</p>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#">
+                        <div class="pull-left">
+                          <img src="{{ url_for('static', filename='img/avatar2.png') }}" class="img-circle" alt="user image"/>
+                        </div>
+                        <h4>
+                          Sales Department
+                          <small><i class="fa fa-clock-o"></i> Yesterday</small>
+                        </h4>
+                        <p>Why not buy a new awesome theme?</p>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#">
+                        <div class="pull-left">
+                          <img src="{{ url_for('static', filename='img/avatar.png') }}" class="img-circle" alt="user image"/>
+                        </div>
+                        <h4>
+                          Reviewers
+                          <small><i class="fa fa-clock-o"></i> 2 days</small>
+                        </h4>
+                        <p>Why not buy a new awesome theme?</p>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="footer"><a href="#">See All Messages</a></li>
+              </ul>
+            </li>
+            <!-- Notifications: style can be found in dropdown.less -->
+            <li class="dropdown notifications-menu">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                <i class="fa fa-warning"></i>
+                <span class="label label-warning">10</span>
+              </a>
+              <ul class="dropdown-menu">
+                <li class="header">You have 10 notifications</li>
+                <li>
+                  <!-- inner menu: contains the actual data -->
+                  <ul class="menu">
+                    <li>
+                      <a href="#">
+                        <i class="ion ion-ios7-people info"></i> 5 new members joined today
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#">
+                        <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#">
+                        <i class="fa fa-users warning"></i> 5 new members joined
+                      </a>
+                    </li>
+
+                    <li>
+                      <a href="#">
+                        <i class="ion ion-ios7-cart success"></i> 25 sales made
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#">
+                        <i class="ion ion-ios7-person danger"></i> You changed your username
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="footer"><a href="#">View all</a></li>
+              </ul>
+            </li>
+            <!-- Tasks: style can be found in dropdown.less -->
+            <li class="dropdown tasks-menu">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                <i class="fa fa-tasks"></i>
+                <span class="label label-danger">9</span>
+              </a>
+              <ul class="dropdown-menu">
+                <li class="header">You have 9 tasks</li>
+                <li>
+                  <!-- inner menu: contains the actual data -->
+                  <ul class="menu">
+                    <li><!-- Task item -->
+                      <a href="#">
+                        <h3>
+                          Design some buttons
+                          <small class="pull-right">20%</small>
+                        </h3>
+                        <div class="progress xs">
+                          <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                            <span class="sr-only">20% Complete</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li><!-- end task item -->
+                    <li><!-- Task item -->
+                      <a href="#">
+                        <h3>
+                          Create a nice theme
+                          <small class="pull-right">40%</small>
+                        </h3>
+                        <div class="progress xs">
+                          <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                            <span class="sr-only">40% Complete</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li><!-- end task item -->
+                    <li><!-- Task item -->
+                      <a href="#">
+                        <h3>
+                          Some task I need to do
+                          <small class="pull-right">60%</small>
+                        </h3>
+                        <div class="progress xs">
+                          <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                            <span class="sr-only">60% Complete</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li><!-- end task item -->
+                    <li><!-- Task item -->
+                      <a href="#">
+                        <h3>
+                          Make beautiful transitions
+                          <small class="pull-right">80%</small>
+                        </h3>
+                        <div class="progress xs">
+                          <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                            <span class="sr-only">80% Complete</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li><!-- end task item -->
+                  </ul>
+                </li>
+                <li class="footer">
+                  <a href="#">View all tasks</a>
+                </li>
+              </ul>
+            </li>
+            <!-- User Account: style can be found in dropdown.less -->
+            <li class="dropdown user user-menu">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                <i class="glyphicon glyphicon-user"></i>
+                <span>{{ current_user.full_name }} <i class="caret"></i></span>
+              </a>
+              <ul class="dropdown-menu">
+                <!-- User image -->
+                <li class="user-header bg-light-blue">
+                  <img src="{{ current_user.avatar }}" class="img-circle" alt="User Image" />
+                  <p>
+                    {{ current_user.full_name }} - Web Developer
+                    <small>Member since {{ current_user.created_at.strftime("%b. %Y") }}</small>
+                  </p>
+                </li>
+                <!-- Menu Body -->
+                <li class="user-body">
+                  <div class="col-xs-4 text-center">
+                    <a href="#">Followers</a>
+                  </div>
+                  <div class="col-xs-4 text-center">
+                    <a href="#">Sales</a>
+                  </div>
+                  <div class="col-xs-4 text-center">
+                    <a href="#">Friends</a>
+                  </div>
+                </li>
+                <!-- Menu Footer-->
+                <li class="user-footer">
+                  <div class="pull-left">
+                    <a href="{{ url_for('profile.index') }}" class="btn btn-default btn-flat">Profile</a>
+                  </div>
+                  <div class="pull-right">
+                    {% if current_user.is_authenticated %}
+                    <a href="{{ url_for('auth.logout') }}" class="btn btn-default btn-flat">Sign out</a>
+                    {% endif %}
+                  </div>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>

dash/templates/sidebar.html

@@ -0,0 +1,45 @@
+        <!-- sidebar: style can be found in sidebar.less -->
+        <!-- sidebar menu: : style can be found in sidebar.less -->
+          <div class="user-panel">
+            <div class="pull-left image">
+              <img src="{{ current_user.avatar }}" alt="User Image" class="img-circle">
+            </div>
+            <div class="pull-left info">
+              <p>{{ current_user.full_name }}</p>
+              <a href="#">
+                <i class="fa fa-circle text-success"></i>
+                Online
+              </a>
+            </div>
+          </div>
+          <ul class="sidebar-menu">
+          <li class="header">Main Menu</li>
+            <li class="active">
+              <a href="{{ url_for('main.index') }}">
+                <i class="fa fa-dashboard"></i> <span>Dashboard</span>
+              </a>
+            </li>
+
+            <li class="treeview">
+              <a href="#">
+                <i class="fa fa-server"></i>
+                <span>Servers</span>
+                <i class="fa fa-angle-left pull-right"></i>
+              </a>
+              <ul class="treeview-menu">
+                <li>
+                  <a href="">
+                    <i class="fa fa-plus"></i>
+                    Create Server
+                  </a>
+                </li>
+                <li>
+                  <a href="">
+                    <i class="fa fa-list"></i>
+                    List Servers
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        <!-- /.sidebar -->

main_plan.txt

@@ -9,6 +9,8 @@ API
 Logs
 Settings
 Support
+Admin
+Reseller
 
 == Account ==
 -Billing
@@ -60,3 +62,17 @@ Support
 -Notification
 
 == Support ==
+
+== Admin Area ==
+-Create user
+-Delete user
+-Edit user
+-Suspend user
+-Unsuspend user
+
+-Config page
+
+
+== Reseller ==
+-All the actions regarding its own account
+-All the actions regarding its sub-accounts