> For the complete documentation index, see [llms.txt](https://cranford-tech.gitbook.io/property-directory-template/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cranford-tech.gitbook.io/property-directory-template/pages/sign-in.md).

# Sign in

### Overview

This is where real estate agents can create new accounts and log into existing accounts. 

### Navigating to the *sign-in* page

Users can navigate to the *sign-in* page by clicking on the "Sign in" link in the Navbar or the Footer. Please note that, by default, the "Sign in" link is not visible when the current user is logged in.

### Page components

The *sign-in* page can be broken down into 3 main components:

* **Navbar A:** Reusable element that is used to navigate to the dashboard/sign-in page. A conditional statement is used to show/hide the dashboard/sign-in link depending on whether the user is logged in or not.

<figure><img src="/files/lmpZMfBGvHqSbdEWvNtg" alt=""><figcaption><p>Navbar A from sign-in page of property directory bubble.io template</p></figcaption></figure>

* **Group - SignInContainer:** Group that contains the *Card Sign Up* and *Card Log In* sub-groups.&#x20;
  * The *Card Sign Up* group is used to allow real estate agents to register for new accounts&#x20;
  * The *Card Log In* group is used to allow real estate agent users who have already registered to log into their accounts.

<figure><img src="/files/7mDtCf945wBJbLVBke7J" alt=""><figcaption><p>Group - SignInContainer from sign-in page of property directory bubble.io template</p></figcaption></figure>

* **Footer A:** Reusable element that is used to navigate to the dashboard/sign-in page. A conditional statement is used to show/hide the dashboard/sign-in link depending on whether the user is logged in or not.

  <figure><img src="/files/R8wK62L0jsb7rqVNPqmo" alt=""><figcaption><p>Footer A from from sign-in page of property directory bubble.io template</p></figcaption></figure>

### Functionality

#### Switching between Sign Up and Login Groups

Clicking the *"Already have an account? Sign in"* text will trigger a workflow that hides the *Card Sign Up* group and shows the the *Card Log In* group.

Similarly, clicking the *"Create new account"* text will trigger a workflow that hides the *Card Log In* group and shows the *Card Sign Up* group.

**Signing users up (Real Estate Agents)**

Clicking the Sign Up button will trigger the below workflow:

<figure><img src="/files/wvuDsgc67CffU2dM3Lm8" alt=""><figcaption></figcaption></figure>

**Note:** You will need to edit these workflows slightly - see [Quick Start](broken://pages/3FzrAXo9fmG7KFjJnQlf) for further details.

* This workflow creates a new user (real estate agent) using the data in the various inputs in the *Card Sign Up* group
* The newly created user is then sent to their dashboard

**Logging users in (Real Estate Agents)**

Clicking the *SignInButton* will trigger the below workflow:

<figure><img src="/files/VxYDZe3s8oZyWMZyK3YT" alt=""><figcaption></figcaption></figure>

* This workflow logs in users (real estate agent) who have already created an account
* The user is sent to their dashboard