@keycloakify/angular 0.0.1-rc.2 → 0.0.1-rc.21

package/src/login/pages/login-config-totp/login-config-totp.component.html

@@ -3,188 +3,189 @@
 @let messagesPerField = kcContext.messagesPerField;
 @let mode = kcContext.mode;
 @let isAppInitiatedAction = kcContext.isAppInitiatedAction;
-<kc-login-template
-  [displayInfo]="displayInfo"
-  [bodyClassName]="bodyClassName()"
-  [displayMessage]="displayMessage"
-  [displayRequiredFields]="displayRequiredFields()"
-  [documentTitle]="documentTitle()"
->
-  <ng-container headerNode>
-    {{ 'loginTotpStep1' | msgStr }}
-  </ng-container>
-  <ng-container content>
-    <ol id="kc-totp-settings">
-      <li>
-        <p>{{ 'loginTotpStep1' | msgStr }}</p>
+
+<ng-template #headerNode>
+    {{ i18n.msgStr('loginTotpStep1') }}
+</ng-template>
+<ol id="kc-totp-settings">
+    <li>
+        <p>{{ i18n.msgStr('loginTotpStep1') }}</p>
         <ul id="kc-totp-supported-apps">
-          @for (app of totp.supportedApplications; track app) {
-            <li>{{ app | advancedMsgStr }}</li>
-          }
+            @for (app of totp.supportedApplications; track app) {
+                <li>{{ i18n.advancedMsgStr(app) }}</li>
+            }
         </ul>
-      </li>
-      @if (kcContext.mode === 'manual') {
+    </li>
+    @if (kcContext.mode === 'manual') {
         <li>
-          <p>{{ 'loginTotpManualStep2' | msgStr }}</p>
-          <p>
-            <span id="kc-totp-secret-key">{{ totp.totpSecretEncoded }}</span>
-          </p>
-          <p>
-            <a
-              href="{{ totp.qrUrl }}"
-              id="mode-barcode"
-            >
-              {{ 'loginTotpScanBarcode' | msgStr }}
-            </a>
-          </p>
+            <p>{{ i18n.msgStr('loginTotpManualStep2') }}</p>
+            <p>
+                <span id="kc-totp-secret-key">{{ totp.totpSecretEncoded }}</span>
+            </p>
+            <p>
+                <a
+                    id="mode-barcode"
+                    [href]="totp.qrUrl"
+                >
+                    {{ i18n.msgStr('loginTotpScanBarcode') }}
+                </a>
+            </p>
         </li>
         <li>
-          <p>{{ 'loginTotpManualStep3' | msgStr }}</p>
-          <p></p>
-          <ul>
-            <li id="kc-totp-type">
-              {{ 'loginTotpType' | msgStr }}: {{ 'loginTotp.' + totp.policy.type | advancedMsgStr }}
-            </li>
-            <li id="kc-totp-algorithm">{{ 'loginTotpAlgorithm' | msgStr }}: {{ totp.policy.getAlgorithmKey() }}</li>
-            <li id="kc-totp-digits">{{ 'loginTotpDigits' | msgStr }}: {{ totp.policy.digits }}</li>
-            @if (totp.policy.type === 'totp') {
-              <li id="kc-totp-period">{{ 'loginTotpInterval' | msgStr }}: {{ totp.policy.period }}</li>
-            } @else {
-              <li id="kc-totp-counter">{{ 'loginTotpCounter' | msgStr }}: {{ totp.policy.initialCounter }}</li>
-            }
-          </ul>
+            <p>{{ i18n.msgStr('loginTotpManualStep3') }}</p>
+            <p></p>
+            <ul>
+                <li id="kc-totp-type">
+                    {{ i18n.msgStr('loginTotpType') }}:
+                    {{ i18n.advancedMsgStr('loginTotp.' + totp.policy.type) }}
+                </li>
+                <li id="kc-totp-algorithm">
+                    {{ i18n.msgStr('loginTotpAlgorithm') }}:
+                    {{ totp.policy.getAlgorithmKey() }}
+                </li>
+                <li id="kc-totp-digits">{{ i18n.msgStr('loginTotpDigits') }}: {{ totp.policy.digits }}</li>
+                @if (totp.policy.type === 'totp') {
+                    <li id="kc-totp-period">
+                        {{ i18n.msgStr('loginTotpInterval') }}:
+                        {{ totp.policy.period }}
+                    </li>
+                } @else {
+                    <li id="kc-totp-counter">
+                        {{ i18n.msgStr('loginTotpCounter') }}:
+                        {{ totp.policy.initialCounter }}
+                    </li>
+                }
+            </ul>
         </li>
-      } @else {
+    } @else {
         <li>
-          <p>{{ 'loginTotpStep2' | msgStr }}</p>
-          <img
-            id="kc-totp-secret-qr-code"
-            src="{{ 'data:image/png;base64, ' + totp.totpSecretQrCode }}"
-            alt="Figure: Barcode"
-          />
-          <br />
-          <p>
-            <a
-              href="{{ totp.manualUrl }}"
-              id="mode-manual"
-            >
-              {{ 'loginTotpUnableToScan' | msgStr }}
-            </a>
-          </p>
+            <p>{{ i18n.msgStr('loginTotpStep2') }}</p>
+            <img
+                id="kc-totp-secret-qr-code"
+                alt="Figure: Barcode"
+                [src]="'data:image/png;base64, ' + totp.totpSecretQrCode"
+            />
+            <br />
+            <p>
+                <a
+                    id="mode-manual"
+                    [href]="totp.manualUrl"
+                >
+                    {{ i18n.msgStr('loginTotpUnableToScan') }}
+                </a>
+            </p>
         </li>
-      }
-      <li>
-        <p>{{ 'loginTotpStep3' | msgStr }}</p>
-        <p>{{ 'loginTotpStep3DeviceName' | msgStr }}</p>
-      </li>
-    </ol>
-    <form
-      [action]="url.loginAction"
-      [kcClass]="'kcFormClass'"
-      id="kc-totp-settings-form"
-      method="post"
-    >
-      <div [kcClass]="'kcFormGroupClass'">
+    }
+    <li>
+        <p>{{ i18n.msgStr('loginTotpStep3') }}</p>
+        <p>{{ i18n.msgStr('loginTotpStep3DeviceName') }}</p>
+    </li>
+</ol>
+<form
+    id="kc-totp-settings-form"
+    method="post"
+    [action]="url.loginAction"
+    [kcClass]="'kcFormClass'"
+>
+    <div [kcClass]="'kcFormGroupClass'">
         <div [kcClass]="'kcInputWrapperClass'">
