Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • 📖  Manual

  • 👋Welcome

    Welcome to Tadabase

    What Is No-Code?

    Tadabase Support

    Getting Started With Tadabase

    Platform Overview

    🧰The Data Builder

    Data Tables

    Fields

    Text Fields

    Personal Fields

    Number Fields

    Date Fields

    Option Fields

    File and Image Fields

    Equation Fields (Category)

    Equation Fields

    Connection Fields

    Date Equation Examples

    Records

    Record Logs

    Import Templates

    Export Templates

    Automating Tasks

    Number Equation Examples

    Text Equation Examples

    Multi-Function Equation Examples

    ✏️Page Builder

    Page Builder Overview

    Layouts

    Pages

    Components Overview

    PDF Pages (Alpha)

    PDF Pages 2.0

    📗System Components

    System Components Overview

    Menu

    User Menu

    Breadcrumbs

    PDF Print (Alpha)

    Link Button

    Login

    Signup

    Profile

    HTML

    Image

    Subscriptions (Alpha)

    📘Data Components

    Data Components Overview

    Form Component

    Table Component

    List Component

    Kanban Component

    Calendar Component

    Resource Component

    Map Component

    Timeline Component

    Accordion Component

    Card Component

    Chart Component

    Search Component

    Import Component

    Data Source

    Data Source Filtering

    Links

    Display Rules

    Inline Editing

    Data Component Visual Directory

    Custom Component

    Custom Component Helpers

    Writing Your Own Component Helpers

    🙋Users

    Users

    Roles

    Single Sign On (SSO)

    Adding Stripe Subscriptions

    🔒Security and Reliability

    Tadabase Builder Security

    App Security

    User Security

    🔗Integrations

    Zapier Integration

    Using Webhooks

    Saving files to Dropbox

    Adding PayPal payment buttons to your app

    Exporting records to Google Sheets

    Viewing data in Microsoft BI

    Chat Widgets

    REST API

    Using SendGrid for emails

    Saving files to AWS S3 Bucket (IAM Method)

    Incoming Webhooks

    Embeddable Components

    Saving Files to Custom S3 Bucket (Account Method, Recommended)

    PDF Forms

    Stripe Checkout

    JavaScript Callbacks and Actions

    Twilio Integration

    ⚙App Settings

    General Settings

    Layout & Format Settings

    Custom Domain

    Customizing CSS

    Changing app themes

    Support Settings

    404 Error Page

    💳Account

    Plans

    Managing Your Account

    Sharing your app builder

    Managing your Apps

    🧩Pipes

    Introduction to Pipes

    Adding Pipes

    Using Pipes

    PDF Gen V2

Categories
📖 Manual
📗 System Components
Login

Login

What is a login component?

A Login component is a System Component that, when added to a page or layout, creates a form for users to enter their credentials and login to your app. 

property-management-login-page.png

You can customize the appearance, features, and security permissions of each login component to create your ideal login experience for your users.  

From the front end, the required credentials to log in to your app are the user’s email and password. 

Credential values are stored in the Default User Data Table in the Data Builder and be created and updated by users on the live app via the Sign Up and Profile system components. 

 

Default login page

For your convenience, each app comes with a built-in default login page that already includes a login component. This default login page can be found at the top of your app's list of layouts and pages with the other two default pages, the default profile page and the default signup page.

2022-01-28_23-24-51.png

Default profile, login, and signup pages are similar to regular pages except that they were built-in to each app for your convenience to save you the time of having to create these basic pages from scratch. These default pages can not be deleted, however they can be edited and customized to your specific needs. Additionally, you can create new login, sign up, and profile pages by adding login, profile, and signup components to any page.  

You can enable users to access the default login page with either one of two ways:

  1. Add a User Menu system component to your app
  2. Add a Menu system component to your app

Let's discuss these two methods of enabling users to access the default login page.

Via the user menu

You can add a User Menu system component to your app to enable users to access the default login page. The user menu is dynamic to logged-in user status and the login link on the user menu will only show if the user is not logged in. If the user is logged in, the Login link will not show on the user menu. 

user-menu-not-logged-in.png

Please click here to learn more about the User Menu system component. 

 

Via a menu

Additionally, you can enable users to access the default login page by adding a link to the default login page to a menu system component. This method is very similar to adding a user menu to your app, and you can browse the user menu system component and the menu system component articles to determine which method better suits your app needs.

Please click here to learn more about the menu system component. 

Adding login components

Additionally, you can create a new login page by adding a login component to the page/layout.

To add a login component to a page or layout, you can add it within an existing column, similarly to how you would add any other component. You can then select the Login component from the list of System Components and it will be added to your selected column.

2022-01-28_23-27-41.png

 

Customizing login components

To configure a login component, click on the component within its column on the page/layout in the Page Builder. A new window will pop up for you to configure your login component with various settings, as illustrated in the image below.

