fix(xml-editor): escape xml editor's content + restyle form sections to prevent overflowing

This commit is contained in:
Yassine Doghri 2022-01-23 16:53:23 +00:00
parent 99bb40b8bc
commit 588590bd2c
15 changed files with 32 additions and 26 deletions

View File

@ -16,13 +16,13 @@ class Section extends Component
public function render(): string public function render(): string
{ {
$subtitle = $this->subtitle === null ? '' : '<p class="text-sm clear-left text-skin-muted ' . $this->subtitleClass . '">' . $this->subtitle . '</p>'; $subtitle = $this->subtitle === null ? '' : '<p class="text-sm text-skin-muted ' . $this->subtitleClass . '">' . $this->subtitle . '</p>';
return <<<HTML return <<<HTML
<fieldset class="w-full p-8 bg-elevated border-3 border-subtle rounded-xl {$this->class}"> <fieldset class="w-full p-8 bg-elevated border-3 flex flex-col items-start border-subtle rounded-xl {$this->class}">
<Heading tagName="legend" class="float-left">{$this->title}</Heading> <Heading tagName="legend" class="float-left">{$this->title}</Heading>
{$subtitle} {$subtitle}
<div class="flex flex-col gap-4 py-4 clear-left">{$this->slot}</div> <div class="flex flex-col w-0 min-w-full gap-4 py-4">{$this->slot}</div>
</fieldset> </fieldset>
HTML; HTML;
} }

View File

