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

> Egy űrlap, amely belépést, regisztrációt és jelszó-visszaállítást is kezel: feltételes blokkok, megjelenítési állapotok, műveletek és események.

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](https://hub.hellowp.io/hu/plugins/jet-form-builder-login-action/beallitasok/)). 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](https://hub.hellowp.io/hu/plugins/jet-form-builder-login-action/)).
- 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](https://hub.hellowp.io/hu/plugins/jet-form-builder-login-action/jelszo-visszaallitas/)).

## 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.

![A kombinált űrlap alapállapota: belépés és két váltógomb](./kepek/bejelentkezes-kombinalt-urlap.webp)

*A kombinált űrlap alapállapota: belépés és két váltógomb* (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.

![A regisztrációs állapot](./kepek/bejelentkezes-regisztracios-allapot.webp)

*A regisztrációs állapot* (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.

![A jelszó-visszaállítási állapot](./kepek/bejelentkezes-jelszo-allapot.webp)

*A jelszó-visszaállítási állapot* (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](https://hub.hellowp.io/hu/plugins/jet-form-builder-login-action/beallitasok/) 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.