🗃
Included Pages
While screenshots in this section are in dark mode, every page also has a light mode.
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.
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
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. By default this shows the organizations the user is in. However this can be modified to whatever you like in dashboard_live.ex.
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
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.
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.No further explanation needed.
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.
live "/org/new", NewOrgLive
live "/org/:org_slug", OrgDashboardLive
live "/org/:org_slug/edit", EditOrgLive
live "/org/:org_slug/team", OrgTeamLive, :index
live "/org/:org_slug/team/invite", OrgTeamLive, :invite
live "/org/:org_slug/team/memberships/:id/edit", OrgTeamLive, :edit_membership
We have provided a basic CRUD for organizations. This is useful if you're building an app where people are part of any kind of organization (eg. a company or club). An organization member can be an admin or ordinary member. Members can invite new members. Admins can manage memberships. You can read more in the organizations documentation.
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.
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",
"passwordless_pin_sent",
"passwordless_pin_too_many_incorrect_attempts",
"sign_out",
"confirm_email",
"request_new_email",
"confirm_new_email",
"delete_user",
"orgs.create",
"orgs.delete_member",
"orgs.update_member",
"orgs.create_invitation",
"orgs.delete_invitation",
"orgs.accept_invitation",
"orgs.reject_invitation"
]
...
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.
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.
View sent emails here
This comes with Swoosh, the email sending library. We've just housed it in the dev section.
Navigate to an unused path to show 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.
Last modified 3mo ago