@ -14,11 +14,17 @@ class XMLEditor extends FormComponent
'class' => 'textarea', 'class' => 'textarea',
]; ];
protected string $content = '';
public function setContent(string $value): void
{
$this->content = htmlspecialchars_decode($value);
}
public function render(): string public function render(): string
{ {
$content = $this->slot;
$this->attributes['slot'] = 'textarea'; $this->attributes['slot'] = 'textarea';
$textarea = form_textarea($this->attributes, $content); $textarea = form_textarea($this->attributes, $this->content);
return <<<HTML return <<<HTML
<xml-editor>{$textarea}</time-ago> <xml-editor>{$textarea}</time-ago>

View File

@ -26,7 +26,7 @@
<dt class="text-sm font-medium leading-5 text-skin-muted"> <dt class="text-sm font-medium leading-5 text-skin-muted">
<?= lang('User.form.permissions') ?> <?= lang('User.form.permissions') ?>
</dt> </dt>
<dd class="max-w-xl mt-1 text-sm leading-5"> <dd class="w-full max-w-xl mt-1 text-sm leading-5">
<?= implode(', ', $user->permissions) ?> <?= implode(', ', $user->permissions) ?>
</dd> </dd>
</div> </div>

View File

@ -11,7 +11,7 @@
<?= $this->section('content') ?> <?= $this->section('content') ?>
<form action="<?= route_to('episode-create', $podcast->id) ?>" method="POST" enctype="multipart/form-data" class="flex flex-col max-w-xl mt-6 gap-y-8"> <form action="<?= route_to('episode-create', $podcast->id) ?>" method="POST" enctype="multipart/form-data" class="flex flex-col w-full max-w-xl mt-6 gap-y-8">
<?= csrf_field() ?> <?= csrf_field() ?>
@ -53,14 +53,14 @@
<div class="flex flex-col gap-x-2 gap-y-4 md:flex-row"> <div class="flex flex-col gap-x-2 gap-y-4 md:flex-row">
<Forms.Field <Forms.Field
class="flex-1 w-0" class="flex-1 w-full"
name="season_number" name="season_number"
label="<?= lang('Episode.form.season_number') ?>" label="<?= lang('Episode.form.season_number') ?>"
type="number" type="number"
value="<?= $currentSeasonNumber ?>" value="<?= $currentSeasonNumber ?>"
/> />
<Forms.Field <Forms.Field
class="flex-1 w-0" class="flex-1 w-full"
name="episode_number" name="episode_number"
label="<?= lang('Episode.form.episode_number') ?>" label="<?= lang('Episode.form.episode_number') ?>"
type="number" type="number"

View File

@ -10,7 +10,7 @@
<?= $this->section('content') ?> <?= $this->section('content') ?>
<form action="<?= route_to('episode-delete', $podcast->id, $episode->id) ?>" method="POST" class="flex flex-col max-w-xl mx-auto"> <form action="<?= route_to('episode-delete', $podcast->id, $episode->id) ?>" method="POST" class="flex flex-col w-full max-w-xl mx-auto">
<?= csrf_field() ?> <?= csrf_field() ?>
<Alert variant="danger" glyph="alert" class="font-semibold"><?= lang('Episode.delete_form.disclaimer') ?></Alert> <Alert variant="danger" glyph="alert" class="font-semibold"><?= lang('Episode.delete_form.disclaimer') ?></Alert>

View File

@ -15,7 +15,7 @@
<?= $this->section('content') ?> <?= $this->section('content') ?>
<form id="episode-edit-form" action="<?= route_to('episode-edit', $podcast->id, $episode->id) ?>" method="POST" enctype="multipart/form-data" class="flex flex-col max-w-xl mt-6 gap-y-8"> <form id="episode-edit-form" action="<?= route_to('episode-edit', $podcast->id, $episode->id) ?>" method="POST" enctype="multipart/form-data" class="flex flex-col w-full max-w-xl mt-6 gap-y-8">
<?= csrf_field() ?> <?= csrf_field() ?>
@ -57,14 +57,14 @@
<div class="flex flex-col gap-x-2 gap-y-4 md:flex-row"> <div class="flex flex-col gap-x-2 gap-y-4 md:flex-row">
<Forms.Field <Forms.Field
class="flex-1 w-0" class="flex-1 w-full"
name="season_number" name="season_number"
label="<?= lang('Episode.form.season_number') ?>" label="<?= lang('Episode.form.season_number') ?>"
type="number" type="number"
value="<?= $episode->season_number ?>" value="<?= $episode->season_number ?>"
/> />
<Forms.Field <Forms.Field
class="flex-1 w-0" class="flex-1 w-full"
name="episode_number" name="episode_number"
label="<?= lang('Episode.form.episode_number') ?>" label="<?= lang('Episode.form.episode_number') ?>"
type="number" type="number"
@ -267,7 +267,7 @@
name="custom_rss" name="custom_rss"
label="<?= lang('Episode.form.custom_rss') ?>" label="<?= lang('Episode.form.custom_rss') ?>"
hint="<?= lang('Episode.form.custom_rss_hint') ?>" hint="<?= lang('Episode.form.custom_rss_hint') ?>"
value="<?= $episode->custom_rss_string ?>" content="<?= esc($episode->custom_rss_string) ?>"
/> />
</Forms.Section> </Forms.Section>

View File

@ -24,7 +24,7 @@
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
<iframe name="embed" id="embed" class="w-full max-w-xl mt-6 h-36" frameborder="0" scrolling="no" style="width: 100%; overflow: hidden;" src="<?= $episode->embed_url ?>"></iframe> <iframe name="embed" id="embed" class="w-full max-w-xl mt-6 h-28" frameborder="0" scrolling="no" style="width: 100%; overflow: hidden;" src="<?= $episode->embed_url ?>"></iframe>
<div class="flex items-center mt-8 gap-x-2"> <div class="flex items-center mt-8 gap-x-2">
<Forms.Textarea readonly="true" class="w-full max-w-xl" name="iframe" rows="2" value="<?= esc("<iframe width=\"100%\" height=\"280\" frameborder=\"0\" scrolling=\"no\" style=\"width: 100%; height: 280px; overflow: hidden;\" src=\"{$episode->embed_url}\"></iframe>") ?>" /> <Forms.Textarea readonly="true" class="w-full max-w-xl" name="iframe" rows="2" value="<?= esc("<iframe width=\"100%\" height=\"280\" frameborder=\"0\" scrolling=\"no\" style=\"width: 100%; height: 280px; overflow: hidden;\" src=\"{$episode->embed_url}\"></iframe>") ?>" />

View File

@ -18,7 +18,7 @@
], ],
) ?> ) ?>
<form action="<?= route_to('episode-publish', $podcast->id, $episode->id) ?>" method="POST" class="flex flex-col items-start max-w-xl mx-auto" data-submit="validate-message"> <form action="<?= route_to('episode-publish', $podcast->id, $episode->id) ?>" method="POST" class="flex flex-col items-start w-full max-w-lg mx-auto mt-4" data-submit="validate-message">
<?= csrf_field() ?> <?= csrf_field() ?>
<input type="hidden" name="client_timezone" value="UTC" /> <input type="hidden" name="client_timezone" value="UTC" />

View File

@ -18,7 +18,7 @@
], ],
) ?> ) ?>
<form action="<?= route_to('episode-publish_edit', $podcast->id, $episode->id) ?>" method="POST" class="flex flex-col items-start max-w-xl mx-auto" data-submit="validate-message"> <form action="<?= route_to('episode-publish_edit', $podcast->id, $episode->id) ?>" method="POST" class="flex flex-col items-start w-full max-w-lg mx-auto mt-4" data-submit="validate-message">
<?= csrf_field() ?> <?= csrf_field() ?>
<input type="hidden" name="client_timezone" value="UTC" /> <input type="hidden" name="client_timezone" value="UTC" />
<input type="hidden" name="post_id" value="<?= $post->id ?>" /> <input type="hidden" name="post_id" value="<?= $post->id ?>" />