-          <label
-            for="totp"
-            [kcClass]="'kcLabelClass'"
-          >
-            {{ 'authenticatorCode' | msgStr }}
-          </label>
-          <span class="required">*</span>
+            <label
+                for="totp"
+                [kcClass]="'kcLabelClass'"
+            >
+                {{ i18n.msgStr('authenticatorCode') }}
+            </label>
+            <span class="required">*</span>
         </div>
         <div [kcClass]="'kcInputWrapperClass'">
-          <input
-            type="text"
-            id="totp"
-            name="totp"
-            autoComplete="off"
-            [kcClass]="'kcInputClass'"
-            [attr.aria-invalid]="messagesPerField.existsError('totp')"
-          />
-          @if (messagesPerField.existsError('totp')) {
-            <span
-              id="input-error-otp-code"
-              [kcClass]="'kcInputErrorMessageClass'"
-              aria-live="polite"
-              [innerHTML]="messagesPerField.get('totp') | kcSanitize: 'html'"
-            ></span>
-          }
+            <input
+                type="text"
+                id="totp"
+                name="totp"
+                autoComplete="off"
+                [kcClass]="'kcInputClass'"
+                [attr.aria-invalid]="messagesPerField.existsError('totp')"
+            />
+            @if (messagesPerField.existsError('totp')) {
+                <span
+                    id="input-error-otp-code"
+                    aria-live="polite"
+                    [kcClass]="'kcInputErrorMessageClass'"
+                    [innerHTML]="messagesPerField.get('totp') | kcSanitize: 'html'"
+                ></span>
+            }
         </div>
         <input
-          type="hidden"
-          id="totpSecret"
-          name="totpSecret"
-          [value]="totp.totpSecret"
+            type="hidden"
+            id="totpSecret"
+            name="totpSecret"
+            [value]="totp.totpSecret"
         />
         @if (mode) {
-          <input
-            type="hidden"
-            id="mode"
-            [value]="mode"
-          />
+            <input
+                type="hidden"
+                id="mode"
+                [value]="mode"
+            />
         }
-      </div>
-      <div [kcClass]="'kcFormGroupClass'">
+    </div>
+    <div [kcClass]="'kcFormGroupClass'">
         <div [kcClass]="'kcInputWrapperClass'">
-          <label
-            for="userLabel"
-            [kcClass]="'kcLabelClass'"
-          >
-            {{ 'loginTotpDeviceName' | msgStr }}
-          </label>
-          @if (totp.otpCredentials.length >= 1) {
-            <span class="required">*</span>
-          }
+            <label
+                for="userLabel"
+                [kcClass]="'kcLabelClass'"
+            >
+                {{ i18n.msgStr('loginTotpDeviceName') }}
+            </label>
+            @if (totp.otpCredentials.length >= 1) {
+                <span class="required">*</span>
+            }
         </div>
         <div [kcClass]="'kcInputWrapperClass'">
-          <input
-            type="text"
-            id="userLabel"
-            name="userLabel"
-            autoComplete="off"
-            [kcClass]="'kcInputClass'"
-            [attr.aria-invalid]="messagesPerField.existsError('userLabel')"
-          />
-          @if (messagesPerField.existsError('userLabel')) {
-            <span
-              id="input-error-otp-label"
-              [kcClass]="'kcInputErrorMessageClass'"
-              aria-live="polite"
-              [innerHTML]="messagesPerField.get('userLabel') | kcSanitize: 'html'"
-            ></span>
-          }
+            <input
+                type="text"
+                id="userLabel"
+                name="userLabel"
+                autoComplete="off"
+                [kcClass]="'kcInputClass'"
+                [attr.aria-invalid]="messagesPerField.existsError('userLabel')"
+            />
+            @if (messagesPerField.existsError('userLabel')) {
+                <span
+                    id="input-error-otp-label"
+                    aria-live="polite"
+                    [kcClass]="'kcInputErrorMessageClass'"
+                    [innerHTML]="messagesPerField.get('userLabel') | kcSanitize: 'html'"
+                ></span>
+            }
         </div>
-      </div>
-      <div [kcClass]="'kcFormGroupClass'">
+    </div>
+    <div [kcClass]="'kcFormGroupClass'">
         <kc-logout-other-sessions />
-      </div>
+    </div>
 
