From 94a0770a31ec1e3a8a81f5d089765acd4090aa38 Mon Sep 17 00:00:00 2001
From: andrej romanov <50377758+auumgn@users.noreply.github.com>
Date: Tue, 12 Nov 2024 22:07:18 +0200
Subject: [PATCH] add api t&c panel to dev tools

---
 .../developer-tools/developer-tools.module.ts |   2 +
 .../developer-tools.component.html            | 112 ++++++++++--------
 .../developer-tools.component.scss            |  14 +++
 3 files changed, 78 insertions(+), 50 deletions(-)

diff --git a/src/app/developer-tools/developer-tools.module.ts b/src/app/developer-tools/developer-tools.module.ts
index b4d50e3a08..81061d8d35 100644
--- a/src/app/developer-tools/developer-tools.module.ts
+++ b/src/app/developer-tools/developer-tools.module.ts
@@ -22,6 +22,7 @@ import { ModalModule } from '../cdk/modal/modal.module'
 import { A11yLinkModule } from '../cdk/a11y-link/a11y-link.module'
 import { TopBarVerificationEmailModule } from '../cdk/top-bar-verification-email/top-bar-verification-email.module'
 import { DeveloperToolsComponent } from './pages/developer-tools/developer-tools.component'
+import { AlertMessageModule } from '../cdk/alert-message/alert-message.module'
 
 @NgModule({
   declarations: [
@@ -49,6 +50,7 @@ import { DeveloperToolsComponent } from './pages/developer-tools/developer-tools
     ModalModule,
     A11yLinkModule,
     TopBarVerificationEmailModule,
+    AlertMessageModule,
   ],
 })
 export class DeveloperToolsModule {}
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
index ace05d21e8..03406c9f38 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
@@ -204,56 +204,47 @@ <h2 class="orc-font-body-large" i18n="@@developerTools.redirectUris">
             your integration users will experience an error.
           </p>
 
-          <div class="info">
-            <div class="col">
-              <mat-icon class="material-icons-outlined large-material-icon"
-                >info</mat-icon
-              >
-            </div>
-            <div class="col l11 m6 s3">
-              <strong i18n="@@developerTools.pleaseNote">Please note</strong>
-              <ul>
-                <li>
-                  <ng-container i18n="@@developerTools.only">
-                    Only</ng-container
-                  >
-                  <strong i18n="@@developerTools.httpsURI">HTTPS URIs</strong>
-                  <ng-container i18n="@@developerTools.areAccepted">
-                    are accepted in production
-                  </ng-container>
-                </li>
-                <li>
-                  <ng-container i18n="@@developerTools.domainsRegisted"
-                    >Domains registered</ng-container
-                  >
-                  <strong i18n="@@developerTools.must">MUST</strong>
-                  <ng-container i18n="@@developerTools.exactlyMatchTheDomains"
-                    >exactly match the domains used, including
-                    subdomains</ng-container
-                  >
-                </li>
-                <li>
-                  <strong i18n="@@developerTools.registerAllRedirectURIs"
-                    >Register all redirect URIs fully where possible.</strong
-                  >
-                  <ng-container i18n="@@developerTools.thisIsTheMostSecure"
-                    >This is the most secure option and what we recommend. For
-                    more information about redirect URIs, please see
-                    our</ng-container
-                  >
-
-                  <a
-                    class="underline"
-                    i18n="@@developerTools.redirectUriFaq"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    href="https://info.orcid.org/ufaqs/how-do-redirect-uris-work/"
-                    >redirect URI FAQ</a
-                  >
-                </li>
-              </ul>
-            </div>
-          </div>
+          <app-alert-message class="redirect-uri-notice">
+            <strong i18n="@@developerTools.pleaseNote">Please note</strong>
+            <ul>
+              <li>
+                <ng-container i18n="@@developerTools.only"> Only</ng-container>
+                <strong i18n="@@developerTools.httpsURI">HTTPS URIs</strong>
+                <ng-container i18n="@@developerTools.areAccepted">
+                  are accepted in production
+                </ng-container>
+              </li>
+              <li>
+                <ng-container i18n="@@developerTools.domainsRegisted"
+                  >Domains registered</ng-container
+                >
+                <strong i18n="@@developerTools.must">MUST</strong>
+                <ng-container i18n="@@developerTools.exactlyMatchTheDomains"
+                  >exactly match the domains used, including
+                  subdomains</ng-container
+                >
+              </li>
+              <li>
+                <strong i18n="@@developerTools.registerAllRedirectURIs"
+                  >Register all redirect URIs fully where possible.</strong
+                >
+                <ng-container i18n="@@developerTools.thisIsTheMostSecure"
+                  >This is the most secure option and what we recommend. For
+                  more information about redirect URIs, please see
+                  our</ng-container
+                >
+
+                <a
+                  class="underline"
+                  i18n="@@developerTools.redirectUriFaq"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  href="https://info.orcid.org/ufaqs/how-do-redirect-uris-work/"
+                  >redirect URI FAQ</a
+                >
+              </li>
+            </ul>
+          </app-alert-message>
 
           <div class="warn" *ngIf="triedToSaveWithoutUrls">
             <div class="col">
@@ -453,6 +444,27 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
               Redirect URIs must be unique
             </mat-error>
           </p>
+          <app-alert-message class="notice-panel"
+            ><ng-container
+              i18n="
+                @@developerTools.theOrcidPublicApiAllowsYouToRequestPermission"
+              >The ORCID Public API is free for non-commercial use by
+              individuals as stated in the</ng-container
+            >
+            <a
+              href="https://info.orcid.org/public-client-terms-of-service/"
+              target="_blank"
+              class="underline"
+              i18n="@@developerTools.publicClientTermsOfService"
+              >Public APIs Terms of Service.</a
+            >
+            <ng-container i18n="@@developerTools.byRegisteringForPublicApi"
+              >By “non-commercial” we mean that you may not charge any re-use
+              fees for the Public API, and you may not make use of the Public
+              API in connection with any revenue-generating product or
+              service.</ng-container
+            ></app-alert-message
+          >
 
           <button
             mat-raised-button
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.scss b/src/app/developer-tools/pages/developer-tools/developer-tools.component.scss
index d186745cb4..1d7edbdbff 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.scss
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.scss
@@ -73,6 +73,7 @@ p {
 
 ul {
   padding-left: 16px;
+  margin-bottom: 0;
 }
 
 .add-more {
@@ -148,6 +149,19 @@ app-client-secret {
   margin-top: 16px;
 }
 
+.notice-panel {
+  line-height: 21px;
+  margin-top: 32px;
+}
+
+.redirect-uri-notice {
+  strong {
+    display: inline;
+  }
+  line-height: 21px;
+  margin-bottom: 32px;
+}
+
 .save-button {
   margin-top: 32px;
   margin-bottom: 32px;