🗃️Included Pages
While screenshots in this section are in dark mode, every page also has a light mode.
While screenshots in this section are in dark mode, every page also has a light mode.
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.
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.
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:
You can pipe any set of routes through this plug like so:
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.
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.
Shows a list of your apps users. You can search users by name/email/ID and edit their fields.
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:
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.
Shows a list of all transactional emails. Allows developers to see what emails look like without having to continually send them.
This comes with Swoosh, the email sending library. We've just housed it in the dev section.
