Code Monkey home page Code Monkey logo

uf_configmanager's Introduction

Configuration Manager Sprinkle for UserFrosting 5

Donate Latest Version UserFrosting Version Software License Build PHPStan Codecov StyleCI

Configuration Manager sprinkle for UserFrosting 5. Lets you edit UserFrosting configs from the interface.

Help and Contributing

If you need help using this sprinkle or found any bug, feels free to open an issue or submit a pull request. You can also find me on the UserFrosting Chat most of the time for direct support.

Installation

To install in your Sprinkle :

  1. Add this package with Composer :

    composer require lcharette/uf_configmanager "~5.1.0"
    
  2. Edit your Sprinkle Recipe to include the ConfigManager as a Sprinkle dependency :

    \UserFrosting\Sprinkle\ConfigManager\ConfigManager::class
    
  3. Add Config Manager frontend assets dependencies :

    npm i --save @lcharette/configmanager@~5.1.0
    
  4. Add Config Manager & FormGenerator frontend entries to your webpack entries. Open webpack.config.js and add in const sprinkles { ... }:

    FormGenerator: require('@lcharette/formgenerator/webpack.entries'),
    ConfigManager: require('@lcharette/configmanager/webpack.entries'),
    
  5. Run :

    php bakery bake
    

Working example

The public/ directory serves as an example of ConfigManager. You can clone this repository and install as any UserFrosting 5 sprinkle :

  1. composer install
  2. php bakery bake
  3. php -S localhost:8080 -t public

Permissions

The migration will automatically add the update_site_config permission to the Site Administrator role. If it's not added automatically, you can run the UserFrosting\Sprinkle\ConfigManager\Database\Seeds\SettingsPermissions seed using the php bakery seed command or add it manually in the admin UI. To give access to the config UI to another user, simply add the update_site_config permission slug to that user role.

Add link to the menu

The configuration UI is bound to the the /settings route. Simply add a link to this route where you want it. The checkAccess make it so it will appear only for users having the appropriate permission. For example, you can add the following to the sidebar menu :

{% if checkAccess('update_site_config') %}
<li>
    <a href="{{site.uri.public}}/settings"><i class="fa fa-gears fa-fw"></i> <span>{{ translate("CONFIG_MANAGER.TITLE") }}</span></a>
</li>
{% endif %}

Adding custom config

Settings are separated by topics in the UI. Each topic is represented by a file, located in schema/config/. Unlike normal schema files, all entries needs to be wrapped inside a config key. A name and desc top-level entry will allow to define the title and description of the topic.

{
    "name" : "SITE.CONFIG",
    "desc" : "SITE.CONFIG.DESC",

    "config": { ... }
}

For example, to add an entry for site.title text and site.registration.enabled checkbox option in a "UserFrosting Settings" topic :

{
    "name" : "SITE.CONFIG",
    "desc" : "SITE.CONFIG.DESC",

    "config": {
        "site.title" : {
            "validators" : {
                "required" : {
                    "message" : "SITE.TITLE.REQUIRED"
                }
            },
            "form" : {
                "type" : "text",
                "label" : "SITE.TITLE",
                "icon" : "fa-comment"
            }
        },
        "site.registration.enabled" : {
            "validators" : {},
            "form" : {
                "type" : "checkbox",
                "label" : "SITE.REGISTRATION.ENABLED"
            }
        }
    }
}

NOTE Only .json are accepted. Yaml schemas are cannot be used for now.

License

By Louis Charette. Copyright (c) 2020, free to use in personal and commercial software as per the MIT license.

uf_configmanager's People

Contributors

dependabot[bot] avatar lcharette avatar stylecibot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

uf_configmanager's Issues

Logged-Out-User & Routes Issue ( UF ver 4.6.6 )

*Note: I'm not sure if this affects previous versions of UF.

If you are not signed in and you try to access the settings page, a "ForbiddenException" is thrown and an error is displayed.

I feel the better solution here is to redirect the user to the sign in page.

To do this, simply edit the routes file "routes\ConfigManager.php" so that the group declaration ends with ->add('authGuard')

Example of the modified code:

$app->group('/settings', function () {
    $this->get('', 'UserFrosting\Sprinkle\ConfigManager\Controller\ConfigManagerController:displayMain')
         ->setName('ConfigManager');

    $this->post('/{schema}', 'UserFrosting\Sprinkle\ConfigManager\Controller\ConfigManagerController:update')
         ->setName('ConfigManager.save');
})->add('authGuard');

entrypoints.json Not Updated?

Fresh UF 5 installed on Windows.

I followed your 3-step instructions, but received the following error when loading the settings page:

An exception has been thrown during the rendering of a template 
"Could not find the entry "page.config-manager" in "assets://entrypoints.json". 
Found: 
app, page.register, page.sign-in, page.forgot-password, page.resend-verification, page.set-or-reset-password, 
page.account-settings, dashboard, page.dashboard, page.activities, page.group, page.groups, page.role, page.roles, 
page.permission, page.permissions, page.user, page.users.

To fix this error I had to:

  1. Edit "\public\assets\entrypoints.json" to include:
    "page.config-manager": {
     "js": [
       "assets/js/ConfigManager.js"
     ]
    },
    "widget.formGenerator": {
     "js": [
       "assets/js/widget-formGenerator.js"
     ]
    }```
  2. I also copied both the "ConfigManager.js" and "widget-formGenerator.js" files to the "\app\assets\js" folder.

Did I make an obvious mistake somewhere that lead to this?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.