Hi Keenthemes,

Landing page and its RTL Layout. please. This is a high in demand now and everybody is waiting for it.

Also input-group with icons inside , please

Thank you

Hello! on Laravel under config/menu_aside.php I’m trying to add permissions functionality using Spatie/Gate functions. Have your ever try to apply this and if its possible to give me the code to add it in my project? thank you in advance

Can I use the theme only with Bootstrap 5. Without using jquery so that everything is lighter? I want to use only Bootstrap 5 on Metronic.

Dears, in metronic 8 on top menu when click chat button

it is better to show users not to show the chat so when click on person then chat is open

also chat should have back button so when click on it shows users again

I get below error while install for blazor

> npmjs@1.0.0 build > webpack—config webpack.config.js

sh: webpack: command not found

Are TypeScript type definitions available/included for the included js sources?

When will angular demos added to metronic 8?

where is blazor documentation available?

Hi, i just downloaded 7.2.7 version on MacOS. However, I got errors while running npm install. My environment: macOS 11.3 node 16.0.0 npm 7.10.0

Errors: npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: @babel/core@7.6.0 npm ERR! node_modules/@babel/core npm ERR! babel/core“7.6.0” from react-scripts@3.2.0 npm ERR! node_modules/react-scripts npm ERR! react-scripts@”3.2.0” from the root project npm ERR! babel/core“^{7.4.5” from @svgr/webpack@4.3.2 npm ERR! node_modules/@svgr/webpack npm ERR! svgr/webpack“4.3.2” from react-scripts@3.2.0 npm ERR! node_modules/react-scripts npm ERR! react-scripts@”3.2.0” from the root project npm ERR! 8 more (babel-jest, babel-loader, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer babel/core“}7.13.0” from @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.13.12 npm ERR! node_modules/@babel/preset-env/node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining npm ERR! babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining“^{7.13.12” from @babel/preset-env@7.14.0 npm ERR! node_modules/@babel/preset-env npm ERR! babel/preset-env“}7.4.5” from @svgr/webpack@4.3.2 npm ERR! node_modules/@svgr/webpack npm ERR! svgr/webpack“4.3.2” from react-scripts@3.2.0 npm ERR! node_modules/react-scripts npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with—force, or—legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Hello when will the Roles feature update happen?

> metronic@8.0.4 build > webpack

[webpack-cli] Failed to load ‘D:\Themes\Metronic\metronic_v8.0.4\html_bootstrap5\theme\tools\webpack.config.js’ config [webpack-cli] ReferenceError: require is not defined at file:///D:/Themes/Metronic/metronic_v8.0.4/html_bootstrap5/theme/tools/webpack.config.js:1:17 at ModuleJob.run (internal/modules/esm/module_job.js:152:23) at async Loader.import (internal/modules/esm/loader.js:166:24) at async loadConfig (D:\Themes\Metronic\metronic_v8.0.4\html_bootstrap5\theme\tools\node_modules\webpack-cli\lib\webpack-cli.js:1346:35) at async WebpackCLI.resolveConfig (D:\Themes\Metronic\metronic_v8.0.4\html_bootstrap5\theme\tools\node_modules\webpack-cli\lib\webpack-cli.js:1454:38) at async WebpackCLI.createCompiler (D:\Themes\Metronic\metronic_v8.0.4\html_bootstrap5\theme\tools\node_modules\webpack-cli\lib\webpack-cli.js:1839:22) at async WebpackCLI.buildCommand (D:\Themes\Metronic\metronic_v8.0.4\html_bootstrap5\theme\tools\node_modules\webpack-cli\lib\webpack-cli.js:1954:20) at async Command.<anonymous> (D:\Themes\Metronic\metronic_v8.0.4\html_bootstrap5\theme\tools\node_modules\webpack-cli\lib\webpack-cli.js:735:25) at async Promise.all (index 1) at async Command.<anonymous> (D:\Themes\Metronic\metronic_v8.0.4\html_bootstrap5\theme\tools\node_modules\webpack-cli\lib\webpack-cli.js:1284:13)

Could you please guide me through the best front layout separation structure using Laravel, vue-router and vuex? Each area can be separated from the front by combining the label and the view. I’m wondering if the header footer is designed to only change the content body side when using blade and most laralve and vue together. Do you use vue separately for header and footer? Please guide me through the best mvc patterns. Thank you.

For Metronic v8.0.4: In case anyone is looking for the best way to process a login with the SweetAlert2 and Validator using Javascript, PHP, AJAX, and MySQL. Here’s my script. USE AT YOUR OWN RISK!

assets/js/custom/authentication/sign-in/general.js

// Handle form submit
        submitButton.addEventListener('click', function (e) {
            // Prevent button default action
            e.preventDefault();

            // Validate form
            validator.validate().then(function (status) {
                if (status == 'Valid') {
                    // Show loading indication
                    submitButton.setAttribute('data-kt-indicator', 'on');

                    // Disable button to avoid multiple click 
                    submitButton.disabled = true;

                    // Simulate ajax request
                    setTimeout(function(){ 

                        form = $(form);
                        $.ajax({
                            type: "POST",
                            url: "php/processlogin.php",
                            data: form.serialize(),
                            dataType: "json",
                            beforeSend: function () {
                                $('.alert-error,.alert-success').hide();
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                alert('UNEXPECTED ERROR THROWN ' + errorThrown);
                                $('.alert-error').show();
                                $('.alert-error span').html(errorThrown);
                            },
                            success: function (data) {
                                if (data['returncode'] == 1) {
                                    // Hide loading indication
                                    submitButton.removeAttribute('data-kt-indicator');

                                    // Enable button
                                    submitButton.disabled = false;

                                    // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
                                    let timerInterval
                                    Swal.fire({
                                        text: "You have successfully logged in!",
                                        icon: "success",
                                        timer: 2000, //wait two seconds before redirecting
                                        timerProgressBar: true,
                                        didOpen: () => {
                                            Swal.showLoading()
                                            timerInterval = setInterval(() => {
                                                const content = Swal.getContent()
                                                if (content) {
                                                    const b = content.querySelector('b')
                                                    if (b) {
                                                        b.textContent = Swal.getTimerLeft()
                                                    }
                                                }
                                            }, 100)
                                        },
                                        willClose: () => {
                                            clearInterval(timerInterval)
                                        }
                                    }).then((result) => {
                                        if (result.dismiss === Swal.DismissReason.timer) {
                                            window.location.href = 'index.html'; //redirect here on successful login
                                        }
                                    })

                                } else {
                                    // Hide loading indication
                                    submitButton.removeAttribute('data-kt-indicator');

                                    // Enable button
                                    submitButton.disabled = false;

                                    document.querySelector('[name="username"]').value = "";
                                    document.querySelector('[name="password"]').value = "";

                                    Swal.fire({
                                        text: "Invalid Username or Password!",
                                        icon: "error",
                                        buttonsStyling: false,
                                        confirmButtonText: "Ok, got it!",
                                        customClass: {
                                            confirmButton: "btn btn-danger" 
                                        }
                                    }).then((result) => {
                                        if (result.isConfirmed) {

                                        }
                                    })
                                }
                            }

                        });
                        return true;
                    }, 2000);
                } else {
                    Swal.fire({
                        text: "Sorry, looks like there are some errors detected, please try again.",
                        icon: "error",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn btn-primary" 
                        }
                    });
                }
            });
        });

