Jamly

IKT201 - Exam Project

Smart commits

The jigit plugin is configured with smart commits; you can read all about them here: https://support.atlassian.com/bitbucket-cloud/docs/use-smart-commits/

Problem with JiGit

JiGit will have the wrong namepattern for a github branch and must therefore not include "task" or other issue prefixes. This is because github does not accept "" but only "/". That is why you have to always manually change the "" -> "/"

How to run Azurite

• Traverse to azurite.exe
• Install Visual studio 2022 community, if not already installed
• Go here
  • "C:\Program Files\Microsoft Visual Studio\2022\Community\Common7\IDE\Extensions\Microsoft\Azure Storage Emulator"
• There, you will find a file called azurite.exe.
• Run this command (replace any placeholders with what matches for you) ./azurite.exe --skipApiVersionCheck --silent --location "<<choose location too store data>>" --debug "<<Choose location to store debug data>>"

Setting public access level on azurite

1. Go to the Azure Storage Explorer
2. Find the storage account you are using
3. Go to the container you want to set the public access level on
4. Right-click the container and select "Set public access level"
5. Choose the public access level you want

This is the easiest method, but it can also be done with the Azure CLI. Here is an example of how to do it with the Azure CLI:

az storage container set-permission --name <container-name> --public-access blob --account-name <storage-account-name>

If you want to set it through the asp.net core application, you can use the Azure.Storage.Blobs package. Here is an example of how to do it:

BlobServiceClient blobServiceClient = new BlobServiceClient(connectionString);
BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(containerName);
await containerClient.SetAccessPolicyAsync(PublicAccessType.BlobContainer);

Configure CORS on azurite

You can manually do it in Azure storage explorer, or you can use the Azure CLI. Here is an example of how to do it with the Azure CLI:

az storage cors add --methods GET --origins https://localhost:7290 --services b

Building CSS

Run the following command in the console to build the page CSS. This has to be done for the first launch of the site, as well as any time the page layouts are changed.

npm run build:css

Configuring automatic e-mails

Jamly uses sendGrid API to automatically send e-mails. To link sendGrid API to Jamly you need to complete the following steps:

1. Create a SendGrid Account
   1. Go to the SendGrid website and create an account.
   2. Once your account is set up, log in to your dashboard.
2. Generate an API Key
   1. In your SendGrid dashboard, navigate to Settings > API Keys.
   2. Click on the Create API Key button.
   3. Provide a name for the key (e.g., MyProjectKey) and assign at least "Full Access" permissions.
   4. Copy the API key and keep it safe. You won’t be able to view it again.
3. Verify Your Sender Identity
   1. Navigate to Settings > Sender Authentication.
   2. Choose to authenticate either with Single Sender or with Domain Authentication.
4. Add the SendGrid API Key to Jamly
   1. Open a terminal in your project’s root directory.
   2. Add the SendGrid API Key and sender email address to your secrets manager:

    dotnet user-secrets set "AuthMessageSenderOptions:SendGridKey" "your-sendgrid-api-key"
    dotnet user-secrets set "AuthMessageSenderOptions:SenderEmail" "your-email@example.com"

If something has been configured wrongly you will likely get an error in the console when you run the project.

Converting UTC to Local Time in JavaScript

The following JavaScript code snippet converts UTC dates to local dates and times. It also updates the content of HTML elements with the data-utc attribute to display the local date and time.

Code Explanation

1. Function convertUtcToLocal:

• Takes a UTC date string as input.
• Creates a new Date object, appending 'Z' to indicate UTC.
• Converts the date to a local date string in the format day.month.year hour:minute.

2. Event Listener:

• Waits for the DOM content to be fully loaded.
• Selects all elements with the data-utc attribute.
• Updates the text content of each selected element with the local date and time.

Code

<script>
    function convertUtcToLocal(utcDate) {
        const date = new Date(utcDate + 'Z'); // Add 'Z' to indicate UTC
        return date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }).replace(/\s/g, '.')
            + ' ' + date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' }); // 3.Dec.2024 16:00
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('[data-utc]').forEach(function (element) {
            const utcDate = element.getAttribute('data-utc');
            element.textContent = convertUtcToLocal(utcDate);
        });
    });
</script>

Usage

1. Add the Script: Include the above script in your HTML file.
2. Set data-utc Attribute: Add the data-utc attribute to any HTML element you want to display the local date and time.

Example:

<p data-utc="2024-12-03T16:00:00">Original UTC Date</p>

After the script runs, the content of the paragraph will be updated to the local date and time format.