Search the Community

AdminThemeBridge – a native web-component admin that keeps your existing modules working (beta) Hi friends! And, traditionally, thanks for ProcessWire 😉 For a while I've been building something bigger than my usual in-house modules, and it's ready for other eyes now. Bridge (a working name) is an admin theme for ProcessWire that renders the admin with native web components and a small TypeScript runtime, without jQuery — while every existing Inputfield and Process module keeps working unchanged. The goal A better and faster admin. Faster: far less to download and run on every screen (numbers below). Better: an admin that feels current, in light and dark, with the small daily annoyances fixed. The name says how it gets there: Bridge is a bridge between the jQuery-era admin and the modern web stack. Everything that can be native already is, and your modules stay on their side of the bridge, working exactly as before. Bridge against Uikit and AdminThemeBoss at a glance; the full table with all six themes is further down The idea in one paragraph The admin carries a lot of history: jQuery, jQuery UI, inputfields.js, WireTabs, Magnific. Thousands of modules rely on exactly that, so simply removing it is not an option. Bridge does it the other way round: the shell and the core screens are native, and the whole legacy stack is loaded only on the screens that need it — with the same globals ($, jQuery, ProcessWire.config, Inputfields) and the same reloaded event. A page whose fields are all native loads no jQuery at all; a page with a jQuery-era field gets the classic stack, and that field works as before. What's native today the admin frame: masthead, navigation, notices, light and dark scheme most core fields: text, select, checkboxes, datetime, file, image (incl. crop and variations), repeater, page table, language tabs core screens: page tree, page editor (save without reload), Lister, Modules, Fields, Templates, Users, Roles, Permissions, Profile, Logs, Trash and the rest Small things that got better Multi-level dropdown menus: a submenu stays open while you move the pointer to it, fits the screen height and opens to the left at the right edge. On a phone or tablet the first tap opens a menu instead of following its link, and menus work from the keyboard too. Long content scrolls where it is: a deep page-tree branch or a long menu scrolls inside itself instead of running off the bottom of the screen. Notices never cover the Save button. They have their own place above the content, so showing or closing one doesn't move the page, and a long one pushes the content down instead of overlapping it. Save without reload in the page editor, and in the field, template, module, user, role and profile editors (Shift+click still saves the classic way). No jumping content while the Lister loads, and no stacked tab panels flashing before the tabs are set up. The dark scheme reaches CKEditor, TinyMCE and the other field widgets. Focus rings and button text stay readable in every colour preset, and the top bar turns into a drawer when its items don't fit. What stays exactly as it is wire/ is never edited or patched. Bridge is a regular module. DOM ids and classes, AJAX endpoints (?modal=1, ?render=JSON, renderInputfieldAjax), module class names and hookable methods are kept as upstream emits them, so your modules and hooks find what they expect. It's per user: Uikit stays installed, and anyone can switch back under Profile > Admin Theme. How it's tested A conformance suite renders every admin screen under Uikit and under Bridge and compares what modules see. On copies of nine real sites that's 1,434 screens with no differences caused by the theme, covering 41 of the 45 third-party modules installed there (FieldtypeMatrix, PageTableNext, VersionControl, Fluency, BatchChildEditor, SettingsFactory, AdminThemeBoss, ProcessWireUpgrade and others; the other four have admin screens that already fail the same way under Uikit on those copies, so there was nothing to compare). Behaviour checks run in Chromium and Firefox. It's also running on two live sites. CKEditor and TinyMCE run through the legacy stack and still follow the dark scheme Lighter and faster: the numbers Lighthouse 12 (desktop preset), logged in, cold cache, median of 3 runs, on a copy of a real site. Average over four screens: page tree, page editor, Lister, Modules. Bridge 0.9.3. Bridge Uikit Uikit (2025 look) AdminThemeBoss Reno Default Lighthouse performance 98 69 66 81 83 77 Largest Contentful Paint 0.9 s 3.6 s 3.9 s 1.8 s 1.8 s 1.6 s JavaScript (gzip) 38 kB 272 kB 273 kB 190 kB 186 kB 184 kB CSS (gzip) 55 kB 118 kB 150 kB 59 kB 74 kB 70 kB jQuery loaded no yes yes yes yes yes Fonts 71 kB 237 kB 458 kB 75 kB 75 kB 75 kB The same table as a picture; the forum editor's tables are fiddly Fonts include Font Awesome 6 in full: Bridge serves the icons in common use from small subsets built at release time, and any other icon from the full font, so nothing goes missing. These are localhost numbers, so absolute times will be higher on a real server — the differences between themes are the point. On a screen with a jQuery-era field, that field brings its stack with it, as it should. Want to check on your own site? Chrome DevTools → Lighthouse → Navigation, Desktop, Performance, and untick "Clear storage" in its settings (otherwise it logs you out and measures the login page). Installation Requires ProcessWire 3.0.227+ and PHP 8.1+ (developed against 3.0.274 dev). Download the module from https://github.com/theoretic/AdminThemeBridge (Code > Download ZIP) into site/modules/AdminThemeBridge/, or git clone it there. It's the module only; development happens in https://github.com/theoretic/bridge. The modules directory listing is on its way. Modules > Refresh, then install Bridge. Select it under Profile > Admin Theme. Other users stay on their theme. On a live site please back up the database first and read docs/install-live.md. Two things I learned the hard way: AdminThemeBoss's "activate for all users" must be off (it resets everyone to Uikit on each request), and a plain Modules > Refresh must complete before you install — a site module that loops during the cache rebuild has to be updated first. For module authors There is a small component contract (docs/contract.md) . Implement one interface and your Inputfield or Process runs natively too. If you don't, nothing breaks — your module simply gets the legacy stack, as today. Known limits Beta (0.9.3). The contract is version 1 and may still change before 1.0. Pro modules (ProFields, FormBuilder, ListerPro) are not tested — I have no licences to test with, so I make no claims there. The name is a working name and may change. What I'd love to hear Does your favourite module behave under Bridge? Screens that look or work differently are exactly what I'm looking for. Module authors: is the contract understandable, and what would you need from it? Anything about the look and the dark scheme. Thanks Bridge is mostly inspired by the perfect AdminThemeBoss by Noël Bossart, which was my default admin theme in every ProcessWire project before Bridge existed. Its colour presets (blue, vibrant, black, pink, green) are Bridge's colours, and its extended breadcrumbs are here too. Thank you, Noël! Module: https://github.com/theoretic/AdminThemeBridge . Development, docs and changelog: https://github.com/theoretic/bridge (MIT; files derived from ProcessWire keep their MPL 2.0 header). Advice and critics are welcome 😉

