Chillweb/numstation-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
benjibennn
2023-12-22 12:35:55 +08:00
commit 9f89a732d6
872 changed files with 156291 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
wave/docs/features/admin.md Normal file
View File

@@ -0,0 +1,75 @@
# Admin
Wave has been built using the Voyager Admin, which is an all-in-one admin interface for Laravel. This means that you can leverage all the powers of Wave with the power of Voyager as well.
> If you have not had a chance to check out the documentation be sure to head over to <a href="https://voyager-docs.devdojo.com" target="_blank">voyager-docs.devdojo.com</a> to learn more.
- [The Admin Interface](#admin-interface)
- [Admin Dashboard Sections](#admin-dashboard-sections)
---
<a name="admin-interface"></a>
### Admin Interface
You may have noticed the UI for the Wave admin may look a little different than the default Voyager theme.
![admin](https://cdn.devdojo.com/images/april2021/admin.png)
The different UI will have no effect on the Voyager functionality. Everything that you enjoy with Voyager will be the same with the Wave admin.
Next, let’s briefly go over each section of the Voyager admin.
<a name="admin-dashboard-sections"></a>
### Admin Dashboard Sections
Inside of your admin dashboard there are 12 top-level sections which include:
1. Dashboard Home
2. Plans
3. Roles
4. Users
5. Media
6. Posts
7. Pages
8. Categories
9. Announcements
10. Tools
11. Settings
12. Themes
**Dashboard Home**
The Dashboard homepage is where you will land when you first login to the admin dashboard. You can view statistics on site traffic, users, posts, and many other content on your site.
**Plans**
In this section of the admin you can Add, Edit, Delete subscription plans associated with your Software as a Service.
**Roles**
In this section you can Add, Edit, Delete user roles and permissions in your application. A specific role will then be associated with a Subscription Plan above.
**Users**
You can view all the users of your application here. You can also Edit, Add, or Delete users of your application.
**Media**
This is your Media Manager where you can view all the media in your application. You can also Upload, Rename, and Delete current media.
**Posts**
This is where you can write blog posts related to your Software as a Service. you can also Edit or Delete current posts in your application.
**Pages**
You can add new pages to your application and link to them in the front-end. These pages might be an About page, Policy page, or any other page you need to add to your application.
**Categories**
You can add, edit, or delete post categories in this section. After creating a new category you can then categorize any post with this specific category in your application.
**Announcements**
In the announcements section you can add new announcements to be shown to your users. User will see the latest popup announcement when they visit your application so they can stay updated with the latest features or news related to your SAAS.
**Tools**
The tools section has a variety of tools that you can use to manage your SAAS including a Menu Builder, Bread Builder, and Database Structure.
**Settings**
In this section of you admin you can modify site-wide settings for your application including Authentication and Billing settings.
**Themes**
In this section you can view the current themes in your application, activate/deactivate themes, and edit theme settings.

34
wave/docs/features/announcements.md Normal file
View File

@@ -0,0 +1,34 @@
# Announcements
As you continue to improve your SAAS app you’re going to need a quick and easy way to communicate with your users. Announcements are perfect for letting your users know about bug fixes or special promotions.
- [Creating an Announcement](#create-announcement)
- [Viewing an Announcement](#view-announcement)
---
<a name="create-announcement"></a>
### Creating an Announcement
You can create a new announcement by visiting the admin announcements section at `/admin/announcements`. If you have past announcement you’ll see them listed out. Then to create a new announcement you’ll want to click on Add New button.
![announcements 1](https://cdn.devdojo.com/images/april2021/announcements-1.png)
Then, simply add the content of your new announcement.
![announcements 2](https://cdn.devdojo.com/images/april2021/announcements-2.png)
And now your users will see your latest announcement the next time they visit your application.
<a name="view-announcement"></a>
### Viewing an Announcement
Every user in your application will see the latest announcement when they visit your application. The announcements will look as follows:
![announcements 3](https://cdn.devdojo.com/images/april2021/announcements-3.png)
The title and description will be displayed in the popup announcement. When the user clicks the announcement they will be taken to the announcement page where they can view the full content of the announcement.
![announcements 4](https://cdn.devdojo.com/images/april2021/announcements-4.png)
After the user clicks or closes the announcement they will no longer see that particular announcement.

147
wave/docs/features/api.md Normal file
View File

@@ -0,0 +1,147 @@
# API
Wave comes with an out-of-the-box API, which will allow you to provide an API to your users or build a mobile app from your API.
In this section we will go into more depth on how you can use the Wave API.
- [Access API Data](#access-data)
- [Access Token From API Key](#access-token-from-api-key)
- [Access Token from Login](#acess-token-from-login)
- [Requesting Data from Tokens](#request-data-from-token)
- [Testing Your API](#testing-api)
- [Registering via the API](#registering-via-api)
---
<a name="access-data"></a>
### Access Data from the API
In order to access data from the API a user or an application will need to pass an **Access Token** to the API. This access token will determine what kind of data can be accessed or returned.
There are 2 ways to get an Access Token:
1. You can request an **Access Token** from an API key.
2. You can request an **Access Token** with an email and password.
<a name="access-token-from-api-key"></a>
### Get Access Token from an API Key
To create an API key you can visit your API settings page at: `/settings/api`, then to create a new API key, enter a name in the textbox and click on the `Create New Key` button.
![api screenshot 1](https://cdn.devdojo.com/images/april2021/api-1.png)
After creating your new API key you will see it in the list of *Current API Keys*. You'll be able to see the Name, Date Created, and the Last Used. There are also 3 actions you can do with this new API Key. To view the current API Key. Click on the `View` button:
![api screenshot 2](https://cdn.devdojo.com/images/april2021/api-2.png)
And you will see the current API key where you can copy and paste it to be used.
![api screenshot 3](https://cdn.devdojo.com/images/april2021/api-3.png)
Next, you can click on the `Edit` button:
![api screenshot 4](https://cdn.devdojo.com/images/april2021/api-4.png)
Where you will be able to edit the current API key name.
![api screenshot 5](https://cdn.devdojo.com/images/april2021/api-5.png)
Lastly, if you click on the delete button:
![api screenshot 6](https://cdn.devdojo.com/images/april2021/api-6.png)
You will be able to delete the current API key.
![api screenshot 7](https://cdn.devdojo.com/images/april2021/api-7.png)
Next, let's move on to learning how you can use this API key to request an **Access Token** from the API. After we recieve the **Access Token** we can then use that to retrieve data from our application.
To request an **Access Token** we can submit a POST request to:
```php
/api/token?key=API_KEY_HERE
```
And you will get a response that looks similar to the following:
```json
{
"access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC93YXZlLnRlc3RcL2FwaVwvdG9rZW4iLCJpYXQiOjE1Mzk4MDg4OTUsImV4cCI6MTUzOTgxMjQ5NSwibmJmIjoxNTM5ODA4ODk1LCJqdGkiOiJRdTViYnhwdlBkNE9tT3ZZIiwic3ViIjoyLCJwcnYiOiI4N2UwYWYxZWY5ZmQxNTgxMmZkZWM5NzE1M2ExNGUwYjA0NzU0NmFhIn0.AJNTXTlnI74ZyPw2rqvEaI7P5YPaLnZNWcCBBmRX0W0"
}
```
This is the **Access Token** we will use to retrieve data in our application. We'll show you how to use this Access Token in the next few steps.
<a name="acess-token-from-login"></a>
## Get Access Token from Login
To get an **Access Token** from a User Login you can do a POST request to:
```php
/api/login?email=admin@admin.com&password=password
```
And you will get a similar response to the response above:
```json
{
"access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC93YXZlLnRlc3RcL2FwaVwvbG9naW4iLCJpYXQiOjE1Mzk4MTE0NjUsImV4cCI6MTUzOTgxNTA2NSwibmJmIjoxNTM5ODExNDY1LCJqdGkiOiJKRWljOGdTWFp4S0VjaWh1Iiwic3ViIjoxLCJwcnYiOiI4N2UwYWYxZWY5ZmQxNTgxMmZkZWM5NzE1M2ExNGUwYjA0NzU0NmFhIn0._1oFRK-zeUKMpvCcg8kmM86avzzmI--yQnI4KRwYk1k",
"token_type": "bearer",
"expires_in": 60
}
```
You'll see that this response includes 2 more fields the **token_type** and the **expires_in**. When your application detects the access token has expired it will need request a new access token with the following API request:
| METHOD | URI | Bearer TOKEN |
|:-|:-|:-|
| POST | `/api/refresh` | Bearer: eyJ0e... |
And you will recieve a new **Access Token** for your application to be used. This expiration and refresh tokens are common for keeping your API secure.
<a name="request-data-from-token"></a>
### Request Data with an Access Token
Now, that you have an Access Token you can request data from the application using that token. Based on the permission of the current user they will be able to **B**rowse, **R**ead, **E**dit, **A**dd, and **D**elete any content in your application.
Take the blog **posts** for instance, a user can retrieve data using the following restful routes:
| TYPE | METHOD | URI | Bearer TOKEN |
|:-|:-|:-|:-|
| JSON | GET (Browse) | `/api/posts` | Bearer: eyJ0e... |
| JSON | GET (Read) | `/api/posts/{id}` | Bearer: eyJ0e... |
| JSON | PUT (Edit) | `/api/posts/{id}` | Bearer: eyJ0e... |
| JSON | POST (Add) | `/api/posts` | Bearer: eyJ0e... |
| JSON | DELETE (Delete) | `/api/posts` | Bearer: eyJ0e... |
In the PUT and POST methods above you can pass JSON data to Edit or Add content.
<a name="testing-api"></a>
### Testing Your API
You can test out your application by using a third-party tool called <a href="https://insomnia.rest/" target="_blank">Insomnia</a>, this is a free app that you can download and you can view all the endpoints on the left and the API data on the right.
![api screenshot 8](https://cdn.devdojo.com/images/april2021/api-8.png)
In order to download the End Points for the Wave application you can find this file located here: [https://github.com/thedevdojo/laravel-wave-api-endpoints](https://github.com/thedevdojo/laravel-wave-api-endpoints), this page also shows instructions on how to import the current endpoints.
After you have imported the API endpoints, you may also wish to change the BASE_URL variable in the application. We use `https://wave.test` for testing, but your local URL may be different. To do this, you'll need to click on **Development->Manage Environments**
![api screenshot 9](https://cdn.devdojo.com/images/april2021/api-9.png)
Then, you'll need to change the `base_url` value to your application URL.
![api screenshot 10](https://cdn.devdojo.com/images/april2021/api-10.png)
And, now you're ready to test out your API.
<a name="registering-via-api"></a>
### Registering via the API
If you are creating an API, you may also wish to allow your users to register. This is simple as well. You can perform a POST request to:
```php
/api/register?name=John Doe&username=jdoe&email=jdoe@gmail.com&password=pass
```
And a new user will be registered and given an Access Token to access data via your API.

57
wave/docs/features/authentication.md Normal file
View File

@@ -0,0 +1,57 @@
# Authentication
Wave is built on top of the default Laravel Authentication and includes a few additional features such as email verification, forgot password, username login, and of course billing upon registration.
- [Registration](#register)
- [Login](#login)
- [Email Verification](#email-verification)
- [Login Options](#login-options)
- [Forgot Password](#forgot-password)
---
<a name="register"></a>
### Registration
By default users will need to purchase in order to register for an account; however, you can open up free registration by visiting the admin settings `/admin/settings`, clicking on the Billing Tab, toggling off *Require Credit Card Up Front*, and save.
![no-cc](https://cdn.devdojo.com/images/april2021/no-cc.png)
Now your users will be able to register for a free account.
<a name="login"></a>
### Login
After a user has created an account through your application, they can login by visiting the `/login` route. After successfully logging in the user will then be redirected to their dashboard.
> If you have just installed Wave you can login with the default email `admin@admin.com` and password as `password`
<a name="email-verification"></a>
### Email verification
You may choose to require your users to verify their email before signing up for a free trial. To enable this you will need to visit the admin settings page at `/admin/settings`, click on the Auth tab and then toggle *Verify Email during Sign Up*
![verify-email](https://cdn.devdojo.com/images/april2021/verify-email.png)
<a name="login-options"></a>
### Login with email or username
Optionally you may choose to allow users to login with their email address or their username. You can also change this in the **Auth** tab of your admin settings (see screenshot above).
<a name="forgot-password"></a>
### Forgot password
Users can click on the forgot password link on the login page and they will be taken to a form where they can enter their email address.The user will then receive an email with a link to your application where they can reset their password.
> Quick note on Email Verification and Forgot Password, your application must be configured to send email before these features can be used.
The simplest way to test emails in development mode is to use [Mailtrap](https://mailtrap.io/). You can sign up for a free account and then enter your mailtrap credentials in your `.env` file:
```html
MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_ENCRYPTION=null
```

60
wave/docs/features/billing.md Normal file
View File

@@ -0,0 +1,60 @@
# Billing
Wave comes packaged with integrated billing. This means that you can charge your customers to access your application or features in your application.
Wave integrates seamlessly with the <a href="https://paddle.com" target="_blank">Paddle</a> Payment Platform.
- [Create a Paddle Account](#paddle-account)
- [Add Paddle API Credentials](#paddle-credentials)
- [Test Billing Process](#test-billing)
<a name="paddle-account"></a>
## Create a Paddle Account
In order to integrate your application with Paddle you will need to signup for an account at <a href="https://paddle.com/signup" target="_blank">paddle.com/signup</a>. It may take a few days to get access to your Paddle account before you're ready to go live. In the meantime, you can signup for a Sandbox account at <a href="https://sandbox-vendors.paddle.com/signup" target="_blank">sandbox-vendors.paddle.com/signup</a>, and start testing out your payment functionality right away.
After you have created your Paddle Account you'll be able to login and see your dashboard, which should look similar to the following:
![paddle-dashboard.png](https://cdn.devdojo.com/images/april2021/paddle-dashboard.png)
Next, let's add your Paddle API credentials.
<a name="paddle-credentials"></a>
### Add Paddle API Credentials
Inside of your Paddle Dashboard you'll see a button under the **Developer Tools** menu, called **Authentication**, click on that button to get your API Authentication Credentials.
![paddle-authentication.png](https://cdn.devdojo.com/images/april2021/paddle-authentication.png)
On this page you'll find your **Vendor ID** and your **API Auth Code**. These are the credentials that you will need to add to your `.env` file for `PADDLE_VENDOR_ID` and `PADDLE_VENDOR_AUTH_CODE`:
```
PADDLE_VENDOR_ID=9999
PADDLE_VENDOR_AUTH_CODE=YOUR_REALLY_LONG_API_KEY_HERE
PADDLE_ENV=sandbox
```
After adding these credentials, your application has been successfully configured with Paddle.
#### Ready to go Live?
When you are ready to go live and take live payments you'll want to change the `PADDLE_ENV` from `sandbox` to `live`, and you'll be ready to accept live payments 💵
<a name="test-billing"></a>
### Test Billing Process
Before you can test out the full billing process, you will need to add a few [Subscription Plans](/docs/features/subscription-plans).
**Notice**: If you are using a Sandbox account, you will need to test your app from a `http://localhost` URL. The best way to do this is to utilize the laravel **Artisan Serve** command, or you can use [Laravel Sail](https://www.youtube.com/watch?v=WGhiY5xamms) docker image to serve up your app from a localhost URL.
After adding subscription plans and configuring your application with your Paddle API keys, you will now be able to test out the billing process using the following credentials:
```
Credit Card: 4242 4242 4242 4242
Expiration: Any Future Date
CVC: Any 3 digit code
```
---
After adding your Paddle API credentials, you'll need to configure your app with a few [Subscription Plans](/docs/features/subscription-plans) in order to test out the whole process. Let's move on to the [next step](/docs/features/subscription-plans) where you will learn how to do this.

42
wave/docs/features/blog.md Normal file
View File

@@ -0,0 +1,42 @@
# Blog
In order to grow your SAAS you will need a blog to write about relevant content. This will help your business grow and get free organic traffic.
In this section you will learn about the blogging platform that comes along with Wave.
- [Your Blog](#your-blog)
- [Posts Admin](#posts-admin)
- [Posts Categories](#posts-categories)
---
<a name="your-blog"></a>
### Your Blog
After installing Wave, you will also have a blog located at the `/blog` route. You can modify or edit this theme file located at `resources/views/themes/{theme_folder}/blog/index.blade.php`
![blog 1](https://cdn.devdojo.com/images/april2021/blog-1.png)
You can also view a single post by clicking the thumbnail or title of the post. You can modify or edit the theme post view at `resources/views/themes/{theme_folder}/blog/post.blade.php`
![blog 2](https://cdn.devdojo.com/images/april2021/blog-2.png)
<a name="posts-admin"></a>
### Posts Admin
You can edit, add, or delete posts in your admin by visiting `/admin/posts`. To create a new post you can click the `Add New` button:
![blog 3](https://cdn.devdojo.com/images/april2021/blog-3.png)
Then, you'll need to fill out your new post information and click save. Only Posts with a status of `PUBLISHED` will show up on the front-end.
![blog 4](https://cdn.devdojo.com/images/april2021/blog-4.png)
<a name="posts-categories"></a>
### Post Categories
You can also choose to Add, Edit or Delete post categories by visiting the Admin Post Categories at `/admin/categories`.
![blog 5](https://cdn.devdojo.com/images/april2021/blog-5.png)
After adding a new category, you will be able to create a new post and categorize it in that specific category.

103
wave/docs/features/notifications.md Normal file
View File

@@ -0,0 +1,103 @@
# Notifications
Wave leverages the default <a href="https://laravel.com/docs/notifications" target="_blank">Laravel Notification</a> system and gives you an elegant UI to display those notifications in your app.
- [When to Use Notifications](#when-to-use)
- [Creating Notifications](#create-notifications)
- [Viewing Notifications](#viewing-notifications)
---
<a name="when-to-use"></a>
### When to use Notifications
When to use notifications in your application will be up to you. Here are a few examples:
1. Notify users in a forum discussion when a new response is added.
2. Notify a user when someone follows them.
3. Notify the user when someone sends them a message.
You get the general idea right? You are the creator and you can decide what kind of notifications your user will receive.
<a name="create-notifications"></a>
### Creating Notifications
We have built the Wave notifications on top of the default Laravel notifications, which are very simple to use and easy to implement.
> If you haven't checked out the Laravel notifications documentation, head on over to the official documentation at <a href="https://laravel.com/docs/notifications" target="_blank">laravel.com/docs/notifications</a>
We can create a new notification by running the following artisan command:
```php
php artisan make:notification TestNotification
```
You will see a new file at: `/app/Notifications/TestNotification`. Scroll down to where you see:
```php
public function via($notifiable)
{
return ['mail'];
}
```
and change this to:
```php
public function via($notifiable)
{
return ['database'];
}
```
Then scroll down to where you see:
```php
public function toArray($notifiable)
{
return [
//
];
}
```
And replace it with:
```php
public function toArray($notifiable)
{
return [
'title' => 'My Title Here',
'icon' => '/storage/users/default.png',
'body' => 'This is the body content of the notification... Yada yada yada',
'link' => 'https://google.com'
];
}
```
Next, let's create a few notifications. We can do this by using the `tinker` command:
```php
php artisan tinker
```
Inside of the tinker command you will want to run the following command a few times:
```php
App\Models\User::find(1)->notify(new App\Notifications\TestNotification);
```
After you have run that command, let's move on to learning how the user can view those notifications:
<a name="viewing-notifications"></a>
### Viewing Notifications
Login to the application with the admin user and visit any page in your application. You'll notice a bell icon on the top right with a number indicating how many unread notifications you have.
![Notification Bell](https://cdn.devdojo.com/images/april2021/notifications-bell.png)
When you hover over the bell icon you will see a nice dropdown displaying the current user notifications.
![Notification Dropdown](https://cdn.devdojo.com/images/april2021/notifications-dropdown.png)
The user can additionally, click on the `View All Notifications` button at the bottom of the dropdown and they will be taken to their notifications page where they can view all their notifications.

82
wave/docs/features/subscription-plans.md Normal file
View File

@@ -0,0 +1,82 @@
# Subscription Plans
Billing users for a subscription plan is pretty straight forward. Every Plan **hasOne** Role, so when a user subscribes to a plan they will inherit the permissions associated with that user role.
The Plan you create in Wave will be associated with a plan you create on Paddle.
- [Current Plans](#current-plans)
- [Deleting Plans](#delete-plans)
- [Creating Plans](#create-plans)
- [Creating Plans in Paddle](#create-plans-paddle)
---
<a name="current-plans"></a>
### Current Plans
When you install Wave you will see there are 3 default plans:
1. Basic
2. Premium
3. Pro
You can delete these plans and create your own if you would like or you can edit the current plans.
<a name="delete-plans"></a>
### Deleting Plans
In order to show you how to create a new plan, we will delete the existing **Basic** plan. To delete plans you can visit `/admin/plans` and click Delete:
![plans-1.png](https://cdn.devdojo.com/images/april2021/plans-1.png)
Since our plan is associated with a role, we will also delete the associated role at `/admin/roles`
![plans-roles.png](https://cdn.devdojo.com/images/april2021/plans-roles.png)
We will cover more about User Roles in the next section.
<a name="create-plans"></a>
### Creating Plans
Now, let’s create a new plan called *basic*. But before I create a new plan I will first create a new role that I want to assign to this plan. My new role will be called *starter* as well, but you can give the role any name you would like. To create a new role click on the `Add New` button.
![plans-roles-add.png](https://cdn.devdojo.com/images/april2021/plans-roles-add.png)
Then we can create our new role called **basic**
![plans-add-new-role.png](https://cdn.devdojo.com/images/april2021/plans-add-new-role.png)
Notice on this page you can specify permissions for this role. We will talk more about this in the next section. For now, you can choose to check a few of them, or leave them all unchecked. Below is a screenshot of what I have checked in this example:
![](/wave/img/docs/1.0/wave-role-permissions.png)
Now that the role is created we can create a new plan and associate it with a role:
![wave-add-plan.png](https://cdn.devdojo.com/images/april2021/wave-add-plan.png)
> Notice the **Plan ID** when creating your plan. This Plan ID is an ID we need to create in Paddle. We'll do this in the next step.
Fill out the rest of the info on the plan and click `Save` to create your new plan.
<a name="create-plans-paddle"></a>
### Creating Plans in Paddle
To create a new plan in Paddle, login to your dashboard and click **Catalog**->**Subscription Plans**. Click on the **+ New Plan** button at the top right to create a new plan.
![paddle-plans-01.png](https://cdn.devdojo.com/images/april2021/paddle-plans-01.png)
You'll see a pop-up that will ask for the plan name, icon, and price. Fill out the info for your plan.
![paddle-plans-02.png](https://cdn.devdojo.com/images/april2021/paddle-plans-02.png)
Scroll down to the bottom and click the **Save Plan** button.
![paddle-plans-03.png](https://cdn.devdojo.com/images/april2021/paddle-plans-03.png)
After creating your new plan, you'll see the **Plan ID** you need to associate with the Wave Plan you create from the previous step.
![paddle-plans-04.png](https://cdn.devdojo.com/images/april2021/paddle-plans-04.png)
After adding all your plans, we're ready to [test out the billing process](/docs/features/billing#test-billing).
---
Next, we'll talk about User Roles. Remember every Plan is associated with a User Role, and this is how we will determine what a user has access to in your application.

24
wave/docs/features/themes.md Normal file
View File

@@ -0,0 +1,24 @@
# Themes
Wave has full theme support, which means you can separate your views into separate themes. This will make it easier to create new versions of your site and revert back if needed. This will also help you separate a lot of your back-end logic with the front-end.
In this section you will learn where the themes are located and how to activate a specific theme.
## Theme Location
Every theme is located inside of the `resources/views/themes` folder. When you install Wave there will only be 1 theme available, the `tailwind` theme. If you <a href="https://devdojo.com/wave#pro" target="_blank">Upgrade to a Pro account</a>, you will gain access to the Wave Pro repo, which currently has another theme available, the `tallstack` theme. Each theme is responsible for managing their own assets. In each theme you will find a `package.json` which contains the front-end dependencies to run webpack and build each one.
## Theme Assets
To compile a theme's assets you can navigate into the theme folder and run `npm install`, after you install the node dependencies you can run `npm run watch` to start your asset watcher and develop your theme. When you are ready to compile and minify your assets for production you will want to run `npm run production`.
## Activating Themes
If you are logged in as an admin user and you visit visit the <a href="/admin/themes" target="_blank">`/admin/themes`</a> section of your application you’ll see the current themes available in your app.
![themes](https://cdn.devdojo.com/images/may2021/themes.png)
To activate a Theme you can simply click the Activate button for the current theme you would like to activate, and that will be the current active theme.
For more information on customizing and modifying themes, you may want to check out the <a href="https://devdojo.com/wave/videos" target="_blank">Wave Videos</a> to learn more about how you can customize and build new themes for your application.

20
wave/docs/features/user-impersonation.md Normal file
View File

@@ -0,0 +1,20 @@
# User Impersonations
With user impersonations you can easily impersonate any user on your site. This will come in handy when you need to debug an issue that a specific user is experiencing.
Impersonating a user will allow you to login to your application acting as a specific user.
- [Impersonate a User](#impersonate)
<a name="impersonate"></a>
## Impersonate a User
To impersonate a user you can visit your users section in your application at `/admin/users`. Find the user you want to impersonate and click on the Impersonate button.
![impersonate-1.png](https://cdn.devdojo.com/images/april2021/impersonate-1.png)
You will now see that you are logged in as that specific user. You can click the user menu dropdown and you'll see a new **Leave Impersonation** button to exit that user account and log back in as your original admin user.
![impersonate-2.png](https://cdn.devdojo.com/images/april2021/impersonate-2.png)
Impersonations... 🍰 Piece of cake, right?

98
wave/docs/features/user-profiles.md Normal file
View File

@@ -0,0 +1,98 @@
# User Profiles
When building your SAAS application you may want your users to provide more information. With profiles and profile fields this couldn’t be easier. Let’s dig into how this works.
---
- [User Profile Page](#profile-page)
- [User Profile Settings](#profile-settings)
- [Custom Profile Fields](#custom-profile-fields)
- [Profile Field Types](#profile-field-types)
<a name="profile-page"></a>
### User Profile Page
Every user in your application will have a public profile page. The user will be able to visit `/@username` and view their profile. By default the profile page is public, which means anyone can visit that user profile.
![admin-view](https://cdn.devdojo.com/images/april2021/admin-view.png)
In some applications you may not have a need for a profile page. In that case, you can include the following route to your applications `routes/web.php`
```php
Route::redirect('@{username}', '/');
```
This will disable user profiles and redirect any user profile page back to the homepage.
> {warning} When disabling user profiles, the route must be placed after the `Wave::routes();` line.
---
<a name="profile-settings"></a>
### User Profile Settings
When a user registers for an account they will be able to edit their profile information by clicking on the settings in their user drop down.
On the user profile page the user can update their avatar, name, and email address. You will also see one more field, called `about`, this is an example of a custom profile field. Let's learn more about custom profile fields below.
![wave-profile.png](https://cdn.devdojo.com/images/april2021/wave-profile-2.png)
---
<a name="custom-profile-fields"></a>
### Custom Profile Fields
Custom profile fields allow you to add new fields in your user settings page. In the current theme you'll see a custom field called **about**. The **about** text_area can be generated with the following code:
```php
echo profile_field('text_area', 'about')
```
> {primary} This line of code can be found in each theme, which is located at: `resources/views/themes/{theme_name}/settings/partials/profile.blade.php`.
The `profile_field($type, $key)` function takes 2 arguments. The **type** of field, and the **key**.
We can then use the **key** to reference the value of the users custom profile value. For instance to display the user's **about** value we can do the following:
```php
auth()->user()->profile('about');
```
---
The *about* field uses a *text_area* type to display a text area. In the next part we will list the different types of profile fields you can display.
<a name="profile-field-types"></a>
### Profile Field Types
- **checkbox** - display a form check box
- **code_editor** - display a code editor (may require additional js libraries)
- **color** - display a color picker
- **date** - display a date picker (may require additional js libs)
- **file** - display a file input
- **hidden** - display a hidden input
- **image** - display an image input
- **markdown_editor** - display a markdown editor (more js required)
- **multiple_images** - display multiple image input
- **number** - display a number input
- **password** - display a password input
- **radio_btn** - display a radio button input
- **rich_text_box** - display a rich text editor (requires tinymce js)
- **select_dropdown** - display a select dropdown input
- **text** - display a textbox input
- **text_area** - display a text area input
You can use any of the profile field types above in the **first argument** of the ```profile_field($type, $key)``` function, and use any **key** (string) as the **second argument**.
Then, you can reference the value by calling:
```php
$user = User::find(1);
$user->profile($key);
```
Or you can retrieve the profile value from the authenticated user like so:
```php
auth()->user()->profile($key);
```

91
wave/docs/features/user-roles.md Normal file
View File

@@ -0,0 +1,91 @@
# User Roles
Each user in your app will have a primary role and every role has permissions to allow or deny access to content. In this section we will talk about User Roles and how to utilize roles in your application.
This functionality is also documented in Voyager; although, it’s important to re-cap the functionality since it ties directly with a Subscription Plan.
> If you are unfamiliar with Voyager, I would recommend checking out the documentation at https://voyager-docs.devdojo.com/
- [🍞 The BREAD System](#bread)
- [Adding Roles & Permissions](#roles-permissions)
- [Checking Permissions](#checking-permissions)
---
<a name="bread"></a>
### 🍞 The BREAD System
Wave uses the BREAD (browse, read, edit, add, and delete) system as opposed to the CRUD (create, read, update, and delete) system.
By using the BREAD system we can specify what type of permissions the User Role has in relation to any content on your site. The user role can have permissions to either Browse, Read, Edit, Add, or Delete any data on your website.
> Here's a quick example: If we were to create a new role called **editor** and then assign the **editor** permissions to **Browse**, **Read**, and **Add** Posts, they will only have permission to those particular actions. Meaning that user can only Browse posts, Read posts, and Add posts. The user will not have permissions to **Edit** or **Delete** posts. Pretty straight forward, right?
Since each Subscription Plan is associated with a Role. We can say that each plan has a specific set of permissions to Browse, Read, Edit, Add, or Delete content within your application.
<a name="roles-permissions"></a>
### Adding Roles & Permissions
In your application you can view or add Roles in your application by visiting `/admin/roles`. To add a new role you can click on the `Add New` button:
![add-role](https://cdn.devdojo.com/images/april2021/add-role.png)
You can give the role a name and then specify the BREAD permissions for all the content on your site.
![add-role-bread](https://cdn.devdojo.com/images/april2021/add-role-bread.png)
<a name="checking-permissions"></a>
### Checking Permissions
Next if you would like to check for permissions you can use a few helpers. Here is how you can check user permissions from a user object.
```php
// via user object
$canViewPost = $user->can('read', $post);
$canViewPost = Auth::user()->can('read', $post);
// via controller
$canViewPost = $this->authorize('read', $post);
```
You may also choose to use the Voyager facade and pass the permission as a string:
```php
$canBrowsePost = Voyager::can('browse_posts');
$canViewPost = Voyager::can('read_posts');
$canEditPost = Voyager::can('edit_posts');
$canAddPost = Voyager::can('add_posts');
$canDeletePost = Voyager::can('delete_posts');
```
Lastly, you can use the blade syntax inside of your views to check whether a user can edit a particular post, like so:
```
@can('edit', $post)
I can edit this post!
@endcan
```
---
You may also pass the Model to check for permissions:
```
@can('browse', new TCG\Voyager\Models\Post)
I can browse posts!
@endcan
```
Be sure to note that the permission will be tied to the Model specified in the Voyager Bread section.
![edit-post-bread](https://cdn.devdojo.com/images/april2021/edit-post-bread.png)
You can then choose to change the location of your model. For instance, you may want to create a new model inside of your app folder, and swap out the namespace with `App\Post`.
---
Ok, next let's move on to talking about notifications.