View File

@ -10,7 +10,7 @@
<?= $this->section('content') ?> <?= $this->section('content') ?>
<form action="<?= route_to('episode-unpublish', $podcast->id, $episode->id) ?>" method="POST" class="flex flex-col max-w-xl mx-auto"> <form action="<?= route_to('episode-unpublish', $podcast->id, $episode->id) ?>" method="POST" class="flex flex-col max-w-lg mx-auto">
<?= csrf_field() ?> <?= csrf_field() ?>
<Alert variant="danger" glyph="alert" class="font-semibold"><?= lang('Episode.unpublish_form.disclaimer') ?></Alert> <Alert variant="danger" glyph="alert" class="font-semibold"><?= lang('Episode.unpublish_form.disclaimer') ?></Alert>

View File

@ -14,7 +14,7 @@
<?= $this->section('content') ?> <?= $this->section('content') ?>
<form action="<?= route_to('podcast-create') ?>" method="POST" enctype='multipart/form-data' class="flex flex-col max-w-xl gap-y-6"> <form action="<?= route_to('podcast-create') ?>" method="POST" enctype='multipart/form-data' class="flex flex-col w-full max-w-xl gap-y-6">
<?= csrf_field() ?> <?= csrf_field() ?>
<Forms.Section <Forms.Section

View File

@ -36,7 +36,7 @@
</div> </div>
</div> </div>
<div class="flex flex-col max-w-xl gap-y-6"> <div class="flex flex-col w-full max-w-xl gap-y-6">
<Forms.Section <Forms.Section
title="<?= lang('Podcast.form.identity_section_title') ?>" title="<?= lang('Podcast.form.identity_section_title') ?>"
@ -217,8 +217,8 @@
as="XMLEditor" as="XMLEditor"
name="custom_rss" name="custom_rss"
label="<?= lang('Podcast.form.custom_rss') ?>" label="<?= lang('Podcast.form.custom_rss') ?>"
value="<?= $podcast->custom_rss_string ?>" hint="<?= lang('Podcast.form.custom_rss_hint') ?>"
hint="<?= lang('Podcast.form.custom_rss_hint') ?>" /> content="<?= esc($podcast->custom_rss_string) ?>" />
</Forms.Section> </Forms.Section>

View File

@ -12,7 +12,7 @@
<Alert glyph="alert" variant="danger" class="max-w-xl"><?= lang('PodcastImport.warning') ?></Alert> <Alert glyph="alert" variant="danger" class="max-w-xl"><?= lang('PodcastImport.warning') ?></Alert>
<form action="<?= route_to('podcast-import') ?>" method="POST" enctype='multipart/form-data' class="flex flex-col max-w-xl mt-6 gap-y-8"> <form action="<?= route_to('podcast-import') ?>" method="POST" enctype='multipart/form-data' class="flex flex-col w-full max-w-xl mt-6 gap-y-8">
<?= csrf_field() ?> <?= csrf_field() ?>
<Forms.Section <Forms.Section

View File

@ -57,7 +57,7 @@
</form> </form>
<form action="<?= route_to('settings-images-regenerate') ?>" method="POST" class="flex flex-col max-w-xl gap-y-4"> <form action="<?= route_to('settings-images-regenerate') ?>" method="POST" class="flex flex-col w-full max-w-xl gap-y-4">
<?= csrf_field() ?> <?= csrf_field() ?>
<Forms.Section <Forms.Section
@ -70,7 +70,7 @@
</form> </form>
<form action="<?= route_to('settings-housekeeping-run') ?>" method="POST" class="flex flex-col max-w-xl gap-y-4"> <form action="<?= route_to('settings-housekeeping-run') ?>" method="POST" class="flex flex-col w-full max-w-xl gap-y-4">
<?= csrf_field() ?> <?= csrf_field() ?>
<Forms.Section <Forms.Section

View File

@ -10,7 +10,7 @@
<?= $this->section('content') ?> <?= $this->section('content') ?>
<form action="<?= route_to('settings-theme') ?>" method="POST" class="flex flex-col max-w-xl gap-y-4" enctype="multipart/form-data"> <form action="<?= route_to('settings-theme') ?>" method="POST" class="flex flex-col w-full max-w-xl gap-y-4" enctype="multipart/form-data">
<?= csrf_field() ?> <?= csrf_field() ?>
<Forms.Section <Forms.Section
title="<?= lang('Settings.theme.accent_section_title') ?>" title="<?= lang('Settings.theme.accent_section_title') ?>"