php/processlogin.php

<?php        
session_start();

header('Content-type: application/json');

$username = trim($_POST['username']);
$password = trim($_POST['password']);

// database Connection variables
define('HOST', 'localhost');
define('USER', 'your-username');
define('PASSWORD', 'your-password');
define('DATABASE', 'your-db');

function DB()
{
    try {
        $db = new PDO('mysql:host='.HOST.';dbname='.DATABASE.'', USER, PASSWORD);
        return $db;
    } catch (PDOException $e) {
        return "Error!: " . $e->getMessage();
        die();
    }
}

class AuthLib
{

    public function Login($username, $password)
    {
        try {
            $db = DB();
            $query = $db->prepare("SELECT user_id FROM admin_users WHERE (username=:username OR email=:username) AND password=:password");
            $query->bindParam("username", $username, PDO::PARAM_STR);
            $enc_password = hash('sha256', $password);
            $query->bindParam("password", $enc_password, PDO::PARAM_STR);
            $query->execute();
            if ($query->rowCount() > 0) {
                return $query->fetchAll();
            } else {
                return false;
            }
        } catch (PDOException $e) {
            exit($e->getMessage());
        }
    }
}

$app = new AuthLib();
$user_id = $app->Login($username, $password); // check user login

$response_array['returncode'] = 0;

if($user_id > 0)
{
    foreach($user_id as $row){
        $user_id = $row['user_id'];
    }
    $response_array['returncode'] = 1;

    // Set Session
    $_SESSION['user_id'] = $user_id;
}
else
{
    $response_array['returncode'] = 0;
}

echo json_encode($response_array);
?>

Hi,

any ETA for the React version of Metronic 8?

Hi metronic v8 rtl version has many issues please check demo for e.g. topbar menu and arrows in main menu

also when datatables and other plugin will be available?

last question is v7 support is end will be there updates for v7?

Great Pricing Plan guys, thank you, but if you can make the middle one “Advanced” little dark or with an appealing color to deferential it from the other 2.

When will these be availlable : - Forms input-groups and Icons inside them - Icons - Avatar list - Callendar

and specially the demo6

Thank you guys.

hello, I am currently using the metronic 7.2.7 html demo 1 version, my question is can I upgrade to version 8 without problems? since I use plugins like datatable, select2, chartjs, etc … or I must hope that the 7.2.8 versions appear

Thank you so much

I really like the current frequency of the updates.

Keep on rolling!

Thanks a lot!

When can we expect new components for Metronic 8? Currently v7 has far more of them, and some are really helpful, so it would be nice to see them in v8…

hello i want to know if i buy this model now i will get version 8 for free after