Hello! There was a need to rewrite the code written with jquery into vanilla js. I have little js code on my site and I see no reason to include a library such as jquery ? $('.progress-wrap .dot').on('click', function () { let $this = $(this) let stepValue = $this.attr('data-step') $this.closest('.progress-wrap').find('.bar').css('width', stepValue + '%') $this.siblings('.dot').removeClass('is-current') $this.addClass('is-active is-current') $this.prevAll('.dot').addClass('is-active') $this.nextAll('.dot').removeClass('is-active') $('.process-panel-wrap').removeClass('is-active') $('.step-title').removeClass('is-active') if (stepValue === '0') { $('#signup-panel-1, #step-title-1').addClass('is-active') } else if (stepValue === '25') { $('#signup-panel-2, #step-title-2').addClass('is-active') } else if (stepValue === '50') { $('#signup-panel-3, #step-title-3').addClass('is-active') } else if (stepValue === '75') { $('#signup-panel-4, #step-title-4').addClass('is-active') } else if (stepValue === '100') { $('#signup-panel-5, #step-title-5').addClass('is-active') } })

Hi folks, I have a bit of an odd question, but I'm assuming it's related to something I have/haven't changed upon moving my local build to a live server. Everything, locally, works 100% and I have encountered no problems at all, but sometimes, when logging into the admin, the stylesheets/js will break and I'll get a broken page (see image below) – sometimes it happens, sometimes not and the page it happens on varies as well. The thing is, once it's happened, I can't return to the unbroken site until I save over the config.php file. Or, after a few refreshes it returns back. Odd, right? Looking in the error console on devtools, it states: Uncaught ReferenceError: $ is not defined sheffieldculture.co.uk.s141188.gridserver.com/:205 Uncaught ReferenceError: initPageEditForm is not defined This makes me think that the jQuery is failing to load... Any thoughts/similar issues?

