Belépés, regisztráció és jelszó-visszaállítás egy űrlapon

A legegyszerűbb belépési űrlap két mezőből és a User Login műveletből áll (lásd: Beállítások). Ez a fejezet azt mutatja meg, hogyan építhetsz egyetlen űrlapot, amely a belépés mellett regisztrációt és jelszó-visszaállítást is kezel, és a három részt a megjelenítési állapotok (Render States) váltogatják.

Ha az űrlapnak csak egy feladata van (például csak belépés), a feltételes blokkokra és az állapotokra nincs szükséged: elég a megfelelő beküldés utáni művelet.

Követelmények

• JetFormBuilder, valamint a User Login Action kiegészítő telepítve és bekapcsolva (lásd: az áttekintés).
• A regisztrációhoz a Register User művelet, a jelszó-visszaállításhoz a Jelszó visszaállítása művelet (Jelszó visszaállítása).

1. Az űrlap felépítése

Hozz létre egy új űrlapot, adj neki nevet. Minden részt külön Conditional Block (feltételes blokk) kapjon, mert az állapot dönti el, melyik látszik.

1. Belépés: az első feltételes blokkba tedd a felhasználónév vagy e-mail mezőt, a jelszó mezőt, az „Emlékezz rám” kapcsolót (Switcher mező), és három gombot (Action Button): „Belépés”, „Nincs fiókom” és „Elfelejtett jelszó”. A felirataikat átírhatod. A kész User Login sablont is használhatod kiindulásnak.
2. Regisztráció: a második feltételes blokkba kerülnek a fiók adatai (például e-mail, név, jelszó, szükség esetén egy Media mező a felhasználó fotójához) és a beküldő gomb.
3. Jelszó-visszaállítás: a harmadik feltételes blokkba a Reset Password Fields és a Reset Password Button blokk kerül.

Mentsd az űrlapot.

2. A megjelenítési állapotok beállítása

Minden feltételes blokknak megadod, melyik állapotban látszik.

1. Jelöld ki a feltételes blokkot, és kattints a felső eszköztáron a keresztbe nyilak ikonra, vagy a jobb oldali blokkbeállításokban a ceruzára. Megnyílik a Conditional Logic ablak.
2. Állítsd be: a függvény legyen „Show if…” (mutasd, ha), az operátor Is render state, az állapot pedig az alábbi:

Blokk	Állapot
Belépés	DEFAULT.STATE (az űrlap alapállapota)
Regisztráció	egyedi állapot, például REGISTER
Jelszó-visszaállítás	egyedi DEFAULT.STATE.2 és a RESET.PASSWORD

A kiegészítő egy külön állapotot is hoz: az INVALID.RESET.TOKEN akkor használható, ha a jelszó-visszaállító token érvénytelen vagy lejárt. Ebben az állapotban megjeleníthetsz egy üzenetet vagy más tartalmat.

Az egyedi állapotot a Conditional Logic ablakban hozhatod létre, a neve szabadon választható. A gombok váltják át az állapotot:

1. A belépési blokkban nyisd meg a „Nincs fiókom” gomb beállításait.
2. A gomb típusát (alapból Action Button) állítsd Change Render State értékre.
3. A SWITCH STATE listából válaszd a REGISTER állapotot.
4. Az „Elfelejtett jelszó” gombnál ugyanígy a DEFAULT.STATE.2 állapotot add meg.

Így a látogató a gombbal vált a belépés, a regisztráció és a jelszó-visszaállítás között.

https://minta-bolt.hu/kombi-belepes/

Az alapállapotban a belépés mezői és a három gomb látszik; a másik két rész rejtve van.

https://minta-bolt.hu/kombi-belepes/?jfb%5B10%5D%5Bstate%5D=REGISTER

A „Nincs fiókom” gomb után a regisztrációs mezők jelennek meg a belépésiek helyett.

https://minta-bolt.hu/kombi-belepes/?jfb%5B10%5D%5Bstate%5D=DEFAULT.STATE.2

Az „Elfelejtett jelszó” gomb után a jelszó-visszaállító blokk mezője látszik.

3. A beküldés utáni műveletek

A Post Submit Actions panelen a New Action gombbal vedd fel a szükséges műveleteket:

Művelet	Mire kell
User Login	A belépéshez; a mezők összekötését lásd a Beállítások fejezetben.
Redirect to Page	Átirányítás belépés után; a Static Page típusnál a SELECT PAGE listából választod ki a célt.
Verification	E-mailes megerősítés; a beküldés előtt ellenőrzi a címet, ezért a többi művelet elé kell tenni. Az űrlap megerősítő linket küld, és a beküldés csak a link megnyitása után fejeződik be.
Register User	Új felhasználó létrehozása; az űrlap mezőit a felhasználói fiók mezőihez rendeled.
Jelszó visszaállítása	A jelszó cseréje; a User field, Password field és Confirm password field mezőket kell kiválasztani.

Az űrlap beküldéseit az alapértelmezett Save Form Record művelet menti, hogy nyomon követhesd az egyes lépéseket. A beküldés utáni műveletek száma nem korlátozott. Egyes mezőkre vagy az egész űrlapra haladó űrlapellenőrzés is beállítható.

Események

Mivel egy űrlap három feladatot lát el, minden művelethez meg kell adni, melyik állapotban fusson le:

1. Kattints a művelet alatti Edit Conditions & Events gombra.
2. Az Edit Action Conditions & Events ablakban váltsd át az Events match fülre.
3. Az ADD EVENT listából válaszd ki az eseményt, majd kattints az Update gombra.

Művelet	Esemény
User Login	ON.DEFAULT.STATE
Redirect to Page	ON.DEFAULT.STATE
Register User	REGISTER
Jelszó visszaállítása	ON.DEFAULT.STATE.2 és ON.RESET.PASSWORD

Mentsd az űrlapot.

4. Az űrlap kitétele az oldalra

1. Nyiss meg egy oldalt a használt szerkesztőben (Elementor, blokkszerkesztő vagy Bricks), és nevezd el például „Belépés” oldalnak.
2. Tedd az oldalra a JetForm elemet, és a Choose Form listából válaszd ki az űrlapot.
3. Tedd közzé az oldalt.

Az űrlapot felugró ablakba is teheted. Ha a belépés a fejlécből érhető el, a fejlécsablonba tegyél egy gombot, és a hivatkozásába add meg a belépési oldalt.

5. Kipróbálás

1. Nyisd meg az oldalt a nyilvános részen, és lépj be. Siker esetén az átirányítás a fiókodra visz.
2. A „Nincs fiókom” gombbal a regisztrációs űrlapra jutsz. A beküldés után a Felhasználók menüben látod az új felhasználót.
3. Az „Elfelejtett jelszó” gombnál add meg az e-mail-címedet. A levélben kapott linken egy másik oldal fogad, ahol az új jelszót adod meg, majd az űrlap a fiókodra visz.

Gyakori kérdések:

• Használhatok kész mintát? Igen, bármelyik sablont módosíthatod, például a regisztrációs mintát.
• Testreszabható a kinézet? Igen, a stílusbeállításokkal és a JetStyleManagerrel.
• Hány beküldés utáni művelet vehető fel? Nincs korlát.
• Redirect nélkül mi történik belépés után? A látogató bejelentkezik, de az oldal nem változik; átirányításhoz kell a Redirect to Page művelet.