fix(DHIS2-19863): introduced code field in api tokens

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-03-18T18:29:13.632Z\n"
-"PO-Revision-Date: 2025-03-18T18:29:13.632Z\n"
+"POT-Creation-Date: 2025-07-18T18:44:01.963Z\n"
+"PO-Revision-Date: 2025-07-18T18:44:01.964Z\n"
 
 msgid "Never"
 msgstr "Never"
@@ -588,6 +588,12 @@ msgstr ""
 "be spoofed. This setting is intended to discourage unauthorised third-party "
 "developers from connecting to public access instances."
 
+msgid "Token name"
+msgstr "Token name"
+
+msgid "A unique name for this token."
+msgstr "A unique name for this token."
+
 msgid "Choose the context where this token will be used."
 msgstr "Choose the context where this token will be used."
 
@@ -634,6 +640,9 @@ msgstr "Expiration (required)"
 msgid "Custom expiration date (required)"
 msgstr "Custom expiration date (required)"
 
+msgid "Token name already exists"
+msgstr "Token name already exists"
+
 msgid ""
 "Personal access tokens should only be used in a browser context for public "
 "access instances. For private instances, tokens should be treated like "
@@ -673,6 +682,9 @@ msgstr ""
 msgid "Delete token"
 msgstr "Delete token"
 
+msgid "Code"
+msgstr "Code"
+
 msgid "Expires"
 msgstr "Expires"
 
@@ -824,3 +836,11 @@ msgstr "PATCH"
 msgctxt "HTTP method"
 msgid "DELETE"
 msgstr "DELETE"
+
+msgctxt "Application title"
+msgid "__MANIFEST_APP_TITLE"
+msgstr "User Profile"
+
+msgctxt "Application description"
+msgid "__MANIFEST_APP_DESCRIPTION"
+msgstr "User Profile App for DHIS2"

src/personalAccessTokens/PersonalAccessTokens.component.jsx

@@ -1,5 +1,5 @@
 import { useDataQuery } from '@dhis2/app-runtime'
-import { Card, Button } from '@dhis2/ui'
+import { Button, Card } from '@dhis2/ui'
 import React, { useState } from 'react'
 import i18n from '../locales/index.js'
 import userProfileStore from '../profile/profile.store.js'
