Merge pull request #45 from FBoucher/dev

Adding Statistics page and so much more

Author: fboucher

.all-contributorsrc

@@ -24,6 +24,34 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "cmatskas",
+      "name": "Christos Matskas",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/4126750?v=4",
+      "profile": "https://cmatskas.com",
+      "contributions": [
+        "security",
+        "bug"
+      ]
+    },
+    {
+      "login": "ronhowe",
+      "name": "Ron Howe",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/5210043?v=4",
+      "profile": "https://github.com/ronhowe",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Mark-Phillipson",
+      "name": "Mark Phillipson",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/16239024?v=4",
+      "profile": "https://github.com/Mark-Phillipson",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: [fboucher]# Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/azure-static-web-apps-gray-river-07f57dd0f.yml

@@ -0,0 +1,45 @@
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - dev
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - dev
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: true
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v0.0.1-preview
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GRAY_RIVER_07F57DD0F }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: "upload"
+          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "src/TinyBlazorAdmin/" # App source code path
+          #api_location: "Api" # Api source code path - optional
+          output_location: "wwwroot" # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v0.0.1-preview
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GRAY_RIVER_07F57DD0F }}
+          action: "close"

README.md

@@ -1,17 +1,25 @@
 # TinyBlazorAdmin
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
- Admin tools for [Azure Url Shortener](https://github.com/FBoucher/AzUrlShortener) using Blazor Single Page Application (webassembly).
+ Admin tools for [Azure Url Shortener](https://github.com/FBoucher/AzUrlShortener) using [Blazor Single Page Application (webassembly)](https://azure.microsoft.com/services/app-service/static/?WT.mc_id=dotnet-0000-frbouche).
+
+The project is now at version 1 and ready to be used! ~~just getting started but should have a v1 ready in Summer 2020~~. It is using Azure Active Directory (AAD) as authentication for the user and to connect to the API (Azure Function).
+
+![Tiny Blazor Admin home page][tinyBA_home]
+
+Once authenticated you can manage your URLs and see some statistics. Thanks to [Syncfusion](https://www.syncfusion.com/blazor-components) for the community licences. Everyone can use Tiny Blazor Admin with that great look!
+
+![Tiny Blazor Admin URLs manager page][inyBA_urls]
+
+![Tiny Blazor Admin Statistics page][inyBA_stats]
 
-![TinyBlazorAdmin][TinyBlazorAdmin]
 
-The project is now at version 1 and ready to be use! ~~just getting started but should have a v1 ready in Summer 2020~~. It will use Azure Active Directory (AAD) as authentication for the user and to connect to the API (Azure Function).
 
 # Deployment
 
- Until an automatic deployment is created, you will need to deploy some part manually. [All the steps to deploy the TinyBlazorAdmin app into Azure are listed here](deployment.md). You can also run it somewhere else if you prefer, even locally.
+Until an automatic deployment is created, you will need to deploy some part manually. [All the steps to deploy the TinyBlazorAdmin app into Azure are listed here](deployment.md). You can also run it somewhere else if you prefer, even locally.
 
 
 
@@ -23,7 +31,9 @@ To see the current work in progress: [GLO boards](https://app.gitkraken.com/glo/
 
 
 [TinyBlazorAdmin]: medias/TinyBlazorAdmin.png
-
+[tinyBA_home]: medias/tinyBA_home.png
+[inyBA_stats]: medias/inyBA_stats.png
+[inyBA_urls]: medias/inyBA_urls.png
 
 ## Contributors ✨
 
@@ -36,11 +46,14 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   <tr>
     <td align="center"><a href="http://cloud5mins.com"><img src="https://avatars3.githubusercontent.com/u/2404846?v=4" width="100px;" alt=""/><br /><sub><b>Frank Boucher</b></sub></a><br /><a href="https://github.com/FBoucher/TinyBlazorAdmin/commits?author=FBoucher" title="Documentation">📖</a> <a href="https://github.com/FBoucher/TinyBlazorAdmin/commits?author=FBoucher" title="Code">💻</a> <a href="#ideas-FBoucher" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="http://www.mayoclinic.org"><img src="https://avatars3.githubusercontent.com/u/765798?v=4" width="100px;" alt=""/><br /><sub><b>jbrule</b></sub></a><br /><a href="https://github.com/FBoucher/TinyBlazorAdmin/commits?author=jbrule" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://cmatskas.com"><img src="https://avatars3.githubusercontent.com/u/4126750?v=4" width="100px;" alt=""/><br /><sub><b>Christos Matskas</b></sub></a><br /><a href="#security-cmatskas" title="Security">🛡️</a> <a href="https://github.com/FBoucher/TinyBlazorAdmin/issues?q=author%3Acmatskas" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/ronhowe"><img src="https://avatars1.githubusercontent.com/u/5210043?v=4" width="100px;" alt=""/><br /><sub><b>Ron Howe</b></sub></a><br /><a href="https://github.com/FBoucher/TinyBlazorAdmin/commits?author=ronhowe" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/Mark-Phillipson"><img src="https://avatars0.githubusercontent.com/u/16239024?v=4" width="100px;" alt=""/><br /><sub><b>Mark Phillipson</b></sub></a><br /><a href="https://github.com/FBoucher/TinyBlazorAdmin/commits?author=Mark-Phillipson" title="Documentation">📖</a></td>
   </tr>
 </table>
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

deployment.md

@@ -1,34 +1,75 @@
 # Deployment
 
- Until an automatic deployment is created here is the steps to deploy the TinyBlazorAdmin app into Azure. You can run it somewhere else and even locally.
+Until a "full automatic" deployment is created, here are all the steps to deploy the TinyBlazorAdmin app into Azure. You can run it somewhere else and even locally.
 
-## Create the Backend
+## First thing first
 
-This project is a frontend only so you will need to deploy the [Azure Url Shortener](https://github.com/FBoucher/AzUrlShortener) in "headless mode". Do to it click the blue button below and make sure to select **none** as Frontend
+You need to **fork this repo** into your own account. You will need to update the configuration (this document will explain when and what), therefore it needs to be yours.
 
-[![Deploy Backend to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?WT.mc_id=urlshortener-github-frbouche#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2FFBoucher%2FAzUrlShortener%2Fmaster%2Fdeployment%2FazureDeploy.json)
+To fork a GitHub repository click on the fork button on the top right of the screen. If you need more detail have a look to this GitHub doc: [Fork a repo
+](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo).
+
+## Deploy AzUrlShortener (the Backend)
+
+This project is a frontend only so you will need to deploy the [Azure Url Shortener](https://github.com/FBoucher/AzUrlShortener) in "headless mode". Do to it, click the blue button below and make sure to select **none** as Frontend
+
+[![Deploy Backend to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?WT.mc_id=urlshortener-github-frbouche#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2FFBoucher%2FAzUrlShortener%2Fmain%2Fdeployment%2FazureDeploy.json)
 
 ![CreateBackend][CreateBackend]
 
+
+## Deploy TinyBlazorAdmin (the Frontend)
+
+There are many ways you could run Tiny Blazor Admin website. In this deployment, we will use the new [Azure Static Web App (SWA)](https://azure.microsoft.com/en-ca/services/app-service/static/?WT.mc_id=tinyblazoradmin-github-frbouche). However, because the TinyBlazorAdmin use Azure Active Directory (AAD), we need a standalone Azure Function (deployed at the previous step).
+
+Open Azure portal (portal.azure.com), open the **resource group** where you created the backend (ex: streamDemo is our case). Click the "**+**" and search **Static Web App**, and click the *Create* button. 
+
+![Creating swa][swa_create1]
+
+> Note: You will need to **Authorize Azure Static Web Apps**, to have access to _your_ GitHub repository (the one created when you forked the project). This is required because SWA uses GitHub Action to deploy.
+
+![Creating swa part 2][swa_create2]
+
+Select your organization, repository and branch (ex: main).
+
+![Creating swa part 3][swa_create3]
+
+Select **Blazor** as your *Build Presets*. The *App location* needs to be the location of the project file; in our case `src/TinyBlazorAdmin/`. The *App artifact location* can be left to wwwroot. 
+
+>Note: We don't need the Api location, because AzURLShortener is deployed in a full standalone Azure Function.
+
+Once it's all filled, click the Review, and create button. It will takes a few minutes to get deployed. During this time let's create and configure our security components.
+
 ## Create Azure Active Directory (AAD) Components
 
-### Create App for the Fontend
+### Create AAD App for the Fontend
+
+We need a Service Principal that we will use to authenticate our user to Azure Active Directory (AAD). To achieve this we will create an application registration in Azure.
+
+From the Azure Portal (portal.azure.com), open the **Azure Active Directory** page. From the left option menu select **App registrations**, then create a new registration. Use a name that will help you to remember that it's for the TinyBlazorAdmin website (ex: TinyAdminApp) (1)
 
-We need a Service Principal that we will use to authenticate our user to Azure Active Directory (AAD). To accheive this we will create a application registration in Azure.
+![RegisterClientApp][RegisterClientApp]
 
-From the Azure Portal (portal.azure.com), open the **Azure Active Directory** page. From the left option menu select **App registrations**, then create a new registration. Use a name that will helps you to remember that it's for the TinyBlazorAdmin website (ex: 
-TinyAdminApp)
+For the Redirect URL use **Web** (3) and enter the URL of the Azure Static WebApp deployed previously and add `/authentication/login-callback`. It should look lsomething like this:
+
+```
+https://bolly-tiger-04a15beef.azurestaticapps.net/authentication/login-callback
+
+```
 
 **Note the ClientID and TenantID.**
 
-If you need to retreive the ClientID and TenantID, they will be diplay at the top of the page once you select an app in the portal.
+If you need to retrieve the ClientID and TenantID, they will be display at the top of the page once you select an app in the portal.
 
 ![Create a new registration][newRegistration]
 
+Go back in the Authentication and in the section Implicit grant check the checkbox `Access Token` and `ID Tokens`
+
+![tokensaccess][tokensaccess]
 
 ### Create App for the Azure Function
 
-We need a second App registration, this time to let the Azure Function validate that user information contain into the token is valid.
+We need a second App registration, this time to let the Azure Function validate that user information contained in the token is valid.
 
 ![First steps to create the AD App registration][azFunction_Auth_step1]
 
@@ -40,9 +81,9 @@ From the Azure Portal, go to your Azure Function. From the left panel select the
 2. Make sure *Create New AD App* is selected.
 3. Give the AD App a name.
 4. Click Ok.
-5. DON"T FORGET TO CLICK THE SAVE BUTTON
+5. DON'T FORGET TO CLICK THE SAVE BUTTON
 
-Now, we need to configure the brand new Ad App registration. Still from the Azure portal open the *Active Directory* blade. Select the *App registration* option from the left menu. Then select the application you just created.
+Now, we need to configure the brand-new Ad App registration. Still from the Azure portal open the *Active Directory* blade. Select the *App registration* option from the left menu. Then select the application you just created.
 
 ![ConfigAzFuncADapp][ConfigAzFuncADapp]
 
@@ -53,31 +94,46 @@ Now, we need to configure the brand new Ad App registration. Still from the Azur
 5. Save by clicking *Add application*.
 
 
-## Deploy TinyBlazorAdmin
-
-(more details to come but here are the steps)
-
-- create a storage account 
-- set it to static website
-- Copy artifact from /deployment folder. 
 
 ## Configure Backend and Frontend to Work Together
 
+Now in your GitHub it's time to update the settings. The code needs to know the AD app to use and the Azure Function to call. Update those values inside `TinyBlazorAdmin\wwwroot\appsettings.json`
 
-And update those values inside `TinyBlazorAdmin\wwwroot\appsettings.json`
+> The **Endpoint** _must_ ends with a `/`
 
 ```json
 {
   "AzureAd": {
     "Authority": "https://login.microsoftonline.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxxx",
     "ClientId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxxx",
     "ValidateAuthority": true
+  },
+  "UrlShortenerSecuredService": {
+    "Endpoint": "https://__azFunction_URL__.azurewebsites.net/"
   }
 }
 ```
 
+## Enabeling Cross-Origin Resource Sharing (CORS)
+
+
+First we need the url of the caller (aka TinyBlazorAdmin). From the Azure Portal, open the TinyBlazorAdmin SWA blade. Note the URL display in the top right of the page this is the URL of your admin page.
 
+![swa_URL][swa_URL]
 
+Now we need to add this URL to the list in the CORS of the Azure Function that run AzUrlShortener. From the Azure portal open the blade of AzUrlShortener. From the left menu search CORS, and click it.  Add the URL of the SWA and don't forget to save.
+
+
+![azFunction_CORS][azFunction_CORS]
+
+## Try it!
+
+Voila, the deployment is now completed. You can test it by creating a new short URL using the admin SWA. 
+
+
+## Adding Custom Domain
+
+To add a custom domain to your AzUrlShortener & TinyBlazorAdmin, [follow these steps](https://github.com/FBoucher/AzUrlShortener/blob/main/post-deployment-configuration.md#add-a-custom-domain) from the the AzUrlShortener repo.
 
 
 [CreateBackend]: medias/CreateBackend.png
@@ -88,4 +144,9 @@ And update those values inside `TinyBlazorAdmin\wwwroot\appsettings.json`
 [azFunction_Auth_step1]: medias/azFunction_Auth_step1.png
 [azFunction_Auth_step2]: medias/azFunction_Auth_step2.png
 [ConfigAzFuncADapp]: medias/ConfigAzFuncADapp.png
-
+[tokensaccess]: medias/tokensaccess.png
+[swa_create1]: medias/swa_create1.png
+[swa_create2]: medias/swa_create2.png
+[swa_create3]: medias/swa_create3.png
+[swa_URL]: medias/swa_URL.png
+[azFunction_CORS]: medias/azFunction_CORS.png