Frontend

2018-06-20 08:48:14 +10:00
parent 80d78cbf25
commit b38b988da4
40 changed files with 1419 additions and 0 deletions
@@ -0,0 +1,28 @@
+<div class="container">
+    <div class="d-flex">
+        <a class="navbar-brand" href="/">
+            <img src="/images/favicons/favicon-32x32.png" border="0"> &nbsp; Docker Registry
+        </a>
+
+        <div class="d-flex order-lg-2 ml-auto">
+            <div class="dropdown">
+                <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
+                    <span class="avatar" style="background-image: url(<%- getUserField('avatar', '/images/default-avatar.jpg') %>)"></span>
+                    <span class="ml-2 d-none d-lg-block">
+                      <span class="text-default"><%- getUserField('name', 'Unknown User') %></span>
+                      <small class="text-muted d-block mt-1"><%- getRole() %></small>
+                    </span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a class="dropdown-item profile" href="/profile">
+                        <i class="dropdown-icon fe fe-user"></i> Profile
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item logout" href="/logout">
+                        <i class="dropdown-icon fe fe-log-out"></i> <%- getLogoutText() %>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,55 @@
+'use strict';
+
+const $          = require('jquery');
+const Mn         = require('backbone.marionette');
+const Cache      = require('../../cache');
+const Controller = require('../../controller');
+const Tokens     = require('../../tokens');
+const template   = require('./main.ejs');
+
+module.exports = Mn.View.extend({
+    id:        'header',
+    className: 'header',
+    template:  template,
+
+    ui: {
+        link: 'a'
+    },
+
+    events: {
+        'click @ui.link': function (e) {
+            e.preventDefault();
+            let href = $(e.currentTarget).attr('href');
+
+            switch (href) {
+                case '/':
+                    Controller.showDashboard();
+                    break;
+                case '/profile':
+                    Controller.showProfile();
+                    break;
+                case '/logout':
+                    Controller.logout();
+                    break;
+            }
+        }
+    },
+
+    templateContext: {
+        getUserField: function (field, default_val) {
+            return Cache.User.get(field) || default_val;
+        },
+
+        getRole: function () {
+            return Cache.User.isAdmin() ? 'Administrator' : 'Apache Helicopter';
+        },
+
+        getLogoutText: function () {
+            if (Tokens.getTokenCount() > 1) {
+                return 'Sign back in as ' + Tokens.getNextTokenName();
+            }
+
+            return 'Sign out';
+        }
+    }
+});