Frontent dev env (#247)

* Added frontend development files/environment * More items-categories related removals * Improvements in pages templates (inc. static pages) * Improvements in video player * Added empty home page message + cta * Updates in media, playlist and management pages * Improvements in material icons font loading * Replaced media & playlists links in frontend dev-env * frontend package version update * chnaged frontend dev url port * static files update * Changed default position of theme switcher * enabled frontend docker container
2025-11-20 13:36:05 -05:00 · 2021-07-11 18:01:34 +03:00
parent 060bb45725
commit aa6520daac
555 changed files with 201927 additions and 66002 deletions
--- a/frontend/config/mediacms.config.html.js
+++ b/frontend/config/mediacms.config.html.js
@@ -0,0 +1,44 @@
+module.exports = {
+  head: {
+    meta: [
+      { charset: 'utf-8' },
+      { content: 'ie=edge', 'http-equiv': 'x-ua-compatible' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { name: 'theme-color', content: '#fafafa' },
+      { name: 'msapplication-TileColor', content: '#fafafa' },
+      { name: 'msapplication-config', content: 'favicons/browserconfig.xml' },
+    ],
+    links: [
+      /**
+       * Manifest file link.
+       */
+      { rel: 'manifest', href: 'static/favicons/site.webmanifest' },
+      /**
+       * Favicon links.
+       */
+      { rel: 'apple-touch-icon', sizes: '180x180', href: 'static/favicons/apple-touch-icon.png' },
+      { rel: 'icon', type: 'image/png', sizes: '32x32', href: 'static/favicons/favicon-32x32.png' },
+      { rel: 'icon', type: 'image/png', sizes: '16x16', href: 'static/favicons/favicon-16x16.png' },
+      { rel: 'mask-icon', href: 'static/favicons/safari-pinned-tab.svg', color: '#fafafa' },
+      { rel: 'shortcut icon', href: 'static/favicons/favicon.ico' },
+      /**
+       * Stylesheet links
+       */
+      { rel: 'preload', href: 'static/css/_extra.css', as: 'style' },
+      { rel: 'stylesheet', href: 'static/css/_extra.css' },
+
+      // 'https://fonts.googleapis.com/icon?family=Material+Icons',
+      { rel: 'preload', href: 'static/lib/material-icons/material-icons.css', as: 'style' },
+      { rel: 'stylesheet', href: 'static/lib/material-icons/material-icons.css' },
+
+      // 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i&display=swap
+      { rel: 'preload', href: 'static/lib/gfonts/gfonts.css', as: 'style' },
+      { rel: 'stylesheet', href: 'static/lib/gfonts/gfonts.css' },
+    ],
+    scripts: [],
+  },
+  body: {
+    scripts: [],
+    snippet: '',
+  },
+};
--- a/frontend/config/mediacms.config.js
+++ b/frontend/config/mediacms.config.js
@@ -0,0 +1,31 @@
+const path = require('path');
+
+const rootDir = '..';
+const srcDir = rootDir + '/src';
+const configDir = srcDir + '/templates/config';
+const coreConfigDir = configDir + '/core';
+const installConfigDir = configDir + '/installation';
+
+module.exports = {
+  src: path.resolve(__dirname, srcDir),
+  build: path.resolve(__dirname, rootDir),
+  html: require('./mediacms.config.html.js'),
+  pages: require('./mediacms.config.pages.js'),
+  window: {
+    MediaCMS: {
+      api: require(coreConfigDir + '/api.config.js'),
+      url: require(coreConfigDir + '/url.config.js'),
+      user: require(coreConfigDir + '/user.config.js'),
+      site: require(installConfigDir + '/site.config.js'),
+      pages: require(installConfigDir + '/pages.config.js'),
+      contents: require(installConfigDir + '/contents.config.js'),
+      features: require(installConfigDir + '/features.config.js'),
+      /*notifications: [
+          'Message one text',
+          'Message two text',
+          'Message three text'
+      ],*/
+    },
+  },
+  postcssConfigFile: path.resolve(__dirname, './postcss.config.js'),
+};
--- a/frontend/config/mediacms.config.pages.js
+++ b/frontend/config/mediacms.config.pages.js
@@ -0,0 +1,268 @@
+const templates = require('./mediacms.config.templates');
+
+const DEV_SAMPLE_DATA = {
+  profileId: process.env.MEDIACMS_USER_USERNAME,
+  media: {
+    videoId: process.env.MEDIACMS_VIDEO_ID,
+    audioId: process.env.MEDIACMS_AUDIO_ID,
+    imageId: process.env.MEDIACMS_IMAGE_ID,
+    pdfId: process.env.MEDIACMS_PDF_ID,
+  },
+  playlistId: process.env.MEDIACMS_PLAYLIST_ID,
+};
+
+const formatPage = (page) => {
+  const pageContentId = 'page-' + page.id;
+  const filename = page.filename ? page.filename : ('home' === page.id ? 'index' : page.id) + '.html';
+  const render = page.renderer
+    ? page.renderer
+    : page.component
+    ? templates.renderPageContent({ page: { id: pageContentId, component: page.component } })
+    : undefined;
+  const headLinks = [
+    { rel: 'preload', href: './static/lib/video-js/7.7.5/video.min.js', as: 'script' },
+    ...(page.headLinks ? page.headLinks : []),
+  ];
+  const bodyScripts = [
+    { src: './static/lib/video-js/7.7.5/video.min.js' },
+    ...(page.bodyScripts ? page.bodyScripts : []),
+  ];
+
+  const ret = {
+    buildExclude: !!page.buildExclude,
+    title: page.title,
+    filename,
+    render,
+    html: {
+      head: {
+        links: headLinks,
+      },
+      body: {
+        scripts: bodyScripts,
+        snippet: page.snippet || templates.htmlBodySnippet({ id: pageContentId }),
+      },
+    },
+    window: { MediaCMS: page.global ? { ...page.global } : {} },
+  };
+
+  return ret;
+};
+
+const formatPageData = (page) => {
+  return formatPage({
+    ...page,
+  });
+};
+
+const formatStaticPageData = (page) => {
+  const pageContentId = 'page-' + page.id;
+  return formatPage({
+    ...page,
+    renderer: page.renderer
+      ? page.renderer
+      : page.component
+      ? templates.renderPageStaticContent({ page: { id: pageContentId, component: page.component } })
+      : undefined,
+  });
+};
+
+const PAGES = {
+  base: {
+    id: 'base',
+    title: 'Layout base',
+    renderer: templates.renderBase(),
+  },
+  index: { id: 'home', title: 'Home', component: 'HomePage' },
+  search: { id: 'search', title: 'Search results', component: 'SearchPage' },
+  latest: { id: 'latest', title: 'Recent uploads', component: 'LatestMediaPage' },
+  featured: { id: 'featured', title: 'Featured', component: 'FeaturedMediaPage' },
+  recommended: { id: 'recommended', title: 'Recommended', component: 'RecommendedMediaPage' },
+  members: { id: 'members', title: 'Members', component: 'MembersPage' },
+  history: { id: 'history', title: 'History', component: 'HistoryPage' },
+  liked: { id: 'liked', title: 'Liked media', component: 'LikedMediaPage' },
+  tags: { id: 'tags', title: 'Tags', component: 'TagsPage' },
+  categories: { id: 'categories', title: 'Categories', component: 'CategoriesPage' },
+  'manage-media': { id: 'manage-media', title: 'Manage media', component: 'ManageMediaPage' },
+  'manage-users': { id: 'manage-users', title: 'Manage users', component: 'ManageUsersPage' },
+  'manage-comments': { id: 'manage-comments', title: 'Manage comments', component: 'ManageCommentsPage' },
+  'add-media': {
+    id: 'add-media',
+    title: 'Add media',
+    renderer: templates.renderAddMediaPageContent(),
+    snippet: templates.htmlBodySnippetAddMediaPage(),
+    headLinks: [{ rel: 'preload', href: './static/lib/file-uploader/5.13.0/fine-uploader.min.js', as: 'script' }],
+    bodyScripts: [{ src: './static/lib/file-uploader/5.13.0/fine-uploader.min.js' }],
+  },
+  embed: {
+    id: 'embed',
+    title: 'Embedded player',
+    renderer: templates.renderEmbedPageContent({ page: { id: 'page-embed', component: 'EmbedPage' } }),
+    snippet: templates.htmlBodySnippetEmbedPage({ id: 'page-embed' }),
+    global: { mediaId: DEV_SAMPLE_DATA.media.videoId },
+  },
+  media: {
+    id: 'media',
+    title: 'Media',
+    component: 'MediaPage',
+    global: { mediaId: DEV_SAMPLE_DATA.media.videoId },
+  },
+  'media-video': {
+    buildExclude: true,
+    id: 'media-video',
+    title: 'Media - Video',
+    component: 'MediaVideoPage',
+    global: { mediaId: DEV_SAMPLE_DATA.media.videoId },
+  },
+  'media-audio': {
+    buildExclude: true,
+    id: 'media-audio',
+    title: 'Media - Audio',
+    component: 'MediaAudioPage',
+    global: { mediaId: DEV_SAMPLE_DATA.media.audioId },
+  },
+  'media-image': {
+    buildExclude: true,
+    id: 'media-image',
+    title: 'Media - Image',
+    component: 'MediaImagePage',
+    global: { mediaId: DEV_SAMPLE_DATA.media.imageId },
+  },
+  'media-pdf': {
+    buildExclude: true,
+    id: 'media-pdf',
+    title: 'Media - Pdf',
+    component: 'MediaPdfPage',
+    global: { mediaId: DEV_SAMPLE_DATA.media.pdfId },
+  },
+  playlist: {
+    id: 'playlist',
+    title: 'Playlist',
+    component: 'PlaylistPage',
+    global: { playlistId: DEV_SAMPLE_DATA.playlistId },
+  },
+  'profile-media': {
+    id: 'profile-media',
+    title: 'Profile - Media',
+    component: 'ProfileMediaPage',
+    global: { profileId: DEV_SAMPLE_DATA.profileId },
+  },
+  'profile-about': {
+    id: 'profile-about',
+    title: 'Profile - About',
+    component: 'ProfileAboutPage',
+    global: { profileId: DEV_SAMPLE_DATA.profileId },
+  },
+  'profile-playlists': {
+    id: 'profile-playlists',
+    title: 'Profile - Playlist',
+    component: 'ProfilePlaylistsPage',
+    global: { profileId: DEV_SAMPLE_DATA.profileId },
+  },
+};
+
+const STATIC_PAGES = {
+  error: {
+    buildExclude: true,
+    id: 'error',
+    title: 'Error',
+    renderer: templates.renderBase(),
+    snippet: templates.static.errorPage(),
+  },
+  about: {
+    id: 'about',
+    title: 'About',
+    renderer: templates.renderBase(),
+    snippet: templates.static.aboutPage(),
+  },
+  terms: {
+    buildExclude: true,
+    id: 'terms',
+    title: 'Terms',
+    renderer: templates.renderBase(),
+    snippet: templates.static.termsPage(),
+  },
+};
+
+const DEV_ONLY_STATIC_PAGES = {
+  'add-media-template': {
+    buildExclude: true,
+    id: 'add-media-template',
+    title: 'Add media - Template',
+    renderer: templates.renderAddMediaPageContent(),
+    snippet: templates.static.addMediaPageTemplate(),
+    headLinks: [{ rel: 'preload', href: './static/lib/file-uploader/5.13.0/fine-uploader.min.js', as: 'script' }],
+    bodyScripts: [{ src: './static/lib/file-uploader/5.13.0/fine-uploader.min.js' }],
+  },
+  'edit-media': {
+    buildExclude: true,
+    id: 'edit-media',
+    title: 'Edit media',
+    renderer: templates.renderBase(),
+    snippet: templates.static.editMediaPage(),
+  },
+  'edit-channel': {
+    buildExclude: true,
+    id: 'edit-channel',
+    title: 'Edit channel',
+    renderer: templates.renderBase(),
+    snippet: templates.static.editChannelPage(),
+  },
+  'edit-profile': {
+    buildExclude: true,
+    id: 'edit-profile',
+    title: 'Edit profile',
+    renderer: templates.renderBase(),
+    snippet: templates.static.editProfilePage(),
+  },
+  signin: {
+    buildExclude: true,
+    id: 'signin',
+    title: 'Sign in',
+    renderer: templates.renderBase(),
+    snippet: templates.static.signinPage(),
+  },
+  signout: {
+    buildExclude: true,
+    id: 'signout',
+    title: 'Sign out',
+    renderer: templates.renderBase(),
+    snippet: templates.static.signoutPage(),
+  },
+  register: {
+    buildExclude: true,
+    id: 'register',
+    title: 'Register',
+    renderer: templates.renderBase(),
+    snippet: templates.static.registerPage(),
+  },
+  'reset-password': {
+    buildExclude: true,
+    id: 'reset-password',
+    title: 'Reset password',
+    renderer: templates.renderBase(),
+    snippet: templates.static.resetPasswordPage(),
+  },
+  contact: {
+    buildExclude: true,
+    id: 'contact',
+    title: 'Contact us',
+    renderer: templates.renderBase(),
+    snippet: templates.static.contactPage(),
+  },
+};
+
+const pages = {};
+
+for (let k in PAGES) {
+  pages[k] = formatPageData(PAGES[k]);
+}
+
+for (let k in STATIC_PAGES) {
+  pages[k] = formatStaticPageData(STATIC_PAGES[k]);
+}
+
+for (let k in DEV_ONLY_STATIC_PAGES) {
+  pages[k] = formatStaticPageData(DEV_ONLY_STATIC_PAGES[k]);
+}
+
+module.exports = pages;
--- a/frontend/config/mediacms.config.templates.js
+++ b/frontend/config/mediacms.config.templates.js
@@ -0,0 +1,45 @@
+const fs = require('fs');
+const path = require('path');
+const ejs = require('ejs');
+
+const templatesPath = path.join(__dirname, './templates');
+const staticTemplatesPath = path.join(__dirname, './templates/static');
+
+const compileTmpl = (filename) =>
+  ejs.compile(fs.readFileSync(path.join(templatesPath, filename), 'utf8'), {
+    root: [templatesPath],
+    filename: path.join(templatesPath, filename),
+    outputFunctionName: 'echo',
+  });
+
+const compileStaticTmpl = (filename) =>
+  ejs.compile(fs.readFileSync(path.join(staticTemplatesPath, filename), 'utf8'), {
+    root: [staticTemplatesPath],
+    filename: path.join(staticTemplatesPath, filename),
+    outputFunctionName: 'echo',
+  });
+
+module.exports = {
+  htmlBodySnippet: compileTmpl('htmlBodySnippet.ejs'),
+  htmlBodySnippetEmbedPage: compileTmpl('htmlBodySnippetEmbedPage.ejs'),
+  htmlBodySnippetAddMediaPage: compileTmpl('htmlBodySnippetAddMediaPage.ejs'),
+  renderBase: compileTmpl('renderBase.ejs'),
+  renderPageContent: compileTmpl('renderPageContent.ejs'),
+  renderPageStaticContent: compileTmpl('renderPageStaticContent.ejs'),
+  renderEmbedPageContent: compileTmpl('renderEmbedPageContent.ejs'),
+  renderAddMediaPageContent: compileTmpl('renderAddMediaPageContent.ejs'),
+  static: {
+    errorPage: compileStaticTmpl('errorPage.html'),
+    aboutPage: compileStaticTmpl('aboutPage.html'),
+    termsPage: compileStaticTmpl('termsPage.html'),
+    contactPage: compileStaticTmpl('contactPage.html'),
+    signinPage: compileStaticTmpl('signinPage.html'),
+    signoutPage: compileStaticTmpl('signoutPage.html'),
+    registerPage: compileStaticTmpl('registerPage.html'),
+    resetPasswordPage: compileStaticTmpl('resetPasswordPage.html'),
+    editMediaPage: compileStaticTmpl('editMediaPage.html'),
+    editChannelPage: compileStaticTmpl('editChannelPage.html'),
+    editProfilePage: compileStaticTmpl('editProfilePage.html'),
+    addMediaPageTemplate: compileStaticTmpl('addMediaPageTemplate.html'),
+  },
+};
--- a/frontend/config/postcss.config.js
+++ b/frontend/config/postcss.config.js
@@ -0,0 +1,10 @@
+module.exports = (ctx) => {
+  const ret = {
+    map: ctx.env === 'development' ? ctx.map : false,
+    plugins: {
+      autoprefixer: {},
+    },
+  };
+
+  return ret;
+};
--- a/frontend/config/templates/htmlBodySnippet.ejs
+++ b/frontend/config/templates/htmlBodySnippet.ejs
@@ -0,0 +1,6 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+    <% if (id) { %><div id="<%= id %>"></div><% } %>
+</div>
+<div id="app-footer"></div>
--- a/frontend/config/templates/htmlBodySnippetAddMediaPage.ejs
+++ b/frontend/config/templates/htmlBodySnippetAddMediaPage.ejs
@@ -0,0 +1,65 @@
+<div id="add-media-page">
+	
+	<div class="page-container">
+	
+		<div id="app-header"></div>
+		<div id="app-sidebar"></div>
+
+		<div class="page-main-wrap">
+		
+			<main class="page-main">
+				<div class="page-main-inner">
+
+					<div class="media-uploader-wrap">
+						
+						<div class="media-uploader-top-wrap">
+							
+							<div class="media-uploader-top-left-wrap">
+								<h1>Upload media files</h1>
+							</div>
+							
+							<div class="media-uploader-top-right-wrap"></div>
+						</div>
+
+						<script type="text/template" id="qq-template"> <div class="media-uploader-bottom-wrap qq-uploader-selector"> <div class="media-uploader-bottom-left-wrap"> <div class="media-drag-drop-wrap"> <div class="media-drag-drop-inner" qq-drop-area-text="Drop files here"> <div class="media-drag-drop-content"> <div class="media-drag-drop-content-inner"> <span><i class="material-icons">cloud_upload</i></span> <span>Drag and drop files</span> <span>or</span> <span class="browse-files-btn-wrap"><span class="qq-upload-button-selector">Browse your files</span></span><div class="qq-upload-drop-area-selector media-dropzone" qq-hide-dropzone><span class="qq-upload-drop-area-text-selector"></span></div> </div></div></div></div></div><div class="media-uploader-bottom-right-wrap"> <ul class="media-upload-items-list qq-upload-list-selector"> <li> <div class="media-upload-item-main"> <div class="media-upload-item-thumb"> <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale alt=""/> <span class="media-upload-item-spinner qq-upload-spinner-selector"><i class="material-icons">autorenew</i></span> <button type="button" class="qq-upload-retry-selector retry-media-upload-item" aria-label="Retry"><i class="material-icons">refresh</i> Retry</button> </div><div class="media-upload-item-details"> <div class="media-upload-item-name"> <span class="media-upload-item-filename qq-upload-file-selector"></span> <input class="media-upload-item-filename-input qq-edit-filename-selector" tab-index="0" type="text"/> </div><div class="media-upload-item-details-bottom"> <div class="media-upload-item-progress-bar-container qq-progress-bar-container-selector"> <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="media-upload-item-progress-bar qq-progress-bar-selector"></div></div><span class="media-upload-item-upload-size qq-upload-size-selector"></span> <span role="status" class="media-upload-item-status-text qq-upload-status-text-selector"></span> </div><div class="media-upload-item-top-actions"> <span class="filename-edit qq-edit-filename-icon-selector" aria-label="Edit filename">Edit filename <i class="material-icons">create</i></span> <button type="button" class="delete-media-upload-item qq-upload-delete-selector" aria-label="Delete">Delete <i class="material-icons">delete</i></button> <button type="button" class="cancel-media-upload-item qq-upload-cancel-selector" aria-label="Cancel">Cancel <i class="material-icons">cancel</i></button> </div><div class="media-upload-item-bottom-actions"> <button type="button" class="continue-media-upload-item qq-upload-continue-selector" aria-label="Continue"><i class="material-icons">play_circle_outline</i> Continue</button> <button type="button" class="pause-media-upload-item qq-upload-pause-selector" aria-label="Pause"><i class="material-icons">pause_circle_outline</i> Pause</button> </div></div></div></li></ul> <dialog class="qq-alert-dialog-selector"> <div class="qq-dialog-message-selector"></div><div class="qq-dialog-buttons"> <button type="button" class="qq-cancel-button-selector">Close</button> </div></dialog> <dialog class="qq-confirm-dialog-selector"> <div class="qq-dialog-message-selector"></div><div class="qq-dialog-buttons"> <button type="button" class="qq-cancel-button-selector">No</button> <button type="button" class="qq-ok-button-selector">Yes</button> </div></dialog> <dialog class="qq-prompt-dialog-selector"> <div class="qq-dialog-message-selector"></div><input type="text"> <div class="qq-dialog-buttons"> <button type="button" class="qq-cancel-button-selector">Cancel</button> <button type="button" class="qq-ok-button-selector">Ok</button> </div></dialog> </div></div></script>
+
+						<div class="media-uploader"></div>
+					</div>
+
+				</div>
+			</main>
+
+		</div>
+	
+	</div>
+
+</div>
+<script type='text/javascript'>
+
+	function csrfToken(){var a,b=null;if(document.cookie&&""!==document.cookie){var c=document.cookie.split(";");for(a=0;a<c.length;){var d=c[a].trim();if("csrftoken="===d.substring(0,10)){b=decodeURIComponent(d.substring(10));break}a+=1}}return b};
+
+	document.addEventListener("DOMContentLoaded", function(event) {
+	    var default_concurrent_chunked_uploader = new qq.FineUploader({
+	        debug: true,
+	        element: document.querySelector('.media-uploader'),
+	        request: {
+	            endpoint: '/fu/upload/',
+	            customHeaders: {
+	                'X-CSRFToken': csrfToken('csrftoken'),
+	            },
+	        },
+	        retry: {
+	            enableAuto: true,
+	        },
+	        chunking: {
+	            enabled: true,
+	            concurrent: {
+	                enabled: true,
+	            },
+	            success: {
+	                endpoint: '/fu/upload/?done',
+	            },
+	        },
+	    });
+	});
+</script>
--- a/frontend/config/templates/htmlBodySnippetEmbedPage.ejs
+++ b/frontend/config/templates/htmlBodySnippetEmbedPage.ejs
@@ -0,0 +1,3 @@
+<div class="page-main-wrap">
+<% if (id) { %><div id="<%= id %>"></div><% } %>
+</div>
--- a/frontend/config/templates/renderAddMediaPageContent.ejs
+++ b/frontend/config/templates/renderAddMediaPageContent.ejs
@@ -0,0 +1,5 @@
+import { renderPage } from './static/js/utils/renderer';
+
+import './static/css/AddMediaPage.scss';
+
+renderPage();
--- a/frontend/config/templates/renderBase.ejs
+++ b/frontend/config/templates/renderBase.ejs
@@ -0,0 +1,3 @@
+import { renderPage } from './static/js/utils/renderer';
+
+renderPage();
--- a/frontend/config/templates/renderEmbedPageContent.ejs
+++ b/frontend/config/templates/renderEmbedPageContent.ejs
@@ -0,0 +1,15 @@
+<% if (page) { %>
+
+	import { renderEmbedPage } from './static/js/utils/renderer';
+
+	<% if (page.component) { %>
+
+		import { <%= page.component %> } from './static/js/pages/<%= page.component %>';
+
+		<% if (page.id) { %>
+			renderEmbedPage( '<%= page.id %>', <%= page.component %> );
+		<% } %>
+
+	<% } %>
+	
+<% } %>
--- a/frontend/config/templates/renderPageContent.ejs
+++ b/frontend/config/templates/renderPageContent.ejs
@@ -0,0 +1,15 @@
+<% if (page) { %>
+
+	import { renderPage } from './static/js/utils/renderer';
+
+	<% if (page.component) { %>
+
+		import { <%= page.component %> } from './static/js/pages/<%= page.component %>';
+
+		<% if (page.id) { %>
+			renderPage( '<%= page.id %>', <%= page.component %> );
+		<% } %>
+
+	<% } %>
+	
+<% } %>
--- a/frontend/config/templates/renderPageStaticContent.ejs
+++ b/frontend/config/templates/renderPageStaticContent.ejs
@@ -0,0 +1,15 @@
+<% if (page) { %> 
+    
+    import { renderPage } from './static/js/utils/renderer'; 
+    
+    <% if (page.component) { %> 
+        
+        import { <%= page.component %> } from './static/js/static-pages/<%= page.component %>'; 
+        
+        <% if (page.id) { %> 
+            renderPage( '<%= page.id %>', <%= page.component %> ); 
+        <% } %> 
+    
+    <% } %> 
+    
+<% } %>
--- a/frontend/config/templates/static/aboutPage.html
+++ b/frontend/config/templates/static/aboutPage.html
@@ -0,0 +1,18 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="custom-page-wrapper">
+        <h2>About</h2>
+        <hr />
+        <p>
+          <a href="https://mediacms.io">MediaCMS</a> is a modern, fully featured open source video and media CMS. It is
+          developed to meet the needs of modern web platforms for viewing and sharing media.
+        </p>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>
--- a/frontend/config/templates/static/addMediaPageTemplate.html
+++ b/frontend/config/templates/static/addMediaPageTemplate.html
@@ -0,0 +1,144 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="media-uploader-wrap">
+        <div class="media-uploader-top-wrap">
+          <div class="media-uploader-top-left-wrap">
+            <h1>Upload media files</h1>
+          </div>
+          <div class="media-uploader-top-right-wrap"></div>
+        </div>
+        <div class="media-uploader">
+          <div class="media-uploader-bottom-wrap">
+            <div class="media-uploader-bottom-left-wrap">
+              <div class="media-drag-drop-wrap">
+                <div class="media-drag-drop-inner">
+                  <div class="media-drag-drop-content">
+                    <div class="media-drag-drop-content-inner">
+                      <span><i class="material-icons">cloud_upload</i></span>
+                      <span>Drag and drop files</span>
+                      <span>or</span>
+                      <span class="browse-files-btn-wrap">
+                        <span
+                          class="qq-upload-button-selector"
+                          style="position: relative; overflow: hidden; direction: ltr"
+                          >Browse your files<input
+                            qq-button-id="9523a4a3-6688-40a5-b01d-7c72a79c7bcb"
+                            title="file input"
+                            multiple=""
+                            type="file"
+                            name="qqfile"
+                            style="
+                              position: absolute;
+                              right: 0px;
+                              top: 0px;
+                              font-family: Arial;
+                              font-size: 118px;
+                              margin: 0px;
+                              padding: 0px;
+                              cursor: pointer;
+                              opacity: 0;
+                              height: 100%;
+                            "
+                        /></span>
+                      </span>
+                      <div class="qq-upload-drop-area-selector media-dropzone" qq-hide-dropzone>
+                        <span class="qq-upload-drop-area-text-selector"></span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="media-uploader-bottom-right-wrap">
+              <ul class="media-upload-items-list qq-upload-list-selector">
+                <li>
+                  <div class="media-upload-item-main">
+                    <div class="media-upload-item-thumb">
+                      <img class="qq-thumbnail-selector" alt="" />
+                      <span class="media-upload-item-spinner qq-upload-spinner-selector"
+                        ><i class="material-icons">autorenew</i></span
+                      >
+                      <button type="button" class="qq-upload-retry-selector retry-media-upload-item" aria-label="Retry">
+                        <i class="material-icons">refresh</i> Retry
+                      </button>
+                    </div>
+                    <div class="media-upload-item-details">
+                      <div class="media-upload-item-name">
+                        <span class="media-upload-item-filename qq-upload-file-selector" title="">File #1</span>
+                        <input
+                          class="
+                            media-upload-item-filename-input
+                            qq-edit-filename-selector qq-edit-filename-icon-selector
+                          "
+                          tabindex="0"
+                          type="text"
+                          value="File #1"
+                        />
+                      </div>
+                      <div class="media-upload-item-details-bottom">
+                        <div class="media-upload-item-progress-bar-container qq-progress-bar-container-selector">
+                          <div
+                            role="progressbar"
+                            aria-valuenow="80"
+                            aria-valuemin="0"
+                            aria-valuemax="100"
+                            class="media-upload-item-progress-bar qq-progress-bar-selector"
+                            style="width: 80%"
+                          ></div>
+                        </div>
+                        <span class="media-upload-item-upload-size qq-upload-size-selector">80% of 7.5MB</span>
+                        <span role="status" class="media-upload-item-status-text qq-upload-status-text-selector"
+                          >Retrying 3/3...</span
+                        >
+                      </div>
+                      <div class="media-upload-item-top-actions">
+                        <span class="filename-edit qq-edit-filename-icon-selector" aria-label="Edit filename"
+                          >Edit filename <i class="material-icons">create</i></span
+                        >
+                        <button
+                          type="button"
+                          class="delete-media-upload-item qq-upload-delete-selector"
+                          aria-label="Delete"
+                        >
+                          Delete <i class="material-icons">delete</i>
+                        </button>
+                        <button
+                          type="button"
+                          class="cancel-media-upload-item qq-upload-cancel-selector"
+                          aria-label="Cancel"
+                        >
+                          Cancel <i class="material-icons">cancel</i>
+                        </button>
+                      </div>
+                      <div class="media-upload-item-bottom-actions">
+                        <button
+                          type="button"
+                          class="continue-media-upload-item qq-upload-continue-selector"
+                          aria-label="Continue"
+                        >
+                          <i class="material-icons">play_circle_outline</i> Continue
+                        </button>
+                        <button
+                          type="button"
+                          class="pause-media-upload-item qq-upload-pause-selector"
+                          aria-label="Pause"
+                        >
+                          <i class="material-icons">pause_circle_outline</i> Pause
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>
--- a/frontend/config/templates/static/contactPage.html
+++ b/frontend/config/templates/static/contactPage.html
@@ -0,0 +1,27 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Contact us</h1>
+          <form enctype="multipart/form-data" action="" method="post" class="post-form">
+            <p>
+              <label for="id_from_email">Your email:</label>
+              <input type="email" name="from_email" required="" id="id_from_email" />
+            </p>
+            <p><label for="id_name">Your name:</label> <input type="text" name="name" id="id_name" /></p>
+            <p>
+              <label for="id_message">Please add your message here and submit:</label>
+              <textarea name="message" cols="40" rows="10" required="" id="id_message"></textarea>
+            </p>
+            <button class="primaryAction" type="submit">Submit</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>
--- a/frontend/config/templates/static/editChannelPage.html
+++ b/frontend/config/templates/static/editChannelPage.html
@@ -0,0 +1,30 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Edit Channel</h1>
+
+          <form enctype="multipart/form-data" action="" method="post" class="post-form">
+            <div id="div_id_banner_logo" class="control-group">
+              <label for="id_banner_logo" class="control-label"> Banner logo </label>
+              <div class="controls">
+                Currently: <a href="#">*****</a>
+                <input type="checkbox" name="banner_logo-clear" id="banner_logo-clear_id" />
+                <label for="banner_logo-clear_id">Clear</label><br />
+                Change:
+                <input type="file" name="banner_logo" accept="image/*" class="clearablefileinput" id="id_banner_logo" />
+              </div>
+            </div>
+
+            <button class="primaryAction" type="submit">Update Channel</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>
--- a/frontend/config/templates/static/editMediaPage.html
+++ b/frontend/config/templates/static/editMediaPage.html
@@ -0,0 +1,137 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Edit Media</h1>
+
+          <form enctype="multipart/form-data" action="" method="post" class="post-form">
+            <div id="div_id_title" class="control-group">
+              <label for="id_title" class="control-label"> Title </label>
+              <div class="controls">
+                <input
+                  type="text"
+                  name="title"
+                  value="Media title..."
+                  maxlength="100"
+                  class="textinput textInput"
+                  id="id_title"
+                />
+                <p id="hint_id_title" class="help-block">media title</p>
+              </div>
+            </div>
+            <div id="div_id_category" class="control-group">
+              <label for="id_category" class="control-label"> Category </label>
+              <div class="controls">
+                <select name="category" class="selectmultiple" id="id_category" multiple="">
+                  <option value="1">Art</option>
+                  <option value="2">Documentary</option>
+                  <option value="3">Experimental</option>
+                  <option value="4">Film</option>
+                  <option value="5">Music</option>
+                  <option value="6">TV</option>
+                </select>
+                <p id="hint_id_category" class="help-block">Media can be part of one or more categories</p>
+              </div>
+            </div>
+            <div id="div_id_new_tags" class="control-group">
+              <label for="id_new_tags" class="control-label"> Tags </label>
+              <div class="controls">
+                <input type="text" name="new_tags" class="textinput textInput" id="id_new_tags" />
+                <p id="hint_id_new_tags" class="help-block">a comma separated list of new tags.</p>
+              </div>
+            </div>
+            <div id="div_id_add_date" class="control-group">
+              <label for="id_add_date" class="control-label"> Date produced </label>
+              <div class="controls">
+                <input type="text" name="add_date" value="2021-01-01 00:00:01" class="datetimeinput" id="id_add_date" />
+              </div>
+            </div>
+            <div id="div_id_uploaded_poster" class="control-group">
+              <label for="id_uploaded_poster" class="control-label"> Upload image </label>
+              <div class="controls">
+                <input
+                  type="file"
+                  name="uploaded_poster"
+                  accept="image/*"
+                  class="clearablefileinput"
+                  id="id_uploaded_poster"
+                />
+                <p id="hint_id_uploaded_poster" class="help-block">This image will characterize the media</p>
+              </div>
+            </div>
+            <div id="div_id_description" class="control-group">
+              <label for="id_description" class="control-label"> Description </label>
+              <div class="controls">
+                <textarea name="description" cols="40" rows="10" class="textarea" id="id_description"></textarea>
+              </div>
+            </div>
+            <div id="div_id_state" class="control-group">
+              <label for="id_state" class="control-label requiredField">
+                State<span class="asteriskField">*</span>
+              </label>
+              <div class="controls">
+                <select name="state" class="select" id="id_state">
+                  <option value="private">Private</option>
+                  <option value="public" selected="">Public</option>
+                  <option value="unlisted">Unlisted</option>
+                </select>
+                <p id="hint_id_state" class="help-block">state of Media</p>
+              </div>
+            </div>
+            <div id="div_id_enable_comments" class="control-group">
+              <div class="controls">
+                <label for="id_enable_comments" class="checkbox">
+                  <input
+                    type="checkbox"
+                    name="enable_comments"
+                    class="checkboxinput"
+                    id="id_enable_comments"
+                    checked=""
+                  />
+                  Enable comments
+                </label>
+                <p id="hint_id_enable_comments" class="help-block">Whether comments will be allowed for this media</p>
+              </div>
+            </div>
+            <div id="div_id_thumbnail_time" class="control-group">
+              <label for="id_thumbnail_time" class="control-label"> Thumbnail time </label>
+              <div class="controls">
+                <input
+                  type="number"
+                  name="thumbnail_time"
+                  value="132.5"
+                  step="any"
+                  class="numberinput"
+                  id="id_thumbnail_time"
+                />
+                <p id="hint_id_thumbnail_time" class="help-block">Time on video that a thumbnail will be taken</p>
+              </div>
+            </div>
+            <div id="div_id_allow_download" class="control-group">
+              <div class="controls">
+                <label for="id_allow_download" class="checkbox">
+                  <input
+                    type="checkbox"
+                    name="allow_download"
+                    class="checkboxinput"
+                    id="id_allow_download"
+                    checked=""
+                  />
+                  Allow download
+                </label>
+                <p id="hint_id_allow_download" class="help-block">Whether option to download media is shown</p>
+              </div>
+            </div>
+
+            <button class="primaryAction" type="submit">Update Media</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>
--- a/frontend/config/templates/static/editProfilePage.html
+++ b/frontend/config/templates/static/editProfilePage.html
@@ -0,0 +1,43 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Edit Profile</h1>
+          <form enctype="multipart/form-data" action="" method="post" class="post-form">
+            <p>
+              <label for="id_name">Full name:</label>
+              <input type="text" name="name" value="" maxlength="250" required="" id="id_name" />
+            </p>
+            <p>
+              <label for="id_description">About me:</label>
+              <textarea name="description" cols="40" rows="10" id="id_description"></textarea>
+            </p>
+            <p>
+              <label for="id_email">Email address:</label>
+              <input type="email" name="email" value="" maxlength="254" id="id_email" />
+            </p>
+            <p>
+              <label for="id_logo">Logo:</label> Currently: <a href="#">*****</a>
+              <input type="checkbox" name="logo-clear" id="logo-clear_id" />
+              <label for="logo-clear_id">Clear</label><br />
+              Change:
+              <input type="file" name="logo" accept="image/*" id="id_logo" />
+            </p>
+            <p>
+              <label for="id_notification_on_comments"
+                >Whether you will receive email notifications for comments added to your content:</label
+              >
+              <input type="checkbox" name="notification_on_comments" id="id_notification_on_comments" checked="" />
+            </p>
+            <button class="primaryAction" type="submit">Update Profile</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>
--- a/frontend/config/templates/static/errorPage.html
+++ b/frontend/config/templates/static/errorPage.html
@@ -0,0 +1,11 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="error-page-wrap">Error</div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>
--- a/frontend/config/templates/static/registerPage.html
+++ b/frontend/config/templates/static/registerPage.html
@@ -0,0 +1,45 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Sign Up</h1>
+          <p>Already have an account? Then please <a href="./signin.html">sign in</a>.</p>
+          <form class="signup" id="signup_form" method="post" action="#">
+            <input type="hidden" name="csrfmiddlewaretoken" value="" />
+            <p>
+              <label for="id_email">E-mail:</label>
+              <input type="email" name="email" id="id_email" required="" placeholder="E-mail address" />
+            </p>
+            <p>
+              <label for="id_username">Username:</label>
+              <input
+                type="text"
+                name="username"
+                id="id_username"
+                autofocus="autofocus"
+                placeholder="Username"
+                minlength="4"
+                maxlength="150"
+                required=""
+              />
+            </p>
+            <p>
+              <label for="id_name">Name:</label>
+              <input type="text" name="name" id="id_name" maxlength="100" required="" />
+            </p>
+            <p>
+              <label for="id_password1">Password:</label>
+              <input type="password" name="password1" id="id_password1" required="" placeholder="Password" />
+            </p>
+            <button type="submit">Sign Up »</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>
--- a/frontend/config/templates/static/resetPasswordPage.html
+++ b/frontend/config/templates/static/resetPasswordPage.html
@@ -0,0 +1,28 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Password Reset</h1>
+          <p>
+            Forgotten your password? Enter your e-mail address below, and we'll send you an e-mail allowing you to reset
+            it.
+          </p>
+          <form method="POST" action="#" class="password_reset">
+            <input type="hidden" name="csrfmiddlewaretoken" value="" />
+            <p>
+              <label for="id_email">E-mail:</label>
+              <input type="email" name="email" size="30" id="id_email" required="" placeholder="E-mail address" />
+            </p>
+            <input type="submit" value="Reset My Password" />
+          </form>
+          <p>Please contact us if you have any trouble resetting your password.</p>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>
--- a/frontend/config/templates/static/signinPage.html
+++ b/frontend/config/templates/static/signinPage.html
@@ -0,0 +1,36 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Sign In</h1>
+          <p>If you have not created an account yet, then please <a href="./register.html">sign up</a> first.</p>
+          <form class="login" method="POST" action="#">
+            <input type="hidden" name="csrfmiddlewaretoken" value="" />
+            <p>
+              <label for="id_login">Login:</label>
+              <input
+                type="text"
+                name="login"
+                id="id_login"
+                required=""
+                autofocus="autofocus"
+                placeholder="Username or e-mail"
+              />
+            </p>
+            <p>
+              <label for="id_password">Password:</label>
+              <input type="password" name="password" id="id_password" required="" placeholder="Password" />
+            </p>
+            <a class="button secondaryAction" href="./reset-password.html">Forgot Password?</a>
+            <button class="primaryAction" type="submit">Sign In</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>
--- a/frontend/config/templates/static/signoutPage.html
+++ b/frontend/config/templates/static/signoutPage.html
@@ -0,0 +1,20 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Sign Out</h1>
+          <p>Are you sure you want to sign out?</p>
+          <form method="post" action="#">
+            <input type="hidden" name="csrfmiddlewaretoken" value="" />
+            <button type="submit">Sign Out</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>
--- a/frontend/config/templates/static/termsPage.html
+++ b/frontend/config/templates/static/termsPage.html
@@ -0,0 +1,15 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="custom-page-wrapper">
+        <h2>Terms</h2>
+        <hr />
+        <p>Terms of service</p>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>