Přidat lazyload recaptchu pro formuláře

[zipper]

@zipper:

• [x] Přidat JS pro lazy iniciazlizaci recatpcha.
• [x] Přidat npm skript (?) pro minifikaci recaptcha zdroje.

Programátor:

• [ ] Připravit PHP pro vytváření formulářového prvku recaptcha, který bude vkládat div pro invisible recaptchu.

cc @VBoss

[zipper]

Připravil jsem frontend část do větve 30-recaptcha. Bylo by fajn to teď dotáhnout za programátora pokud možno co nejdřív. Máme na to kapacity @VBoss @klobinoid?

[Miklo78]

@Qitek85 v souvislosti s přípravou placené Recaptcha by toto mohlo výrazně pomoci, protože by výrazně omezil ten počet stažení. Reálně se načítá jen v případě interakce s formulářem (info od @zipper )

Prosím Vítku zařiď nějakou prioritizaci tohoto issue.

[Qitek85]

@Jakub-Fajkus

• prosím toto vyřiď přednostně (je to mimo milestone protože to je mimo repo základu), ale ber to jako kdyby to bylo v dubnovém milestone na základu :-)

s @VBoss jsem komunikoval.

Díky moc

[petrzdansky]

@Qitek85 Vítku, mohu se zeptat prosím na aktuální zařazení tohoto úkolu? Já jen ať vím jak na to máme čekat, nebo si to udělat sami kvůli těm robotům pro newsletter. Děkuji moc za info.

[Qitek85]

@petrzdansky děkuji za připomenutí @Jakub-Fajkus prosím o zpracování (jak je to mimo repo základu, tak nám to uteklo v tom dubnu)

cc @VBoss

[Jakub-Fajkus]

Kvuli nette musime povysit verzi te knihovny, ktera se tu pouziva. Z 1.5. na 3.1.. A z puvodnich trid tam nezustalo nic, takze to budu muset znovu poskaldat z tech novych :facepalm:

EDIT: odkaz na verze https://github.com/contributte/reCAPTCHA/tree/3.1.0#versions ~EDIT2: nakonec updatovat hned nemusime, ale vydrbe to s nama pozdeji~

[Jakub-Fajkus]

@zipper Pridal jsem recaptchu do formulare na profilu uzivtele, viz https://test2049.globalwines2018.peckadesign.com/profil. Povysil jsem verzi te knihovny, ktera se pouziva, a jen ji pouzil. Koukni prosim na to, jak moc spatne to pro nas je. Jestli ma cenu tu knihovnu vubec pouzivat. Chtel jsem zkusit napojit ty tvoje javasciprt, ale netusim co vsechno musim udelat, abych to rozchodil.

[zipper]

Přidal jsem frontend část a načítání našeho JS na webu. Prosím o dodělání vygenerovaného HTML podle Hudy / DV. Vzorové html přebrané z DV (klidně bez toho obalujícího spanu, ale to myslím nejde):

<span>
    <div class="g-recaptcha"
         data-sitekey="6Ldw8LMUAAAAAB7YatpWYStlrVD8vHDg-UkkHrp3"
         data-size="invisible">
    </div>
    <script type="text/javascript" src="/js/pdForms.recaptcha.min.js"></script>
    <script>
        if (typeof pdForms !== "undefined" && pdForms.recaptcha) {
            pdForms.recaptcha.initForm("frm-newsletterForm-form");
        }
    </script>
</span>

[Jakub-Fajkus]

@zipper HTML jsem upravil, mrkni prosim. Zaroven se mi nedari na testovacim serveru zkompilovat ten javascript - v adresari www chybi ten soubor s mumifikovanym jskem. Co se tam musi udelat?

[zipper]

JS na testovacím serveru GW je opravený (nachystal jsem projektový task na zkopírování, ale nespouštěl jsem jej 🤦‍♂️).

Jak jsem psal na Slacku, poslední zádrhel vidím v tom, že se span s recaptchou ve formuláři načte dvakrát, těžko říct proč. Prosím mrkni na to. Nicméně, k načtení recaptcha skriptu (api.js z google cdn) už dochází, pro finální testování bude potřeba zajistit API klíč.

[Jakub-Fajkus]

Nachystal jsem tedy PR. @janvacek resi nasazeni a otestovani na nay. Zatim tedy predavam na nej.

[janvacek]

na Nay jsme zaseknutí nyní se základem, takže předávám otěže testování zase zpět na @Jakub-Fajkus

[zipper]

@janvacek pdForms by neměl být problém updateovat nezávisle na základu, stačí přidat na projekt závislost na vyšší verzi. Pokud nebude se základem konfliktní (což nebude), tak to jde.

[Jakub-Fajkus]

@zipper problem to je, protoze jsme povysovali verzi knihovny (contributte/recaptcha), ktera vyzaduje novejsi verzi nette/utils. Ale nay zaklad jede porad na stare, takze si nas nadherny vytvor zatim neuzijou.

[zipper]

Aha, díky za info 👍 V tom případě pak asi i tu verzi pdForms budeme číslovat trochu jinak, než bylo původně v tom PR.

