Included Pages

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:
1
defp onboard_new_users(conn, _opts) do
2
  if conn.assigns[:current_user] && !conn.assigns.current_user.is_onboarded do
3
    conn
4
    |> redirect(to: Routes.live_path(conn, PetalProWeb.UserOnboardingLive))
5
    |> halt()
6
  else
7
    conn
8
  end
9
end
Copied!
You can pipe any set of routes through this plug like so:
1
scope "/", PetalProWeb do
2
  pipe_through [:browser, :onxboard_new_users]
3
 
4
  # routes go here
5
end
Copied!
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:
1
defmodule PetalPro.Logs.Log do
2
  ...
3
  
4
  @action_options [
5
    "update_profile",
6
    "register",
7
    "sign_in",
8
    "sign_out",
9
    "confirm_new_email",
10
    "delete_user"
11
  ]
12
  
13
  ...
14
end
Copied!
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.