[PoC] Front Ui to help you build a front webapp quickly

app/EventListener/ChangePasswordListener.php

@@ -0,0 +1,44 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace App\EventListener;
+
+use App\Entity\User;
+use Doctrine\ORM\EntityManagerInterface;
+use Sylius\FrontUi\Event\ChangePasswordEvent;
+use Sylius\FrontUi\Symfony\EventListener\Attribute\AsChangePasswordListener;
+use Symfony\Component\PasswordHasher\Hasher\UserPasswordHasherInterface;
+use Webmozart\Assert\Assert;
+
+#[AsChangePasswordListener]
+final class ChangePasswordListener
+{
+    public function __construct(
+        private readonly UserPasswordHasherInterface $passwordHasher,
+        private readonly EntityManagerInterface $entityManager,
+    ) {
+    }
+
+    public function __invoke(ChangePasswordEvent $event): void
+    {
+        /** @var User $user */
+        $user = $event->getUser();
+        Assert::isInstanceOf($user, User::class);
+
+        $hashedPassword = $this->passwordHasher->hashPassword($user, $event->getNewPassword());
+
+        $user->setPassword($hashedPassword);
+
+        $this->entityManager->flush();
+    }
+}

app/Story/DefaultUsersStory.php

@@ -24,6 +24,14 @@ public function build(): void
             ->admin()
             ->withEmail('[email protected]')
             ->withPassword('admin')
-            ->create();
+            ->create()
+        ;
+
+        UserFactory::new()
+            ->admin()
+            ->withEmail('[email protected]')
+            ->withPassword('front')
+            ->create()
+        ;
     }
 }

composer.json

@@ -28,12 +28,14 @@
         "symfony/config": "^6.4 || ^7.0",
         "symfony/dependency-injection": "^6.4 || ^7.0",
         "symfony/expression-language": "^6.4 || ^7.0",
+        "symfony/http-client": "^6.4 || ^7.0",
         "symfony/http-kernel": "^6.4 || ^7.0",
         "symfony/security-bundle": "^6.4 || ^7.0",
         "symfony/security-http": "^6.4 || ^7.0",
         "symfony/stopwatch": "^6.4 || ^7.0",
         "symfony/twig-bundle": "^6.4 || ^7.0",
         "symfony/ux-autocomplete": "^2.17",
+        "symfony/ux-icons": "^2.20",
         "symfony/ux-live-component": "^2.17",
         "symfony/ux-twig-component": "^2.17",
         "twig/twig": "^2.15 || ^3.0",
@@ -68,9 +70,11 @@
         "psr-4": {
             "Sylius\\AdminUi\\": "src/AdminUi/src/",
             "Sylius\\BootstrapAdminUi\\": "src/BootstrapAdminUi/src/",
+            "Sylius\\BootstrapFrontUi\\": "src/BootstrapFrontUi/src/",
             "Sylius\\TwigExtra\\": "src/TwigExtra/src/",
             "Sylius\\TwigHooks\\": "src/TwigHooks/src/",
-            "Sylius\\UiTranslations\\": "src/UiTranslations/src/"
+            "Sylius\\UiTranslations\\": "src/UiTranslations/src/",
+            "Sylius\\FrontUi\\": "src/FrontUi/src/"
         }
     },
     "autoload-dev": {
@@ -79,6 +83,7 @@
             "MainTests\\Sylius\\": "tests/",
             "TestApplication\\Sylius\\AdminUi\\": "src/AdminUi/tests/Functional/.application/src/",
             "TestApplication\\Sylius\\BootstrapAdminUi\\": "src/BootstrapAdminUi/tests/Functional/.application/src/",
+            "TestApplication\\Sylius\\BootstrapFrontUi\\": "src/BootstrapFrontUi/tests/Functional/.application/src/",
             "TestApplication\\Sylius\\TwigExtra\\": "src/TwigExtra/tests/Functional/.application/src/",
             "TestApplication\\Sylius\\TwigHooks\\": "src/TwigHooks/tests/Functional/.application/src/",
             "TestApplication\\Sylius\\UiTranslations\\": "src/UiTranslations/tests/Functional/.application/src/",
@@ -91,6 +96,8 @@
     "replace": {
         "sylius/admin-ui": "self.version",
         "sylius/bootstrap-admin-ui": "self.version",
+        "sylius/bootstrap-front-ui": "self.version",
+        "sylius/front-ui": "self.version",
         "sylius/twig-extra": "self.version",
         "sylius/twig-hooks": "self.version",
         "sylius/ui-translations": "self.version"

config/bundles.php

@@ -9,10 +9,13 @@
     Sylius\AdminUi\Symfony\SyliusAdminUiBundle::class => ['all' => true],
     Sylius\UiTranslations\Symfony\SyliusUiTranslationsBundle::class => ['all' => true],
     Sylius\BootstrapAdminUi\Symfony\SyliusBootstrapAdminUiBundle::class => ['all' => true],
+    Sylius\FrontUi\Symfony\SyliusFrontUiBundle::class => ['all' => true],
+    Sylius\BootstrapFrontUi\Symfony\SyliusBootstrapFrontUiBundle::class => ['all' => true],
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
     Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true],
     Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true],
     Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
+    Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
     Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true],
     BabDev\PagerfantaBundle\BabDevPagerfantaBundle::class => ['all' => true],
     Sylius\Bundle\ResourceBundle\SyliusResourceBundle::class => ['all' => true],

config/packages/security.yaml

@@ -13,31 +13,42 @@ security:
         dev:
             pattern: ^/(_(profiler|wdt)|css|images|js)/
             security: false
