📄Included Pages

While screenshots in this section are in dark mode, every page also has a light mode.

Public pages

Landing page

The landing page with editable components

We have provided a clean, animated landing page to get you started. It is composed of a number of separate components defined in lib/components/landing_page.ex and supports light and dark mode.

Note that this page has some unique CSS and Javascript to help with animations. We use skypack to avoid a build system and prevent polluting our app.js - see the PetalPro.Components.LandingPage.javascript/1 function.

Over time we hope to build a comprehensive set of landing page components that you can mix and match.

Auth pages

All auth pages are all similar to this

These have come from mix phx.gen.auth but are styled with Tailwind and Petal Components:

• Register page

• Sign in page

• Forgot password page

Protected pages

User dashboard page

The default dashboard page

Upon signing in users will see a dashboard page on the /app route. This uses the sidebar layout, however if your app is small you can switch it to a stacked layout. You likely will delete the contents of this page and fill it with whatever you'd like your logged in users to be able to do.

User onboarding page

The onboarding page

When a user signs in for the first time, they will be presented with an onboarding page. This is useful for either collecting more information about a user or displaying a guide to using your web application.

The way this is tracked is by looking at user.is_onboarded. Upon onboarding this field will be set to true and won't be presented with this page again.

The redirect happens in a plug defined in the router:

defp onboard_new_users(conn, _opts) do
  if conn.assigns[:current_user] && !conn.assigns.current_user.is_onboarded do
    conn
    |> redirect(to: Routes.live_path(conn, PetalProWeb.UserOnboardingLive))
    |> halt()
  else
    conn
  end
end

You can pipe any set of routes through this plug like so:

scope "/", PetalProWeb do
  pipe_through [:browser, :onxboard_new_users]
 
  # routes go here
end

User settings pages

User settings pages

Edit profile

Where users can modify their profile. By default, it will just be the user's name. You may add in other fields here over time like social profiles, avatar upload and user bio.

Change email

A user can submit an email change request here. This stores a user_token in the database that matches to a URL sent in a confirmation email. If the user clicks the confirmation email, the email will be changed.

Edit password

No further explanation needed.

Edit notifications

The user can subscribe/unsubscribe from different notification types. By default we include a notification type called "Marketing notifications", which you could rename to something like "Product updates" or just "General emails".

Over time you can add in different notification types a user can sub/unsub to. For example, you might introduce commenting, and want to allow people the ability to sub/unsub to replies to your comments.

Admin pages

User management page

Admin can manage users from here

Shows a list of your apps users. You can search users by name/email/ID and edit their fields.

Logs page

Admin can view the activity of users

When a user does something on your platform a new log is created. It is up to you how many actions you want to log. By default the following actions are logged:

defmodule PetalPro.Logs.Log do
  ...
  
  @action_options [
    "update_profile",
    "register",
    "sign_in",
    "sign_out",
    "confirm_new_email",
    "delete_user"
  ]
  
  ...
end

The logs page simply allows an admin user to browse these logs. There's also an option to turn on "live logs", where the logs table will update as users perform actions in real time.

Dev pages

Email templates

See all your transactional emails here

Shows a list of all transactional emails. Allows developers to see what emails look like without having to continually send them.

Sent emails

View sent emails here

This comes with Swoosh, the email sending library. We've just housed it in the dev section.

Page builder

Build pages quickly with the "Page builder"

The "Page builder" is a way to easily create new live view or traditional static pages. It is accessible here or by simply navigating to an empty route. Eg, in your browser URL put in a random route like "http://localhost/blahblahblah", and the page builder will show up asking if you'd like to build a page at that route.