Management beginnings.

assets/less/manage/classes/container.less

@@ -0,0 +1,4 @@
+.container {
+    max-width: 1200px;
+    margin: 2px auto;
+}

assets/less/manage/classes/footer.less

@@ -0,0 +1,13 @@
+.footer {
+    text-align: center;
+    padding: 1em;
+
+    &__link {
+        text-decoration: none;
+        color: inherit;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}

assets/less/manage/classes/header.less

@@ -0,0 +1,126 @@
+.header {
+    background-color: #111;
+    background-image: linear-gradient(0deg, #222, #333);
+    font-size: 1.5em;
+
+    &__wrapper {
+        display: flex;
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+
+    &__logo,
+    &__link {
+        padding: 8px 10px;
+        color: #fff;
+        text-decoration: none;
+        display: block;
+    }
+
+    &__navigation {
+        display: flex;
+    }
+
+    &__navigation {
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+
+    &__logo {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    &__link {
+        cursor: pointer;
+        transition: background-color .2s;
+
+        &:hover {
+            background-color: #333;
+        }
+
+        &--active,
+        &:active {
+            background-color: #222;
+        }
+    }
+
+    &__user {
+        flex-grow: 0;
+        flex-shrink: 1;
+
+        &__toggle {
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: right;
+            padding-right: 45px;
+            min-width: 100px;
+            transition: background-color .2s, min-width .2s;
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        &__state {
+            display: none;
+
+            &:checked ~ .header__user__toggle {
+                background-color: #333;
+                min-width: 150px;
+            }
+
+            &:checked ~ .header__user__menu {
+                max-height: 250px;
+            }
+        }
+
+        &__menu {
+            overflow: hidden;
+            text-align: right;
+            max-height: 0px;
+            width: 100%;
+            position: absolute;
+            background-color: #333;
+            z-index: 1000;
+            transition: max-height .2s;
+            box-shadow: 0 5px 5px 0 fade(#444, 80%);
+        }
+
+        &__link {
+            padding: 8px 10px;
+            display: block;
+            color: inherit;
+            text-decoration: none;
+            transition: background-color .2s;
+
+            &:hover {
+                background-color: #444;
+            }
+
+            &:active {
+                background-color: #2a2a2a;
+            }
+        }
+
+        &__section {
+            margin: 1px 2px;
+
+            &:first-child {
+                margin-top: 2px;
+            }
+
+            &:last-child {
+                margin-bottom: 2px;
+            }
+
+            &:not(:last-child) {
+                padding-bottom: 1px;
+                margin-bottom: 1px;
+                border-bottom: 1px solid #444;
+            }
+        }
+    }
+}

assets/less/manage/classes/listing.less

@@ -0,0 +1,20 @@
+.listing {
+    display: flex;
+    flex-direction: column;
+
+    &__entry {
+        border-right: 4px solid #a00;
+        padding-right: 1px;
+        display: block;
+
+        &:not(:last-child) {
+            margin-bottom: 2px;
+        }
+
+        &__content {
+            width: 100%;
+            background-color: #333;
+            min-height: 50px;
+        }
+    }
+}

assets/less/manage/classes/user-listing.less

@@ -0,0 +1,10 @@
+.user-listing {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    &__entry {
+        min-width: 296px;
+        margin: 2px;
+    }
+}

assets/less/manage/main.less

@@ -0,0 +1,25 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    position: relative;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+}
+
+.manage {
+    background-color: #222;
+    font: 12px/20px 'Open Sans', sans-serif;
+    color: #fff;
+}
+
+@import "classes/container";
+@import "classes/footer";
+@import "classes/header";
+@import "classes/listing";
+
+@import "classes/user-listing";

public/auth.php

@@ -51,7 +51,7 @@ switch ($mode) {
             return;
         }
 
-        echo $app->templating->render('logout');
+        echo $app->templating->render('@auth.logout');
         break;
 
     case 'login':
@@ -175,6 +175,6 @@ switch ($mode) {
             $app->templating->var('auth_register_error', $auth_register_error);
         }
 
-        echo $app->templating->render('auth');
+        echo $app->templating->render('@auth.auth');
         break;
 }

public/manage.php

@@ -0,0 +1,52 @@
+<?php
+use Misuzu\Application;
+use Misuzu\Users\User;
+
+require_once __DIR__ . '/../misuzu.php';
+
+$manage_session = Application::getInstance()->getSession();
+
+if ($manage_session === null) {
+    header('Location: /');
+    return;
+}
+
+$app->templating->addPath('manage', __DIR__ . '/../views/manage');
+
+$manage_user = $manage_session->user;
+$manage_modes = [
+    'overview' => [
+        'title' => 'Overview',
+    ],
+    'forums' => [
+        'title' => 'Forums',
+    ],
+    'users' => [
+        'title' => 'Users',
+    ],
+    'roles' => [
+        'title' => 'Roles',
+    ],
+];
+$manage_mode = $_GET['m'] ?? key($manage_modes);
+
+$app->templating->vars(compact('manage_mode', 'manage_modes', 'manage_user', 'manage_session'));
+
+if (!array_key_exists($manage_mode, $manage_modes)) {
+    http_response_code(404);
+    $app->templating->var('manage_title', 'Not Found');
+    echo $app->templating->render('@manage.notfound');
+    return;
+}
+
+$app->templating->var('title', $manage_modes[$manage_mode]['title']);
+
+switch ($manage_mode) {
+    case 'users':
+        $users_page = (int)($_GET['p'] ?? 1);
+        $manage_users = User::paginate(32, ['*'], 'p', $users_page);
+        $app->templating->vars(compact('manage_users', 'users_page'));
+        break;
+}
+
+echo $app->templating->render("@manage.{$manage_mode}");

public/settings.php

@@ -71,25 +71,20 @@ $settings_profile_fields = [
 
 $settings_user = $settings_session->user;
 
-$settings_mode = $_GET['m'] ?? null;
 $settings_modes = [
     'account' => 'Account',
     'avatar' => 'Avatar',
     'sessions' => 'Sessions',
     'login-history' => 'Login History',
 ];
-
+$settings_mode = $_GET['m'] ?? key($settings_modes);
-// if no mode is explicitly set just go to the index
-if ($settings_mode === null) {
-    $settings_mode = key($settings_modes);
-}
 
 $app->templating->vars(compact('settings_mode', 'settings_modes', 'settings_user', 'settings_session'));
 
 if (!array_key_exists($settings_mode, $settings_modes)) {
     http_response_code(404);
     $app->templating->var('settings_title', 'Not Found');
-    echo $app->templating->render("settings.notfound");
+    echo $app->templating->render('settings.notfound');
     return;
 }
 

src/Application.php

@@ -164,6 +164,7 @@ class Application extends ApplicationBase
         $twig->addFilter('byte_symbol');
         $twig->addFilter('country_name', 'get_country_name');
         $twig->addFilter('flip', 'array_flip');
+        $twig->addFilter('create_pagination');
 
         // avoid using config() in templates whenever possible
         // in all honesty this shouldn't even be a thing

src/Model.php

@@ -1,6 +1,7 @@
 <?php
 namespace Misuzu;
 
+use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Database\Eloquent\Model as BaseModel;
 
 abstract class Model extends BaseModel

utility.php

@@ -197,6 +197,24 @@ function crop_image_centred(Imagick $image, int $target_width, int $target_heigh
     return $image->deconstructImages();
 }
 
+function create_pagination($paginator)
+{
+    $window = \Illuminate\Pagination\UrlWindow::make($paginator);
+
+    $pagination = array_map(
+        function ($str) {
+            return substr($str, 2);
+        },
+        array_merge(
+            $window['first'] ?? [],
+            $window['slider'] ?? [],
+            $window['last'] ?? []
+        )
+    );
+
+    return $pagination;
+}
+
 function is_int_ex($value, int $boundary_low, int $boundary_high): bool
 {
     return is_int($value) && $value >= $boundary_low && $value <= $boundary_high;

views/manage/forums.twig

@@ -0,0 +1 @@
+{% extends '@manage/master.twig' %}

views/manage/macros.twig

@@ -0,0 +1,38 @@
+{% macro link(url, content, class) %}
+{% spaceless %}
+<a href="{{ url }}" {% if '://' in url %} target="_blank" rel="noreferrer noopener"{% endif %} {% if class is defined %}class="{{ class }}"{% endif %}>{{ content|raw }}</a>
+{% endspaceless %}
+{% endmacro %}
+
+{% macro pagination(url, pages, current, class, name) %}
+    {% set pagess = pages|create_pagination %}
+    {% set separator %}{% if '%3F' in url|default('')|url_encode %}&{% else %}?{% endif %}{% endset %}
+    {% set current_page = current|default(1) %}
+    {% set url = url ~ separator ~ name|default('page') ~ "=" %}
+
+    <div class="pagination {{ class }}">
+        {% if pages is defined and pages|length > 1 %}
+            {% if current_page > 1 %}
+                {% if pages|length > 2 %}
+                    <a class="pagination__button" href="{{ url ~ 1 }}" title="Jump to first page">&lt;&lt;</a>
+                {% endif %}
+
+                <a class="pagination__button" href="{{ url ~ (current_page - 1) }}" title="Previous page">&lt;</a>
+            {% endif %}
+
+            {% for id, page in pages %}
+                {% if (id + 1) > (current_page - 5) and (id + 1) < (current_page + 5) %}
+                    <a class="pagination__button{% if id == current_page - 1 %} pagination__button--current{% endif %}" href="{{ url ~ (id + 1) }}" title="Page {{ id + 1 }}">{{ id + 1 }}</a>
+                {% endif %}
+            {% endfor %}
+
+            {% if current_page < pages|length %}
+                <a class="pagination__button" href="{{ url ~ (current_page + 1) }}" title="Next page">&gt;</a>
+
+                {% if pages|length > 2 %}
+                    <a class="pagination__button" href="{{ url ~ pages|length }}" title="Jump to last page">&gt;&gt;</a>
+                {% endif %}
+            {% endif %}
+        {% endif %}
+    </div>
+{% endmacro %}

views/manage/master.twig

@@ -0,0 +1,55 @@
+{% from '@manage/macros.twig' import link %}
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Flashii Broom Closet</title>
+        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+        <link href="/css/manage.css" rel="stylesheet">
+    </head>
+    <body class="manage">
+        <div class="wrapper">
+            <nav class="header">
+                <div class="header__wrapper">
+                    <a class="header__logo" href="/manage.php">
+                        Broom Closet
+                    </a>
+
+                    <div class="header__navigation">
+                        {% for mode, data in manage_modes %}
+                            <a class="header__link{% if mode == manage_mode %} header__link--active{% endif %}" href="?m={{ mode }}">{{ data.title }}</a>
+                        {% endfor %}
+                    </div>
+
+                    <div class="header__user">
+                        <input type="checkbox" id="manage-user-menu-state" class="header__user__state">
+                        <label for="manage-user-menu-state" class="header__link header__user__toggle" style="background-image:url('/profile.php?u={{ manage_user.user_id }}&amp;m=avatar');">{{ manage_user.username }}</label>
+                        <div class="header__user__menu">
+                            <div class="header__user__section">
+                                <a class="header__user__link" href="/profile.php?u={{ manage_user.user_id }}">Profile</a>
+                                <a class="header__user__link" href="/settings.php">Settings</a>
+                            </div>
+                            <div class="header__user__section">
+                                <a class="header__user__link" href="/">Return</a>
+                                <a class="header__user__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Logout</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            {% block content %}
+                <div class="container">
+                    <p> This page has no content.</p>
+                </div>
+            {% endblock %}
+
+            <footer class="footer">
+                {{ link('https://flash.moe', 'flash.moe', 'footer__link') }} 2013-{{
+                ''|date('Y') }} /
+                {{ link('https://github.com/flashwave/misuzu/tree/' ~ git_branch(), git_branch(), 'footer__link') }} # {{ link('https://github.com/flashwave/misuzu/commit/' ~ git_hash(true), git_hash(), 'footer__link') }}
+            </footer>
+        </div>
+    </body>
+</html>

views/manage/notfound.twig

@@ -0,0 +1,7 @@
+{% extends '@manage/master.twig' %}
+
+{% block content %}
+    <div class="container">
+        <p>Could not find what you were looking for.</p>
+    </div>
+{% endblock %}

views/manage/overview.twig

@@ -0,0 +1 @@
+{% extends '@manage/master.twig' %}

views/manage/roles.twig

@@ -0,0 +1 @@
+{% extends '@manage/master.twig' %}

views/manage/users.twig

@@ -0,0 +1,19 @@
+{% extends '@manage/master.twig' %}
+{% from '@manage/macros.twig' import pagination %}
+
+{% block content %}
+    <div class="container listing user-listing">
+        {% for user in manage_users %}
+            <label class="listing__entry user-listing__entry">
+                <div class="listing__entry__content user-listing__entry__content">
+                    <input type="checkbox">
+                    <div class="listing__entry__column user-listing__entry__column user-listing__entry__column--username">
+                        {{ user.username }}
+                    </div>
+                </div>
+            </label>
+        {% endfor %}
+    </div>
+
+    {{ pagination('?m=users', manage_users, users_page, null, 'p') }}
+{% endblock %}

views/mio/master.twig

@@ -13,26 +13,28 @@
         {% include '@mio/_layout/meta.twig' %}
         <link href="https://static.flash.moe/fonts/visitor/visitor1.css" rel="stylesheet">
         <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
-        <link href="/css/mio.css" rel="stylesheet" type="text/css">
+        <link href="/css/mio.css" rel="stylesheet">
     </head>
     <body class="mio">
         <div class="mio__wrapper">
-            <div class="mio__header">
+            <nav class="mio__header">
                 <div class="mio__header__logo">
                     <a href="/" class="mio__header__logo__link">
                         <img class="mio__header__logo__image" src="https://static.flash.moe/logos/logo-exo.png" alt="Flashii">
                     </a>
                 </div>
+
                 <div class="mio__header__menu">
                     {% if app.session is not null %}
                         <div class="mio__container mio__header__user">
                             <div class="mio__container__title">Hey, {{ app.session.user.username }}!</div>
                             <div class="mio__container__content mio__header__user__content">
-                                <div class="mio__avatar mio__header__user__avatar" style="background-image:url('/profile.php?u={{ app.session.user.user_id }}&amp;m=avatar');"></div>
+                                <a href="/settings.php?m=avatar" class="mio__avatar mio__header__user__avatar" style="background-image:url('/profile.php?u={{ app.session.user.user_id }}&amp;m=avatar');"></a>
                                 <div class="mio__header__user__links__container">
                                     <ul class="mio__header__user__links">
                                         <li class="mio__header__user__option"><a class="mio__header__user__link" href="/profile.php?u={{ app.session.user.user_id }}">Profile</a></li>
                                         <li class="mio__header__user__option"><a class="mio__header__user__link" href="/settings.php">Settings</a></li>
+                                        <li class="mio__header__user__option"><a class="mio__header__user__link" href="{{ manage_link|default('/manage.php') }}">Manage</a></li>
                                         <li class="mio__header__user__option"><a class="mio__header__user__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Logout</a></li>
                                     </ul>
                                 </div>
@@ -42,7 +44,7 @@
                         <a href="/auth.php" class="mio__input__button">Login/Register</a>
                     {% endif %}
                 </div>
-            </div>
+            </nav>
 
             {% block content %}
                 <div class="mio__container">
@@ -55,7 +57,7 @@
                 {{ navigation(mio_navigation) }}
             {% endblock %}
 
-            <div class="mio__footer">
+            <footer class="mio__footer">
                 <div class="mio__footer__copyright">
                     {{ link('https://flash.moe', 'flash.moe', 'mio__footer__copyright__link') }} 2013-{{
                     ''|date('Y') }} /
@@ -68,7 +70,7 @@
                     {{ link('#', 'Status', 'mio__footer__links__link') }}
                     {{ link('https://twitter.com/flashiinet', 'Twitter', 'mio__footer__links__link') }}
                 </div>
-            </div>
+            </footer>
         </div>
     </body>
 </html>