Merge branch 'main' into logos-added-register-page

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["ms-azuretools.azure-dev", "angular.ng-template", "42Crunch.vscode-openapi"]
+  "recommendations": [
+    "ms-azuretools.azure-dev",
+    "angular.ng-template",
+    "42Crunch.vscode-openapi"
+  ]
 }

.vscode/tasks.json

@@ -4,7 +4,10 @@
     {
       "label": "Start Web",
       "type": "dotenv",
-      "targetTasks": ["Restore Web", "Web npm start"],
+      "targetTasks": [
+        "Restore Web",
+        "Web npm start"
+      ],
       "file": "${input:dotEnvFilePath}"
     },
     {
@@ -35,7 +38,10 @@
     {
       "label": "Start API",
       "type": "dotenv",
-      "targetTasks": ["Restore API", "API npm start"],
+      "targetTasks": [
+        "Restore API",
+        "API npm start"
+      ],
       "file": "${input:dotEnvFilePath}"
     },
     {
@@ -65,7 +71,10 @@
     },
     {
       "label": "Start API and Web",
-      "dependsOn": ["Start API", "Start Web"],
+      "dependsOn": [
+        "Start API",
+        "Start Web"
+      ],
       "problemMatcher": []
     },
     {

README.md

@@ -19,6 +19,10 @@ You can navigate through the documentation using the table of contents below:
     - [DevOps](#devops)
     - [Developer tools](#developer-tools)
   - [Development environment](#development-environment)
+  - [Developer Guide (Website)](#developer-guide-website)
+    - [1 | Preview Website](#1--preview-website)
+    - [2 | Deploy Website](#2--deploy-website)
+    - [3 | Test Website](#3--test-website)
   - [Usage costs](#usage-costs)
   - [Project structure](#project-structure)
   - [Deploy to Azure](#deploy-to-azure)
@@ -163,7 +167,7 @@ This project is optimized for use with [GitHub Codespaces](https://github.com/fe
 The project has a  [Developer Guide](./packages/docs/website/README.md) defined under `packages/docs` and implemented as an interactive website using the [Docusaurus](https://docusaurus.io) platform.
 ### 1 | Preview Website 
 
- - Read the [website/README](./packages/docs/website/README.md) more details on setting up and building this package. 
+ - Read the [website/README](./packages/docs/website/README.md) for more details on setting up and building this package. 
  - Use the following instructions for a quickstart.
 
 ```bash
@@ -245,6 +249,7 @@ This project uses [Azure Developer CLI (`azd`)](https://aka.ms/azd) to provision
 
 ```bash
 # Login to azd. Only required once per install.
+# If the command fails, try using the --use-device-code flag
 azd auth login
 
 # Provision infrastructure and the azd development environment
@@ -254,6 +259,8 @@ azd provision
 azd deploy
 ```
 
+>The `--use-device-code` is used to log in by using a device code instead of a browser, this may resolve any browser issues while logging in. For more information on when & why to use flags, check [here](https://learn.microsoft.com/en-us/azure/developer/azure-developer-cli/reference#azd-auth-login)
+
 > If you encounter issues with the Azure Developer CLI, please open an issue [here](https://github.com/Azure/azure-dev/issues/new/choose).
 
 **Important:** It is mandatory to run these `azd` commands in this order. Provisioning first will create the `azd` development environment and outputs the `.env` file with the required environment variables. Packaging will package the application using some of the environment variables from the `.env` file.

docs/README-scenario-5.md

@@ -39,14 +39,14 @@ This scenario uses [Stripe](https://stripe.com) to handle payments. To use Strip
 
 1. Create a free Stripe account here: https://dashboard.stripe.com/register
 2. Once you have created your account, you will be redirected to the Stripe dashboard. Click on the `Developers` menu item, and then click on the `API keys` tab on the left.
-3. Copy the `Public key` and `Secret key` and paste them into a new `.stripe.env` file in the `scripts/infra` folder, like this:
+3. Copy the `Public key` and `Secret key` and paste them into a new `.stripe.env` file in the root folder, like this:
 
 ```bash
 STRIPE_PUBLIC_KEY=<your public key>
 STRIPE_SECRET_KEY=<your secret key>
 ```
 
-4. Click on the `Webhooks` tab on the left, and then select the `Add endpoint` button. For the endpoint URL, enter `http://dummy.com` and choose the `Select events` option. Search for `checkout`, and enable the events `checkout.session.completed` and `checkout.session.expired`. Then click on the `Add endpoint` button.
+4. Click on the `Webhooks` tab on the left, and then select the `Add endpoint` button. For the endpoint URL, enter `http://dummy.com` and choose the `Select events` option. Search for `checkout`, and enable the events `checkout.session.completed` and `checkout.session.expired`. Then click on the `Add endpoint` button. **Note that the endpoint URL will need to be updated later on.**
 
 5. Copy the `Signing secret key` from your webhook and paste it into the `.stripe.env` file, like this:
 
@@ -59,15 +59,39 @@ STRIPE_WEBHOOK_SECRET=<your webhook key>
 Once your Stripe keys have been configured, you can provision the Azure resources required for this scenario. To do this, run the following command:
 
 ```bash
-./scripts/infra/setup.sh
+# Export the environment variables from the .stripe.env file
+export $(cat .stripe.env | xargs)
+
+# Login to azd (only required once the first time)
+azd auth login
+
+# Provision infrastructure and the azd development environment
+azd provision
+
+# Package the app using the environment variables in .azure/env + deploy the code on Azure
+azd deploy
 ```
 
-This all-in-one script will provision all the needed Azure resources, setup the database, build the projects, and deploy them to Azure.
+Except for the first command, the deployment commands are the same as the ones used in the [Deploy to Azure](../README.md#deploy-to-azure) guide.
+
+After the deployment is complete, you will need to update the Stripe webhook endpoint URL with the one generated by the deployment.
+
+1. First, run the following command to get the endpoint URL:
+    ```bash
+    # Create a .env file with the environment variables from the azd environment
+    azd env get-env > .env
+
+    # Get the endpoint URL
+    source .env && echo "Your Stripe webhook endpoint URL is:\n$SERVICE_STRIPE_URI/stripe-api/stripe/webhook"
+    ```
+
+2. Copy the resulting URL, and then go back to the Stripe dashboard, and select on the `Webhooks` tab on the left.
+3. Pick on the webhook you created earlier, click on the `...` button then select `Update details`.
+4. Replace the `http://dummy.com` value with the URL you copied earlier, and then click on the `Update endpoint` button.
+
+You should now have a fully working Stripe test integration.
 
-It will also create various `.env` files:
-- `scripts/infra/.env`: contains all environments variables and secrets required for deployment
-- `.env.local`: contains all environment variables and secrets required for local development, with the services running locally but connected to the Azure database
-- `.env.docker`: same as `.env.local` but in a format without quotes that can be used for running Docker containers
+> **Note:** if you want to test the Stripe integration, you can use the [Stripe test cards](https://stripe.com/docs/testing#cards).
 
 ### Starting the Stripe service
 

infra/app/blog.bicep

@@ -31,7 +31,7 @@ module app '../core/host/container-app.bicep' = {
     env: [
       {
         name: 'APPLICATIONINSIGHTS_CONNECTION_STRING'
-        value: 'secretref:appinsights-cs'
+        secretRef: 'appinsights-cs'
       }
       {
         name: 'NEXT_PUBLIC_STRAPI_API_URL'

infra/app/cms.bicep

@@ -71,39 +71,39 @@ module cms '../core/host/container-app.bicep' = {
     env: [
       {
         name: 'APPLICATIONINSIGHTS_CONNECTION_STRING'
-        value: 'secretref:appinsights-cs'
+        secretRef: 'appinsights-cs'
       }
       {
         name: 'DATABASE_HOST'
         value: databaseHost
       }
       {
         name: 'DATABASE_USERNAME'
-        value: 'secretref:database-username'
+        secretRef: 'database-username'
       }
       {
         name: 'DATABASE_PASSWORD'
-        value: 'secretref:database-password'
+        secretRef: 'database-password'
       }
       {
         name: 'DATABASE_NAME'
         value: databaseName
       }
       {
         name: 'JWT_SECRET'
-        value: 'secretref:jwt-secret'
+        secretRef: 'jwt-secret'
       }
       {
         name: 'APP_KEYS'
-        value: 'secretref:app-keys'
+        secretRef: 'app-keys'
       }
       {
         name: 'API_TOKEN_SALT'
-        value: 'secretref:api-token-salt'
+        secretRef: 'api-token-salt'
       }
       {
         name: 'ADMIN_JWT_SECRET'
-        value: 'secretref:admin-jwt-secret'
+        secretRef: 'admin-jwt-secret'
       }
       {
         name: 'NODE_ENV'
@@ -115,7 +115,7 @@ module cms '../core/host/container-app.bicep' = {
       }
       {
         name: 'STORAGE_ACCOUNT_KEY'
-        value: 'secretref:storage-account-key'
+        secretRef: 'storage-account-key'
       }
       {
         name: 'STORAGE_CONTAINER_NAME'

infra/app/stripe.bicep

@@ -35,15 +35,15 @@ var stripeSecrets = empty(stripePublicKey) ? [] : [
 var stripeEnvVariables = empty(stripePublicKey) ? [] : [
   {
     name: 'STRIPE_PUBLIC_KEY'
-    value: 'secretref:stripe-public-key'
+    secretRef: 'stripe-public-key'
   }
   {
     name: 'STRIPE_SECRET_KEY'
-    value: 'secretref:stripe-secret-key'
+    secretRef: 'stripe-secret-key'
   }
   {
     name: 'STRIPE_WEBHOOK_SECRET'
-    value: 'secretref:stripe-webhook'
+    secretRef: 'stripe-webhook'
   }
 ]
 
@@ -66,7 +66,7 @@ module stripe '../core/host/container-app.bicep' = {
     env: concat([
       {
         name: 'APPLICATIONINSIGHTS_CONNECTION_STRING'
-        value: 'secretref:appinsights-cs'
+        secretRef: 'appinsights-cs'
       }
       {
         name: 'API_URL'

infra/core/database/postgresql/flexibleserver.bicep

@@ -75,4 +75,5 @@ resource keyVault 'Microsoft.KeyVault/vaults@2022-07-01' existing = {
   name: keyVaultName
 }
 
+output POSTGRES_SERVER_NAME string = postgresServer.name
 output POSTGRES_DOMAIN_NAME string = postgresServer.properties.fullyQualifiedDomainName

infra/main.bicep

@@ -404,5 +404,7 @@ output STRAPI_DATABASE_USERNAME string = cmsDatabaseUser
 output STRAPI_DATABASE_HOST string = cmsDB.outputs.POSTGRES_DOMAIN_NAME
 output STRAPI_DATABASE_PORT string = cmsDatabasePort
 
+output CMS_DATABASE_SERVER_NAME string = cmsDB.outputs.POSTGRES_SERVER_NAME
+
 // We need this to manually restore the database
 output STRAPI_DATABASE_PASSWORD string = cmsDatabasePassword

packages/api/README.md

@@ -18,7 +18,7 @@ If you want to run the API independently and locally, the following technologies
 ## Steps to start the API
 
 1. fork or clone the repository locally
-2. assumming you are in the folder containing your clone, go to the terminal and run
+2. assuming you are in the folder containing your clone, go to the terminal and run
 
 ```bash
 cd packages/api && npm install
@@ -33,7 +33,7 @@ npm start
 
 To test Stripe integration, you need to create a Stripe account and get the API keys.
 
-Then, you need to add in your `packages/api/.env` file in the following content:
+Then, you need to add the following variables in your `packages/api/.env` file:
 
 ```bash
 STRIPE_PUBLIC_KEY=<YOUR_STRIPE_PUBLIC_KEY>

packages/docs/README.md

@@ -9,12 +9,12 @@ This is the "developer guide" documentation package for the Contoso Real Estate
 
  - **`website/`** | source for the _static website_ hosting a developer guide for self-guided exploration of documentation from _design_ to _deployment_ steps. See [website/README](website/README.md) for details.
 
- - **`training/`** | content for _interactive workshops_ to explore sample in a hands-on, step-by-step manner ex: _Learn Live_ events. See [training/README](website/README.md).
+ - **`training/`** | content for _interactive workshops_ to explore the samples in a hands-on, step-by-step manner ex: _Learn Live_ events. See [training/README](website/README.md).
 
 
 ## 🚀 | Local Preview
 
-We recommend using the dev server to view the guide locally. This command will start the dev server _and_ launch browser to the correct preview URL.
+We recommend using the dev server to view the guide locally. This command will start the dev server _and_ launch the browser to the correct preview URL.
 
 ```bash
 # Requires Node.js v18+.

packages/portal/README.md

@@ -4,7 +4,7 @@
 
 This document will guide you through the prerequisites and commands necessary to setup and preview the portal project, locally on your computer. This document will guide you through the prerequisites and commands necessary to setup and preview the portal project, locally on your computer. 
 
-It will also instruct you how to deploy it to [Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/overview), to publish it to the cloud, independenty, using the [Azure Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/).
+It will also instruct you how to deploy it to [Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/overview), to publish it to the cloud, independently, using the [Azure Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/).
 
 ## Prerequisites
 
@@ -23,13 +23,13 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 ## Steps to start the portal
 
 1. fork or clone the repository locally
-2. assumming you are in the folder containing `contoso-real-estate/packages/portal`, go to the terminal and run 
+2. assuming you are in the folder containing `contoso-real-estate/packages/portal`, go to the terminal and run 
 
 ```bash
 npm run clean:install
 ```
 
-at the root level of the respository. This will install all dependencies for all scenarios. 
+at the root level of the repository. This will install all dependencies for all scenarios. 
 
 This operation will also install the [Azure Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/docs/intro). This tool includes a local dev server and emulator, to test the application and the corresponding API together, locally.
 

packages/portal/src/app/authentication/authentication.component.scss

@@ -46,37 +46,37 @@ section {
   }
 }
 
-.btn__google {
+.button.btn__google {
   background-color: #4285f4;
   color: #fff;
 }
 
-.btn__facebook {
+.button.btn__facebook {
   background-color: #3b5998;
   color: #fff;
 }
 
-.btn__twitter {
+.button.btn__twitter {
   background-color: #1da1f2;
   color: #fff;
 }
 
-.btn__github {
+.button.btn__github {
   background-color: #333;
   color: #fff;
 }
 
-.btn__linkedin {
+.button.btn__linkedin {
   background-color: #0077b5;
   color: #fff;
 }
 
-.btn__microsoft {
+.button.btn__microsoft {
   background-color: #f65314;
   color: #fff;
 }
 
-.btn__apple {
+.button.btn__apple {
   background-color: #000;
   color: #fff;
 }

packages/portal/src/app/rentalpage/rentalpage.component.html

@@ -44,9 +44,17 @@
     <aside>
       <app-favorite-button *appHasRole="[userRole.Admin, userRole.Renter]" [listing]="listing()"></app-favorite-button>
 
-      <button (click)="share()" title="Share listing" class="bookmark-listing">
-        <span aria-hidden="false" aria-label="Share listing" class="material-symbols-outlined"> share </span>
+      <button mat-icon-button [matMenuTriggerFor]="menu" title="Share listing" aria-label="Share listing to social media">
+        <span aria-hidden="false" aria-label="Share listing to social media" class="material-symbols-outlined"> share </span>
       </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="share('facebook')" title="Share listing to Facebook" class="bookmark-listing">
+          <span aria-hidden="false" aria-label="Share listing to Facebook">Facebook</span>
+        </button>
+        <button mat-menu-item (click)="share('twitter')" title="Share listing to X (Formerly Twitter)" class="bookmark-listing">
+          <span aria-hidden="false" aria-label="Share listing to Twitter">Twitter</span>
+        </button>
+      </mat-menu>
     </aside>
   </section>