2022-01-28_23-45-46.png

You can customize the following settings to configure your login component:

  1. Allowed Roles
  2. Allowed Status
  3. Already Logged in Message
  4. Logout Button Text
  5. Logout Button CSS Class
  6. Incorrect Email or Password Error Message

Let's define each of these five login component settings.

Allowed Roles

Determine whether all users or only specific user roles can log in to your app through this login component. At default, this setting is set to All Users, meaning users assigned to any/all user roles can login via this login component.

To restrict this login component to login only specific user roles, select the Specific User Role option and add allowed roles by selecting them from the Add Role dropdown list.  

Click here to learn more about user roles.

Allowed Status

Determine whether all user statuses or only specific user statuses can log in to your app through this login component.

User status values are contained in the Status Field within the Default Users Data Table in the Data Builder of the given app.

At default, the Allowed Status setting is set to All Statuses, meaning users with any/all user statuses can login via this login component.

To restrict this login component to login only users with a specific user status, select the Specific User Status option and add allowed statuses by selecting them from the Add Status dropdown list.  

The dropdown list will display status values retrieved from the Status Field in the Default Users data table of the given app. Click here to learn more about the User Status field in the Default Users data table.

You can customize the message that will appear when a user tries to login with a status that is not defined as allowed. See further down for more details.

 

Forgot Password Link

2022-01-28_23-54-29.png

This option creates a "Forgot Password?" link on the live app for users to click if they have forgotten their passwords and would like to reset their passwords. 

forgot-password-link.png

If you wish to display a forgot password link on your live app, you must select a "Forgot Password Link" in the Forms tab of the settings.

Forgot Password Template is where you can configure the Forgot Password email template that will be sent to your users who click on the Forgot Password link. 

2022-01-28_23-59-37.png

The Forgot Password email template is ready to be sent as-is with pre-defined logged-in user field values, however you can choose to personalize the email wording if you wish. The Forgot Password email template will provide users with a unique code for them to input on the live app in order to reset their passwords from the live app. 

The following logged-in user field values are pre-defined and already included in the email template:

{appName} = The name of your app

{name} = The name of the user requesting a new password

{code} = The code the user needs to enter to reset the password

Please note that forgot password/password reset emails sent from your app will default to using the "Default From Name" and "Default From Email" within your email settings. If your email settings are not defined, emails sent from your app will appear as coming from the hello@tadabase.io email address. You can edit your email settings by clicking on the Settings tab of the Builder Navigation Bar > Email Settings > General tab.

2022-01-29_00-02-40.png

 

On the live app, when users click on the "Forgot Password?" link, they will be prompted to enter the email address they use to login to your app and click on the "Send Verification Code" button. If the email address provided is correct, the Forgot Password email will be sent from your app to this user's email address with a verification code for the user to retrieve from their email and input in the live app along with their new password.

ezgif-reset.gif

 

Redirect Rules

Redirect rules enable you to custom-route specific users to specific pages in your app upon login.

To create a Redirect Rule, click on the Add New Redirect Rule button.

2022-01-29_00-04-54.png

You can then create your redirect rule to route users assigned to a specific user role to a specific page upon logging in to your app. You can create as many Redirect Rules as you wish. 

2022-01-29_00-05-42.png

Note: If a User has multiple roles assigned, upon logging into your app the User will be routed to the page specified by the last matching rule.

 

Error Messages

Custom Error Messages appear when a user attempting to login to your app does not meet the requirements for logging in. Messages can be set based on the reason for the login or access failure.

2022-01-29_00-11-57.png

 

Default Message

This is the message that appears when the login component loads, but the user is not logged in. You can remove it by clearing this field. 

FZOaXl1ay12DH2K34mW0hNqo7KxdvemEoQ.png

 

 

Already logged in

This is the message that will appear when the user is seeing a login component but is already logged in. 

s1MexKX0tNRAUyudoBprKGLtV5kzFP0Nzg.png

An alternative to this is setting a row permission on the login component to not show login component for logged in user. 

 

Incorrect email/password

This message will appear when a user enters the wrong credentials: 

49Si6kUDMM3EbX8nXSKbhIEi-KYimHqeYw.png

Not Authorized

This message will appear when a user tries view a page that their role is not authorized from seeing: 

1WPli0SbsHUUXYurQ9jRusZLiyUkSezgKQ.png

Status not allowed

When a login component is restricted to status (see here) this message will appear. 

How did we do ?

Previous Article
Link Button
Next Article
Signup
Article Navigation
  • What is a login component?
  • Default login page
  • Via the user menu
  • Via a menu
  • Adding login components
  • Customizing login components
  • Allowed Roles
  • Allowed Status
  • Forgot Password Link
  • Redirect Rules
  • Error Messages
  • Default Message
  • Already logged in
  • Incorrect email/password
  • Not Authorized
  • Status not allowed
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational