diff --git a/.github/workflows/unit-tests.yaml b/.github/workflows/unit-tests.yaml index 31ddde559ec..d3c3fc5f71b 100644 --- a/.github/workflows/unit-tests.yaml +++ b/.github/workflows/unit-tests.yaml @@ -71,11 +71,6 @@ jobs: # Turbo has its own workflow file EXCLUDED_PACKAGES="Turbo" - # Exclude deprecated packages when testing against lowest dependencies - if [ "${{ matrix.dependency-version }}" = "lowest" ]; then - EXCLUDED_PACKAGES="$EXCLUDED_PACKAGES|TogglePassword" - fi - PACKAGES=$(find src/ -mindepth 2 -type f -name composer.json -not -path "*/vendor/*" -printf '%h\n' | sed 's/^src\///' | grep -Ev "$EXCLUDED_PACKAGES" | sort | tr '\n' ' ') echo "Packages: $PACKAGES" echo "PACKAGES=$PACKAGES" >> $GITHUB_ENV diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bc0f84fa513..87bf83e8fbe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -485,36 +485,6 @@ importers: specifier: ^3.2.4 version: 3.2.4(@types/node@22.16.5)(@vitest/browser@3.2.4)(jsdom@26.1.0)(lightningcss@1.30.1)(msw@2.10.4(@types/node@22.16.5)(typescript@5.8.3))(terser@5.43.1) - src/TogglePassword/assets: - devDependencies: - '@hotwired/stimulus': - specifier: ^3.0.0 - version: 3.2.2 - '@testing-library/dom': - specifier: ^10.4.0 - version: 10.4.0 - '@testing-library/jest-dom': - specifier: ^6.6.3 - version: 6.6.3 - '@testing-library/user-event': - specifier: ^14.6.1 - version: 14.6.1(@testing-library/dom@10.4.0) - jsdom: - specifier: ^26.1.0 - version: 26.1.0 - tslib: - specifier: ^2.8.1 - version: 2.8.1 - tsx: - specifier: ^4.20.3 - version: 4.20.3 - typescript: - specifier: ^5.8.3 - version: 5.8.3 - vitest: - specifier: ^3.2.4 - version: 3.2.4(@types/node@22.16.5)(@vitest/browser@3.2.4)(jsdom@26.1.0)(lightningcss@1.30.1)(msw@2.10.4(@types/node@22.16.5)(typescript@5.8.3))(terser@5.43.1) - src/Translator/assets: devDependencies: '@testing-library/dom': diff --git a/src/TogglePassword/.gitattributes b/src/TogglePassword/.gitattributes deleted file mode 100644 index 6dfda816e4b..00000000000 --- a/src/TogglePassword/.gitattributes +++ /dev/null @@ -1,7 +0,0 @@ -/.git* export-ignore -/.symfony.bundle.yaml export-ignore -/phpunit.xml.dist export-ignore -/assets/src export-ignore -/assets/test export-ignore -/doc export-ignore -/tests export-ignore diff --git a/src/TogglePassword/.github/PULL_REQUEST_TEMPLATE.md b/src/TogglePassword/.github/PULL_REQUEST_TEMPLATE.md deleted file mode 100644 index df3b474b452..00000000000 --- a/src/TogglePassword/.github/PULL_REQUEST_TEMPLATE.md +++ /dev/null @@ -1,8 +0,0 @@ -Please do not submit any Pull Requests here. They will be closed. ---- - -Please submit your PR here instead: -https://github.com/symfony/ux - -This repository is what we call a "subtree split": a read-only subset of that main repository. -We're looking forward to your PR there! diff --git a/src/TogglePassword/.github/workflows/close-pull-request.yml b/src/TogglePassword/.github/workflows/close-pull-request.yml deleted file mode 100644 index 57e4e3fb074..00000000000 --- a/src/TogglePassword/.github/workflows/close-pull-request.yml +++ /dev/null @@ -1,20 +0,0 @@ -name: Close Pull Request - -on: - pull_request_target: - types: [opened] - -jobs: - run: - runs-on: ubuntu-latest - steps: - - uses: superbrothers/close-pull-request@v3 - with: - comment: | - Thanks for your Pull Request! We love contributions. - - However, you should instead open your PR on the main repository: - https://github.com/symfony/ux - - This repository is what we call a "subtree split": a read-only subset of that main repository. - We're looking forward to your PR there! diff --git a/src/TogglePassword/.gitignore b/src/TogglePassword/.gitignore deleted file mode 100644 index 2cc9f0231c3..00000000000 --- a/src/TogglePassword/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -/assets/node_modules/ -/vendor/ -/composer.lock -/phpunit.xml -/.phpunit.result.cache diff --git a/src/TogglePassword/.symfony.bundle.yaml b/src/TogglePassword/.symfony.bundle.yaml deleted file mode 100644 index 6d9a74acb76..00000000000 --- a/src/TogglePassword/.symfony.bundle.yaml +++ /dev/null @@ -1,3 +0,0 @@ -branches: ["2.x"] -maintained_branches: ["2.x"] -doc_dir: "doc" diff --git a/src/TogglePassword/CHANGELOG.md b/src/TogglePassword/CHANGELOG.md deleted file mode 100644 index 5b13aaae0b3..00000000000 --- a/src/TogglePassword/CHANGELOG.md +++ /dev/null @@ -1,26 +0,0 @@ -# CHANGELOG - -## 2.29.0 - -- Add Symfony 8 support - -## 2.29.0 - -- Deprecate the package - -## 2.13.2 - -- Revert "Change JavaScript package to `type: module`" - -## 2.13.0 - -- Add Symfony 7 support. -- Change JavaScript package to `type: module` - -## 2.12.0 - -- Added default values for the Stimulus controller values. - -## 2.11.0 - -- Introduce component! diff --git a/src/TogglePassword/LICENSE b/src/TogglePassword/LICENSE deleted file mode 100644 index 3ed9f412ce5..00000000000 --- a/src/TogglePassword/LICENSE +++ /dev/null @@ -1,19 +0,0 @@ -Copyright (c) 2023-present Fabien Potencier - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is furnished -to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. diff --git a/src/TogglePassword/README.md b/src/TogglePassword/README.md deleted file mode 100644 index e2311852b7f..00000000000 --- a/src/TogglePassword/README.md +++ /dev/null @@ -1,258 +0,0 @@ -# Symfony UX TogglePassword - -> [!WARNING] -> **Deprecated**: This package has been **deprecated** in 2.x and will be removed in the next major version. - -To keep the same functionality in your Symfony application, follow these migration steps: - -1. Remove the `symfony/ux-toggle-password` package from your project: -```bash -composer remove symfony/ux-toggle-password -``` - -2. Create the following files in your project: - -> [!NOTE] -> These files are provided as a reference. -> You can customize them to fit your needs, and even simplify the implementation if you don't need all the features. - - - `src/Form/Extension/TogglePasswordTypeExtension.php` -```php -setDefaults([ - 'toggle' => false, - 'hidden_label' => 'Hide', - 'visible_label' => 'Show', - 'hidden_icon' => 'Default', - 'visible_icon' => 'Default', - 'button_classes' => ['toggle-password-button'], - 'toggle_container_classes' => ['toggle-password-container'], - 'toggle_translation_domain' => null, - 'use_toggle_form_theme' => true, - ]); - - $resolver->setNormalizer( - 'toggle_translation_domain', - static fn (Options $options, $labelTranslationDomain) => $labelTranslationDomain ?? $options['translation_domain'], - ); - - $resolver->setAllowedTypes('toggle', ['bool']); - $resolver->setAllowedTypes('hidden_label', ['string', TranslatableMessage::class, 'null']); - $resolver->setAllowedTypes('visible_label', ['string', TranslatableMessage::class, 'null']); - $resolver->setAllowedTypes('hidden_icon', ['string', 'null']); - $resolver->setAllowedTypes('visible_icon', ['string', 'null']); - $resolver->setAllowedTypes('button_classes', ['string[]']); - $resolver->setAllowedTypes('toggle_container_classes', ['string[]']); - $resolver->setAllowedTypes('toggle_translation_domain', ['string', 'bool', 'null']); - $resolver->setAllowedTypes('use_toggle_form_theme', ['bool']); - } - - public function buildView(FormView $view, FormInterface $form, array $options): void - { - $view->vars['toggle'] = $options['toggle']; - - if (!$options['toggle']) { - return; - } - - if ($options['use_toggle_form_theme']) { - array_splice($view->vars['block_prefixes'], -1, 0, 'toggle_password'); - } - - $controllerName = 'toggle-password'; - $view->vars['attr']['data-controller'] = trim(\sprintf('%s %s', $view->vars['attr']['data-controller'] ?? '', $controllerName)); - - if (false !== $options['toggle_translation_domain']) { - $controllerValues['hidden-label'] = $this->translateLabel($options['hidden_label'], $options['toggle_translation_domain']); - $controllerValues['visible-label'] = $this->translateLabel($options['visible_label'], $options['toggle_translation_domain']); - } else { - $controllerValues['hidden-label'] = $options['hidden_label']; - $controllerValues['visible-label'] = $options['visible_label']; - } - - $controllerValues['hidden-icon'] = $options['hidden_icon']; - $controllerValues['visible-icon'] = $options['visible_icon']; - $controllerValues['button-classes'] = json_encode($options['button_classes'], \JSON_THROW_ON_ERROR); - - foreach ($controllerValues as $name => $value) { - $view->vars['attr'][\sprintf('data-%s-%s-value', $controllerName, $name)] = $value; - } - - $view->vars['toggle_container_classes'] = $options['toggle_container_classes']; - } - - private function translateLabel(string|TranslatableMessage|null $label, ?string $translationDomain): ?string - { - if (null === $this->translator || null === $label) { - return $label; - } - - if ($label instanceof TranslatableMessage) { - return $label->trans($this->translator); - } - - return $this->translator->trans($label, domain: $translationDomain); - } -} -``` - - `template/form_theme.html.twig`, and follow the [How to work with form themes](https://symfony.com/doc/current/form/form_themes.html) documentation to register it. -```twig -{%- block toggle_password_widget -%} -
{{ block('password_widget') }}
-{%- endblock toggle_password_widget -%} -``` - - `assets/controllers/toggle_password_controller.js` -```javascript -import { Controller } from '@hotwired/stimulus'; -import '../styles/toggle_password.css'; - -export default class extends Controller { - static values = { - visibleLabel: { type: String, default: 'Show' }, - visibleIcon: { type: String, default: 'Default' }, - hiddenLabel: { type: String, default: 'Hide' }, - hiddenIcon: { type: String, default: 'Default' }, - buttonClasses: Array, - }; - - isDisplayed = false; - visibleIcon = ` - - -`; - hiddenIcon = ` - - -`; - - connect() { - if (this.visibleIconValue !== 'Default') { - this.visibleIcon = this.visibleIconValue; - } - - if (this.hiddenIconValue !== 'Default') { - this.hiddenIcon = this.hiddenIconValue; - } - - const button = this.createButton(); - - this.element.insertAdjacentElement('afterend', button); - this.dispatchEvent('connect', { element: this.element, button }); - } - - /** - * @returns {HTMLButtonElement} - */ - createButton() { - const button = document.createElement('button'); - button.type = 'button'; - button.classList.add(...this.buttonClassesValue); - button.setAttribute('tabindex', '-1'); - button.addEventListener('click', this.toggle.bind(this)); - button.innerHTML = `${this.visibleIcon} ${this.visibleLabelValue}`; - return button; - } - - /** - * Toggle input type between "text" or "password" and update label accordingly - */ - toggle(event) { - this.isDisplayed = !this.isDisplayed; - const toggleButtonElement = event.currentTarget; - toggleButtonElement.innerHTML = this.isDisplayed - ? `${this.hiddenIcon} ${this.hiddenLabelValue}` - : `${this.visibleIcon} ${this.visibleLabelValue}`; - this.element.setAttribute('type', this.isDisplayed ? 'text' : 'password'); - this.dispatchEvent(this.isDisplayed ? 'show' : 'hide', { element: this.element, button: toggleButtonElement }); - } - - dispatchEvent(name, payload) { - this.dispatch(name, { detail: payload, prefix: 'toggle-password' }); - } -} -``` - - `assets/styles/toggle_password.css` -```css -.toggle-password-container { - position: relative; -} -.toggle-password-icon { - height: 1rem; - width: 1rem; -} -.toggle-password-button { - align-items: center; - background-color: transparent; - border: none; - column-gap: 0.25rem; - display: flex; - flex-direction: row; - font-size: 0.875rem; - justify-items: center; - height: 1rem; - line-height: 1.25rem; - position: absolute; - right: 0.5rem; - top: -1.25rem; -} -``` - -You're done! - ---- - -Symfony UX TogglePassword is a Symfony bundle providing visibility toggle for password inputs -in Symfony Forms. It is part of [the Symfony UX initiative](https://ux.symfony.com/). - -It allows visitors to switch the type of password field to text and vice versa. - -**This repository is a READ-ONLY sub-tree split**. See -https://github.com/symfony/ux to create issues or submit pull requests. - -## Sponsor - -The Symfony UX packages are [backed][1] by [Mercure.rocks][2]. - -Create real-time experiences in minutes! Mercure.rocks provides a realtime API service -that is tightly integrated with Symfony: create UIs that update in live with UX Turbo, -send notifications with the Notifier component, expose async APIs with API Platform and -create low level stuffs with the Mercure component. We maintain and scale the complex -infrastructure for you! - -Help Symfony by [sponsoring][3] its development! - -## Resources - -- [Documentation](https://symfony.com/bundles/ux-toggle-password/current/index.html) -- [Report issues](https://github.com/symfony/ux/issues) and - [send Pull Requests](https://github.com/symfony/ux/pulls) - in the [main Symfony UX repository](https://github.com/symfony/ux) - -[1]: https://symfony.com/backers -[2]: https://mercure.rocks -[3]: https://symfony.com/sponsor diff --git a/src/TogglePassword/assets/LICENSE b/src/TogglePassword/assets/LICENSE deleted file mode 100644 index 3ed9f412ce5..00000000000 --- a/src/TogglePassword/assets/LICENSE +++ /dev/null @@ -1,19 +0,0 @@ -Copyright (c) 2023-present Fabien Potencier - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is furnished -to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. diff --git a/src/TogglePassword/assets/README.md b/src/TogglePassword/assets/README.md deleted file mode 100644 index 221d74519a3..00000000000 --- a/src/TogglePassword/assets/README.md +++ /dev/null @@ -1,24 +0,0 @@ -# @symfony/ux-toggle-password - -JavaScript assets of the [symfony/ux-toggle-password](https://packagist.org/packages/symfony/ux-toggle-password) PHP package. - -## Installation - -This npm package is **reserved for advanced users** who want to decouple their JavaScript dependencies from their PHP dependencies (e.g., when building Docker images, running JavaScript-only pipelines, etc.). - -We **strongly recommend not installing this package directly**, but instead install the PHP package [symfony/ux-toggle-password](https://packagist.org/packages/symfony/ux-toggle-password) in your Symfony application with [Flex](https://github.com/symfony/flex) enabled. - -If you still want to install this package directly, please make sure its version exactly matches [symfony/ux-toggle-password](https://packagist.org/packages/symfony/ux-toggle-password) PHP package version: -```shell -composer require symfony/ux-toggle-password:2.23.0 -npm add @symfony/ux-toggle-password@2.23.0 -``` - -**Tip:** Your `package.json` file will be automatically modified by [Flex](https://github.com/symfony/flex) when installing or upgrading a PHP package. To prevent this behavior, ensure to **use at least Flex 1.22.0 or 2.5.0**, and run `composer config extra.symfony.flex.synchronize_package_json false`. - -## Resources - -- [Documentation](https://symfony.com/bundles/ux-toggle-password/current/index.html) -- [Report issues](https://github.com/symfony/ux/issues) and - [send Pull Requests](https://github.com/symfony/ux/pulls) - in the [main Symfony UX repository](https://github.com/symfony/ux) diff --git a/src/TogglePassword/assets/dist/controller.d.ts b/src/TogglePassword/assets/dist/controller.d.ts deleted file mode 100644 index 6d3c19074f4..00000000000 --- a/src/TogglePassword/assets/dist/controller.d.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { Controller } from '@hotwired/stimulus'; - -declare class export_default extends Controller { - readonly visibleLabelValue: string; - readonly visibleIconValue: string; - readonly hiddenLabelValue: string; - readonly hiddenIconValue: string; - readonly buttonClassesValue: Array; - static values: { - visibleLabel: { - type: StringConstructor; - default: string; - }; - visibleIcon: { - type: StringConstructor; - default: string; - }; - hiddenLabel: { - type: StringConstructor; - default: string; - }; - hiddenIcon: { - type: StringConstructor; - default: string; - }; - buttonClasses: ArrayConstructor; - }; - isDisplayed: boolean; - visibleIcon: string; - hiddenIcon: string; - connect(): void; - private createButton; - toggle(event: any): void; - private dispatchEvent; -} - -export { export_default as default }; diff --git a/src/TogglePassword/assets/dist/controller.js b/src/TogglePassword/assets/dist/controller.js deleted file mode 100644 index 5189067f6aa..00000000000 --- a/src/TogglePassword/assets/dist/controller.js +++ /dev/null @@ -1,62 +0,0 @@ -// src/controller.ts -import { Controller } from "@hotwired/stimulus"; -var controller_default = class extends Controller { - constructor() { - super(...arguments); - this.isDisplayed = false; - this.visibleIcon = ` - - -`; - this.hiddenIcon = ` - - -`; - } - connect() { - if (this.visibleIconValue !== "Default") { - this.visibleIcon = this.visibleIconValue; - } - if (this.hiddenIconValue !== "Default") { - this.hiddenIcon = this.hiddenIconValue; - } - const button = this.createButton(); - this.element.insertAdjacentElement("afterend", button); - this.dispatchEvent("connect", { element: this.element, button }); - } - /** - * @returns {HTMLButtonElement} - */ - createButton() { - const button = document.createElement("button"); - button.type = "button"; - button.classList.add(...this.buttonClassesValue); - button.setAttribute("tabindex", "-1"); - button.addEventListener("click", this.toggle.bind(this)); - button.innerHTML = `${this.visibleIcon} ${this.visibleLabelValue}`; - return button; - } - /** - * Toggle input type between "text" or "password" and update label accordingly - */ - toggle(event) { - this.isDisplayed = !this.isDisplayed; - const toggleButtonElement = event.currentTarget; - toggleButtonElement.innerHTML = this.isDisplayed ? `${this.hiddenIcon} ${this.hiddenLabelValue}` : `${this.visibleIcon} ${this.visibleLabelValue}`; - this.element.setAttribute("type", this.isDisplayed ? "text" : "password"); - this.dispatchEvent(this.isDisplayed ? "show" : "hide", { element: this.element, button: toggleButtonElement }); - } - dispatchEvent(name, payload) { - this.dispatch(name, { detail: payload, prefix: "toggle-password" }); - } -}; -controller_default.values = { - visibleLabel: { type: String, default: "Show" }, - visibleIcon: { type: String, default: "Default" }, - hiddenLabel: { type: String, default: "Hide" }, - hiddenIcon: { type: String, default: "Default" }, - buttonClasses: Array -}; -export { - controller_default as default -}; diff --git a/src/TogglePassword/assets/dist/style.min.css b/src/TogglePassword/assets/dist/style.min.css deleted file mode 100644 index 899c560e98f..00000000000 --- a/src/TogglePassword/assets/dist/style.min.css +++ /dev/null @@ -1 +0,0 @@ -.toggle-password-container{position:relative}.toggle-password-icon{width:1rem;height:1rem}.toggle-password-button{background-color:#0000;border:none;flex-direction:row;place-items:center;column-gap:.25rem;height:1rem;font-size:.875rem;line-height:1.25rem;display:flex;position:absolute;top:-1.25rem;right:.5rem} \ No newline at end of file diff --git a/src/TogglePassword/assets/package.json b/src/TogglePassword/assets/package.json deleted file mode 100644 index 8c7c392155a..00000000000 --- a/src/TogglePassword/assets/package.json +++ /dev/null @@ -1,56 +0,0 @@ -{ - "name": "@symfony/ux-toggle-password", - "description": "Toggle visibility of password inputs for Symfony Forms", - "license": "MIT", - "version": "2.29.1", - "keywords": [ - "symfony-ux" - ], - "homepage": "https://ux.symfony.com/toggle-password", - "repository": "https://github.com/symfony/ux-toggle-password", - "type": "module", - "files": [ - "dist" - ], - "main": "dist/controller.js", - "types": "dist/controller.d.ts", - "config": { - "css_source": "src/style.css" - }, - "scripts": { - "build": "tsx ../../../bin/build_package.ts .", - "watch": "tsx ../../../bin/build_package.ts . --watch", - "test": "../../../bin/test_package.sh .", - "check": "biome check", - "ci": "biome ci" - }, - "symfony": { - "controllers": { - "toggle-password": { - "main": "dist/controller.js", - "fetch": "eager", - "enabled": true, - "autoimport": { - "@symfony/ux-toggle-password/dist/style.min.css": true - } - } - }, - "importmap": { - "@hotwired/stimulus": "^3.0.0" - } - }, - "peerDependencies": { - "@hotwired/stimulus": "^3.0.0" - }, - "devDependencies": { - "@hotwired/stimulus": "^3.0.0", - "@testing-library/dom": "^10.4.0", - "@testing-library/jest-dom": "^6.6.3", - "@testing-library/user-event": "^14.6.1", - "jsdom": "^26.1.0", - "tslib": "^2.8.1", - "tsx": "^4.20.3", - "typescript": "^5.8.3", - "vitest": "^3.2.4" - } -} diff --git a/src/TogglePassword/assets/src/controller.ts b/src/TogglePassword/assets/src/controller.ts deleted file mode 100644 index 1f8ff6432f8..00000000000 --- a/src/TogglePassword/assets/src/controller.ts +++ /dev/null @@ -1,79 +0,0 @@ -/* - * This file is part of the Symfony package. - * - * (c) Fabien Potencier - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -import { Controller } from '@hotwired/stimulus'; - -export default class extends Controller { - declare readonly visibleLabelValue: string; - declare readonly visibleIconValue: string; - declare readonly hiddenLabelValue: string; - declare readonly hiddenIconValue: string; - declare readonly buttonClassesValue: Array; - - static values = { - visibleLabel: { type: String, default: 'Show' }, - visibleIcon: { type: String, default: 'Default' }, - hiddenLabel: { type: String, default: 'Hide' }, - hiddenIcon: { type: String, default: 'Default' }, - buttonClasses: Array, - }; - - isDisplayed = false; - visibleIcon = ` - - -`; - hiddenIcon = ` - - -`; - - connect() { - if (this.visibleIconValue !== 'Default') { - this.visibleIcon = this.visibleIconValue; - } - if (this.hiddenIconValue !== 'Default') { - this.hiddenIcon = this.hiddenIconValue; - } - const button = this.createButton(); - this.element.insertAdjacentElement('afterend', button); - this.dispatchEvent('connect', { element: this.element, button: button }); - } - - /** - * @returns {HTMLButtonElement} - */ - private createButton(): HTMLButtonElement { - const button: HTMLButtonElement = document.createElement('button'); - button.type = 'button'; - button.classList.add(...this.buttonClassesValue); - button.setAttribute('tabindex', '-1'); - button.addEventListener('click', this.toggle.bind(this)); - button.innerHTML = `${this.visibleIcon} ${this.visibleLabelValue}`; - - return button; - } - - /** - * Toggle input type between "text" or "password" and update label accordingly - */ - toggle(event: any): void { - this.isDisplayed = !this.isDisplayed; - const toggleButtonElement: HTMLButtonElement = event.currentTarget; - toggleButtonElement.innerHTML = this.isDisplayed - ? `${this.hiddenIcon} ${this.hiddenLabelValue}` - : `${this.visibleIcon} ${this.visibleLabelValue}`; - this.element.setAttribute('type', this.isDisplayed ? 'text' : 'password'); - this.dispatchEvent(this.isDisplayed ? 'show' : 'hide', { element: this.element, button: toggleButtonElement }); - } - - private dispatchEvent(name: string, payload: any): void { - this.dispatch(name, { detail: payload, prefix: 'toggle-password' }); - } -} diff --git a/src/TogglePassword/assets/src/style.css b/src/TogglePassword/assets/src/style.css deleted file mode 100644 index 7dff618ef5b..00000000000 --- a/src/TogglePassword/assets/src/style.css +++ /dev/null @@ -1,22 +0,0 @@ -.toggle-password-container { - position: relative; -} -.toggle-password-icon { - height: 1rem; - width: 1rem; -} -.toggle-password-button { - align-items: center; - background-color: transparent; - border: none; - column-gap: 0.25rem; - display: flex; - flex-direction: row; - font-size: 0.875rem; - justify-items: center; - height: 1rem; - line-height: 1.25rem; - position: absolute; - right: 0.5rem; - top: -1.25rem; -} diff --git a/src/TogglePassword/assets/test/controller.test.ts b/src/TogglePassword/assets/test/controller.test.ts deleted file mode 100644 index 8d1e0304f26..00000000000 --- a/src/TogglePassword/assets/test/controller.test.ts +++ /dev/null @@ -1,70 +0,0 @@ -/* - * This file is part of the Symfony package. - * - * (c) Fabien Potencier - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -import { Application, Controller } from '@hotwired/stimulus'; -import { getByTestId, getByText, waitFor } from '@testing-library/dom'; -import user from '@testing-library/user-event'; -import { afterEach, beforeEach, describe, expect, it } from 'vitest'; -import { clearDOM, mountDOM } from '../../../../test/stimulus-helpers'; -import TogglePasswordController from '../src/controller'; - -// Controller used to check the actual controller was properly booted -class CheckController extends Controller { - connect() { - this.element.addEventListener('toggle-password:connect', () => { - this.element.classList.add('connected'); - }); - } -} - -const startStimulus = () => { - const application = Application.start(); - application.register('check', CheckController); - application.register('toggle-password', TogglePasswordController); -}; - -describe('TogglePasswordController', () => { - let container: HTMLElement; - - beforeEach(() => { - container = mountDOM(` -
- -
- `); - startStimulus(); - }); - - afterEach(() => { - clearDOM(); - }); - - it('should toggle the input type', async () => { - const input = getByTestId(container, 'input'); - const button = getByText(container, 'Show'); - - expect(input.type).toBe('password'); - - user.click(button); - - await waitFor(() => { - expect(input.type).toBe('text'); - }); - - user.click(button); - - await waitFor(() => { - expect(input.type).toBe('password'); - }); - }); -}); diff --git a/src/TogglePassword/composer.json b/src/TogglePassword/composer.json deleted file mode 100644 index bfb4775e372..00000000000 --- a/src/TogglePassword/composer.json +++ /dev/null @@ -1,53 +0,0 @@ -{ - "name": "symfony/ux-toggle-password", - "type": "symfony-bundle", - "description": "Toggle visibility of password inputs for Symfony Forms", - "keywords": [ - "symfony-ux" - ], - "homepage": "https://symfony.com", - "license": "MIT", - "authors": [ - { - "name": "Félix Eymonot", - "email": "felix.eymonot@alximy.io" - }, - { - "name": "Symfony Community", - "homepage": "https://symfony.com/contributors" - } - ], - "autoload": { - "psr-4": { - "Symfony\\UX\\TogglePassword\\": "src/" - } - }, - "autoload-dev": { - "psr-4": { - "Symfony\\UX\\TogglePassword\\Tests\\": "tests/" - } - }, - "require": { - "php": ">=8.1", - "symfony/config": "^5.4|^6.0|^7.0|^8.0", - "symfony/dependency-injection": "^5.4|^6.0|^7.0|^8.0", - "symfony/form": "^5.4|^6.0|^7.0|^8.0", - "symfony/http-kernel": "^5.4|^6.0|^7.0|^8.0", - "symfony/options-resolver": "^5.4|^6.0|^7.0|^8.0", - "symfony/translation": "^5.4|^6.0|^7.0|^8.0" - }, - "require-dev": { - "symfony/framework-bundle": "^5.4|^6.0|^7.0|^8.0", - "symfony/phpunit-bridge": "^5.4|^6.0|^7.0|^8.0", - "symfony/twig-bundle": "^5.4|^6.0|^7.0|^8.0", - "symfony/var-dumper": "^5.4|^6.0|^7.0|^8.0", - "twig/twig": "^2.14.7|^3.0.4" - }, - "extra": { - "thanks": { - "name": "symfony/ux", - "url": "https://github.com/symfony/ux" - } - }, - "minimum-stability": "dev" -} diff --git a/src/TogglePassword/doc/index.rst b/src/TogglePassword/doc/index.rst deleted file mode 100644 index 97eef740491..00000000000 --- a/src/TogglePassword/doc/index.rst +++ /dev/null @@ -1,316 +0,0 @@ -Symfony UX TogglePassword -========================= - -.. warning:: - - **Deprecated: This package has been deprecated in 2.x and will be removed in the next major version.** - - To keep the same functionality in your Symfony application, please follow the migration steps - from the `Symfony UX TogglePassword README.md`_. - -Symfony UX TogglePassword is a Symfony bundle providing visibility toggle for password inputs -in Symfony Forms. It is part of `the Symfony UX initiative`_. - -It allows visitors to switch the type of password field to text and vice versa. - -.. image:: ux-toggle-password-animation.gif - :alt: Demo of an autocomplete-enabled select element - :align: center - :width: 260 - -Installation ------------- - -.. caution:: - - Before you start, make sure you have `StimulusBundle configured in your app`_. - -Install the bundle using Composer and Symfony Flex: - -.. code-block:: terminal - - $ composer require symfony/ux-toggle-password - -If you're using WebpackEncore, install your assets and restart Encore (not -needed if you're using AssetMapper): - -.. code-block:: terminal - - $ npm install --force - $ npm run watch - -.. note:: - - For more complex installation scenarios, you can install the JavaScript assets through the `@symfony/ux-toggle-password npm package`_ - -Usage with Symfony Forms ------------------------- - -Any ``PasswordType`` can be transformed into a toggle password field by adding the ``toggle`` option:: - - // ... - use Symfony\Component\Form\Extension\Core\Type\PasswordType; - - class CredentialFormType extends AbstractType - { - public function buildForm(FormBuilderInterface $builder, array $options): void - { - $builder - // ... - ->add('password', PasswordType::class, ['toggle' => true]) - // ... - ; - } - - // ... - } - -A custom form theme is activated by default, wrapping the widget in ``
``. -You can disable it by passing ``use_toggle_form_theme`` option to ``false``:: - - // ... - use Symfony\Component\Form\Extension\Core\Type\PasswordType; - - class CredentialFormType extends AbstractType - { - public function buildForm(FormBuilderInterface $builder, array $options): void - { - $builder - // ... - ->add('password', PasswordType::class, ['toggle' => true, 'use_toggle_form_theme' => false]) - // ... - ; - } - - // ... - } - -.. note:: - - *Note*: If you choose to disable provided package form theme, you will have to handle styling by yourself. - -.. _ux-password-customizing-labels-and-icons: - -Customizing Labels and Icons -~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - -The field uses the words "Show" and "Hide" by default and SVG icons from `Heroicons`_ for the toggle button. -You can customize them by passing ``hidden_label``, ``visible_label``, ``hidden_icon`` and ``visible_icon`` options -to the field (use ``null`` to disable label or icon):: - - // ... - use Symfony\Component\Form\Extension\Core\Type\PasswordType; - - class CredentialFormType extends AbstractType - { - public function buildForm(FormBuilderInterface $builder, array $options): void - { - $builder - // ... - ->add('password', PasswordType::class, [ - 'toggle' => true, - 'hidden_label' => 'Masquer', - 'visible_label' => 'Afficher', - 'visible_icon' => null, - 'hidden_icon' => null, - ]) - // ... - ; - } - - // ... - } - - -.. note:: - - *Note*: Translation is supported for both label options. - You can either use a translation key string (and provide a translation domain with the ``toggle_translation_domain`` option) - or a ``Symfony\Component\Translation\TranslatableMessage`` object. - Passing ``false`` to the ``toggle_translation_domain`` option will disable translation for the labels. - -Customizing the Design -~~~~~~~~~~~~~~~~~~~~~~ - -The package provides a default stylesheet in order to ease -usage. You can disable it to add your own design if you wish. - -In ``assets/controllers.json``, disable the default stylesheet by -switching the ``@symfony/ux-toggle-password/dist/style.min.css`` autoimport to -``false``: - -.. code-block:: json - - { - "controllers": { - "@symfony/ux-toggle-password": { - "toggle-password": { - "enabled": true, - "fetch": "eager", - "autoimport": { - "@symfony/ux-toggle-password/dist/style.min.css": false - } - } - } - }, - "entrypoints": [] - } - -.. note:: - - *Note*: you should put the value to ``false`` and not remove the line - so that Symfony Flex won't try to add the line again in the future. - -Once done, the default stylesheet won't be used anymore and you can -implement your own CSS on top of the TogglePassword. - -You can also only customize specific TogglePassword elements by overriding the default classes. -Add your custom class name(s) using the ``button_classes`` option for the toggle element. -A ``toggle_container_classes`` option is also available to customize the container form theme element:: - - // ... - use Symfony\Component\Form\Extension\Core\Type\PasswordType; - - class CredentialFormType extends AbstractType - { - public function buildForm(FormBuilderInterface $builder, array $options): void - { - $builder - // ... - ->add('password', PasswordType::class, [ - 'toggle' => true, - 'button_classes' => ['btn', 'primary', 'my-custom-class'], - 'toggle_container_classes' => ['input-group-text', 'my-custom-container'], - ]) - // ... - ; - } - - // ... - } - -Extend the Default Behavior -~~~~~~~~~~~~~~~~~~~~~~~~~~~ - -If you need additional control from JavaScript, you can leverage a few events dispatched by this package: - -.. code-block:: javascript - - // assets/controllers/my-toggle-password_controller.js - - import { Controller } from '@hotwired/stimulus'; - - export default class extends Controller { - connect() { - this.element.addEventListener('toggle-password:connect', this._onConnect); - this.element.addEventListener('toggle-password:show', this._onShow); - this.element.addEventListener('toggle-password:hide', this._onHide); - } - - disconnect() { - // You should always remove listeners when the controller is disconnected to avoid side-effects - this.element.removeEventListener('toggle-password:connect', this._onConnect); - this.element.removeEventListener('toggle-password:show', this._onShow); - this.element.removeEventListener('toggle-password:hide', this._onHide); - } - - _onConnect(event) { - // The TogglePassword was just created. - // You can for example add custom attributes to the toggle element - const toggle = event.detail.button; - toggle.dataset.customProperty = 'my-custom-value'; - - // Or add a custom class to the input element - const input = event.detail.element; - input.classList.add('my-custom-class'); - } - - _onShow(event) { - // The TogglePassword input has just been toggled for text type. - // You can for example add custom attributes to the toggle element - const toggle = event.detail.button; - toggle.dataset.visible = true; - - // Or add a custom class to the input element - const input = event.detail.element; - input.classList.add('my-custom-class'); - } - - _onHide(event) { - // The TogglePassword input has just been toggled for password type. - // You can for example update custom attributes to the toggle element - const toggle = event.detail.button; - delete toggle.dataset.visible; - - // Or remove a custom class to the input element - const input = event.detail.element; - input.classList.remove('my-custom-class'); - } - } - -Then in your form, add your controller as an HTML attribute:: - - // ... - use Symfony\Component\Form\Extension\Core\Type\PasswordType; - - class CredentialFormType extends AbstractType - { - public function buildForm(FormBuilderInterface $builder, array $options): void - { - $builder - // ... - ->add('password', PasswordType::class, [ - 'toggle' => true, - 'attr' => ['data-controller' => 'my-toggle-password'], - ]) - // ... - ; - } - - // ... - } - -Usage without Symfony Forms ---------------------------- - -You can also use the TogglePassword with native HTML inputs. Inside the ``stimulus_controller()`` -function you can use the same :ref:`options to customize labels and icons ` -shown in previous sections: - -.. code-block:: html+twig - - {# ... #} - - {# add "toggle-password-container" or a class that applies "position: relative" to this container #} -
- - -
- - {# ... #} - -Backward Compatibility promise ------------------------------- - -This bundle aims at following the same Backward Compatibility promise as -the Symfony framework: -https://symfony.com/doc/current/contributing/code/bc.html - -.. _`the Symfony UX initiative`: https://ux.symfony.com/ -.. _StimulusBundle configured in your app: https://symfony.com/bundles/StimulusBundle/current/index.html -.. _Heroicons: https://heroicons.com/ -.. _`@symfony/ux-toggle-password npm package`: https://www.npmjs.com/package/@symfony/ux-toggle-password -.. _`Symfony UX TogglePassword README.md`: https://github.com/symfony/ux/tree/2.x/src/TogglePassword/README.md diff --git a/src/TogglePassword/doc/ux-toggle-password-animation.gif b/src/TogglePassword/doc/ux-toggle-password-animation.gif deleted file mode 100644 index d6c9141bf6d..00000000000 Binary files a/src/TogglePassword/doc/ux-toggle-password-animation.gif and /dev/null differ diff --git a/src/TogglePassword/phpunit.xml.dist b/src/TogglePassword/phpunit.xml.dist deleted file mode 100644 index 77cf27958b1..00000000000 --- a/src/TogglePassword/phpunit.xml.dist +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - ./tests - - - - - - ./src - - - - - - - diff --git a/src/TogglePassword/src/DependencyInjection/TogglePasswordExtension.php b/src/TogglePassword/src/DependencyInjection/TogglePasswordExtension.php deleted file mode 100644 index c88e4ea7ccb..00000000000 --- a/src/TogglePassword/src/DependencyInjection/TogglePasswordExtension.php +++ /dev/null @@ -1,76 +0,0 @@ - - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -namespace Symfony\UX\TogglePassword\DependencyInjection; - -use Symfony\Component\AssetMapper\AssetMapperInterface; -use Symfony\Component\DependencyInjection\ContainerBuilder; -use Symfony\Component\DependencyInjection\ContainerInterface; -use Symfony\Component\DependencyInjection\Definition; -use Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface; -use Symfony\Component\DependencyInjection\Reference; -use Symfony\Component\HttpKernel\DependencyInjection\Extension; -use Symfony\UX\TogglePassword\Form\TogglePasswordTypeExtension; - -trigger_deprecation('symfony/ux-toggle-password', '2.29.0', 'The package is deprecated and will be removed in 3.0. Follow the migration steps in https://github.com/symfony/ux/tree/2.x/src/TogglePassword to keep using TogglePassword in your Symfony application.'); - -/** - * @author Félix Eymonot - */ -final class TogglePasswordExtension extends Extension implements PrependExtensionInterface -{ - public function prepend(ContainerBuilder $container): void - { - // Register the TogglePassword form theme if TwigBundle is available - $bundles = $container->getParameter('kernel.bundles'); - - if (isset($bundles['TwigBundle'])) { - $container->prependExtensionConfig('twig', ['form_themes' => ['@TogglePassword/form_theme.html.twig']]); - } - - if ($this->isAssetMapperAvailable($container)) { - $container->prependExtensionConfig('framework', [ - 'asset_mapper' => [ - 'paths' => [ - __DIR__.'/../../assets/dist' => '@symfony/ux-toggle-password', - ], - ], - ]); - } - } - - public function load(array $configs, ContainerBuilder $container): void - { - $container - ->setDefinition('form.extension.toggle_password', new Definition(TogglePasswordTypeExtension::class)) - ->setArguments([ - new Reference('translator', ContainerInterface::IGNORE_ON_INVALID_REFERENCE), - ]) - ->addTag('form.type_extension') - ->setPublic(false) - ; - } - - private function isAssetMapperAvailable(ContainerBuilder $container): bool - { - if (!interface_exists(AssetMapperInterface::class)) { - return false; - } - - // check that FrameworkBundle 6.3 or higher is installed - $bundlesMetadata = $container->getParameter('kernel.bundles_metadata'); - if (!isset($bundlesMetadata['FrameworkBundle'])) { - return false; - } - - return is_file($bundlesMetadata['FrameworkBundle']['path'].'/Resources/config/asset_mapper.php'); - } -} diff --git a/src/TogglePassword/src/Form/TogglePasswordTypeExtension.php b/src/TogglePassword/src/Form/TogglePasswordTypeExtension.php deleted file mode 100644 index a78679bd1d7..00000000000 --- a/src/TogglePassword/src/Form/TogglePasswordTypeExtension.php +++ /dev/null @@ -1,115 +0,0 @@ - - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -namespace Symfony\UX\TogglePassword\Form; - -use Symfony\Component\Form\AbstractTypeExtension; -use Symfony\Component\Form\Extension\Core\Type\PasswordType; -use Symfony\Component\Form\FormInterface; -use Symfony\Component\Form\FormView; -use Symfony\Component\OptionsResolver\Options; -use Symfony\Component\OptionsResolver\OptionsResolver; -use Symfony\Component\Translation\TranslatableMessage; -use Symfony\Contracts\Translation\TranslatorInterface; - -trigger_deprecation('symfony/ux-toggle-password', '2.29.0', 'The package is deprecated and will be removed in 3.0. Follow the migration steps in https://github.com/symfony/ux/tree/2.x/src/TogglePassword to keep using TogglePassword in your Symfony application.'); - -/** - * @author Félix Eymonot - */ -final class TogglePasswordTypeExtension extends AbstractTypeExtension -{ - public function __construct(private readonly ?TranslatorInterface $translator) - { - } - - public static function getExtendedTypes(): iterable - { - return [PasswordType::class]; - } - - public function configureOptions(OptionsResolver $resolver): void - { - $resolver->setDefaults([ - 'toggle' => false, - 'hidden_label' => 'Hide', - 'visible_label' => 'Show', - 'hidden_icon' => 'Default', - 'visible_icon' => 'Default', - 'button_classes' => ['toggle-password-button'], - 'toggle_container_classes' => ['toggle-password-container'], - 'toggle_translation_domain' => null, - 'use_toggle_form_theme' => true, - ]); - - $resolver->setNormalizer( - 'toggle_translation_domain', - static fn (Options $options, $labelTranslationDomain) => $labelTranslationDomain ?? $options['translation_domain'], - ); - - $resolver->setAllowedTypes('toggle', ['bool']); - $resolver->setAllowedTypes('hidden_label', ['string', TranslatableMessage::class, 'null']); - $resolver->setAllowedTypes('visible_label', ['string', TranslatableMessage::class, 'null']); - $resolver->setAllowedTypes('hidden_icon', ['string', 'null']); - $resolver->setAllowedTypes('visible_icon', ['string', 'null']); - $resolver->setAllowedTypes('button_classes', ['string[]']); - $resolver->setAllowedTypes('toggle_container_classes', ['string[]']); - $resolver->setAllowedTypes('toggle_translation_domain', ['string', 'bool', 'null']); - $resolver->setAllowedTypes('use_toggle_form_theme', ['bool']); - } - - public function buildView(FormView $view, FormInterface $form, array $options): void - { - $view->vars['toggle'] = $options['toggle']; - - if (!$options['toggle']) { - return; - } - - if ($options['use_toggle_form_theme']) { - array_splice($view->vars['block_prefixes'], -1, 0, 'ux_toggle_password'); - } - - $controllerName = 'symfony--ux-toggle-password--toggle-password'; - $view->vars['attr']['data-controller'] = trim(\sprintf('%s %s', $view->vars['attr']['data-controller'] ?? '', $controllerName)); - - if (false !== $options['toggle_translation_domain']) { - $controllerValues['hidden-label'] = $this->translateLabel($options['hidden_label'], $options['toggle_translation_domain']); - $controllerValues['visible-label'] = $this->translateLabel($options['visible_label'], $options['toggle_translation_domain']); - } else { - $controllerValues['hidden-label'] = $options['hidden_label']; - $controllerValues['visible-label'] = $options['visible_label']; - } - - $controllerValues['hidden-icon'] = $options['hidden_icon']; - $controllerValues['visible-icon'] = $options['visible_icon']; - $controllerValues['button-classes'] = json_encode($options['button_classes'], \JSON_THROW_ON_ERROR); - - foreach ($controllerValues as $name => $value) { - $view->vars['attr'][\sprintf('data-%s-%s-value', $controllerName, $name)] = $value; - } - - $view->vars['toggle_container_classes'] = $options['toggle_container_classes']; - } - - private function translateLabel(string|TranslatableMessage|null $label, ?string $translationDomain): ?string - { - if (null === $this->translator || null === $label) { - return $label; - } - - if ($label instanceof TranslatableMessage) { - return $label->trans($this->translator); - } - - return $this->translator->trans($label, domain: $translationDomain); - } -} diff --git a/src/TogglePassword/src/TogglePasswordBundle.php b/src/TogglePassword/src/TogglePasswordBundle.php deleted file mode 100644 index fbfb00ede56..00000000000 --- a/src/TogglePassword/src/TogglePasswordBundle.php +++ /dev/null @@ -1,27 +0,0 @@ - - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -namespace Symfony\UX\TogglePassword; - -use Symfony\Component\HttpKernel\Bundle\Bundle; - -trigger_deprecation('symfony/ux-toggle-password', '2.29.0', 'The package is deprecated and will be removed in 3.0. Follow the migration steps in https://github.com/symfony/ux/tree/2.x/src/TogglePassword to keep using TogglePassword in your Symfony application.'); - -/** - * @author Félix Eymonot - */ -final class TogglePasswordBundle extends Bundle -{ - public function getPath(): string - { - return \dirname(__DIR__); - } -} diff --git a/src/TogglePassword/templates/form_theme.html.twig b/src/TogglePassword/templates/form_theme.html.twig deleted file mode 100644 index df54c5a0f1c..00000000000 --- a/src/TogglePassword/templates/form_theme.html.twig +++ /dev/null @@ -1,3 +0,0 @@ -{%- block ux_toggle_password_widget -%} -
{{ block('password_widget') }}
-{%- endblock ux_toggle_password_widget -%} diff --git a/src/TogglePassword/tests/Form/TogglePasswordTypeTest.php b/src/TogglePassword/tests/Form/TogglePasswordTypeTest.php deleted file mode 100644 index a691befb006..00000000000 --- a/src/TogglePassword/tests/Form/TogglePasswordTypeTest.php +++ /dev/null @@ -1,55 +0,0 @@ - - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -namespace Symfony\UX\TogglePassword\Tests; - -use PHPUnit\Framework\TestCase; -use Symfony\Component\Form\Extension\Core\Type\PasswordType; -use Symfony\Component\Form\FormFactoryInterface; -use Symfony\UX\TogglePassword\Tests\Kernel\TwigAppKernel; -use Twig\Environment; - -class TogglePasswordTypeTest extends TestCase -{ - public function testRenderFormWithToggle() - { - $container = $this->givenServiceContainer(); - $form = $container->get(FormFactoryInterface::class)->createBuilder() - ->add('password', PasswordType::class, ['toggle' => true]) - ->getForm() - ; - - $rendered = $container->get(Environment::class)->render('toggle_password_form.html.twig', ['form' => $form->createView()]); - - self::assertStringContainsString('
givenServiceContainer(); - $form = $container->get(FormFactoryInterface::class)->createBuilder() - ->add('password', PasswordType::class) - ->getForm() - ; - - $rendered = $container->get(Environment::class)->render('toggle_password_form.html.twig', ['form' => $form->createView()]); - - self::assertStringContainsString('boot(); - - return $kernel->getContainer()->get('test.service_container'); - } -} diff --git a/src/TogglePassword/tests/Kernel/TwigAppKernel.php b/src/TogglePassword/tests/Kernel/TwigAppKernel.php deleted file mode 100644 index b3418764246..00000000000 --- a/src/TogglePassword/tests/Kernel/TwigAppKernel.php +++ /dev/null @@ -1,84 +0,0 @@ - - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -namespace Symfony\UX\TogglePassword\Tests\Kernel; - -use Symfony\Bundle\FrameworkBundle\FrameworkBundle; -use Symfony\Bundle\TwigBundle\TwigBundle; -use Symfony\Component\Config\Loader\LoaderInterface; -use Symfony\Component\DependencyInjection\Alias; -use Symfony\Component\DependencyInjection\ContainerBuilder; -use Symfony\Component\Form\FormFactoryInterface; -use Symfony\Component\HttpKernel\Kernel; -use Symfony\UX\TogglePassword\TogglePasswordBundle; - -/** - * @author Félix Eymonot - * - * @internal - */ -class TwigAppKernel extends Kernel -{ - public function registerBundles(): iterable - { - return [new FrameworkBundle(), new TwigBundle(), new TogglePasswordBundle()]; - } - - public function registerContainerConfiguration(LoaderInterface $loader): void - { - $loader->load(function (ContainerBuilder $container) { - $frameworkConfig = [ - 'secret' => '$ecret', - 'test' => true, - 'http_method_override' => false, - 'php_errors' => [ - 'log' => true, - ], - ]; - - if (self::VERSION_ID >= 60200) { - $frameworkConfig['handle_all_throwables'] = true; - } - - $container->loadFromExtension('framework', $frameworkConfig); - $container->loadFromExtension('twig', [ - 'default_path' => __DIR__.'/templates', - 'strict_variables' => true, - 'exception_controller' => null, - 'debug' => '%kernel.debug%', - ]); - - // create a public alias - FormFactoryInterface is removed otherwise - $container->setAlias('public_form_factory', new Alias(FormFactoryInterface::class, true)); - }); - } - - public function getCacheDir(): string - { - return $this->createTmpDir('cache'); - } - - public function getLogDir(): string - { - return $this->createTmpDir('logs'); - } - - private function createTmpDir(string $type): string - { - $dir = sys_get_temp_dir().'/toggle_password_bundle/'.uniqid($type.'_', true); - - if (!file_exists($dir)) { - mkdir($dir, 0777, true); - } - - return $dir; - } -} diff --git a/src/TogglePassword/tests/Kernel/templates/toggle_password_form.html.twig b/src/TogglePassword/tests/Kernel/templates/toggle_password_form.html.twig deleted file mode 100644 index 0c1a4cef1e3..00000000000 --- a/src/TogglePassword/tests/Kernel/templates/toggle_password_form.html.twig +++ /dev/null @@ -1 +0,0 @@ -{{ form(form) }} diff --git a/src/TogglePassword/tests/TogglePasswordBundleTest.php b/src/TogglePassword/tests/TogglePasswordBundleTest.php deleted file mode 100644 index f41eb5008e4..00000000000 --- a/src/TogglePassword/tests/TogglePasswordBundleTest.php +++ /dev/null @@ -1,40 +0,0 @@ - - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -namespace Symfony\UX\tests; - -use PHPUnit\Framework\TestCase; -use Symfony\UX\TogglePassword\Tests\Kernel\TwigAppKernel; - -/** - * @author Félix Eymonot - * - * @internal - */ -class TogglePasswordBundleTest extends TestCase -{ - public function testBootKernel() - { - $kernel = new TwigAppKernel('test', true); - $kernel->boot(); - $this->assertArrayHasKey('TogglePasswordBundle', $kernel->getBundles()); - } - - public function testFormThemeMerging() - { - $kernel = new TwigAppKernel('test', true); - $kernel->boot(); - $this->assertEquals([ - 'form_div_layout.html.twig', - '@TogglePassword/form_theme.html.twig', - ], $kernel->getContainer()->getParameter('twig.form.resources')); - } -} diff --git a/src/TogglePassword/tests/baseline-ignore b/src/TogglePassword/tests/baseline-ignore deleted file mode 100644 index 3321cdbc818..00000000000 --- a/src/TogglePassword/tests/baseline-ignore +++ /dev/null @@ -1 +0,0 @@ -%Since symfony/ux-toggle-password 2\.29\.0: The package is deprecated and will be removed in 3\.0\.% diff --git a/test_apps/encore-app/assets/controllers.json b/test_apps/encore-app/assets/controllers.json index 0775439e387..1c701a790b8 100644 --- a/test_apps/encore-app/assets/controllers.json +++ b/test_apps/encore-app/assets/controllers.json @@ -75,15 +75,6 @@ "fetch": "eager" } }, - "@symfony/ux-toggle-password": { - "toggle-password": { - "enabled": true, - "fetch": "eager", - "autoimport": { - "@symfony/ux-toggle-password/dist/style.min.css": true - } - } - }, "@symfony/ux-turbo": { "turbo-core": { "enabled": true, diff --git a/test_apps/encore-app/composer.json b/test_apps/encore-app/composer.json index e7983dfb810..a4f810fcc36 100644 --- a/test_apps/encore-app/composer.json +++ b/test_apps/encore-app/composer.json @@ -25,7 +25,6 @@ "symfony/ux-notify": "^2.23", "symfony/ux-react": "^2.23", "symfony/ux-svelte": "^2.23", - "symfony/ux-toggle-password": "^2.23", "symfony/ux-translator": "^2.23", "symfony/ux-turbo": "^2.23", "symfony/ux-twig-component": "^2.23", diff --git a/test_apps/encore-app/config/bundles.php b/test_apps/encore-app/config/bundles.php index b59fe04beac..bb20681876b 100644 --- a/test_apps/encore-app/config/bundles.php +++ b/test_apps/encore-app/config/bundles.php @@ -17,7 +17,6 @@ Symfony\UX\Notify\NotifyBundle::class => ['all' => true], Symfony\UX\React\ReactBundle::class => ['all' => true], Symfony\UX\Svelte\SvelteBundle::class => ['all' => true], - Symfony\UX\TogglePassword\TogglePasswordBundle::class => ['all' => true], Symfony\UX\Translator\UxTranslatorBundle::class => ['all' => true], Symfony\UX\Turbo\TurboBundle::class => ['all' => true], Symfony\UX\Vue\VueBundle::class => ['all' => true], diff --git a/test_apps/encore-app/package.json b/test_apps/encore-app/package.json index 2b5df016125..92cc37f9059 100644 --- a/test_apps/encore-app/package.json +++ b/test_apps/encore-app/package.json @@ -17,7 +17,6 @@ "@symfony/ux-notify": "file:vendor/symfony/ux-notify/assets", "@symfony/ux-react": "file:vendor/symfony/ux-react/assets", "@symfony/ux-svelte": "file:vendor/symfony/ux-svelte/assets", - "@symfony/ux-toggle-password": "file:vendor/symfony/ux-toggle-password/assets", "@symfony/ux-translator": "file:vendor/symfony/ux-translator/assets", "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets", "@symfony/ux-vue": "file:vendor/symfony/ux-vue/assets", diff --git a/test_apps/encore-app/symfony.lock b/test_apps/encore-app/symfony.lock index 5777c13c81c..d9edc409210 100644 --- a/test_apps/encore-app/symfony.lock +++ b/test_apps/encore-app/symfony.lock @@ -244,9 +244,6 @@ "assets/svelte/controllers/Hello.svelte" ] }, - "symfony/ux-toggle-password": { - "version": "v2.23.0" - }, "symfony/ux-translator": { "version": "2.23", "recipe": { diff --git a/ux.symfony.com/assets/controllers.json b/ux.symfony.com/assets/controllers.json index dbbf6d8bd05..1b0f05cdb29 100644 --- a/ux.symfony.com/assets/controllers.json +++ b/ux.symfony.com/assets/controllers.json @@ -69,15 +69,6 @@ "fetch": "lazy" } }, - "@symfony/ux-toggle-password": { - "toggle-password": { - "enabled": true, - "fetch": "lazy", - "autoimport": { - "@symfony/ux-toggle-password/dist/style.min.css": true - } - } - }, "@symfony/ux-turbo": { "turbo-core": { "enabled": true, diff --git a/ux.symfony.com/composer.json b/ux.symfony.com/composer.json index 0e5dbf72d1d..a85fa859e38 100644 --- a/ux.symfony.com/composer.json +++ b/ux.symfony.com/composer.json @@ -43,7 +43,6 @@ "symfony/ux-notify": "2.x-dev", "symfony/ux-react": "2.x-dev", "symfony/ux-svelte": "2.x-dev", - "symfony/ux-toggle-password": "2.x-dev", "symfony/ux-toolkit": "2.x-dev", "symfony/ux-translator": "2.x-dev", "symfony/ux-turbo": "2.x-dev", diff --git a/ux.symfony.com/composer.lock b/ux.symfony.com/composer.lock index 635723da7f0..7a8c6ff7d79 100644 --- a/ux.symfony.com/composer.lock +++ b/ux.symfony.com/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "4c9bd0c5310dbd85e389042d3ab65e44", + "content-hash": "f6ba34d07508985aea5f8c9d9c53341d", "packages": [ { "name": "composer/semver", @@ -8160,87 +8160,6 @@ ], "time": "2024-12-05T14:25:02+00:00" }, - { - "name": "symfony/ux-toggle-password", - "version": "2.x-dev", - "source": { - "type": "git", - "url": "https://github.com/symfony/ux-toggle-password.git", - "reference": "ed8ec4139f0d64125eb682af8f54a518bf182151" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/symfony/ux-toggle-password/zipball/ed8ec4139f0d64125eb682af8f54a518bf182151", - "reference": "ed8ec4139f0d64125eb682af8f54a518bf182151", - "shasum": "" - }, - "require": { - "php": ">=8.1", - "symfony/config": "^5.4|^6.0|^7.0", - "symfony/dependency-injection": "^5.4|^6.0|^7.0", - "symfony/form": "^5.4|^6.0|^7.0", - "symfony/http-kernel": "^5.4|^6.0|^7.0", - "symfony/options-resolver": "^5.4|^6.0|^7.0", - "symfony/translation": "^5.4|^6.0|^7.0" - }, - "require-dev": { - "symfony/framework-bundle": "^5.4|^6.0|^7.0", - "symfony/phpunit-bridge": "^5.4|^6.0|^7.0", - "symfony/twig-bundle": "^5.4|^6.0|^7.0", - "symfony/var-dumper": "^5.4|^6.0|^7.0", - "twig/twig": "^2.14.7|^3.0.4" - }, - "default-branch": true, - "type": "symfony-bundle", - "extra": { - "thanks": { - "url": "https://github.com/symfony/ux", - "name": "symfony/ux" - } - }, - "autoload": { - "psr-4": { - "Symfony\\UX\\TogglePassword\\": "src/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Félix Eymonot", - "email": "felix.eymonot@alximy.io" - }, - { - "name": "Symfony Community", - "homepage": "https://symfony.com/contributors" - } - ], - "description": "Toggle visibility of password inputs for Symfony Forms", - "homepage": "https://symfony.com", - "keywords": [ - "symfony-ux" - ], - "support": { - "source": "https://github.com/symfony/ux-toggle-password/tree/v2.22.1" - }, - "funding": [ - { - "url": "https://symfony.com/sponsor", - "type": "custom" - }, - { - "url": "https://github.com/fabpot", - "type": "github" - }, - { - "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", - "type": "tidelift" - } - ], - "time": "2024-12-05T16:05:57+00:00" - }, { "name": "symfony/ux-toolkit", "version": "2.x-dev", @@ -12670,7 +12589,6 @@ "symfony/ux-notify": 20, "symfony/ux-react": 20, "symfony/ux-svelte": 20, - "symfony/ux-toggle-password": 20, "symfony/ux-toolkit": 20, "symfony/ux-translator": 20, "symfony/ux-turbo": 20, diff --git a/ux.symfony.com/config/bundles.php b/ux.symfony.com/config/bundles.php index 08e457db97b..3d2794345b6 100644 --- a/ux.symfony.com/config/bundles.php +++ b/ux.symfony.com/config/bundles.php @@ -25,7 +25,6 @@ Symfony\UX\Translator\UxTranslatorBundle::class => ['all' => true], Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true], Zenstruck\Foundry\ZenstruckFoundryBundle::class => ['dev' => true, 'test' => true], - Symfony\UX\TogglePassword\TogglePasswordBundle::class => ['all' => true], Symfonycasts\SassBundle\SymfonycastsSassBundle::class => ['all' => true], Symfony\UX\Icons\UXIconsBundle::class => ['all' => true], Symfony\UX\Map\UXMapBundle::class => ['all' => true], diff --git a/ux.symfony.com/src/Controller/UxPackage/TogglePasswordController.php b/ux.symfony.com/src/Controller/UxPackage/TogglePasswordController.php index 5235372d55f..c5ad055e422 100644 --- a/ux.symfony.com/src/Controller/UxPackage/TogglePasswordController.php +++ b/ux.symfony.com/src/Controller/UxPackage/TogglePasswordController.php @@ -11,7 +11,6 @@ namespace App\Controller\UxPackage; -use App\Form\TogglePasswordForm; use App\Service\UxPackageRepository; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\HttpFoundation\Response; @@ -26,7 +25,6 @@ public function __invoke(UxPackageRepository $packageRepository): Response return $this->render('ux_packages/toggle_password.html.twig', [ 'package' => $package, - 'form' => $this->createForm(TogglePasswordForm::class), ]); } } diff --git a/ux.symfony.com/src/Form/TogglePasswordForm.php b/ux.symfony.com/src/Form/TogglePasswordForm.php deleted file mode 100644 index 71fa6134d3c..00000000000 --- a/ux.symfony.com/src/Form/TogglePasswordForm.php +++ /dev/null @@ -1,30 +0,0 @@ - - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -namespace App\Form; - -use Symfony\Component\Form\AbstractType; -use Symfony\Component\Form\Extension\Core\Type\EmailType; -use Symfony\Component\Form\Extension\Core\Type\PasswordType; -use Symfony\Component\Form\FormBuilderInterface; - -class TogglePasswordForm extends AbstractType -{ - public function buildForm(FormBuilderInterface $builder, array $options): void - { - $builder - ->add('email', EmailType::class) - ->add('password', PasswordType::class, [ - 'toggle' => true, - ]) - ; - } -} diff --git a/ux.symfony.com/src/Service/UxPackageRepository.php b/ux.symfony.com/src/Service/UxPackageRepository.php index 0ef5d020737..d9f1faa3b74 100644 --- a/ux.symfony.com/src/Service/UxPackageRepository.php +++ b/ux.symfony.com/src/Service/UxPackageRepository.php @@ -231,6 +231,7 @@ public function findAll(?string $query = null, ?bool $deprecated = null): array 'linear-gradient(142deg, #FD963C -15%, #BE0404 95%)', 'Password Visibility Switch', 'Switch the visibility of a password field', + isDeprecated: true, ), new UxPackage( diff --git a/ux.symfony.com/symfony.lock b/ux.symfony.com/symfony.lock index 2452f2c8350..164ca69a186 100644 --- a/ux.symfony.com/symfony.lock +++ b/ux.symfony.com/symfony.lock @@ -602,9 +602,6 @@ "symfony/ux-svelte": { "version": "2.x-dev" }, - "symfony/ux-toggle-password": { - "version": "2.x-dev" - }, "symfony/ux-toolkit": { "version": "2.x-dev" }, diff --git a/ux.symfony.com/templates/ux_packages/toggle_password.html.twig b/ux.symfony.com/templates/ux_packages/toggle_password.html.twig index 3b4ffaad537..aaa8494e18a 100644 --- a/ux.symfony.com/templates/ux_packages/toggle_password.html.twig +++ b/ux.symfony.com/templates/ux_packages/toggle_password.html.twig @@ -1,37 +1,58 @@ -{% extends 'ux_packages/package.html.twig' %} +{% extends 'base.html.twig' %} -{% block package_header %} - {% component PackageHeader with { - package: 'toggle-password', - eyebrowText: 'Switch between password & text' - } %} - {% block title_header %} - From password to text & vice versa - {% endblock %} +{% set meta = { + title: package.humanName ~ ' - Symfony UX 2', + description: package.description, + canonical: url(package.route), + social: { + title: package.tagline ~ ' - Symfony UX 2' ~ package.humanName|u.trimStart('UX '), + description: package.description|striptags, + image: { + url: absolute_url(asset(package.getSocialImage('1200x675'))), + type: 'image/png', + width: 1200, + height: 675, + alt: package.humanName ~ ' - Component Icon', + }, + } +} %} - {% block sub_content %} - Upgrade your password field to toggle between text and password. - {% endblock %} - {% endcomponent %} +{% block main %} +
+
+

Deprecated Package

+

UX TogglePassword 2.x

+

This component is deprecated and will not receive further updates.
+ Please follow the migration steps + if you want to keep using TogglePassword in your app.

+
+
{% endblock %} -{% block code_block_left %} - -{% endblock %} - -{% block code_block_right %} - -{% endblock %} - -{% block demo_title %}UX Toggle Password{% endblock %} - -{% block demo_content %} - {{ form_start(form) }} - {{ form_row(form.email) }} - {{ form_row(form.password) }} - - {{ form_end(form) }} +{% block stylesheets %} + {{ parent() }} + {% endblock %} diff --git a/ux.symfony.com/tests/baseline-ignore b/ux.symfony.com/tests/baseline-ignore index 3321cdbc818..e69de29bb2d 100644 --- a/ux.symfony.com/tests/baseline-ignore +++ b/ux.symfony.com/tests/baseline-ignore @@ -1 +0,0 @@ -%Since symfony/ux-toggle-password 2\.29\.0: The package is deprecated and will be removed in 3\.0\.%