[Jakub-Fajkus]

PR mame nachystany, pockame az na nay nasadi nove utils a recaptchu otestujou. A pak se posuneme dale.

[zipper]

Můžeme s tímto prosím nějak pohnout? @janvacek @petrzdansky @Jakub-Fajkus? Co je potřeba dodělat? Pokud je potřeba nějaká konzultace z mé strany, jsem k dispozici.

Momentálně se projektově nasazuje stejně řešení na Korálky (https://github.com/peckadesign/Koralky2014/issues/2550), bylo by dobré toto prosím dotáhnout.

[petrzdansky]

@janvacek Honzo, zkusil by jsi to tedy prosím rozjet v PR na Nay aby to @zipper Radek mohl zkontrolovat. Děkuji.

[janvacek]

@Jakub-Fajkus asi bude potřeba trochu povýšit i pdForms závislosti a definice v composer.json, jelikož ať se snažím jak chci, composer odmítá nainstalovat nay-základovou větev ve které je v composer.json odkazováno na dev-30-recaptcha větev z pdForms.

Zároveň mi pak padal Travis na základovém PR https://github.com/peckadesign/pdproject5-nay/pull/70

  Problem 1
    - Installation request for pd/pdproject dev-pdforms-recaptcha-lazyload as dev-master -> satisfiable by pd/pdproject[dev-pdforms-recaptcha-lazyload].
    - pd/pdproject dev-pdforms-recaptcha-lazyload requires pd/forms dev-30-recaptcha -> satisfiable by pd/forms[dev-30-recaptcha] but these conflict with your requirements or minimum-stability.

[Jakub-Fajkus]

Zakladovy build mi prochazel, myslim ze ti v tom nay-pdp PRku neco chybi, viz https://github.com/peckadesign/pdproject5/pull/2999/files

[janvacek]

@Jakub-Fajkus tak build by to vysvětlovalo 😄 teď ještě ten composer aby to pobíral při instalaci základu

[Jakub-Fajkus]

No a s tim composrem nevim, kde muze byt problem. Mne se to tehdy nainstalovalo be problemu :thinking: Udelej tam, co bude potreba, kdyz to mas pred sebou.

[janvacek]

@petrzdansky @Jakub-Fajkus @zipper na Nay se mi povedlo přes všechny nepříjemnosti s composerem a podobně nakonec všechno rozjet.

akorát teda formulář při odeslání píše "toto pole je povinné", bez recaptchy to nedělá, s ní ano. Myslím si že to bude těmi testovacími klíči co jsou v základovém PR, ale nejsem si 100% jistý.

• hotovo ve větvi pdforms-30-recaptcha
• PR projekt https://github.com/peckadesign/Nay2014/pull/13508
• K testování na
  • https://test13508.nay2014.peckadesign.com/prihlasenie-na-odber-newslettra

[zipper]

Včera při nasazení tohoto řešení projektově na Korálky vyšlo najevo, že je problém, pokud v šabloně změníme id formuláře. Script, který se z php vkládá totiž obsahuje id formuláře k inicializaci. Bez toho to nešlo efektivně udělat. Pokud v šabloně při vykreslování {form} změníme id, dojde k chybě JS. Což je přesně případ tady té stránky.

Obvykle je to děláno z důvodu, aby se do action přidala kotva na formulář a po odeslání to zascrollovalo správně. Na Korálcích jsme to předělali tímto způsobem https://github.com/peckadesign/Koralky2014/pull/2645/commits/7cf8bbd7b78f56e1640e82a4b6ba45c790fe804c#diff-38ef1f54d0cf9c5dc5b2b3f41b3ce4dd.

Je potřeba tedy prosím zkontrolovat, že všechny formuláře, kde je použita recaptcha, nemají přepsané id v šabloně. @janvacek Mrkneš na to prosím ještě?

Jinak ad ta chyba "toto pole je vyžadováno", ta vzniká někde v PHP, s tím neporadím.

[janvacek]

@zipper záhada vyřešena, ona se totiž ta recaptcha načítala už v hlavičce, takže když se potom lazy donačetla do formuláře, tak tam byla 2x a už to blbnulo, takže jsem původní recaptchu vyhodil z projektu úplně a už tam bude jen tato "nová"

@petrzdansky můžeš otestovat, jestli chceš, ale myslím že to poznáme až na produkci, jestli chodí/nechodí spamy. Jestli to bude OK, tak po mergnutí tady v pdforms si vyspecifikujeme kam všude tu recaptchu napojíme na projektu

[zipper]

Za mě v pohodě, otestovali jsme to, na testu je skutečně problém s tím klíčem, viz chyba v recaptcha badge. Můžeme tedy prosím release. @Jakub-Fajkus Uprav prosím v tomto PR verzi knihovny, nechám asi na tobě, jestli to bude 3.1.0 nebo 4.0.0 🤔

@Jakub-Fajkus Prosím do release tady i v základu pak zdůraznit, že pro správnou funkčnost nesmí být v šabloně změněno id formuláře, viz https://github.com/peckadesign/pdForms/issues/30#issuecomment-673450634.