8000 minor #1032 [TogglePassword] Add example page for ux.symfony.com (feymo) · symfony/ux@02ae73b · GitHub
[go: up one dir, main page]
Skip to content

Commit 02ae73b

Browse files
weaverryanweaverryan
committed
minor #1032 [TogglePassword] Add example page for ux.symfony.com (feymo)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [TogglePassword] Add example page for ux.symfony.com | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | Tickets | N/A | License | MIT This PR add the new TogglePassword component to ux.symfony.com with a minimalist example of what to expect "out of the box" 😄 (using default theme without any customization) ### Previews **Homepage card** ![image](https://github.com/symfony/ux/assets/60115888/8f572af9-163a-4977-9e57-5a9d8f441ec6) **TogglePassword page** ![image](https://github.com/symfony/ux/assets/60115888/e52c65ab-6aa8-44f4-aa13-185679bba4b8) Commits ------- 18e49a9 [TogglePassword] Add example page for ux.symfony.com
2 parents 8054617 + 18e49a9 commit 02ae73b

File tree

10 files changed

+173
-1
lines changed

10 files changed

+173
-1
lines changed

‎ux.symfony.com/assets/controllers.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,15 @@
7474
"fetch": "lazy"
7575
}
7676
},
77+
"@symfony/ux-toggle-password": {
78+
"toggle-password": {
79+
"enabled": true,
80+
"fetch": "eager",
81+
"autoimport": {
82+
"@symfony/ux-toggle-password/dist/style.min.css": true
83+
}
84+
}
85+
},
7786
"@symfony/ux-turbo": {
7887
"turbo-core": {
7988
"enabled": true,

‎ux.symfony.com/assets/images/toggle-password.png

1.22 KB
Loading

‎ux.symfony.com/composer.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"symfony/ux-react": "2.x-dev",
4242
"symfony/ux-svelte": "2.x-dev",
4343
"symfony/ux-swup": "2.x-dev",
44+
"symfony/ux-toggle-password": "@dev",
4445
"symfony/ux-translator": "2.x-dev",
4546
"symfony/ux-turbo": "2.x-dev",
4647
"symfony/ux-twig-component": "2.x-dev",

‎ux.symfony.com/composer.lock

Lines changed: 83 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ux.symfony.com/config/bundles.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,5 @@
2929
Symfony\UX\Typed\TypedBundle::class => ['all' => true],
3030
Symfony\UX\Swup\SwupBundle::class => ['all' => true],
3131
Zenstruck\Foundry\ZenstruckFoundryBundle::class => ['dev' => true, 'test' => true],
32+
Symfony\UX\TogglePassword\TogglePasswordBundle::class => ['all' => true],
3233
];

‎ux.symfony.com/src/Controller/UxPackagesController.php

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
use App\Entity\Food;
66
use App\Form\DropzoneForm;
77
use App\Form\TimeForAMealForm;
8+
use App\Form\TogglePasswordForm;
89
use App\Service\PackageRepository;
910
use Doctrine\Common\Collections\Collection;
1011
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
@@ -122,6 +123,14 @@ public function translator(): Response
122123
return $this->render('ux_packages/translator.html.twig');
123124
}
124125

126+
#[Route('/toggle-password', name: 'app_toggle_password')]
127+
public function togglePassword(): Response
128+
{
129+
return $this->render('ux_packages/toggle_password.html.twig', [
130+
'form' => $this->createForm(TogglePasswordForm::class),
131+
]);
132+
}
133+
125134
private function getDeliciousWord(): string
126135
{
127136
$words = ['delicious', 'scrumptious', 'mouth-watering', 'life-changing', 'world-beating', 'freshly-squeezed'];

‎ux.symfony.com/src/Form/TogglePasswordForm.php

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<?php
2+
3+
namespace App\Form;
4+
5+
use Symfony\Component\Form\AbstractType;
6+
use Symfony\Component\Form\Extension\Core\Type\EmailType;
7+
use Symfony\Component\Form\Extension\Core\Type\PasswordType;
8+
use Symfony\Component\Form\FormBuilderInterface;
9+
10+
class TogglePasswordForm extends AbstractType
11+
{
12+
public function buildForm(FormBuilderInterface $builder, array $options): void
13+
{
14+
$builder
15+
->add('email', EmailType::class)
16+
->add('password', PasswordType::class, [
17+
'toggle' => true,
18+
])
19+
;
20+
}
21+
}

‎ux.symfony.com/src/Service/PackageRepository.php

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,14 @@ public function findAll(string $query = null): array
134134
'Trigger native browser notifications from inside PHP',
135135
'I need to send browser notifications',
136136
),
137+
new Package(
138+
'toggle-password',
139+
'Toggle Password',
140+
'app_toggle_password',
141+
'linear-gradient(142.8deg, #FD963C -14.8%, #BE0404 95.43%)',
142+
'Switch the visibility of a password field',
143+
'I need to toggle the visibility of a password field',
144+
),
137145
(new Package(
138146
'typed',
139147
'Typed',

‎ux.symfony.com/symfony.lock

Original file line numberDiff line numberDiff line change
@@ -589,6 +589,9 @@
589589
"symfony/ux-swup": {
590590
"version": "v2.1.1"
591591
},
592+
"symfony/ux-toggle-password": {
593+
"version": "2.x-dev"
594+
},
592595
"symfony/ux-translator": {
593596
"version": "2.9999999",
594597
"recipe": {
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{% extends 'packageBase.html.twig' %}
2+
3+
{% block component_header %}
4+
{% component PackageHeader with {
5+
package: 'toggle-password',
6+
eyebrowText: 'Switch between password & text'
7+
} %}
8+
{% block title_header %}
9+
From password to text
10+
<span class="playfair ps-2">&amp; vice versa</span>
11+
{% endblock %}
12+
13+
{% block sub_content %}
14+
Upgrade your password field to toggle between text and password.
15+
{% endblock %}
16+
{% endcomponent %}
17+
{% endblock %}
18+
19+
{% block code_block_left %}
20+
<twig:CodeBlock filename="src/Form/TogglePasswordForm.php" />
21+
{% endblock %}
22+
23+
{% block code_block_right %}
24+
<twig:CodeBlock
25+
filename="templates/ux_packages/toggle_password.html.twig"
26+
targetTwigBlock="demo_content"
27+
/>
28+
{% endblock %}
29+
30+
{% block demo_title %}UX Toggle Password{% endblock %}
31+
32+
{% block demo_content %}
33+
{{ form_start(form) }}
34+
{{ form_row(form.email) }}
35+
{{ form_row(form.password) }}
36+
<button type="submit" class="btn btn-primary">Login</button>
37+
{{ form_end(form) }}
38+
{% endblock %}