Registration application view (#2651)

* Fix tribute

* Group modals into common directory

* Make display modal

* Make registration applications viewable

* Remove potential crash

* Add translations

lemmy-translations

@@ -1 +1 @@
-Subproject commit aa39a764aec120d781325dc8b55732aafffe0ac7
+Subproject commit 493d5dc2a4e7a1671f06f789613410315792babc

package.json

@@ -60,7 +60,7 @@
     "inferno-router": "^8.2.3",
     "inferno-server": "^8.2.3",
     "jwt-decode": "^4.0.0",
-    "lemmy-js-client": "0.19.4",
+    "lemmy-js-client": "0.19.6-beta.1",
     "lodash.isequal": "^4.5.0",
     "markdown-it": "^14.1.0",
     "markdown-it-bidi": "^0.1.0",
@@ -102,7 +102,7 @@
     "@types/lodash.isequal": "^4.5.8",
     "@types/markdown-it": "^14.1.2",
     "@types/markdown-it-container": "^2.0.10",
-    "@types/node": "^22.0.2",
+    "@types/node": "^22.1.0",
     "@types/path-browserify": "^1.0.2",
     "@types/sanitize-html": "^2.11.0",
     "@types/serialize-javascript": "^5.0.4",
@@ -117,7 +117,7 @@
     "globals": "^15.9.0",
     "husky": "^9.1.4",
     "import-sort-style-module": "^6.0.0",
-    "lint-staged": "^15.2.7",
+    "lint-staged": "^15.2.8",
     "prettier": "^3.3.3",
     "prettier-plugin-import-sort": "^0.0.7",
     "prettier-plugin-organize-imports": "^4.0.0",

pnpm-lock.yaml

@@ -114,8 +114,8 @@ importers:
         specifier: ^4.0.0
         version: 4.0.0
       lemmy-js-client:
-        specifier: 0.19.4
+        specifier: 0.19.6-beta.1
-        version: 0.19.4
+        version: 0.19.6-beta.1
       lodash.isequal:
         specifier: ^4.5.0
         version: 4.5.0
@@ -235,8 +235,8 @@ importers:
         specifier: ^2.0.10
         version: 2.0.10
       '@types/node':
-        specifier: ^22.0.2
+        specifier: ^22.1.0
-        version: 22.0.2
+        version: 22.1.0
       '@types/path-browserify':
         specifier: ^1.0.2
         version: 1.0.2
@@ -280,8 +280,8 @@ importers:
         specifier: ^6.0.0
         version: 6.0.0
       lint-staged:
-        specifier: ^15.2.7
+        specifier: ^15.2.8
-        version: 15.2.7
+        version: 15.2.8
       prettier:
         specifier: ^3.3.3
         version: 3.3.3
@@ -1308,8 +1308,8 @@ packages:
   '@types/node-forge@1.3.11':
     resolution: {integrity: sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==}
 
-  '@types/node@22.0.2':
+  '@types/node@22.1.0':
-    resolution: {integrity: sha512-yPL6DyFwY5PiMVEwymNeqUTKsDczQBJ/5T7W/46RwLU/VH+AA8aT5TZkvBviLKLbbm0hlfftEkGrNzfRk/fofQ==}
+    resolution: {integrity: sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==}
 
   '@types/path-browserify@1.0.2':
     resolution: {integrity: sha512-ZkC5IUqqIFPXx3ASTTybTzmQdwHwe2C0u3eL75ldQ6T9E9IWFJodn6hIfbZGab73DfyiHN4Xw15gNxUq2FbvBA==}
@@ -1692,8 +1692,8 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.23.2:
+  browserslist@4.23.3:
-    resolution: {integrity: sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==}
+    resolution: {integrity: sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -1736,8 +1736,8 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  caniuse-lite@1.0.30001646:
+  caniuse-lite@1.0.30001647:
-    resolution: {integrity: sha512-dRg00gudiBDDTmUhClSdv3hqRfpbOnU28IpI1T6PBTLWa+kOj0681C8uML3PifYfREuBrVjDGhL3adYpBT6spw==}
+    resolution: {integrity: sha512-n83xdNiyeNcHpzWY+1aFbqCK7LuLfBricc4+alSQL2Xb6OR3XpnQAmlDG+pQcdTfiHRuLcQ96VOfrPSGiNJYSg==}
 
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
@@ -3063,8 +3063,8 @@ packages:
   leac@0.6.0:
     resolution: {integrity: sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==}
 
-  lemmy-js-client@0.19.4:
+  lemmy-js-client@0.19.6-beta.1:
-    resolution: {integrity: sha512-k3d+YRDj3+JuuEP+nuEg27efR/e4m8oMk2BoC8jq9AnMrwSAKfsN2F2vG70Zke0amXtOclDZrCSHkIpNw99ikg==}
+    resolution: {integrity: sha512-CiTbTpqKA7t1daBMdkKVLVXUrpy2wSuxkoWrnK5sVvmBrlFq1jpqC9h9SgNngiVqSgx6Tvsg3asmvne7OaEZRQ==}
 
   leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
@@ -3084,8 +3084,8 @@ packages:
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
-  lint-staged@15.2.7:
+  lint-staged@15.2.8:
-    resolution: {integrity: sha512-+FdVbbCZ+yoh7E/RosSdqKJyUM2OEjTciH0TFNkawKgvFp1zbGlEC39RADg+xKBG1R4mhoH2j85myBQZ5wR+lw==}
+    resolution: {integrity: sha512-PUWFf2zQzsd9EFU+kM1d7UP+AZDbKFKuj+9JNVTBkhUFhbg4MAt6WfyMMwBfM4lYqd4D2Jwac5iuTu9rVj4zCQ==}
     engines: {node: '>=18.12.0'}
     hasBin: true
 
@@ -4394,8 +4394,8 @@ packages:
   unbox-primitive@1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
 
-  undici-types@6.11.1:
+  undici-types@6.13.0:
-    resolution: {integrity: sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==}
+    resolution: {integrity: sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==}
 
   unicode-canonical-property-names-ecmascript@2.0.0:
     resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
@@ -4696,8 +4696,8 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
-  yaml@2.4.5:
+  yaml@2.5.0:
-    resolution: {integrity: sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==}
+    resolution: {integrity: sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==}
     engines: {node: '>= 14'}
     hasBin: true
 
@@ -4772,7 +4772,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.25.2
       '@babel/helper-validator-option': 7.24.8
-      browserslist: 4.23.2
+      browserslist: 4.23.3
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -5792,11 +5792,11 @@ snapshots:
   '@types/body-parser@1.19.5':
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
 
   '@types/bonjour@3.5.13':
     dependencies:
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
 
   '@types/bootstrap@5.2.10':
     dependencies:
@@ -5805,11 +5805,11 @@ snapshots:
   '@types/connect-history-api-fallback@1.5.4':
     dependencies:
       '@types/express-serve-static-core': 4.19.5
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
 
   '@types/connect@3.4.38':
     dependencies:
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
 
   '@types/cookie-parser@1.4.7':
     dependencies:
@@ -5833,7 +5833,7 @@ snapshots:
 
   '@types/express-serve-static-core@4.19.5':
     dependencies:
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
       '@types/qs': 6.9.15
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
@@ -5848,7 +5848,7 @@ snapshots:
   '@types/glob@7.2.0':
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
 
   '@types/html-to-text@9.0.4': {}
 
@@ -5856,7 +5856,7 @@ snapshots:
 
   '@types/http-proxy@1.17.14':
     dependencies:
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
 
   '@types/json-schema@7.0.15': {}
 
@@ -5885,11 +5885,11 @@ snapshots:
 
   '@types/node-forge@1.3.11':
     dependencies:
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
 
-  '@types/node@22.0.2':
+  '@types/node@22.1.0':
     dependencies:
-      undici-types: 6.11.1
+      undici-types: 6.13.0
 
   '@types/path-browserify@1.0.2': {}
 
@@ -5899,7 +5899,7 @@ snapshots:
 
   '@types/resolve@1.17.1':
     dependencies:
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
 
   '@types/retry@0.12.2': {}
 
@@ -5910,7 +5910,7 @@ snapshots:
   '@types/send@0.17.4':
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
 
   '@types/serialize-javascript@5.0.4': {}
 
@@ -5921,12 +5921,12 @@ snapshots:
   '@types/serve-static@1.15.7':
     dependencies:
       '@types/http-errors': 2.0.4
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
       '@types/send': 0.17.4
 
   '@types/sockjs@0.3.36':
     dependencies:
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
 
   '@types/toastify-js@1.12.3': {}
 
@@ -5934,7 +5934,7 @@ snapshots:
 
   '@types/ws@8.5.12':
     dependencies:
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
 
   '@typescript-eslint/eslint-plugin@8.0.0(@typescript-eslint/parser@8.0.0(eslint@9.8.0)(typescript@5.5.4))(eslint@9.8.0)(typescript@5.5.4)':
     dependencies:
@@ -6345,12 +6345,12 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.23.2:
+  browserslist@4.23.3:
     dependencies:
-      caniuse-lite: 1.0.30001646
+      caniuse-lite: 1.0.30001647
       electron-to-chromium: 1.5.4
       node-releases: 2.0.18
-      update-browserslist-db: 1.1.0(browserslist@4.23.2)
+      update-browserslist-db: 1.1.0(browserslist@4.23.3)
 
   buffer-from@1.1.2: {}
 
@@ -6384,7 +6384,7 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  caniuse-lite@1.0.30001646: {}
+  caniuse-lite@1.0.30001647: {}
 
   chalk@2.4.2:
     dependencies:
@@ -6534,7 +6534,7 @@ snapshots:
 
   core-js-compat@3.37.1:
     dependencies:
-      browserslist: 4.23.2
+      browserslist: 4.23.3
 
   core-util-is@1.0.3: {}
 
@@ -7766,13 +7766,13 @@ snapshots:
 
   jest-worker@26.6.2:
     dependencies:
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
       merge-stream: 2.0.0
       supports-color: 7.2.0
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 22.0.2
+      '@types/node': 22.1.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -7845,7 +7845,7 @@ snapshots:
 
   leac@0.6.0: {}
 
-  lemmy-js-client@0.19.4: {}
+  lemmy-js-client@0.19.6-beta.1: {}
 
   leven@3.1.0: {}
 
@@ -7864,7 +7864,7 @@ snapshots:
     dependencies:
       uc.micro: 2.1.0
 
-  lint-staged@15.2.7:
+  lint-staged@15.2.8:
     dependencies:
       chalk: 5.3.0
       commander: 12.1.0
@@ -7875,7 +7875,7 @@ snapshots:
       micromatch: 4.0.7
       pidtree: 0.6.0
       string-argv: 0.3.2
-      yaml: 2.4.5
+      yaml: 2.5.0
     transitivePeerDependencies:
       - supports-color
 
@@ -9086,7 +9086,7 @@ snapshots:
       has-symbols: 1.0.3
       which-boxed-primitive: 1.0.2
 
-  undici-types@6.11.1: {}
+  undici-types@6.13.0: {}
 
   unicode-canonical-property-names-ecmascript@2.0.0: {}
 
@@ -9111,9 +9111,9 @@ snapshots:
 
   upath@1.2.0: {}
 
-  update-browserslist-db@1.1.0(browserslist@4.23.2):
+  update-browserslist-db@1.1.0(browserslist@4.23.3):
     dependencies:
-      browserslist: 4.23.2
+      browserslist: 4.23.3
       escalade: 3.1.2
       picocolors: 1.0.1
 
@@ -9272,7 +9272,7 @@ snapshots:
       '@webassemblyjs/wasm-parser': 1.12.1
       acorn: 8.12.1
       acorn-import-attributes: 1.9.5(acorn@8.12.1)
-      browserslist: 4.23.2
+      browserslist: 4.23.3
       chrome-trace-event: 1.0.4
       enhanced-resolve: 5.17.1
       es-module-lexer: 1.5.4
@@ -9507,7 +9507,7 @@ snapshots:
 
   yallist@3.1.1: {}
 
-  yaml@2.4.5: {}
+  yaml@2.5.0: {}
 
   yocto-queue@0.1.0: {}
 

src/shared/components/app/app.tsx

@@ -13,7 +13,7 @@ import { Navbar } from "./navbar";
 import "./styles.scss";
 import { Theme } from "./theme";
 import AnonymousGuard from "../common/anonymous-guard";
-import AdultConsentModal from "../common/adult-consent-modal";
+import AdultConsentModal from "../common/modal/adult-consent-modal";
 import { destroyTippy, setupTippy } from "../../tippy";
 
 function handleJumpToContent(event) {

src/shared/components/comment/comment-node.tsx

@@ -51,7 +51,7 @@ import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
 import { CommentForm } from "./comment-form";
 import { CommentNodes } from "./comment-nodes";
-import { BanUpdateForm } from "../common/mod-action-form-modal";
+import { BanUpdateForm } from "../common/modal/mod-action-form-modal";
 import CommentActionDropdown from "../common/content-actions/comment-action-dropdown";
 import { RequestState } from "../../services/HttpService";
 import { VoteDisplay } from "../common/vote-display";

src/shared/components/common/content-actions/content-action-dropdown.tsx

@@ -14,9 +14,11 @@ import {
 import ActionButton from "./action-button";
 import classNames from "classnames";
 import { Link } from "inferno-router";
-import ConfirmationModal from "../confirmation-modal";
+import ConfirmationModal from "../modal/confirmation-modal";
-import ViewVotesModal from "../view-votes-modal";
+import ViewVotesModal from "../modal/view-votes-modal";
-import ModActionFormModal, { BanUpdateForm } from "../mod-action-form-modal";
+import ModActionFormModal, {
+  BanUpdateForm,
+} from "../modal/mod-action-form-modal";
 import { BanType, CommentNodeView, PurgeType } from "../../../interfaces";
 import { getApubName, hostname } from "@utils/helpers";
 import { tippyMixin } from "../../mixins/tippy-mixin";

src/shared/components/common/modal/adult-consent-modal.tsx

@@ -1,10 +1,10 @@
 import { Component, LinkedEvent, createRef, linkEvent } from "inferno";
-import { modalMixin } from "../mixins/modal-mixin";
+import { modalMixin } from "../../mixins/modal-mixin";
-import { adultConsentCookieKey } from "../../config";
+import { adultConsentCookieKey } from "../../../config";
-import { mdToHtml } from "../../markdown";
+import { mdToHtml } from "../../../markdown";
-import { I18NextService } from "../../services";
+import { I18NextService } from "../../../services";
 import { isHttps } from "@utils/env";
-import { IsoData } from "../../interfaces";
+import { IsoData } from "../../../interfaces";
 import { setIsoData } from "@utils/app";
 
 interface AdultConsentModalProps {

src/shared/components/common/modal/confirmation-modal.tsx

@@ -1,18 +1,11 @@
-import {
+import { Component, RefObject, createRef, linkEvent } from "inferno";
-  Component,
+import { I18NextService } from "../../../services";
-  InfernoNode,
-  RefObject,
-  createRef,
-  linkEvent,
-} from "inferno";
-import { I18NextService } from "../../services";
 import type { Modal } from "bootstrap";
-import { Spinner } from "./icon";
+import { Spinner } from "../icon";
-import { LoadingEllipses } from "./loading-ellipses";
+import { LoadingEllipses } from "../loading-ellipses";
-import { modalMixin } from "../mixins/modal-mixin";
+import { modalMixin } from "../../mixins/modal-mixin";
 
 interface ConfirmationModalProps {
-  children?: InfernoNode;
   onYes: () => Promise<void>;
   onNo: () => void;
   message: string;

src/shared/components/common/modal/display-modal.tsx

@@ -0,0 +1,71 @@
+import { Component, InfernoNode, RefObject, createRef } from "inferno";
+import type { Modal } from "bootstrap";
+import { Spinner } from "../icon";
+import { LoadingEllipses } from "../loading-ellipses";
+import { modalMixin } from "../../mixins/modal-mixin";
+
+interface DisplayModalProps {
+  children: InfernoNode;
+  loadingMessage?: string;
+  title: string;
+  onClose: () => void;
+  show: boolean;
+  loading?: boolean;
+}
+
+@modalMixin
+export default class DisplayModal extends Component<DisplayModalProps, any> {
+  readonly modalDivRef: RefObject<HTMLDivElement>;
+  modal?: Modal;
+
+  constructor(props: DisplayModalProps, context: any) {
+    super(props, context);
+
+    this.modalDivRef = createRef();
+  }
+
+  render() {
+    const { children, loadingMessage, title, onClose, loading } = this.props;
+
+    return (
+      <div
+        className="modal fade"
+        id="display-modal"
+        tabIndex={-1}
+        aria-hidden
+        aria-labelledby="#displayModalTitle"
+        data-bs-backdrop="static"
+        ref={this.modalDivRef}
+      >
+        <div className="modal-dialog modal-fullscreen-sm-down">
+          <div className="modal-content">
+            <header className="modal-header">
+              <h3 className="modal-title" id="displayModalTitle">
+                {title}
+              </h3>
+              <button
+                type="button"
+                className="btn-close"
+                aria-label="Close"
+                onClick={onClose}
+              />
+            </header>
+            <div className="modal-body">
+              {loading ? (
+                <div class="text-center align-middle text-body">
+                  <Spinner large />
+                  <div>
+                    {loadingMessage}
+                    <LoadingEllipses />
+                  </div>
+                </div>
+              ) : (
+                children
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/shared/components/common/modal/mod-action-form-modal.tsx

@@ -5,14 +5,14 @@ import {
   createRef,
   linkEvent,
 } from "inferno";
-import { I18NextService } from "../../services/I18NextService";
+import { I18NextService } from "../../../services/I18NextService";
-import { PurgeWarning, Spinner } from "./icon";
+import { PurgeWarning, Spinner } from "../icon";
 import { getApubName, randomStr } from "@utils/helpers";
 import type { Modal } from "bootstrap";
 import classNames from "classnames";
 import { Community, Person } from "lemmy-js-client";
-import { LoadingEllipses } from "./loading-ellipses";
+import { LoadingEllipses } from "../loading-ellipses";
-import { modalMixin } from "../mixins/modal-mixin";
+import { modalMixin } from "../../mixins/modal-mixin";
 
 export interface BanUpdateForm {
   reason?: string;
@@ -31,7 +31,7 @@ interface ModActionFormModalPropsCommunityBan {
   modActionType: "community-ban";
   onSubmit: (form: BanUpdateForm) => Promise<void>;
   creator: Person;
-  community: Community;
+  community?: Community;
   isBanned: boolean;
 }
 
@@ -328,7 +328,12 @@ export default class ModActionFormModal extends Component<
             : "ban_from_community_with_name",
           {
             user: getApubName(this.props.creator),
-            community: getApubName(this.props.community),
+            community: getApubName(
+              this.props.community ?? {
+                actor_id: "",
+                name: "",
+              },
+            ),
           },
         );
       }

src/shared/components/common/modal/totp-modal.tsx

@@ -6,10 +6,10 @@ import {
   createRef,
   linkEvent,
 } from "inferno";
-import { I18NextService } from "../../services";
+import { I18NextService } from "../../../services";
-import { toast } from "../../toast";
+import { toast } from "../../../toast";
 import type { Modal } from "bootstrap";
-import { modalMixin } from "../mixins/modal-mixin";
+import { modalMixin } from "../../mixins/modal-mixin";
 
 interface TotpModalProps {
   children?: InfernoNode;

src/shared/components/common/modal/view-votes-modal.tsx

@@ -5,10 +5,10 @@ import {
   createRef,
   linkEvent,
 } from "inferno";
-import { I18NextService } from "../../services";
+import { I18NextService } from "../../../services";
 import type { Modal } from "bootstrap";
-import { Icon, Spinner } from "./icon";
+import { Icon, Spinner } from "../icon";
-import { Paginator } from "../common/paginator";
+import { Paginator } from "../paginator";
 import {
   ListCommentLikesResponse,
   ListPostLikesResponse,
@@ -19,11 +19,11 @@ import {
   HttpService,
   LOADING_REQUEST,
   RequestState,
-} from "../../services/HttpService";
+} from "../../../services/HttpService";
-import { fetchLimit } from "../../config";
+import { fetchLimit } from "../../../config";
-import { PersonListing } from "../person/person-listing";
+import { PersonListing } from "../../person/person-listing";
-import { modalMixin } from "../mixins/modal-mixin";
+import { modalMixin } from "../../mixins/modal-mixin";
-import { UserBadges } from "./user-badges";
+import { UserBadges } from "../user-badges";
 import { isBrowser } from "@utils/browser";
 
 interface ViewVotesModalProps {

src/shared/components/home/admin-settings.tsx

@@ -42,7 +42,7 @@ import { MediaUploads } from "../common/media-uploads";
 import { Paginator } from "../common/paginator";
 import { snapToTop } from "@utils/browser";
 import { isBrowser } from "@utils/browser";
-import ConfirmationModal from "../common/confirmation-modal";
+import ConfirmationModal from "../common/modal/confirmation-modal";
 
 type AdminSettingsData = RouteDataResponse<{
   bannedRes: BannedPersonsResponse;

src/shared/components/home/login.tsx

@@ -15,7 +15,7 @@ import { toast } from "../../toast";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 import PasswordInput from "../common/password-input";
-import TotpModal from "../common/totp-modal";
+import TotpModal from "../common/modal/totp-modal";
 import { UnreadCounterService } from "../../services";
 import { RouteData } from "../../interfaces";
 import { IRoutePropsWithFetch } from "../../routes";

src/shared/components/person/profile.tsx

@@ -73,6 +73,7 @@ import {
   SortType,
   SuccessResponse,
   TransferCommunity,
+  RegistrationApplicationResponse,
 } from "lemmy-js-client";
 import { fetchLimit, relTags } from "../../config";
 import { InitialFetchRequest, PersonDetailsView } from "../../interfaces";
@@ -100,6 +101,7 @@ import { IRoutePropsWithFetch } from "../../routes";
 import { MediaUploads } from "../common/media-uploads";
 import { cakeDate } from "@utils/helpers";
 import { isBrowser } from "@utils/browser";
+import DisplayModal from "../common/modal/display-modal";
 
 type ProfileData = RouteDataResponse<{
   personRes: GetPersonDetailsResponse;
@@ -112,6 +114,7 @@ interface ProfileState {
   // to render the start of the profile while the new details are loading.
   personDetailsRes: RequestState<GetPersonDetailsResponse>;
   uploadsRes: RequestState<ListMediaResponse>;
+  registrationRes: RequestState<RegistrationApplicationResponse>;
   personBlocked: boolean;
   banReason?: string;
   banExpireDays?: number;
@@ -119,6 +122,7 @@ interface ProfileState {
   removeData: boolean;
   siteRes: GetSiteResponse;
   isIsomorphic: boolean;
+  showRegistrationDialog: boolean;
 }
 
 interface ProfileProps {
@@ -204,6 +208,8 @@ export class Profile extends Component<ProfileRouteProps, ProfileState> {
     showBanDialog: false,
     removeData: false,
     isIsomorphic: false,
+    showRegistrationDialog: false,
+    registrationRes: EMPTY_REQUEST,
   };
 
   loadingSettled() {
@@ -252,6 +258,8 @@ export class Profile extends Component<ProfileRouteProps, ProfileState> {
     this.handlePurgePost = this.handlePurgePost.bind(this);
     this.handleFeaturePost = this.handleFeaturePost.bind(this);
     this.handleModBanSubmit = this.handleModBanSubmit.bind(this);
+    this.handleRegistrationShow = this.handleRegistrationShow.bind(this);
+    this.handleRegistrationClose = this.handleRegistrationClose.bind(this);
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
@@ -628,6 +636,8 @@ export class Profile extends Component<ProfileRouteProps, ProfileState> {
       personBlocked,
       siteRes: { admins },
       showBanDialog,
+      showRegistrationDialog,
+      registrationRes,
     } = this.state;
 
     return (
@@ -752,6 +762,46 @@ export class Profile extends Component<ProfileRouteProps, ProfileState> {
                       {capitalizeFirstLetter(I18NextService.i18n.t("unban"))}
                     </button>
                   ))}
+                {amAdmin() && (
+                  <>
+                    <button
+                      className={
+                        "d-flex registration-self-start btn btn-secondary me-2"
+                      }
+                      aria-label={I18NextService.i18n.t("view_registration")}
+                      onClick={this.handleRegistrationShow}
+                    >
+                      {I18NextService.i18n.t("view_registration")}
+                    </button>
+                    {showRegistrationDialog && (
+                      <DisplayModal
+                        onClose={this.handleRegistrationClose}
+                        loadingMessage={I18NextService.i18n.t(
+                          "loading_registration",
+                        )}
+                        title={I18NextService.i18n.t("registration_for_user", {
+                          name: pv.person.display_name ?? pv.person.name,
+                        })}
+                        show={showRegistrationDialog}
+                        loading={registrationRes.state === "loading"}
+                      >
+                        {registrationRes.state === "success" ? (
+                          <article
+                            dangerouslySetInnerHTML={mdToHtml(
+                              registrationRes.data.registration_application
+                                .registration_application.answer,
+                              () => this.forceUpdate(),
+                            )}
+                          />
+                        ) : registrationRes.state === "failed" ? (
+                          I18NextService.i18n.t("fetch_registration_error")
+                        ) : (
+                          ""
+                        )}
+                      </DisplayModal>
+                    )}
+                  </>
+                )}
               </div>
               {pv.person.bio && (
                 <div className="d-flex align-items-center mb-2">
@@ -937,6 +987,32 @@ export class Profile extends Component<ProfileRouteProps, ProfileState> {
     i.setState({ showBanDialog: false });
   }
 
+  handleRegistrationShow() {
+    if (this.state.registrationRes.state !== "success") {
+      this.setState({ registrationRes: LOADING_REQUEST });
+    }
+
+    this.setState({ showRegistrationDialog: true });
+
+    if (this.state.personDetailsRes.state === "success") {
+      HttpService.client
+        .getRegistrationApplication({
+          person_id: this.state.personDetailsRes.data.person_view.person.id,
+        })
+        .then(res => {
+          this.setState({ registrationRes: res });
+
+          if (res.state === "failed") {
+            toast(I18NextService.i18n.t("fetch_registration_error"), "danger");
+          }
+        });
+    }
+  }
+
+  handleRegistrationClose() {
+    this.setState({ showRegistrationDialog: false });
+  }
+
   async handleModBanSubmit(i: Profile, event: any) {
     event.preventDefault();
     const { removeData, banReason, banExpireDays } = i.state;

src/shared/components/person/settings.tsx

@@ -65,7 +65,7 @@ import Tabs from "../common/tabs";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "./person-listing";
 import { InitialFetchRequest } from "../../interfaces";
-import TotpModal from "../common/totp-modal";
+import TotpModal from "../common/modal/totp-modal";
 import { LoadingEllipses } from "../common/loading-ellipses";
 import {
   isBrowser,

src/shared/components/post/post-listing.tsx

@@ -48,7 +48,7 @@ import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
 import { MetadataCard } from "./metadata-card";
 import { PostForm } from "./post-form";
-import { BanUpdateForm } from "../common/mod-action-form-modal";
+import { BanUpdateForm } from "../common/modal/mod-action-form-modal";
 import PostActionDropdown from "../common/content-actions/post-action-dropdown";
 import { CrossPostParams } from "@utils/types";
 import { RequestState } from "../../services/HttpService";

src/shared/components/private_message/private-message.tsx

@@ -14,7 +14,7 @@ import { Icon, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { PersonListing } from "../person/person-listing";
 import { PrivateMessageForm } from "./private-message-form";
-import ModActionFormModal from "../common/mod-action-form-modal";
+import ModActionFormModal from "../common/modal/mod-action-form-modal";
 import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface PrivateMessageState {