How to create a Forgot password screen

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

Incorporating a well-designed Forgot password screen is more than just a technical requirement – it's a strategic decision that directly impacts user experience and retention. This often-overlooked screen can significantly influence how users perceive an app's reliability and user-friendliness, especially during moments of frustration or inconvenience.

Through a detailed guide, this article empowers designers and developers to seamlessly integrate a user-centric Forgot password screen into their apps, leveraging the design components from the Ionic Kit, built on the library of the Ionic framework.

1. Install Ionic CLI with command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start forgot-pwd-form blank --type=react

3. Get inside the project directory

cd forgot-pwd-form

4. Create a new page

Create page ForgotPwd.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const ForgotPwd: React.FC = () => {
   return (
     <IonPage></IonPage>
   );
};

export default ForgotPwd;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Add the header

For convenience, we will be using the layout structure recommended by Ionic for all our screens. This allows us to add header code and content inside the <IonPage></IonPage>.

<IonHeader>
  <IonToolbar>
    <IonTitle>Logotype</IonTitle>
  </IonToolbar>
</IonHeader>
<IonContent className='ion-padding'>
  ...
</IonContent>

6. Style the content

Add the ion-text-center class to the IonContent component.

<IonContent className='ion-padding ion-text-center'></IonContent>

This will apply styling to the content within the IonContent, providing centering the text according to Ionic's guidelines.

7. Adjust space within the components

Inside the IonContent component, add the <br /> tag to create a line break between components.

8. Add the header

Add the IonText component within the IonContent section. Inside the IonText component, include an h1 element with the text "Forgot password?".

<IonContent className='ion-padding ion-text-center'>
  <br />
  <IonText><h1>Forgot password?</h1></IonText>
</IonContent>

9. Enter the text

Use the IonText component with the color='medium' to display the text "Enter your e-mail address for instructions" in a paragraph format.

<IonContent className='ion-padding ion-text-center'>
  <br />
  <IonText><h1>Forgot password?</h1></IonText>
  <IonText color='medium'>
    <p>Enter your e-mail address for instructions</p>
  </IonText>
</IonContent>

10. Add the password recovery form

Within the IonContent section, add a <form> tag to encapsulate the password recovery form.

<IonContent className='ion-padding'>
  <br />
  <IonText><h1>Forgot password?</h1></IonText>
  <IonText color='medium'>
    <p>Enter your e-mail address for instructions</p>
  </IonText>

  <form action="#"></form>
</IonContent>

11. Customize the form

Within the form, include the IonItem component with the class ion-no-padding.

<form action="#">
  <IonItem className='ion-no-padding'>
              
  </IonItem>
 </form>

This utilizes IonItem with the ion-no-padding class inside the form, allowing you to customize the styling of the input field without additional padding.

12. Add the email input

Inside the IonItem component, place the IonInput component for entering the email. Add the label E-mail, set the label placement as floating, and specify the input type as email.

<IonItem className='ion-no-padding'>
  <IonInput
    label='E-mail'
    labelPlacement='floating'
    type='email'
  ></IonInput>
</IonItem>

This incorporates an IonInput field for entering the email with a floating label specifying E-mail and a type attribute set to email.

13. Place the button

Below, position an IonButton with the text "Send instructions", setting its type as submit and adding expand='block', and className='ion-margin-vertical.

<IonButton
  expand='block'
  type='submit'
  className='ion-margin-vertical'
>
  Send instructions
</IonButton>

This will expand the IonButton across the entire width of the container and add top and bottom margins.

14. Adjust the break and add the content

After the form, place the <br /> tag to create a line break between components and add the IonText component with the color='medium' to display the text "Sign in or Sign up" in a paragraph format. You can use the IonRouterLink component to navigate to another page.

<form action="#">
  ...
</form>
<IonText color='medium'>
  <p>
    <IonRouterLink href='#'>Sign in</IonRouterLink>
    or 
    <IonRouterLink href='#'>Sign up</IonRouterLink>
  </p>
</IonText>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!