+
+        admin:
+            provider: app_user_provider
+            pattern: '^/admin/'
+            form_login:
+                login_path: sylius_admin_ui_login
+                check_path: sylius_admin_ui_login_check
+                default_target_path: app_admin_conference_index
+            logout:
+                path: sylius_admin_ui_logout
+                target: sylius_admin_ui_login
+
         main:
             lazy: true
             provider: app_user_provider
+            form_login:
+                login_path: sylius_front_ui_login
+                check_path: sylius_front_ui_login_check
+                default_target_path: sylius_front_ui_account_dashboard
+            logout:
+                path: sylius_front_ui_logout
+                target: sylius_front_ui_login
 
             # activate different ways to authenticate
             # https://symfony.com/doc/current/security.html#the-firewall
 
             # https://symfony.com/doc/current/security/impersonating_user.html
             # switch_user: true
 
-            form_login:
-                # "app_login" is the name of the route created previously
-                login_path: sylius_admin_ui_login
-                check_path: sylius_admin_ui_login_check
-                default_target_path: app_admin_conference_index
-            logout:
-                path: sylius_admin_ui_logout
-                target: sylius_admin_ui_login
-
     # Easy way to control access for large sections of your site
     # Note: Only the *first* access control that matches will be used
     access_control:
         - { path: ^/admin/login, roles: PUBLIC_ACCESS }
         - { path: ^/admin/logout, roles: PUBLIC_ACCESS }
         - { path: ^/admin, roles: ROLE_ADMIN }
+        - { path: ^/account, roles: ROLE_USER }
         - { path: ^/, roles: PUBLIC_ACCESS }
         # - { path: ^/profile, roles: ROLE_USER }
 

config/packages/sylius_bootstrap_front_ui.yaml

@@ -0,0 +1,2 @@
+imports:
+  - { resource: '../../src/BootstrapFrontUi/config/app.php' }

config/routes/sylius_webapp_ui.yaml

@@ -0,0 +1,2 @@
+sylius_webapp_ui:
+    resource: '@SyliusFrontUiBundle/config/routes.php'

src/BootstrapFrontUi/.gitignore

@@ -0,0 +1 @@
+/node_modules

src/BootstrapFrontUi/assets/entrypoint.js

@@ -0,0 +1,12 @@
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import './styles/main.scss';
+
+import './scripts/bootstrap';

src/BootstrapFrontUi/assets/scripts/bootstrap.js

@@ -0,0 +1,10 @@
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import * as bootstrap from 'bootstrap';

src/BootstrapFrontUi/assets/styles/_base.scss

@@ -0,0 +1,35 @@
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+@font-face {
+    font-family: 'Inter';
+    src: url('../fonts/inter-variable-font-slnt-wght.ttf') format('truetype-variations');
+    font-weight: 1 999;
+}
+
+html {
+    font-feature-settings: "cv03", "cv04", "cv11";
+}
+
+a {
+    text-underline-offset: 0.25em;
+
+    &.link-reset {
+        color: inherit;
+        text-decoration: none;
+
+        &:hover {
+            color: $link-hover-color;
+        }
+    }
+}
+
+.fs-7 {
+    font-size: $small-font-size;
+}

src/BootstrapFrontUi/assets/styles/_buttons.scss

@@ -0,0 +1,46 @@
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+.btn-icon {
+    display: inline-flex;
+    gap: 0.4rem;
+    align-items: center;
+    padding-left: 1.4rem;
+    padding-right: 1.6rem;
+}
+
+.btn-primary {
+    color: #fff;
+}
+
+.btn-transparent {
+    @extend .btn-light;
+    background-color: transparent;
+    border-color: transparent;
+
+    &:hover {
+        background-color: $gray-100;
+        border-color: transparent;
+    }
+
+    &:focus {
+        background-color: transparent !important;
+        border-color: transparent !important;
+    }
+
+    &:active {
+        background-color: $gray-200 !important;
+        border-color: transparent !important;
+    }
+}
+
+.btn-outline-gray {
+    @extend .btn-outline-dark;
+    --bs-btn-border-color: var(--bs-gray-400);
+}

src/BootstrapFrontUi/assets/styles/_form.scss

@@ -0,0 +1,5 @@
+.form-label.required::after {
+    content: "*";
+    padding-left: 3px;
+    color: $danger;
+}

src/BootstrapFrontUi/assets/styles/_icons.scss

@@ -0,0 +1,39 @@
+.symfony-icon {
+  height: 28px;
+  width: 28px;
+
+  &-xs {
+    height: 16px;
+    width: 16px;
+  }
+
+  &-sm {
+    height: 20px;
+    width: 20px;
+  }
+
+  &-md {
+    height: 24px;
+    width: 24px;
+  }
+
+  &-lg {
+    height: 32px;
+    width: 32px;
+  }
+
+  &-xl {
+    height: 40px;
+    width: 40px;
+  }
+
+  & > * {
+    stroke-width: 1.1;
+  }
+
+  &-xs, &-sm, &-md {
+    & > * {
+      stroke-width: 2;
+    }
+  }
+}

src/BootstrapFrontUi/assets/styles/_loader.scss

@@ -0,0 +1,19 @@
+/*!
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+.sylius-shop-loader {
+    display: flex;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.9);
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+}

src/BootstrapFrontUi/assets/styles/_utils.scss

@@ -0,0 +1,37 @@
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+$utilities: (
+    "min-viewport-height": (
+        property: min-height,
+        responsive: true,
+        class: min-vh,
+        values: (100: 100vh)
+    ),
+    "width": (
+        property: width,
+        class: w,
+        values: (
+            1: 1%,
+            25: 25%,
+            50: 50%,
+            75: 75%,
+            100: 100%,
+            auto: auto
+        )
+    ),
+);
+
+$positions: 40px, 50px, 80px;
+
+@each $position in $positions {
+    .border-#{$position}-dashed {
+        border-#{$position}-style: dashed !important;
+    }
+}