Hi there, I'm trying to get to work some AJAX call with vanilla Javascript, not jQuery. Anything seems to work so far, but the !$config->ajax seems to be ignored. To find out whats the problem by comparing both, jquery and plain javascipt, i built this template. commenting out //loadJquery(''); or loadVanilla(''); switches the two variants. (empty url variable means that the same pages will be loaded.) The problem: the pure Javascript function ("loadVanilla") is loading the full page content into the dc-container, which is wrong. The jQuery function ("loadJquery") only loads the part outside of the if(!$config->ajax): - which is as it should be. So - any help with this, what am i doing wrong? Thanks a lot - Matze <?php namespace ProcessWire; if(!$config->ajax): ?> (some static content)<br> <a id="loadlink" href="#">load</a><br> <?php endif; // end if not ajax ?> <span id="dc-container">(dynamic content)</span> <?php if(!$config->ajax): ?> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var loadlink = document.getElementById('loadlink'); loadlink.addEventListener('click', function(event) { //loadJquery(''); loadVanilla(''); event.preventDefault() }); function loadVanilla(url) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("dc-container").innerHTML = 'loaded: ' + this.responseText + (' (by vanilla javascript)'); } }; xhttp.open("POST", "", true); xhttp.send(); } function loadJquery(url){ // Load content $.ajax({ type: "POST", url: url, data: { ajax: true }, success: function(data,status){ pageData = data; } }).done(function(){ // when finished and successful document.getElementById("dc-container").innerHTML = 'loaded: ' + pageData + ' (by jquery ajax)'; }); } </script> <?php endif; // end if not ajax ?>

Hey i have a problem with the code: $('a').click(function(link) { link.preventDefault(); location = this.href; $('body').fadeOut('slow', open); }); function more() { window.location = location; } It's writen in Jquery but i will convert it to vanilla js. Can somone help me with it?

This post is related to but is a different way of tackling the problem. The idea is to use the JqueryUI.module in the front end to present a restricted access admin page in a modal (class pw-modal). However the JqueryUI module doesn't seem to work properly in the front end (I have it working in the back end OK). I'm guessing that this is because the front end page has not loaded all the .js that is needed (that would normally be loaded in the back end). My _main.php loads the following from the core at the moment: 'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit.min.js' 'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit-icons.min.js' 'wire/modules/Jquery/JqueryCore/JqueryCore.js' 'wire/modules/Jquery/JqueryUI/JqueryUI.js' Any ideas what else I need, or have I got hold of the wrong end of the stick?

Which should I learn and use for my PHP projects whether using Processwire or another great CMS?

I'm working on the threaded comments on my website and for this I need to include the comments.js When I do this it keeps on giving me the "Uncaught ReferenceRrror: jQuery is not defined". Whatever I do it keeps giving me this error message. It's the last javascript file that I load in. So how do I fix it?

Hello there I need a field with realtime percent calculation (without page save) with values from other fields in admin template. I think about jQuery with onChange methods on corresponding fields but this is not clear for me how to do this in module. Any help with some advice or example will be highly appreciated! Thanks in advance!

hi everyone I am trying get a full width sub-menu on 3rd item in menu or navbar which is coming from a loop. i was hoping this can be done by using jquery by targeting 3rd element in navbar but jquery is blocked in some browser by default so is there any other method I can do this

Hello dear community I have a problem with a front edit possibility inside a OWL gallery. The thing is, normally you do a double click to edit something directly on a page. In my case a single click opens up a picture inside a gallery, so I can't "hit" the editing. <div class="demo-gallery"> <ul id="lightgallery2" class="list-unstyled row"> <li class="img-md-12 mb-12 mb-sm-12 mb-md-12 mb-lg-12 mb-xl-12 col-12 col-md-12 img-fluid full-height" data-responsive="" data-src="<? echo $page->page_home_owl_00_img->url; ?>" data-sub-html="<h4><? echo $page->page_home_owl_00_h4; ?></h4><p><? echo $page->page_home_owl_00_p; ?></p>"> <a href=""> <img class="img-responsive" src="<? echo $page->page_home_owl_00_img->url; ?>"> </a> </li> <? foreach($page->children('template=9dk-owl-home') as $item): ?> <li class="img-md-6 mb-3 mb-sm-3 mb-md-3 mb-lg-3 mb-xl-3 col-12 col-md-6 img-fluid" data-responsive="" data-src="<? echo $config->urls->templates ;?><? echo $item->page_home_owl_01_img; ?>" data-sub-html="<h4><? echo $item->page_home_owl_01_h4; ?></h4><p><? echo $item->page_home_owl_01_p; ?></p>"> <a href=""> <img class="img-responsive" src="<? echo $config->urls->templates ;?><? echo $item->page_home_owl_01_img; ?>"> </a> </li> <? endforeach; ?> </ul> </div> I tried any variants of options C and D from this page: https://processwire.com/api/modules/front-end-editing/ Are there any hints for me, what I can do? Any help is highly appreciated! Best from Munich in Germany

