User registration, login and profile

In this tutorial, we will build a complete user registration, login, and profile application.

What you will learn

  • Use the <ion:form /> and <ion:user /> tags to login / logout user on the frontend,
  • Create registration and profile editing forms
  • Create the "Get password back" feature.

Prerequisites

Form declarationTop of Page

In this tutorial, we will use 5 forms :

  • login : Logs the user in
  • logout : Logs the user out
  • register : Register one new account
  • profile : User's profile edition
  • password : Get the password back

As described in the chapter Tag Reference > Form, all forms need to be declared to be able to be used through the <ion:form /> tag.

These forms are provided with Ionize and are declared in the configuration file : /config/forms.php

If you want to override these core forms, do not modify the /config/forms.php file. You can override one form by declaring it in your own /themes/your_theme/config/forms.php configuration file.

Prepare the pageTop of Page

We will mainly work in one page view for this tutorial but of course, the tags we will use can be used in each view you want (header partial view for example).

Create the file /themes/your_theme/views/page_user.php :

<!-- 
We suppose you have one header, containing the website navigation menu
and other nice stuff.
-->
<ion:partial view="header" />

<!-- We will put our tutorial code after this comment -->
<h2>User login, logout, registration, profile</h2>

<!--
One page has a footer
-->
<ion:partial view="footer" />

In Ionize, declare this view as "page" in Settings > Theme > Current Theme views list.

Finally, link this view to the page of your choice and navigate to it : It displays the title "User login, logout, registration, profile"

In the next chapters of this tutorial, we will write the main code of each chapter, but not the whole view, to make the code more clear.

If the view described looks strange to you, have a look at : Build the website > Create one page : Views

Login / Logout formTop of Page

In the file /themes/your_theme/views/page_user.php, add the following code :

    <h2>Login</h2>

    <!--
        Global Success message
        Displayed if the user successfully logged in
    -->
    <ion:form:login:validation:success tag="p" class="green" />

    <!--
       Global Error message
       Validation wasn't OK or credentials aren't good
    -->
    <ion:form:login:validation:error tag="p" class="input-error" />

    <!--
        Login Form
        Only displayed if the user isn't logged in
    -->
    <ion:user:logged is="false">

        <form method="post" action="">

<!-- Name of the form : login -->
            <input type="hidden" name="form" value="login" />

<!-- The email is used to log in the user -->
            <label for="email">Email</label>
            <input type="text" id="email" name="email" value="<ion:form:login:field:email />"/>
            <ion:form:login:error:email tag="p" class="input-error" />


            <label for="password">Password</label>
            <input type="password" id="password" name="password" />
            <ion:form:login:error:password tag="p" class="input-error" />

            <input type="submit" value="Login" />
        </form>

    </ion:user:logged>

<!--
This is displayed if the user is already logged in .
-->
    <ion:else>
        <p>User <ion:user:name tag="span" class="green" /> logged in.</p>
        <p>First logout to be able to login.</p>
    </ion:else>

Logout

Logout is easier than login.
Simply add the following code to your view to display one logout form.
You may style it so it look like one simple link if you wish.

    <!--
        Logout
    -->
    <h2>Logout</h2>

    <ion:user:logged is="true">

        <form method="post" action="">
            <input type="hidden" name="form" value="logout" />
            <input type="submit" value="Logout" />
        </form>

    </ion:user:logged>
    <ion:else>
        <span class="red">User not logged in</span>
        <p>First login to be able to logout.</p>
    </ion:else>

Registration formTop of Page

When the user register, one email with one activation link will be sent to the user.

In the file /themes/your_theme/views/page_user.php, add the following code :

    <!--
       Form validation SUCCESS
       "validation:result" is a conditional tag.
       If the attribute "is" is not set, the tag suppose we ask for is="true"
   -->
    <ion:form:register:validation:result>

        <!-- Success validation message test -->
        <ion:form:register:validation:success is="true">

            <!-- Success message display -->
            <ion:form:register:validation:success tag="p" class="green"/>

        </ion:form:register:validation:success>

    </ion:form:register:validation:result>

    <!--
       Form validation errors OR Form not validated (first display)
   -->
    <ion:form:register:validation:result is="false">

        <!--
            Errors during validation ?
            Conditional tag : Expands if true
        -->
        <ion:form:register:validation:error is="true">
            <p class="red"><b>Errors during validation</b></p>
        </ion:form:register:validation:error>

        <!--
            Only display the Registration Form if the user isn't looged in.
        -->
        <ion:user:logged is="false">
            
            <!--
                Displayed if the form wasn't posted
            -->
            <ion:form:register:posted is="false">
                <p>Please fill in the registration form to create one account.</p>
            </ion:form:register:posted>
            
            <!--
                Form
            -->
            <form method="post" action="">
                <input type="hidden" name="form" value="register" />

                <label for="firstname-reg">First Name</label>
                <input type="text" id="firstname-reg" name="firstname" value="<ion:form:register:field:firstname />" />
                <ion:form:register:error:firstname tag="p" class="input-error" />
                <br/>

                <label for="lastname-reg">Last Name</label>
                <input type="text" id="lastname-reg" name="lastname" value="<ion:form:register:field:lastname />" />
                <ion:form:register:error:lastname tag="p" class="input-error" />
                <br/>

                <label for="screen_name-reg">Displayed Screen name</label>
                <input type="text" id="screen_name-reg" name="screen_name" value="<ion:form:register:field:screen_name />" />
                <ion:form:register:error:screen_name tag="p" class="input-error" />
                <br/>

                <label for="email-reg">Email</label>
                <input type="text" id="email-reg" name="email" value="<ion:form:register:field:email />"/>
                <ion:form:register:error:email tag="p" class="input-error" />
                <br/>

                <label for="password-reg">Password</label>
                <input type="password" id="password-reg" name="password" value=""/>
                <br/>

                <input type="submit" value="Register" />
            </form>

        </ion:user:logged>

    </ion:form:register:validation:result>

Password back formTop of Page

The "password back" form is available only for non logged in users.

This form will send one email to the user only if his/her email exists in the database.

One new password and one account activation link will be sent to the user.

In the file /themes/your_theme/views/page_user.php, add the following code :

    <ion:user:logged is="false">

        <!-- Success / Error messages -->
        <ion:form:password:validation:success tag="p" class="green" />
        <ion:form:password:validation:error tag="p" class="input-error" />

        <form method="post" action="">

            <input type="hidden" name="form" value="password" />

            <label for="email-back"><ion:lang key="form_label_email" /></label>
            <input type="text" name="email" id="email-back" />

            <br/>
            <input type="submit" value="Get Password back" />

        </form>

    </ion:user:logged>