@@ -12,7 +12,7 @@ const query = {
     tokens: {
         resource: 'apiToken',
         params: ({ userId }) => ({
-            fields: ['id', 'created', 'expire', 'attributes'],
+            fields: ['id', 'code', 'created', 'expire', 'attributes'],
             paging: false,
             filter: `createdBy.id:eq:${userId}`,
         }),
@@ -28,9 +28,10 @@ const PersonalAccessTokens = () => {
     const generateTokenModal = useModal()
 
     const tokens = data?.tokens.apiToken
-        .map(({ id, created, expire, attributes }) => {
+        .map(({ id, created, expire, attributes, code }) => {
             return {
                 id,
+                code,
                 attributes,
                 createdAt: new Date(created),
                 expiresAt: new Date(expire),

src/personalAccessTokens/generateTokenModal/BrowserForm.component.jsx

@@ -4,11 +4,15 @@ import React from 'react'
 import i18n from '../../locales/index.js'
 import AllowedMethodsFF from './AllowedMethodsFF.component.jsx'
 import AllowedReferrersFF from './AllowedReferrersFF.component.jsx'
+import CodeFF from './CodeFF.component.jsx'
 import ExpirationDateFF from './ExpirationDateFF.component.jsx'
 import styles from './Form.module.css'
 
 const BrowserForm = ({ values }) => (
     <>
+        <div className={styles.field}>
+            <CodeFF />
+        </div>
         <div className={styles.field}>
             <ExpirationDateFF values={values} />
         </div>

src/personalAccessTokens/generateTokenModal/CodeFF.component.jsx

@@ -0,0 +1,21 @@
+import { hasValue, InputFieldFF, ReactFinalForm } from '@dhis2/ui'
+import React from 'react'
+import i18n from '../../locales/index.js'
+import classes from './CodeFF.module.css'
+
+const CodeFF = () => {
+    return (
+        <div className={classes.container}>
+            <ReactFinalForm.Field
+                label={i18n.t('Token name')}
+                component={InputFieldFF}
+                validate={hasValue}
+                name="code"
+                helpText={i18n.t('A unique name for this token.')}
+                required
+            />
+        </div>
+    )
+}
+
+export default CodeFF

src/personalAccessTokens/generateTokenModal/CodeFF.module.css

@@ -0,0 +1,4 @@
+
+.container {
+    max-width: min(360px, 100%);
+}

src/personalAccessTokens/generateTokenModal/GenerateTokenModal.component.jsx

@@ -1,11 +1,11 @@
-import { useDataMutation, useAlert } from '@dhis2/app-runtime'
+import { useAlert, useDataMutation } from '@dhis2/app-runtime'
 import {
     Button,
     ButtonStrip,
     Modal,
-    ModalTitle,
-    ModalContent,
     ModalActions,
+    ModalContent,
+    ModalTitle,
     ReactFinalForm,
 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -88,6 +88,13 @@ const getAllowedReferersAttribute = ({ allowedReferrers }) => {
     }
 }
 
+const getImportError = ({ report }) => {
+    if (report.errorCode === 'E5003' && report?.errorProperty === 'code') {
+        return i18n.t('Token name already exists')
+    }
+    return report.message
+}
+
 const GenerateTokenModal = ({ onGenerate, onClose }) => {
     const errorAlert = useAlert(({ error }) => error.message, {
         critical: true,
@@ -101,6 +108,21 @@ const GenerateTokenModal = ({ onGenerate, onClose }) => {
                 onClose()
             },
             onError: (error) => {
+                const errorCode = error.details.httpStatusCode
+                if (errorCode === 409) {
+                    const errorReports =
+                        error?.details?.response?.errorReports ?? []
+                    if (errorReports.length > 0) {
+                        for (const report of errorReports) {
+                            errorAlert.show({
+                                error: {
+                                    message: getImportError({ report }),
+                                },
+                            })
+                        }
+                        return
+                    }
+                }
                 errorAlert.show({ error })
             },
         }
@@ -121,6 +143,7 @@ const GenerateTokenModal = ({ onGenerate, onClose }) => {
 
         const params = {
             expire: getExpire(formParams),
+            code: formParams.code,
             attributes: [
                 getAllowedIpsAttribute(formParams),
                 getAllowedMethodsAttribute(formParams),

src/personalAccessTokens/generateTokenModal/ServerForm.component.jsx

@@ -4,11 +4,15 @@ import React from 'react'
 import i18n from '../../locales/index.js'
 import AllowedIpsFF from './AllowedIpsFF.component.jsx'
 import AllowedMethodsFF from './AllowedMethodsFF.component.jsx'
+import CodeFF from './CodeFF.component.jsx'
 import ExpirationDateFF from './ExpirationDateFF.component.jsx'
 import styles from './Form.module.css'
 
 const ServerForm = ({ values }) => (
     <>
+        <div className={styles.field}>
+            <CodeFF />
+        </div>
         <div className={styles.field}>
             <ExpirationDateFF values={values} />
         </div>

src/personalAccessTokens/tokenCard/ExistingToken.component.jsx

@@ -42,7 +42,7 @@ Item.propTypes = {
 }
 
 const ExistingToken = ({ token }) => {
-    const { attributes, createdAt, expiresAt } = token
+    const { attributes, createdAt, expiresAt, code } = token
     const allowedMethods = getAttribute(
         attributes,
         'MethodAllowedList',
@@ -57,6 +57,11 @@ const ExistingToken = ({ token }) => {
 
     return (
         <dl className={styles.items}>
+            {code && (
+                <Item title={i18n.t('Token name')} singleLine>
+                    {code ?? ''}
+                </Item>
+            )}
             <Item title={i18n.t('Expires')} singleLine>
                 <RelativeDateTime dateTime={expiresAt} />
             </Item>

src/personalAccessTokens/tokenCard/NewToken.component.jsx

@@ -9,6 +9,7 @@ const NewToken = ({ token }) => {
     const copiedAlert = useAlert(i18n.t('Copied token to clipboard'), {
         success: true,
     })
+
     const handleCopy = () => {
         navigator.clipboard.writeText(token.key)
         copiedAlert.show()
@@ -17,6 +18,10 @@ const NewToken = ({ token }) => {
     return (
         <div>
             <h3 className={styles.header}>{i18n.t('Newly created token')}</h3>
+            <div className={styles.item}>
+                <dt className={styles.itemTitle}>{i18n.t('Token Name')}</dt>
+                <dd className={styles.itemValue}>{token.code}</dd>
+            </div>
             <div className={styles.token}>
                 {token.key}
                 <Button onClick={handleCopy} icon={<IconCopy16 />} small>

src/personalAccessTokens/tokenCard/NewToken.module.css

@@ -5,6 +5,22 @@
     margin-bottom: var(--spacers-dp4);
 }
 
+.item {
+    display: grid;
+    gap: var(--spacers-dp8);
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    margin-bottom: var(--spacers-dp8);
+}
+
+.itemTitle {
+    font-weight: 500;
+}
+
+.itemValue {
+    margin: 0;
+}
+
 .token {
     display: flex;
     align-items: center;