Hi people I think I have seen them all but maybe I missed some of the just wanted to know what do you recommend for an editor with JQuery autocompletion or support?

I've implemented Slick sliders on WordPress sites many times, but I've never had this error before. The site is here. The template code I'm using is: <link rel="stylesheet" type="text/css" href="/site/templates/scripts/slick/slick.css"/> <script type="text/javascript" src="/site/templates/scripts/slick/slick.js"></script> <?php // if (count($page->home_header_image) > 0): ?> <div class="home-featured-image slick-carousel"> <?php foreach($page->home_header_image as $image): ?> <div class="slide"><img src="<?php echo $image->size(1280,420)->url; ?>"></div> <?php endforeach ?> </div> <?php // endif ?> <script> (function($) { $('.slick-carousel').slick(); })( jQuery ); </script> The JS error I'm getting is: TypeError: $.proxy is not a function. (In '$.proxy(_.autoPlay, _)', '$.proxy' is undefined) As you can see, I tried wrapping the JS call in noconflict, but that doesn't help. What am I missing?

hi i want to post variables to a page via ajax to get result from my database depenting my post value so my ajax is: var clickval = clickelement.value; var dataval = "city=" + clickval; $.ajax({ type: 'POST', url: "*MY PAGE SMART URL*", // e.g. http://my_domain/my_page.... data: dataval, dataType: 'text', //or json, i try both complete: function(data, status){ alert(data.responseText); } }); and in php page: $getcity = $input->post->city; echo "value = ".$getcity; just to show my post value... and my alert is "value = ". $getcity is empty and $input has no value inside and it seems like post is never be done, but i have no error in my console... can anyone help me?

CodeRunner 2 is on sale at MacUpdate: https://www.macupdate.com/app/mac/38362/coderunner Mostly I use it for writing shell scripts, mocking up algorithms in PHP, JavaScript/jQuery. But is also supports other programming languages as well. https://coderunnerapp.com/ "An advanced, highly flexible, and easy-to-use programming editor for your Mac. CodeRunner supports a large number of languages, and delivers big IDE features while remaining lightweight and clutter-free."

Hi there, I have a globally declared variable where I want to store a mapping table. var _Pagelist=new Map(); The following Ajax call doesn't seem to set _Pagelist above. I think I have set the context parameter correctly to 'this'. I've scoured through Stackoverflow and JQuery documentation but I can't figure out what is wrong. Any pointers would be much appreciated. Thanks if (!pagelist){ SearchWaitDisplay(true); $.ajax({ url: '/site/pagelist.php', context : this , success: function(result) { //here this._Pagelist is null, can't refer to This._Pagelist for (var x=0;x<result.length;x++) { this._Pagelist.set(result[x].id, result[x].url); //This will throw an error as _Pagelist is NULL. }; window.localStorage.setItem('pagelist', JSON.stringify(_Pagelist)); //The following will not update _Pagelist. Next 2 lines are just test code. this._Pagelist = result; window._Pagelist = result; SearchWaitDisplay(false); }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status + ' ' + thrownError); } }); } else { //InitialiseSearchField(autocompletelist); }

Hello, has anybody here done this with processwire: https://datatables.net/examples/server_side/ I want to use this solution because I have to work with a huge amount of data. TIA Henning

Hi, Trust this message finds you hale and hearty. Need your help, if you'd be so kind. I just can't seem to get the file paths correct for a template I'm converting to Processwire. Js folder is inside the site -> templates folder: In this folder are calls to js files, in my _head.inc and _foot.inc files: In the _head.inc file: jquery.js jquery-migrate-1.2.1.js device.min.js In the _foot.inc file: script.js Here's the code I use to call these files: _head.inc <script src="<?php echo $config->urls->templates; ?>js/jquery.js"></script> <script src="<?php echo $config->urls->templates; ?>js/jquery-migrate-1.2.1.js"></script> <script src='<?php echo $config->urls->templates; ?>js/device.min.js'></script> _foot.inc <script src="<?php echo $config->urls->templates?>js/script.js"></script> Inside the script.js file, there are a bunch of includes, like the following: include('js/jquery.cookie.js'); I'm on Chrome, and the console shows a bunch of 404 errors. The main files don't find the files referenced in script.js. Here's an example: http://localhost/surfinn.rocks/js/jquery.cookie.js http://localhost/surfinn.rocks/js/jquery.cookie.js That shows an error. The HTML demo of the site I installed on my Wamp works fine. No errors. Not the case when loaded in Processwire. Any idea what I'm missing? Thanks so much for your time.

I pushed an initial (testing) version of TemplateFileHelper to bitbucket. https://bitbucket.org/pwFoo/templatefilehelper/src/ The autoload module extends TemplateFile instances with API vars $layout and $view $layout -> global layout instance of TemplateFile to set layout placeholders ($layout->set(...) or global scripts / styles. $view -> current page instance of TemplateFile to set the current page placeholders and current page scripts / styles. load() method Load a template / view with additional controller (php) file as subTemplate. Returns a TemplateFile object to render / output Each sub-template controller have access to API Vars and $subTemplate (current TemplateFile instance, $subTemplate->set('placeholder', 'My value...')). Load site/templates/chunks/test1.php controller and site/templates/chunks/test1.tpl view: $part = $view->load('chunks/test1'); echo $part->render(); chunks/test1 example <?php // chunks/test1.php - controller $subTemplate->set('var1', "Subtemplate variable output..."); <!-- chunks/test1.tpl - view --> <div><?=$var1?></div> scripts / styles properties FilenameArray like $config->styles | scripts. It should help to organize scripts / styles with ajax in mind (global / current page only). // current page script $view->scripts->add('js-file.js'); // global / layout script $layout->scripts->add('js-file.js'); You have to handle the output yourself by two foreach loops inside your _layout.php / _layout.tpl files (non ajax calls scripts and styles should be in layout head section). foreach ($layout->scripts as $globalScript) { ... } foreach ($view->scripts as $currentPageScript) { ... } IntercoolerJS module will take care about async / ajax handling of (custom page) scripts and styles. hook Page::render hook after page render to load and add the global layout. The current page template (PW template file == controller) just handle the currents page code / view. Global layout / controller / view is moved to separate files (default: _layout.php controller and _layout.tpl view). Just use $layout->set(...) to fill the _layout.tpl placeholder variables inside the _layout.php controller file. configurable module Some settings are available... Global layout (view + controller) file name (default: "_layout") Current page content variable (used inside of the _layout.tpl view to output current page content, default: "currentPageContent") View file extension (default: ".tpl") Controller file extension (default: ".php") It will be a dependency of the planned IntercoolerJS module which adds ajax page calls, async scripts / styles handling (current page scripts and styles...) and need a defined template handling to work...

Hi everyone, I am trying to create a gallery of tiles where the user can click a tile and it will open another set of images that are unique to that tile. So a page of albums. I am using repeaters so that the user can add albums, without having to create fields or pages. However I am struggling to separate the albums into the desired tile, since at the moment all the albums I have uploaded to PW come back. Generally my code is quite messy and I haven't coded some elements that I have described. Since I was unsure how to progress, I was experimenting with things like having each album having an number so that I could Identify them. Also I am using UIKit for scrolling through the album. See code below. <?php include("./head.inc"); ?> <!--Image Viewer--> <div id="back" class="back"> <a href="javascript:void(0)" onclick="closeAlbum()" class="material-icons">close</a> <div class="uk-container uk-container-center"> <div class="uk-container uk-container-center uk-width-3-4"> <div id="slideshow" data-uk-slideshow="{autoplayInterval:1000}"> <div class="uk-slidenav-position"> <ul class="uk-slideshow"> <?php $i=1; foreach ($page->album_repeater as $item) { echo "<li class='album-$i'>"; foreach ($item->album_images as $image) { echo "<li>"; echo "<img src='{$image->url}'>"; echo "</li>"; } $i++; } echo "</li>"; ?> </ul> <ul> <a href="" class="gl uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a> <a href="" class="gl uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a> </ul> </div> </div> </div> </div> </div> <!--Album Thumbnails--> <div id="content" class="uk-width-1-1 uk-grid" style="min-height: calc(100% - 100px);"> <div id="gallery" class="uk-width-8-10 uk-container-center uk-flex uk-flex-center uk-flex-middle uk-grid" data-uk-grid="{gutter: 20}"> <?php $th = ""; foreach($page->album_repeater as $item){ $th .= "<div class='gallery-item uk-width-small-1-2 uk-width-medium-1-3 uk-width-large-1-6'>"; $th .= "<a id='thumb' class='uk-panel' onclick="; $th .= "'openAlbum()'"; $th .= "><img src='{$item->album_images->first()->url}'>"; $th .= "</a>"; $th .= "</div>"; } echo $th; ?> </div> </div> <script> function openAlbum() { document.getElementById("back").style.display = "block"; document.getElementById("thumb").style.display = "none"; document.getElementById("content").style.display = "none"; } function closeAlbum() { document.getElementById("back").style.display = "none"; document.getElementById("thumb").style.display = "block"; document.getElementById("content").style.display = "block"; } </script> <?php include("./foot.inc"); As a visual aid I've attached screenshots of what the code produces. First Image is the album where you can slide through the images. The second is the tiles that when clicked open the associated album. Does anyone know any solutions or existing gallery's similar to the idea above (preferably tutorials). Thanks, Matt

I have a client who wants to have a modal pop up box (i'm using the Zurb 'Reveal' jquery plugin for it) on their homepage, but they only want it to appear once per visit, so if the user clicks back to the homepage, they don't get the pop up again. Just wondering if anyone has any idea how to do this with php/processwire, or should i be using jquery cookies? Thanks, Marc

I know that the Topic title is probably confusing(sry for that ). Let me explain my Question: I have two Filters(Main Filter & Detail Filter) like you can see below. When I click on a main filter it gets bold and will be added to the "Meine Auswahl(my selection)" container below the Filters. When I click on the "X" span inside the "My Selection" Container, the selected Filter gets resetted. Now, what I want to achieve is a ajax Filter which changes the php Selector for the for the $pages->find(). For Example: When I come to that page, the selector for the main and detailfilter should look like this: $branches = $pages->find("template=branch"); // Main Filters <?php $genres = $pages->find("template=genre, select_sparte=''"); ?> //Detailfilters (Returns a NullPage so dont show the Detailfilters when none main filter is selected) When I select for e.g Example Filter 1 it should change to this without a page refresh: <?php $genres = $pages->find("template=genre, select_sparte.title='Example Filter 1'"); ?> So that I get the Detail Filters of Example Filter 1 without a page refresh. Is this even possible? When yes how, can you guys show me a direction?

Hello, I have a PHP script being called by AJAX request. At this moment everything work perfectly, but my script is in the root directory, bootstraping PW. request = $.post('/public_html/pw/contactus.php', serializedData); My question is, it is possible to put this PHP script in my templates directory and call it from there ? (if I hardcode the path I get a 403 HTTP error and doing that can cause problem between dev environment and production); How I should code my path in the Javascript code ?

Hi, I have been googling around like crazy to find a suitable very light-weight javascript library for showing a simple image gallery with one bigger main picture (just on the page, not in a lightbox), with clickable thumbnails that will show the selected image in a bigger version in the main image area when clicked. See the attached screenshot for an example! Most libraries out there seem to focus on fancy transitions, lightbox style image viewing, or don't include the thumbnail feature (just showing these dots, for selecting pictures) ... and so I haven't so far found what I'm looking for. Any hints? (Again, preferrably something super-lightweight, that is super-easy to integrate with pw).

Hi all, A question regarding security/best-practice concerning a simple front-end login through AJAX calls. My plan is to use this kind of module inside a small AngularJS architecture to update the entire application when someone is logged in/out. * I've made a simple HTML form in which the user can login by typing his/her username and password in the corresponding fields. After submitting the form, these values are fetched with jQuery. Then an Ajax GET request is made with these values to a page which has access to the Processwire API. This page checks if these values (after sanitization) correspond to an existing user in the CMS. If the user and password matches, the user is logged in, and a success message is being returned. If the user and password mismatches, an error message is being returned. * I don't know much about encryption, therefore I highly doubt if this a 'safe' way of doing things. Hopefully someone can give me some pointers on this! best, berechar