-      @if (isAppInitiatedAction) {
+    @if (isAppInitiatedAction) {
         <input
-          type="submit"
-          [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
-          id="saveTOTPBtn"
-          [value]="'doSubmit' | msgStr"
+            type="submit"
+            id="saveTOTPBtn"
+            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+            [value]="i18n.msgStr('doSubmit')"
         />
         <button
-          type="submit"
-          [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass', 'kcButtonLargeClass']"
-          id="cancelTOTPBtn"
-          name="cancel-aia"
-          [value]="true"
+            type="submit"
+            id="cancelTOTPBtn"
+            name="cancel-aia"
+            [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass', 'kcButtonLargeClass']"
+            [value]="true"
         >
-          {{ 'doCancel' | msgStr }}
+            {{ i18n.msgStr('doCancel') }}
         </button>
-      } @else {
+    } @else {
         <input
-          type="submit"
-          [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
-          id="saveTOTPBtn"
-          [value]="'doSubmit' | msgStr"
+            type="submit"
+            id="saveTOTPBtn"
+            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+            [value]="i18n.msgStr('doSubmit')"
         />
-      }
-    </form> </ng-container
-></kc-login-template>
->
+    }
+</form>

package/src/login/pages/login-config-totp/login-config-totp.component.ts

@@ -1,36 +1,21 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input
-} from '@angular/core';
-import {
-    CLASSES,
-    KC_CONTEXT,
-    USE_DEFAULT_CSS
-} from '@keycloakify/angular/lib/public-api';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from 'keycloakify/login/KcContext';
-import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
-import { LogoutOtherSessionsComponent } from '@keycloakify/angular/login/components/logout-other-sessions/logout-other-sessions.component';
-import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
-import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-msg-str.pipe';
-import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pipe';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, TemplateRef, viewChild } from '@angular/core';
+import { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { LogoutOtherSessionsComponent } from '@keycloakify/angular/login/components/logout-other-sessions';
+import { TemplateComponent } from '@keycloakify/angular/login/containers/template';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import type { I18n } from '../../i18n';
+import type { KcContext } from '../../KcContext';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
     standalone: true,
-    imports: [
-        TemplateComponent,
-        MsgStrPipe,
-        AdvancedMsgStrPipe,
-        KcClassDirective,
-        KcSanitizePipe,
-        LogoutOtherSessionsComponent
-    ],
-    selector: 'kc-root',
+    imports: [TemplateComponent, KcClassDirective, KcSanitizePipe, LogoutOtherSessionsComponent],
+    selector: 'kc-login-config-totp',
     templateUrl: 'login-config-totp.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
@@ -41,17 +26,19 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginConfigTotpComponent extends ComponentReference {
-    kcContext =
-        inject<Extract<KcContext, { pageId: 'login-config-totp.ftl' }>>(KC_CONTEXT);
-
+    kcContext = inject<Extract<KcContext, { pageId: 'login-config-totp.ftl' }>>(KC_LOGIN_CONTEXT);
+    i18n = inject<I18n>(LOGIN_I18N);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
-    displayRequiredFields = input(false);
-    documentTitle = input<string>();
-    bodyClassName = input<string>();
-    displayInfo: boolean = false;
-    displayMessage: boolean = this.kcContext.messagesPerField.existsError(
-        'totp',
-        'userLabel'
-    );
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+
+    documentTitle: string | undefined;
+    bodyClassName: string | undefined;
+
+    displayRequiredFields = false;
+    displayInfo = false;
+    displayMessage = !this.kcContext.messagesPerField.existsError('totp', 'userLabel');
+
+    headerNode? = viewChild<TemplateRef<HTMLElement>>('headerNode');
+    infoNode? = viewChild<TemplateRef<HTMLElement>>('infoNode');
+    socialProvidersNode? = viewChild<TemplateRef<HTMLElement>>('socialProvidersNode');
 }

package/src/login/pages/login-idp-link-confirm/login-idp-link-confirm.component.html

@@ -1,41 +1,31 @@
 @let url = kcContext.url;
 @let idpAlias = kcContext.idpAlias;
-<kc-login-template
-  [displayInfo]="displayInfo"
-  [bodyClassName]="bodyClassName()"
-  [displayMessage]="displayMessage"
-  [displayRequiredFields]="displayRequiredFields()"
-  [documentTitle]="documentTitle()"
+<ng-template #headerNode>
+    {{ i18n.msgStr('confirmLinkIdpTitle') }}
+</ng-template>
+<form
+    id="kc-register-form"
+    method="post"
+    [action]="url.loginAction"
 >
-  <ng-container headerNode>
-    {{ 'confirmLinkIdpTitle' | msgStr }}
-  </ng-container>
-  <ng-container content>
-    <form
-      id="kc-register-form"
-      [action]="url.loginAction"
-      method="post"
-    >
-      <div [kcClass]="'kcFormGroupClass'">
+    <div [kcClass]="'kcFormGroupClass'">
         <button
-          type="submit"
-          [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
-          name="submitAction"
-          id="updateProfile"
-          value="updateProfile"
+            type="submit"
+            name="submitAction"
+            id="updateProfile"
+            value="updateProfile"
+            [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
         >
-          {{ 'confirmLinkIdpReviewProfile' | msgStr }}
+            {{ i18n.msgStr('confirmLinkIdpReviewProfile') }}
         </button>
         <button
-          type="submit"
-          [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
-          name="submitAction"
-          id="linkAccount"
-          value="linkAccount"
+            type="submit"
+            name="submitAction"
+            id="linkAccount"
+            value="linkAccount"
+            [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
         >
-          {{ 'confirmLinkIdpContinue' | msgStr: idpAlias }}
+            {{ i18n.msgStr('confirmLinkIdpContinue', idpAlias) }}
         </button>
-      </div>
-    </form>
-  </ng-container>
-</kc-login-template>
+    </div>
+</form>

package/src/login/pages/login-idp-link-confirm/login-idp-link-confirm.component.ts

@@ -1,26 +1,16 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input
-} from '@angular/core';
-import {
-    CLASSES,
-    KC_CONTEXT,
-    USE_DEFAULT_CSS
-} from '@keycloakify/angular/lib/public-api';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from 'keycloakify/login/KcContext';
-import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
-import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
-import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, TemplateRef, viewChild } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { TemplateComponent } from '@keycloakify/angular/login/containers/template';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import type { I18n } from '../../i18n';
+import type { KcContext } from '../../KcContext';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, KcClassDirective],
-    selector: 'kc-root',
+    imports: [TemplateComponent, KcClassDirective],
+    selector: 'kc-login-idp-link-confirm',
     templateUrl: 'login-idp-link-confirm.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
@@ -31,13 +21,17 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginIdpLinkConfirmComponent extends ComponentReference {
-    kcContext =
-        inject<Extract<KcContext, { pageId: 'login-idp-link-confirm.ftl' }>>(KC_CONTEXT);
-    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
-    displayRequiredFields = input(false);
-    documentTitle = input<string>();
-    bodyClassName = input<string>();
-    displayInfo: boolean = false;
-    displayMessage: boolean = false;
+    kcContext = inject<Extract<KcContext, { pageId: 'login-idp-link-confirm.ftl' }>>(KC_LOGIN_CONTEXT);
+    i18n = inject<I18n>(LOGIN_I18N);
+
+    documentTitle: string | undefined;
+    bodyClassName: string | undefined;
+
+    displayRequiredFields = false;
+    displayInfo = false;
+    displayMessage = !this.kcContext.messagesPerField.existsError('totp', 'userLabel');
+
+    headerNode? = viewChild<TemplateRef<HTMLElement>>('headerNode');
+    infoNode? = viewChild<TemplateRef<HTMLElement>>('infoNode');
+    socialProvidersNode? = viewChild<TemplateRef<HTMLElement>>('socialProvidersNode');
 }

package/src/login/pages/login-idp-link-confirm-override/login-idp-link-confirm-override.component.html

@@ -1,40 +1,30 @@
 @let url = kcContext.url;
 @let idpDisplayName = kcContext.idpDisplayName;
 
-<kc-login-template
-  [displayInfo]="displayInfo"
-  [bodyClassName]="bodyClassName()"
-  [displayMessage]="displayMessage"
-  [displayRequiredFields]="displayRequiredFields()"
-  [documentTitle]="documentTitle()"
+<ng-template #headerNode>
+    {{ i18n.msgStr('confirmOverrideIdpTitle') }}
+</ng-template>
+<form
+    id="kc-register-form"
+    method="post"
+    [action]="url.loginAction"
 >
-  <ng-container headerNode>
-    {{ 'confirmOverrideIdpTitle' | msgStr }}
-  </ng-container>
-  <ng-container content>
-    <form
-      id="kc-register-form"
-      [action]="url.loginAction"
-      method="post"
-    >
-      {{ 'pageExpiredMsg1' | msgStr }}
-      <a
+    {{ i18n.msgStr('pageExpiredMsg1') }}
+    <a
         id="loginRestartLink"
         [href]="url.loginRestartFlowUrl"
-      >
-        {{ 'doClickHere' | msgStr }}
-      </a>
-      <br />
-      <br />
-      <button
+    >
+        {{ i18n.msgStr('doClickHere') }}
+    </a>
+    <br />
+    <br />
+    <button
         type="submit"
-        [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
         name="submitAction"
         id="confirmOverride"
         value="confirmOverride"
-      >
-        {{ 'confirmOverrideIdpContinue' | msgStr: idpDisplayName }}
-      </button>
-    </form>
-  </ng-container>
-</kc-login-template>
+        [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+    >
+        {{ i18n.msgStr('confirmOverrideIdpContinue', idpDisplayName) }}
+    </button>
+</form>