Merge commit 'b337873ca214682487844973104772539956c09a' into feature/48-usergroup-management

ref #48

CHANGELOG.md

@@ -2,8 +2,63 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.6.0](https://git.odit.services/lfk/frontend/compare/0.5.0...0.6.0)
+
+- Merge pull request 'feature/52-runner-filters' (#63) from feature/52-runner-filters into dev [`#52`](https://git.odit.services/lfk/frontend/issues/52)
+- Merge pull request 'feature/43-password-reset' (#61) from feature/43-password-reset into dev [`#43`](https://git.odit.services/lfk/frontend/issues/43)
+- Merge pull request 'feature/51-teamoverview-badge-org' (#59) from feature/51-teamoverview-badge-org into dev [`#51`](https://git.odit.services/lfk/frontend/issues/51)
+- Merge pull request 'feature/47-sidebar-responsiveness' (#60) from feature/47-sidebar-responsiveness into dev [`#47`](https://git.odit.services/lfk/frontend/issues/47)
+- Merge pull request 'feature/15-runner-import' (#58) from feature/15-runner-import into dev [`#15`](https://git.odit.services/lfk/frontend/issues/15)
+- Merge pull request 'feature/56-footer-version-loading' (#57) from feature/56-footer-version-loading into dev [`#56`](https://git.odit.services/lfk/frontend/issues/56)
+- Merge pull request 'feature/46-imprint-privacy' (#55) from feature/46-imprint-privacy into dev [`#46`](https://git.odit.services/lfk/frontend/issues/46)
+- Merge pull request 'feature/44-require-mail-addresses' (#54) from feature/44-require-mail-addresses into dev [`#44`](https://git.odit.services/lfk/frontend/issues/44)
+- Merge pull request 'feature/45-component-drop' (#53) from feature/45-component-drop into dev [`#45`](https://git.odit.services/lfk/frontend/issues/45)
+- 🧹 drop old + unused components Dash + LoginAlt [`eeee272`](https://git.odit.services/lfk/frontend/commit/eeee272f0353cd543dca0efbdf23f5972a771f6c)
+- ✨ added basic UI for ResetPassword [`b18a99e`](https://git.odit.services/lfk/frontend/commit/b18a99e4df6111e137a8081c3e6619da6f5af30c)
+- 🧹 remove placeholder options from Dashboard sidebar [`16ac96c`](https://git.odit.services/lfk/frontend/commit/16ac96c64e86a6f97e179d70b586f20869ffe663)
+- 👀 ResetPassword - success and error states [`8b2f196`](https://git.odit.services/lfk/frontend/commit/8b2f1965e2a754da6e40a3051e8ae3e771d70336)
+- added Privacy page [`5741cbe`](https://git.odit.services/lfk/frontend/commit/5741cbe7562542ba2b81a9a6d6be7fb0f5145801)
+- ImportRunnerModal - differenciate between team and org import [`acf0562`](https://git.odit.services/lfk/frontend/commit/acf0562851a77b9122473ffb1753a94b4272e53b)
+- ✨ RunnersOverview - basic working filter [`575b4ce`](https://git.odit.services/lfk/frontend/commit/575b4ce9708625fbec23c49101f44825c6a75bce)
+- basic select filtering in RunnersOverview [`e415258`](https://git.odit.services/lfk/frontend/commit/e415258787c776d4a5291632f47c2fcceba9a040)
+- WIP on filter [`e23821a`](https://git.odit.services/lfk/frontend/commit/e23821a7cbe73fda420e4bcaaa2dbf5a89b56cc9)
+- ✨ layout for Import from RunnerOverview [`c698508`](https://git.odit.services/lfk/frontend/commit/c6985087a8b51d6e1d8fb71b1eb8a659b8ed34e6)
+- ✨ working Imprint page [`6401aeb`](https://git.odit.services/lfk/frontend/commit/6401aeb3a850b1dd9ec4eca5c181ebcf3ed8b7e9)
+- 🌍 i18n for ResetPassword [`428a8a1`](https://git.odit.services/lfk/frontend/commit/428a8a10ffa96ae2f04c718d678439d36e6cb857)
+- ⏫ dependency bump [`6614242`](https://git.odit.services/lfk/frontend/commit/6614242df6a9679f60bc3996c0317d0870a81ac4)
+- added Imprint route /imprint [`bbec9ff`](https://git.odit.services/lfk/frontend/commit/bbec9ffcdf0be2cf37501a355c5678ed9cd46a1d)
+- ⏫ general dependency bump [`369b099`](https://git.odit.services/lfk/frontend/commit/369b09972c786e5381d7bae667def6a15e21a45b)
+- AddUserModal - enforce email input [`7131ba9`](https://git.odit.services/lfk/frontend/commit/7131ba99b6917dc0fb99f93ab40495b9702024ab)
+- Org badge in TeamsOverview [`3490abe`](https://git.odit.services/lfk/frontend/commit/3490abe9a70ca3bd1725ae005c4031f25996f2a7)
+- RunnersOverview - support should_display_based_on_id search [`5dc11c2`](https://git.odit.services/lfk/frontend/commit/5dc11c285d4e2155a3945bc44cbfcf61fe02c5f3)
+- RunnersOverview badge to team/org [`a02be78`](https://git.odit.services/lfk/frontend/commit/a02be78df52f944d5842f8d0e9bbf62ba95e9ef0)
+- working import binding [`7dd0881`](https://git.odit.services/lfk/frontend/commit/7dd0881d293a7c46133cccd947e668178058ddd8)
+- Footer linking [`945963d`](https://git.odit.services/lfk/frontend/commit/945963db326e937456103f0092bbc684b0d0ec45)
+- UserDetail - invalid email UI feedback [`7897820`](https://git.odit.services/lfk/frontend/commit/7897820632c7b9e1e00fbf3f86a1eb7e01794fa5)
+- reactivity in import table [`b501342`](https://git.odit.services/lfk/frontend/commit/b5013426e6d4b92f56a8b7a42f4f13411c2cf61c)
+- 😬 use actual team id for RunnersOverview badge [`1fac0c8`](https://git.odit.services/lfk/frontend/commit/1fac0c8640460278bf6e2460e685e192e8a984f3)
+- 🐞 re-add sidebar component [`f8014c6`](https://git.odit.services/lfk/frontend/commit/f8014c62132eaafaa5edb486f3839b9502f3287f)
+- ⚡ load version on DOMContentLoaded [`901c7c1`](https://git.odit.services/lfk/frontend/commit/901c7c12418f09a29235afe8df5982f964fc61db)
+- UserDetail - enforce email input [`0dd9de2`](https://git.odit.services/lfk/frontend/commit/0dd9de2abc68ce10c4c763382945b92c0cd4e404)
+- use onMount event instead of DOMready [`c2d7a31`](https://git.odit.services/lfk/frontend/commit/c2d7a319a0761a77597fe365083b12c4c045a7ba)
+- new license file version [CI SKIP] [`43df188`](https://git.odit.services/lfk/frontend/commit/43df188df149401c966b8d7bb6e28fbbe39a83f1)
+- new license file version [CI SKIP] [`b25dc62`](https://git.odit.services/lfk/frontend/commit/b25dc623cf12aba88576cd8784a20b0fefc5466e)
+- ⏮decode base64 reset key [`92fee08`](https://git.odit.services/lfk/frontend/commit/92fee08dc40cf04fa1dc6d6e4aaf19f0b752031f)
+- 🧹 formatting [`7b7e484`](https://git.odit.services/lfk/frontend/commit/7b7e4840918b21951fa9e267044d623e9de7b0f5)
+- Merge commit '65f49489ad2e0cff30560e4c326ca7294d7f6190' into feature/51-teamoverview-badge-org [`f0be73c`](https://git.odit.services/lfk/frontend/commit/f0be73c2cd6c930273515a8773a2affd4068c92c)
+- 👀 only display navbar on sm devices / hide on md and up [`42bd632`](https://git.odit.services/lfk/frontend/commit/42bd63253916ab339a62f64762802750dc315b4c)
+- new license file version [CI SKIP] [`65f4948`](https://git.odit.services/lfk/frontend/commit/65f49489ad2e0cff30560e4c326ca7294d7f6190)
+- new license file version [CI SKIP] [`e4e2bda`](https://git.odit.services/lfk/frontend/commit/e4e2bdac724f40584bf1526fa59b0f380ba8cba0)
+- ⏫ client library bump [`80c3a90`](https://git.odit.services/lfk/frontend/commit/80c3a90d6fd14f1946b1e4ecd5e19314ca952c2d)
+- new license file version [CI SKIP] [`0e04298`](https://git.odit.services/lfk/frontend/commit/0e04298b7c53e2dfd447f51b75c7c32f0b730eea)
+- text selection color [`4e82369`](https://git.odit.services/lfk/frontend/commit/4e82369b160da3eaa5a32cf104aacc6250e7e31e)
+- added basic styling to Imprint component [`6a0c129`](https://git.odit.services/lfk/frontend/commit/6a0c129d39f5e659411c2358f30d425720229f16)
+- 🧹 remove ComponentDump from MainDashContent [`1bb79b1`](https://git.odit.services/lfk/frontend/commit/1bb79b1c98d166523b638a06ea9a354434ec1e08)
+
 #### [0.5.0](https://git.odit.services/lfk/frontend/compare/0.4.0...0.5.0)
 
+> 26 January 2021
+
 - Merge pull request 'feature/12-user-management' (#39) from feature/12-user-management into dev [`#12`](https://git.odit.services/lfk/frontend/issues/12)
 - Merge pull request 'feature/13-runner-management' (#42) from feature/13-runner-management into dev [`#13`](https://git.odit.services/lfk/frontend/issues/13)
 - Merge pull request 'added permissions to dashboard sidebar' (#41) from feature/40-dynamic-sidebar-options into dev [`#41`](https://git.odit.services/lfk/frontend/issues/41)
@@ -18,6 +73,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - UserPermissions - working edit [`10d7955`](https://git.odit.services/lfk/frontend/commit/10d7955f99b1a640eb1ac83764c114a25cfcc07b)
 - 🐞 ImportRunnerModal - table overflow fix [`dc1644e`](https://git.odit.services/lfk/frontend/commit/dc1644ed25b82afe6a51fbe0e1de69ddf54ef81d)
 - 🧹 general runner cleanup [`9240e0c`](https://git.odit.services/lfk/frontend/commit/9240e0c90380fc6b44a3dde480bd2d29476b2a0f)
+- 🚀RELEASE v0.5.0 [`2563e9d`](https://git.odit.services/lfk/frontend/commit/2563e9d1d6fe55544b04de8edd8c24cc1d3c9735)
 - ✨ formatting [`6e5a4bc`](https://git.odit.services/lfk/frontend/commit/6e5a4bcb39259fc376262c16ad95555fd9cf7a0b)
 - ✨ ImportRunnerModal usage in TeamDetail [`de0bd5f`](https://git.odit.services/lfk/frontend/commit/de0bd5fd57edba75faaa2ba097a2c7fb2f621f9a)
 - 💣 process breaking changes for lib v0.3.0 [`dadb806`](https://git.odit.services/lfk/frontend/commit/dadb80608a55980f7b647d41c91061055287a250)

LICENSE

@@ -0,0 +1,362 @@
+Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Creative
+Commons Corporation ("Creative Commons") is not a law firm and does not provide
+legal services or legal advice. Distribution of Creative Commons public licenses
+does not create a lawyer-client or other relationship. Creative Commons makes
+its licenses and related information available on an "as-is" basis. Creative
+Commons gives no warranties regarding its licenses, any material licensed
+under their terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the fullest
+extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and conditions
+that creators and other rights holders may use to share original works of
+authorship and other material subject to copyright and certain other rights
+specified in the public license below. The following considerations are for
+informational purposes only, are not exhaustive, and do not form part of our
+licenses.
+
+Considerations for licensors: Our public licenses are intended for use by
+those authorized to give the public permission to use material in ways otherwise
+restricted by copyright and certain other rights. Our licenses are irrevocable.
+Licensors should read and understand the terms and conditions of the license
+they choose before applying it. Licensors should also secure all rights necessary
+before applying our licenses so that the public can reuse the material as
+expected. Licensors should clearly mark any material not subject to the license.
+This includes other CC-licensed material, or material used under an exception
+or limitation to copyright. More considerations for licensors : wiki.creativecommons.org/Considerations_for_licensors
+
+Considerations for the public: By using one of our public licenses, a licensor
+grants the public permission to use the licensed material under specified
+terms and conditions. If the licensor's permission is not necessary for any
+reason–for example, because of any applicable exception or limitation to copyright–then
+that use is not regulated by the license. Our licenses grant only permissions
+under copyright and certain other rights that a licensor has authority to
+grant. Use of the licensed material may still be restricted for other reasons,
+including because others have copyright or other rights in the material. A
+licensor may make special requests, such as asking that all changes be marked
+or described. Although not required by our licenses, you are encouraged to
+respect those requests where reasonable. More considerations for the public
+: wiki.creativecommons.org/Considerations_for_licensees
+
+Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public
+License
+
+By exercising the Licensed Rights (defined below), You accept and agree to
+be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial-ShareAlike
+4.0 International Public License ("Public License"). To the extent this Public
+License may be interpreted as a contract, You are granted the Licensed Rights
+in consideration of Your acceptance of these terms and conditions, and the
+Licensor grants You such rights in consideration of benefits the Licensor
+receives from making the Licensed Material available under these terms and
+conditions.
+
+Section 1 – Definitions.
+
+a. Adapted Material means material subject to Copyright and Similar Rights
+that is derived from or based upon the Licensed Material and in which the
+Licensed Material is translated, altered, arranged, transformed, or otherwise
+modified in a manner requiring permission under the Copyright and Similar
+Rights held by the Licensor. For purposes of this Public License, where the
+Licensed Material is a musical work, performance, or sound recording, Adapted
+Material is always produced where the Licensed Material is synched in timed
+relation with a moving image.
+
+b. Adapter's License means the license You apply to Your Copyright and Similar
+Rights in Your contributions to Adapted Material in accordance with the terms
+and conditions of this Public License.
+
+c. BY-NC-SA Compatible License means a license listed at creativecommons.org/compatiblelicenses,
+approved by Creative Commons as essentially the equivalent of this Public
+License.
+
+d. Copyright and Similar Rights means copyright and/or similar rights closely
+related to copyright including, without limitation, performance, broadcast,
+sound recording, and Sui Generis Database Rights, without regard to how the
+rights are labeled or categorized. For purposes of this Public License, the
+rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
+
+e. Effective Technological Measures means those measures that, in the absence
+of proper authority, may not be circumvented under laws fulfilling obligations
+under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996,
+and/or similar international agreements.
+
+f. Exceptions and Limitations means fair use, fair dealing, and/or any other
+exception or limitation to Copyright and Similar Rights that applies to Your
+use of the Licensed Material.
+
+g. License Elements means the license attributes listed in the name of a Creative
+Commons Public License. The License Elements of this Public License are Attribution,
+NonCommercial, and ShareAlike.
+
+h. Licensed Material means the artistic or literary work, database, or other
+material to which the Licensor applied this Public License.
+
+i. Licensed Rights means the rights granted to You subject to the terms and
+conditions of this Public License, which are limited to all Copyright and
+Similar Rights that apply to Your use of the Licensed Material and that the
+Licensor has authority to license.
+
+j. Licensor means the individual(s) or entity(ies) granting rights under this
+Public License.
+
+k. NonCommercial means not primarily intended for or directed towards commercial
+advantage or monetary compensation. For purposes of this Public License, the
+exchange of the Licensed Material for other material subject to Copyright
+and Similar Rights by digital file-sharing or similar means is NonCommercial
+provided there is no payment of monetary compensation in connection with the
+exchange.
+
+l. Share means to provide material to the public by any means or process that
+requires permission under the Licensed Rights, such as reproduction, public
+display, public performance, distribution, dissemination, communication, or
+importation, and to make material available to the public including in ways
+that members of the public may access the material from a place and at a time
+individually chosen by them.
+
+m. Sui Generis Database Rights means rights other than copyright resulting
+from Directive 96/9/EC of the European Parliament and of the Council of 11
+March 1996 on the legal protection of databases, as amended and/or succeeded,
+as well as other essentially equivalent rights anywhere in the world.
+
+n. You means the individual or entity exercising the Licensed Rights under
+this Public License. Your has a corresponding meaning.
+
+Section 2 – Scope.
+
+   a. License grant.
+
+1. Subject to the terms and conditions of this Public License, the Licensor
+hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive,
+irrevocable license to exercise the Licensed Rights in the Licensed Material
+to:
+
+A. reproduce and Share the Licensed Material, in whole or in part, for NonCommercial
+purposes only; and
+
+B. produce, reproduce, and Share Adapted Material for NonCommercial purposes
+only.
+
+2. Exceptions and Limitations. For the avoidance of doubt, where Exceptions
+and Limitations apply to Your use, this Public License does not apply, and
+You do not need to comply with its terms and conditions.
+
+      3. Term. The term of this Public License is specified in Section 6(a).
+
+4. Media and formats; technical modifications allowed. The Licensor authorizes
+You to exercise the Licensed Rights in all media and formats whether now known
+or hereafter created, and to make technical modifications necessary to do
+so. The Licensor waives and/or agrees not to assert any right or authority
+to forbid You from making technical modifications necessary to exercise the
+Licensed Rights, including technical modifications necessary to circumvent
+Effective Technological Measures. For purposes of this Public License, simply
+making modifications authorized by this Section 2(a)(4) never produces Adapted
+Material.
+
+      5. Downstream recipients.
+
+A. Offer from the Licensor – Licensed Material. Every recipient of the Licensed
+Material automatically receives an offer from the Licensor to exercise the
+Licensed Rights under the terms and conditions of this Public License.
+
+B. Additional offer from the Licensor – Adapted Material. Every recipient
+of Adapted Material from You automatically receives an offer from the Licensor
+to exercise the Licensed Rights in the Adapted Material under the conditions
+of the Adapter's License You apply.
+
+C. No downstream restrictions. You may not offer or impose any additional
+or different terms or conditions on, or apply any Effective Technological
+Measures to, the Licensed Material if doing so restricts exercise of the Licensed
+Rights by any recipient of the Licensed Material.
+
+6. No endorsement. Nothing in this Public License constitutes or may be construed
+as permission to assert or imply that You are, or that Your use of the Licensed
+Material is, connected with, or sponsored, endorsed, or granted official status
+by, the Licensor or others designated to receive attribution as provided in
+Section 3(a)(1)(A)(i).
+
+   b. Other rights.
+
+1. Moral rights, such as the right of integrity, are not licensed under this
+Public License, nor are publicity, privacy, and/or other similar personality
+rights; however, to the extent possible, the Licensor waives and/or agrees
+not to assert any such rights held by the Licensor to the limited extent necessary
+to allow You to exercise the Licensed Rights, but not otherwise.
+
+2. Patent and trademark rights are not licensed under this Public License.
+
+3. To the extent possible, the Licensor waives any right to collect royalties
+from You for the exercise of the Licensed Rights, whether directly or through
+a collecting society under any voluntary or waivable statutory or compulsory
+licensing scheme. In all other cases the Licensor expressly reserves any right
+to collect such royalties, including when the Licensed Material is used other
+than for NonCommercial purposes.
+
+Section 3 – License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the following
+conditions.
+
+   a. Attribution.
+
+1. If You Share the Licensed Material (including in modified form), You must:
+
+A. retain the following if it is supplied by the Licensor with the Licensed
+Material:
+
+i. identification of the creator(s) of the Licensed Material and any others
+designated to receive attribution, in any reasonable manner requested by the
+Licensor (including by pseudonym if designated);
+
+            ii. a copyright notice;
+
+            iii. a notice that refers to this Public License;
+
+            iv. a notice that refers to the disclaimer of warranties;
+
+            
+
+v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
+
+B. indicate if You modified the Licensed Material and retain an indication
+of any previous modifications; and
+
+C. indicate the Licensed Material is licensed under this Public License, and
+include the text of, or the URI or hyperlink to, this Public License.
+
+2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner
+based on the medium, means, and context in which You Share the Licensed Material.
+For example, it may be reasonable to satisfy the conditions by providing a
+URI or hyperlink to a resource that includes the required information.
+
+3. If requested by the Licensor, You must remove any of the information required
+by Section 3(a)(1)(A) to the extent reasonably practicable.
+
+b. ShareAlike.In addition to the conditions in Section 3(a), if You Share
+Adapted Material You produce, the following conditions also apply.
+
+1. The Adapter's License You apply must be a Creative Commons license with
+the same License Elements, this version or later, or a BY-NC-SA Compatible
+License.
+
+2. You must include the text of, or the URI or hyperlink to, the Adapter's
+License You apply. You may satisfy this condition in any reasonable manner
+based on the medium, means, and context in which You Share Adapted Material.
+
+3. You may not offer or impose any additional or different terms or conditions
+on, or apply any Effective Technological Measures to, Adapted Material that
+restrict exercise of the rights granted under the Adapter's License You apply.
+
+Section 4 – Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that apply to
+Your use of the Licensed Material:
+
+a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract,
+reuse, reproduce, and Share all or a substantial portion of the contents of
+the database for NonCommercial purposes only;
+
+b. if You include all or a substantial portion of the database contents in
+a database in which You have Sui Generis Database Rights, then the database
+in which You have Sui Generis Database Rights (but not its individual contents)
+is Adapted Material, including for purposes of Section 3(b); and
+
+c. You must comply with the conditions in Section 3(a) if You Share all or
+a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not replace
+Your obligations under this Public License where the Licensed Rights include
+other Copyright and Similar Rights.
+
+Section 5 – Disclaimer of Warranties and Limitation of Liability.
+
+a. Unless otherwise separately undertaken by the Licensor, to the extent possible,
+the Licensor offers the Licensed Material as-is and as-available, and makes
+no representations or warranties of any kind concerning the Licensed Material,
+whether express, implied, statutory, or other. This includes, without limitation,
+warranties of title, merchantability, fitness for a particular purpose, non-infringement,
+absence of latent or other defects, accuracy, or the presence or absence of
+errors, whether or not known or discoverable. Where disclaimers of warranties
+are not allowed in full or in part, this disclaimer may not apply to You.
+
+b. To the extent possible, in no event will the Licensor be liable to You
+on any legal theory (including, without limitation, negligence) or otherwise
+for any direct, special, indirect, incidental, consequential, punitive, exemplary,
+or other losses, costs, expenses, or damages arising out of this Public License
+or use of the Licensed Material, even if the Licensor has been advised of
+the possibility of such losses, costs, expenses, or damages. Where a limitation
+of liability is not allowed in full or in part, this limitation may not apply
+to You.
+
+c. The disclaimer of warranties and limitation of liability provided above
+shall be interpreted in a manner that, to the extent possible, most closely
+approximates an absolute disclaimer and waiver of all liability.
+
+Section 6 – Term and Termination.
+
+a. This Public License applies for the term of the Copyright and Similar Rights
+licensed here. However, if You fail to comply with this Public License, then
+Your rights under this Public License terminate automatically.
+
+b. Where Your right to use the Licensed Material has terminated under Section
+6(a), it reinstates:
+
+1. automatically as of the date the violation is cured, provided it is cured
+within 30 days of Your discovery of the violation; or
+
+      2. upon express reinstatement by the Licensor.
+
+For the avoidance of doubt, this Section 6(b) does not affect any right the
+Licensor may have to seek remedies for Your violations of this Public License.
+
+c. For the avoidance of doubt, the Licensor may also offer the Licensed Material
+under separate terms or conditions or stop distributing the Licensed Material
+at any time; however, doing so will not terminate this Public License.
+
+   d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License.
+
+Section 7 – Other Terms and Conditions.
+
+a. The Licensor shall not be bound by any additional or different terms or
+conditions communicated by You unless expressly agreed.
+
+b. Any arrangements, understandings, or agreements regarding the Licensed
+Material not stated herein are separate from and independent of the terms
+and conditions of this Public License.
+
+Section 8 – Interpretation.
+
+a. For the avoidance of doubt, this Public License does not, and shall not
+be interpreted to, reduce, limit, restrict, or impose conditions on any use
+of the Licensed Material that could lawfully be made without permission under
+this Public License.
+
+b. To the extent possible, if any provision of this Public License is deemed
+unenforceable, it shall be automatically reformed to the minimum extent necessary
+to make it enforceable. If the provision cannot be reformed, it shall be severed
+from this Public License without affecting the enforceability of the remaining
+terms and conditions.
+
+c. No term or condition of this Public License will be waived and no failure
+to comply consented to unless expressly agreed to by the Licensor.
+
+d. Nothing in this Public License constitutes or may be interpreted as a limitation
+upon, or waiver of, any privileges and immunities that apply to the Licensor
+or You, including from the legal processes of any jurisdiction or authority.
+
+Creative Commons is not a party to its public licenses. Notwithstanding, Creative
+Commons may elect to apply one of its public licenses to material it publishes
+and in those instances will be considered the "Licensor." The text of the
+Creative Commons public licenses is dedicated to the public domain under the
+CC0 Public Domain Dedication. Except for the limited purpose of indicating
+that material is shared under a Creative Commons public license or as otherwise
+permitted by the Creative Commons policies published at creativecommons.org/policies,
+Creative Commons does not authorize the use of the trademark "Creative Commons"
+or any other trademark or logo of Creative Commons without its prior written
+consent including, without limitation, in connection with any unauthorized
+modifications to any of its public licenses or any other arrangements, understandings,
+or agreements concerning use of licensed material. For the avoidance of doubt,
+this paragraph does not form part of the public licenses.
+
+Creative Commons may be contacted at creativecommons.org.

index.template.html

@@ -14,7 +14,7 @@
 </head>
 
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.5.0-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.6.0-RELEASE_INFO</span>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <script src="/env.js"></script>
   <script defer type="module" src="/_dist_/index.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev:all": "yarn prebuild && snowpack dev",
@@ -11,35 +11,36 @@
 		"release": "release-it",
 		"licenses:export": "license-exporter --json -o public"
 	},
+	"license": "CC-BY-NC-SA-4.0",
 	"dependencies": {
-		"@odit/lfk-client-js": "0.3.0",
+		"@odit/lfk-client-js": "0.4.5",
 		"csvtojson": "^2.0.10",
-		"filepond": "4.25.1",
-		"gridjs": "3.2.2",
+		"gridjs": "3.3.0",
 		"localforage": "1.9.0",
 		"lodash.isequal": "^4.5.0",
-		"svelte-filepond": "0.0.1",
+		"marked": "^2.0.0",
 		"svelte-focus-trap": "1.0.1",
-		"svelte-i18n": "3.3.0",
-		"tailwindcss": "2.0.2",
-		"tinro": "0.5.9",
+		"svelte-i18n": "3.3.2",
+		"svelte-select": "^3.16.1",
+		"tailwindcss": "2.0.3",
+		"tinro": "0.5.12",
 		"toastify-js": "1.9.3",
 		"validator": "13.5.2",
 		"xlsx": "^0.16.9"
 	},
 	"devDependencies": {
-		"@odit/license-exporter": "0.0.9",
+		"@odit/license-exporter": "^0.0.10",
 		"@snowpack/plugin-svelte": "3.5.2",
 		"auto-changelog": "^2.2.1",
-		"autoprefixer": "10.2.3",
+		"autoprefixer": "10.2.4",
 		"cross-env": "^7.0.3",
-		"postcss": "8.2.4",
-		"postcss-load-config": "3.0.0",
-		"release-it": "^14.2.2",
+		"postcss": "8.2.6",
+		"postcss-load-config": "3.0.1",
+		"release-it": "^14.4.0",
 		"snowpack": "3.0.11",
-		"svelte": "3.32.0",
-		"svelte-preprocess": "4.6.3",
-		"workbox-cli": "6.0.2"
+		"svelte": "3.32.3",
+		"svelte-preprocess": "4.6.8",
+		"workbox-cli": "6.1.0"
 	},
 	"release-it": {
 		"git": {

public/imprint_en.md

@@ -0,0 +1 @@
+Nostrud tempor dolor aute ea excepteur aute mollit elit eiusmod exercitation. Magna laborum pariatur adipisicing pariatur cupidatat exercitation duis aliquip pariatur sint exercitation deserunt labore. Consectetur id laboris dolore nostrud do velit ipsum. Eu laboris velit do commodo ad ea sint ex cillum. Cillum ipsum qui eiusmod laborum mollit sunt dolore incididunt. Cillum sunt culpa veniam voluptate et qui ut magna anim occaecat ut mollit dolor. Duis irure proident eu incididunt dolore sunt nisi aute dolore amet eu fugiat laboris quis.

public/privacy_en.md

@@ -0,0 +1 @@
+Nostrud tempor dolor aute ea excepteur aute mollit elit eiusmod exercitation. Magna laborum pariatur adipisicing pariatur cupidatat exercitation duis aliquip pariatur sint exercitation deserunt labore. Consectetur id laboris dolore nostrud do velit ipsum. Eu laboris velit do commodo ad ea sint ex cillum. Cillum ipsum qui eiusmod laborum mollit sunt dolore incididunt. Cillum sunt culpa veniam voluptate et qui ut magna anim occaecat ut mollit dolor. Duis irure proident eu incididunt dolore sunt nisi aute dolore amet eu fugiat laboris quis.

src/App.svelte

@@ -27,29 +27,40 @@
     storeName: "lfk_admin",
     description: "LfK! admin dashbaord",
   });
+  window.onunhandledrejection = event => {
+  if(event.reason.toString() == "Error: Unauthorized"){
+    console.log("Found 1")
+    localForage.clear();
+    location.replace("/");
+  }};
   //
-  import Login from "./components/Login.svelte";
-  import Dashboard from "./components/Dashboard.svelte";
+  import Login from "./components/auth/Login.svelte";
+  import Dashboard from "./components/dashboard/Dashboard.svelte";
   import store from "./store.js";
-  import ForgotPassword from "./components/ForgotPassword.svelte";
-  import MainDashContent from "./components/MainDashContent.svelte";
-  import Users from "./components/Users.svelte";
-  import About from "./components/About.svelte";
-  import Settings from "./components/Settings.svelte";
-  import Transition from "./components/Transition.svelte";
-  import Orgs from "./components/Orgs.svelte";
-  import Runners from "./components/Runners.svelte";
-  import Footer from "./components/Footer.svelte";
-  import TracksOverview from "./components/TracksOverview.svelte";
-  import OrgDetail from "./components/OrgDetail.svelte";
-  import Teams from "./components/Teams.svelte";
+  import ForgotPassword from "./components/auth/ForgotPassword.svelte";
+  import MainDashContent from "./components/dashboard/MainDashContent.svelte";
+  import Users from "./components/users/Users.svelte";
+  import About from "./components/general/About.svelte";
+  import Settings from "./components/general/Settings.svelte";
+  import Transition from "./components/base/Transition.svelte";
+  import Orgs from "./components/orgs/Orgs.svelte";
+  import Runners from "./components/runners/Runners.svelte";
+  import Footer from "./components/general/Footer.svelte";
+  import TracksOverview from "./components/tracks/TracksOverview.svelte";
+  import OrgDetail from "./components/orgs/OrgDetail.svelte";
+  import Teams from "./components/teams/Teams.svelte";
   import { OpenAPI } from "@odit/lfk-client-js";
-  import UserDetail from "./components/UserDetail.svelte";
+  import UserDetail from "./components/users/UserDetail.svelte";
   OpenAPI.BASE = config.baseurl;
   import { register as registerSW } from "./swmodule";
-  import TeamDetail from "./components/TeamDetail.svelte";
-  import UserPermissions from "./components/UserPermissions.svelte";
-  import RunnerDetail from "./components/RunnerDetail.svelte";
+  import TeamDetail from "./components/teams/TeamDetail.svelte";
+  import UserPermissions from "./components/users/UserPermissions.svelte";
+  import RunnerDetail from "./components/runners/RunnerDetail.svelte";
+  import Imprint from "./components/general/Imprint.svelte";
+  import Privacy from "./components/general/Privacy.svelte";
+  import ResetPassword from "./components/auth/ResetPassword.svelte";
+  import Contacts from "./components/contacts/Contacts.svelte";
+  import ContactDetail from "./components/contacts/ContactDetail.svelte";
   store.init();
   registerSW();
 </script>
@@ -59,10 +70,22 @@
     <Route path="/forgot_password">
       <ForgotPassword />
     </Route>
+  {:else if $router.path.includes('/reset')}
+    <Route path="/reset/:resetkey" let:params>
+      <ResetPassword {params} />
+    </Route>
   {:else if $router.path === '/about'}
     <Route path="/about">
       <About />
     </Route>
+  {:else if $router.path === '/imprint'}
+    <Route path="/imprint">
+      <Imprint />
+    </Route>
+  {:else if $router.path === '/privacy'}
+    <Route path="/privacy">
+      <Privacy />
+    </Route>
   {:else if $store.isLoggedIn}
     <Dashboard>
       <Transition>
@@ -104,6 +127,14 @@
             <TeamDetail {params} />
           </Route>
         </Route>
+        <Route path="/contacts/*">
+          <Route path="/">
+            <Contacts />
+          </Route>
+          <Route path="/:contact" let:params>
+            <ContactDetail {params} />
+          </Route>
+        </Route>
         <Route path="/orgs/*">
           <Route path="/">
             <Orgs />

src/components/AddOrgModal.svelte

@@ -1,162 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "./outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
-  export let modal_open;
-  export let current_organizations;
-  let name_input_dom;
-  function focus(el) {
-    el.focus();
-  }
-  $: name = "";
-  $: processed_last_submit = true;
-  $: isOrgnameValid = name.trim().length !== 0;
-  $: createbtnenabled = isOrgnameValid;
-  (() => {
-    document.onkeydown = (e) => {
-      e = e || window.event;
-      if (e.key === "Escape") {
-        modal_open = false;
-      }
-      if (e.keyCode === 13) {
-        if (createbtnenabled === true) {
-          createbtnenabled = false;
-          submit();
-        }
-      }
-    };
-  })();
-  function submit() {
-    if (processed_last_submit === true) {
-      processed_last_submit = false;
-      const toast = Toastify({
-        text: "Organization is being added...",
-        duration: -1,
-      }).showToast();
-      RunnerOrganizationService.runnerOrganizationControllerPost({
-        name,
-        address: undefined,
-        contact: undefined,
-      })
-        .then((result) => {
-          console.log(result);
-          name = "";
-          modal_open = false;
-          //
-          Toastify({
-            text: "Organization added",
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          current_organizations = current_organizations.concat([result]);
-        })
-        .catch((err) => {
-          //
-        })
-        .finally(() => {
-          processed_last_submit = true;
-          //
-          toast.hideToast();
-        });
-    }
-  }
-</script>
-
-{#if modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    use:focusTrap
-    use:clickOutside
-    on:click_outside={() => {
-      modal_open = false;
-    }}>
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              <svg
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"><path
-                  d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
-            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                Create a new Organization
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  Please provide the required information to add a new
-                  organization.
-                </p>
-              </div>
-              <div class="grid grid-cols-6 gap-6">
-                <div class="col-span-6">
-                  <label
-                    for="firstname"
-                    class="block text-sm font-medium text-gray-700">Name</label>
-                  <input
-                    use:focus
-                    autocomplete="off"
-                    placeholder="Name"
-                    class:border-red-500={!isOrgnameValid}
-                    class:focus:border-red-500={!isOrgnameValid}
-                    class:focus:ring-red-500={!isOrgnameValid}
-                    bind:value={name}
-                    bind:this={name_input_dom}
-                    type="text"
-                    name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-                  {#if !isOrgnameValid}
-                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      Organization name is required
-                    </span>
-                  {/if}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            disabled={!createbtnenabled}
-            class:opacity-50={!createbtnenabled}
-            on:click={submit}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('create')}
-          </button>
-          <button
-            on:click={() => {
-              modal_open = false;
-            }}
-            type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('cancel')}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}

src/components/FileUpload.svelte

@@ -1,74 +0,0 @@
-<script>
-  import "filepond/dist/filepond.css";
-  import FilePond from "svelte-filepond";
-  import { _ } from "svelte-i18n";
-  let pond;
-  // pond.getFiles() will return the active files
-  // the name to use for the internal file input
-  let name = "filepond";
-  function handleInit() {
-    // console.log("FilePond has initialised");
-  }
-  function handleAddFile(err, fileItem) {
-    // console.log("A file has been added", fileItem);
-  }
-  const labelInvalidField = $_("filepond__field-contains-invalid-files");
-  const labelFileWaitingForSize = $_("filepond__waiting-for-size");
-  const labelFileSizeNotAvailable = $_("filepond__size-not-available");
-  const labelFileLoading = $_("filepond__loading");
-  const labelFileLoadError = $_("filepond__error-during-load");
-  const labelFileProcessing = $_("filepond__uploading");
-  const labelFileProcessingComplete = $_("filepond__upload-complete");
-  const labelFileProcessingAborted = $_("filepond__upload-cancelled");
-  const labelFileProcessingError = $_("filepond__error-during-upload");
-  const labelFileProcessingRevertError = $_("filepond__error-during-revert");
-  const labelFileRemoveError = $_("filepond__error-during-remove");
-  const labelTapToCancel = $_("filepond__tap-to-cancel");
-  const labelTapToRetry = $_("filepond__tap-to-retry");
-  const labelTapToUndo = $_("filepond__tap-to-undo");
-  const labelButtonRemoveItem = $_("filepond__remove");
-  const labelButtonAbortItemLoad = $_("filepond__abort");
-  const labelButtonRetryItemLoad = $_("filepond__retry");
-  const labelButtonAbortItemProcessing = $_("filepond__cancel");
-  const labelButtonUndoItemProcessing = $_("filepond__undo");
-  const labelButtonRetryItemProcessing = $_("filepond__retry");
-  const labelButtonProcessItem = $_("filepond__upload");
-  const labelIdle =
-    $_("drag-and-drop-your-files-or") +
-    ` <span class="filepond--label-action"> ` +
-    $_("browse") +
-    ` </span>`;
-</script>
-
-<div class="app">
-  <FilePond
-    bind:this={pond}
-    {name}
-    {labelFileWaitingForSize}
-    {labelFileSizeNotAvailable}
-    {labelFileLoading}
-    {labelFileLoadError}
-    {labelFileProcessing}
-    {labelFileProcessingComplete}
-    {labelFileProcessingAborted}
-    {labelFileProcessingError}
-    {labelFileProcessingRevertError}
-    {labelFileRemoveError}
-    {labelTapToCancel}
-    {labelTapToRetry}
-    {labelTapToUndo}
-    {labelButtonRemoveItem}
-    {labelButtonAbortItemLoad}
-    {labelButtonRetryItemLoad}
-    {labelButtonAbortItemProcessing}
-    {labelButtonUndoItemProcessing}
-    {labelButtonRetryItemProcessing}
-    {labelButtonProcessItem}
-    {labelIdle}
-    {labelInvalidField}
-    server="/api"
-    allowMultiple={false}
-    credits={false}
-    oninit={handleInit}
-    onaddfile={handleAddFile} />
-</div>

src/components/GroupDetail.svelte

@@ -0,0 +1,166 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import lodashIsEqual from "lodash.isequal";
+  import store from "../store";
+  import {
+    UserGroupService
+  } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  import PromiseError from "./PromiseError.svelte";
+  let data_loaded = false;
+  export let params;
+  const promise = UserGroupService.userGroupControllerGetOne(params.groupid);
+  $: delete_triggered = false;
+  $: original_data = {};
+  $: editable = {};
+  $: changes_performed = !lodashIsEqual(original_data, editable);
+  $: isGroupnameValid = editable.name !== "";
+  $: save_enabled =
+    changes_performed && isGroupnameValid 
+  promise.then((data) => {
+    console.log(data);
+    data_loaded = true;
+    original_data = Object.assign(original_data, data);
+    editable = Object.assign(editable, original_data);
+  });
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      Toastify({
+        text: $_('updating-group'),
+        duration: 2500,
+      }).showToast();
+      UserGroupService.userGroupControllerPut(original_data.id, editable)
+        .then((resp) => {
+          Object.assign(original_data, editable);
+          original_data = editable;
+          Object.assign(original_data, editable);
+          Toastify({
+            text: $_('group-updated'),
+            duration: 2500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+        })
+        .catch((err) => {});
+    } else {
+    }
+  }
+  function deleteGroup() {
+    UserGroupService.userGroupControllerRemove(original_data.id, true)
+      .then((resp) => {
+        location.replace("./");
+      })
+      .catch((err) => {});
+  }
+</script>
+
+{#await promise}
+  {$_('loading-group-detail')}
+{:then}
+  <section class="container p-5 select-none">
+    <div class="flex flex-row mb-4">
+      <div class="w-full">
+        <nav class="w-full flex">
+          <ol class="list-none flex flex-row items-center justify-start">
+            <li class="flex items-center">
+              <svg class="flex-shrink-0 w-5 h-5 mr-2" fill="currentColor" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg>
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="./">{$_('groups')}</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2">{original_data.name}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
+      {original_data.name}
+      <span data-id="group_actions_${editable.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:DELETE')}
+          {#if delete_triggered}
+            <button
+              on:click={deleteGroup}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
+            <button
+              on:click={() => {
+                delete_triggered = !delete_triggered;
+              }}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+          {/if}
+          {#if !delete_triggered}
+            <button
+              on:click={() => {
+                delete_triggered = true;
+              }}
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-group')}</button>
+          {/if}
+        {/if}
+        {#if !delete_triggered}
+          <button
+            disabled={!save_enabled}
+            class:opacity-50={!save_enabled}
+            type="button"
+            on:click={submit}
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
+        {/if}
+      </span>
+    </div>
+    <!--  -->
+    <div class="text-sm w-full">
+      <label
+        for="title"
+        class="font-medium text-gray-700">{$_('name')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('name')}
+        type="text"
+        bind:value={editable.name}
+        class:border-red-500={!isGroupnameValid}
+        class:focus:border-red-500={!isGroupnameValid}
+        class:focus:ring-red-500={!isGroupnameValid}
+        name="title"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+      {#if !isGroupnameValid}
+        <span
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          Group name is required
+        </span>
+      {/if}
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="firstname"
+        class="font-medium text-gray-700">{$_('description')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('description')}
+        type="text"
+        bind:value={editable.description}
+        name="firstname"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+    </div>
+    <div class="text-sm w-full">
+      <span
+        class="font-medium text-gray-700">{$_('permissions')}</span>
+    </div>
+  </section>
+{:catch error}
+  <PromiseError {error} />
+{/await}

src/components/Groups.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import store from "../store";
+  import AddGroupModal from "./AddGroupModal.svelte";
+  import UserGroupsOverview from "./UserGroupsOverview.svelte";
+  $: current_groups = [];
+  export let modal_open = false;
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    User Groups
+    {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:CREATE')}
+      <button
+        on:click={() => {
+          modal_open = true;
+        }}
+        type="button"
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+        Add User Group
+      </button>
+    {/if}
+  </span>
+  <UserGroupsOverview bind:current_groups />
+</section>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:CREATE')}
+  <AddGroupModal bind:current_groups bind:modal_open />
+{/if}

src/components/LoginAlt.svelte

@@ -1,97 +0,0 @@
-<script>
-  import store from "../store.js";
-  store.init();
-  const login = () => {
-    store.login();
-  };
-</script>
-
-<div
-  class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
-  <div class="max-w-md w-full space-y-8">
-    <div>
-      <img
-        class="mx-auto h-12 w-auto"
-        src="/lfk-logo.png"
-        alt="" />
-      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
-        Sign in to your account
-      </h2>
-      <p class="mt-2 text-center text-sm text-gray-600">
-        Or
-        <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
-          start your 14-day free trial
-        </a>
-      </p>
-    </div>
-    <div>
-      <input type="hidden" name="remember" value="true" />
-      <div class="rounded-md shadow-sm -space-y-px">
-        <div>
-          <label for="email-address" class="sr-only">Email address</label>
-          <input
-            id="email-address"
-            name="email"
-            type="email"
-            autocomplete="email"
-            required
-            class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-            placeholder="Email address" />
-        </div>
-        <div>
-          <label for="password" class="sr-only">Password</label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            autocomplete="current-password"
-            required
-            class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-            placeholder="Password" />
-        </div>
-      </div>
-
-      <div class="flex items-center justify-between">
-        <div class="flex items-center">
-          <input
-            id="remember_me"
-            name="remember_me"
-            type="checkbox"
-            class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" />
-          <label for="remember_me" class="ml-2 block text-sm text-gray-900">
-            Remember me
-          </label>
-        </div>
-
-        <div class="text-sm">
-          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
-            Forgot your password?
-          </a>
-        </div>
-      </div>
-
-      <div>
-        <button
-        on:click="{login}"
-          type="submit"
-          class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-            <!-- Heroicon name: lock-closed -->
-            <svg
-              class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              aria-hidden="true">
-              <path
-                fill-rule="evenodd"
-                d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                clip-rule="evenodd" />
-            </svg>
-          </span>
-          Sign in
-        </button>
-      </div>
-    </div>
-  </div>
-</div>

src/components/OrgDetail.svelte

@@ -1,238 +0,0 @@
-<script>
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
-  import store from "../store";
-  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
-  import ImportRunnerModal from "./ImportRunnerModal.svelte";
-  import PromiseError from "./PromiseError.svelte";
-  $: delete_triggered = false;
-  $: save_enabled = !data_changed;
-  export let params;
-  let orgdata = {};
-  let original = {};
-  $: data_loaded = false;
-  $: data_changed = JSON.stringify(orgdata) === JSON.stringify(original);
-  const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
-    params.orgid
-  ).then((value) => {
-    data_loaded = true;
-    orgdata = Object.assign(orgdata, value);
-    original = Object.assign(original, value);
-  });
-  let modal_open = false;
-  let delete_org = {};
-  function deleteOrganization() {
-    // RunnerOrganizationService.runnerOrganizationControllerRemove(
-    //   original.id,
-    //   false
-    // )
-    //   .then((resp) => {
-    //     Toastify({
-    //       text: "Organization deleted",
-    //       duration: 500,
-    //       backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    //     }).showToast();
-    //     location.replace("./");
-    //   })
-    //   .catch((err) => {
-    modal_open = true;
-    delete_org = original;
-    // });
-  }
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      Toastify({
-        text: "updating organization",
-        duration: 2500,
-      }).showToast();
-      RunnerOrganizationService.runnerOrganizationControllerPut(
-        original.id,
-        orgdata
-      )
-        .then((resp) => {
-          Object.assign(original, orgdata);
-          original = orgdata;
-          Object.assign(original, orgdata);
-          //
-          Toastify({
-            text: "updated organization",
-            duration: 2500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-        })
-        .catch((err) => {});
-    } else {
-    }
-  }
-  export let import_modal_open = false;
-</script>
-
-<ImportRunnerModal
-  on:cancelDelete={(event) => {
-    import_modal_open = false;
-  }}
-  passed_team={{}}
-  passed_orgs={[]}
-  passed_org={orgdata}
-  opened_from="OrgDetail"
-  bind:import_modal_open />
-<ConfirmOrgDeletion bind:modal_open bind:delete_org />
-{#if data_loaded}
-  <section class="container p-5">
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original.name}
-      <span data-id="org_actions_${orgdata.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
-          <button
-            on:click={() => {
-              import_modal_open = true;
-            }}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('import-runners')}
-          </button>
-        {/if}
-        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
-          {#if delete_triggered}
-            <button
-              on:click={deleteOrganization}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-delete')}</button>
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-organization')}</button>
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            on:click={submit}
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
-        {/if}
-      </span>
-    </div>
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="mr-2 flex items-center">
-              <svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"><path
-                  d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-                <polyline points="9 22 9 12 15 12 15 22" /></svg>
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="/">Home</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
-                  x1="5"
-                  y1="12"
-                  x2="19"
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
-            </li>
-            <li class="mr-2 flex items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z" /></svg>
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="./">Orgs</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
-                  x1="5"
-                  y1="12"
-                  x2="19"
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">Org-Details #{params.orgid}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="text-sm w-full">
-      <label for="name" class="font-medium text-gray-700">Name</label>
-      <input
-        autocomplete="off"
-        placeholder="Name"
-        type="text"
-        bind:value={orgdata.name}
-        name="name"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-    </div>
-    <div class="text-sm w-full">
-      <label
-        for="contact"
-        class="font-medium text-gray-700">{$_('contact')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('contact')}
-        type="text"
-        bind:value={orgdata.contact}
-        name="contact"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-    </div>
-    <div class="text-sm w-full">
-      <label
-        for="address"
-        class="font-medium text-gray-700">{$_('address')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('address')}
-        type="text"
-        bind:value={orgdata.address}
-        name="address"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-    </div>
-  </section>
-{:else}
-  {#await promise}
-    organization detail is being loaded...
-  {:catch error}
-    <PromiseError />
-  {/await}
-{/if}

src/components/Test.svelte

@@ -1,5 +0,0 @@
-<script>
-  import { _, locale } from "svelte-i18n";
-</script>
-
-<div>$locale $_('hallo')</div>

src/components/UserGroupsEmptyState.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import groups_empty from "./groups_empty.svg";
+</script>
+
+<div class="text-center items-center justify-center">
+  <p class="mb-16 text-lg text-gray-500">
+    <img class="w-full h-44" src={groups_empty} alt="" />
+    <span class="font-bold">There are no group added yet.</span><br />
+    <span>Add your first group</span>
+  </p>
+</div>

src/components/UserGroupsOverview.svelte

@@ -1,27 +1,27 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { RunnerService } from "@odit/lfk-client-js";
+  import { UserGroupService } from "@odit/lfk-client-js";
   import store from "../store";
-  import RunnersEmptyState from "./RunnersEmptyState.svelte";
+  import UserGroupsEmptyState from "./UserGroupsEmptyState.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
-  export let current_runners = [];
-  const runners_promise = RunnerService.runnerControllerGetAll().then((val) => {
-    current_runners = val;
+  export let current_groups = [];
+  const groups_promise = UserGroupService.userGroupControllerGetAll().then((val) => {
+    current_groups = val;
   });
 </script>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
-  {#await runners_promise}
+{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
+  {#await groups_promise}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
       role="alert">
-      <p class="font-bold">runners are being loaded...</p>
+      <p class="font-bold">{$_('groups-are-being-loaded')}</p>
       <p class="text-sm">{$_('this-might-take-a-moment')}</p>
     </div>
   {:then}
-    {#if current_runners.length === 0}
-      <RunnersEmptyState />
+    {#if current_groups.length === 0}
+      <UserGroupsEmptyState />
     {:else}
       <input
         type="search"
@@ -42,17 +42,7 @@
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('contact-information')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('group')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('distance-in-km')}
+                {$_('description')}
               </th>
               <th scope="col" class="relative px-6 py-3">
                 <span class="sr-only">{$_('action')}</span>
@@ -60,50 +50,39 @@
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200">
-            {#each current_runners as runner}
-              {#if Object.values(runner)
+            {#each current_groups as group}
+              {#if Object.values(group)
                 .toString()
                 .toLowerCase()
                 .includes(searchvalue)}
-                <tr data-rowid="user_{runner.id}">
+                <tr data-rowid="user_{group.id}">
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <div class="ml-4">
                         <div class="text-sm font-medium text-gray-900">
-                          {runner.firstname}
-                          {runner.middlename || ''}
-                          {runner.lastname}
+                          {group.name}
                         </div>
                       </div>
                     </div>
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap">
-                    {#if runner.email}
-                      <div class="text-sm text-gray-500">{runner.email}</div>
-                    {/if}
-                    {#if runner.phone}
-                      <div class="text-sm text-gray-500">{runner.phone}</div>
-                    {/if}
+                    {group.description}
                   </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {runner.group.name}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">{runner.distance}</td>
-                  {#if active_deletes[runner.id] === true}
+                  {#if active_deletes[group.id] === true}
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <button
                         on:click={() => {
-                          active_deletes[runner.id] = false;
+                          active_deletes[group.id] = false;
                         }}
                         tabindex="0"
                         class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
                         Delete</button>
                       <button
                         on:click={() => {
-                          RunnerService.runnerControllerRemove(runner.id, true)
+                          UserGroupService.userGroupControllerRemove(group.id, true)
                             .then((resp) => {
-                              current_runners = current_runners.filter((obj) => obj.id !== runner.id);
+                              current_groups = current_groups.filter((obj) => obj.id !== group.id);
                             })
                             .catch((err) => {
                               // error deleting user
@@ -116,12 +95,12 @@
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <a
-                        href="./{runner.id}"
+                        href="./{group.id}"
                         class="text-indigo-600 hover:text-indigo-900">Edit</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:DELETE')}
                         <button
                           on:click={() => {
-                            active_deletes[runner.id] = true;
+                            active_deletes[group.id] = true;
                           }}
                           tabindex="0"
                           class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>

src/components/auth/ForgotPassword.svelte

@@ -11,18 +11,13 @@
     if (isEmail(usersEmail)) {
       AuthService.authControllerGetResetToken({ email: usersEmail })
         .then((resp) => {
-          console.log(resp);
-          console.log(resp.resetToken);
           Toastify({
             text: $_("mail-validation-in-progress"),
             duration: 3500,
           }).showToast();
           reset_mail_sent = true;
         })
-        .catch((err) => {
-          console.log(err.body.name);
-          console.log(err.body.message);
-        });
+        .catch((err) => {});
     } else {
       Toastify({
         text: $_("invalid-mail-reset"),
@@ -40,9 +35,7 @@
         {$_('application_name')}
       </p>
       <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        Passwort-Reset Mail wurde an
-        {usersEmail}
-        geschickt
+        {$_('password-reset-mail-sent', { values: { usersEmail: usersEmail } })}
       </p>
       <div class="mt-6">
         <div class="mt-6">
@@ -63,7 +56,7 @@
         {$_('application_name')}
       </p>
       <p class="mt-6 text-sm text-center text-gray-900">
-        {$_('forgot_password?')}
+        {$_('forgot_password')}
       </p>
       <p class="mt-2 mb-2 text-sm text-center text-gray-900">
         {$_('dont-panic-were-resetting-it')}

src/components/auth/Login.svelte

@@ -1,10 +1,10 @@
 <script>
-  import store from "../store.js";
+  import store from "../../store.js";
   import localForage from "localforage";
   import { _ } from "svelte-i18n";
   store.init();
   import { OpenAPI, AuthService } from "@odit/lfk-client-js";
-  import Footer from "./Footer.svelte";
+  import Footer from "../general/Footer.svelte";
   import Toastify from "toastify-js";
   // ------
   let username = "demo";
@@ -136,7 +136,7 @@
       <a
         href="/forgot_password"
         class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
-        {$_('forgot_password?')}
+        {$_('forgot_password')}
       </a>
     </div>
   </div>

src/components/auth/ResetPassword.svelte

@@ -0,0 +1,129 @@
+<script>
+  import {  AuthService } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import "toastify-js/src/toastify.css";
+  let state = "reset_in_progress";
+  let password = "";
+  export let params;
+  function set_new_password() {
+      if(password.trim() !== ""){
+        Toastify({
+          text: $_('password-reset-in-progress'),
+          duration: 3500,
+        }).showToast();
+        AuthService.authControllerResetPassword(atob(params.resetkey),{ password })
+        .then((resp) => {
+          Toastify({
+            text: $_('password-reset-successful'),
+            duration: 3500,
+          }).showToast();
+          state="reset_success";
+        })
+        .catch((err) => {
+          state="reset_error";
+        });
+      } else {
+      Toastify({
+        text: $_('please-provide-a-password'),
+        duration: 3500,
+      }).showToast();
+    }
+  }
+</script>
+
+{#if state==="reset_success"}
+  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+    <div class="max-w-md w-full py-12 px-6">
+      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
+      <p class="mt-6 text-lg text-center font-bold text-gray-900">
+        {$_('application_name')}
+      </p>
+      <p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
+        {$_('successful-password-reset')}
+      </p>
+      <p class="mt-2 mb-2 text-sm text-center text-gray-900">
+        {$_('you-can-now-use-your-new-password-to-log-in-to-your-account')}
+      </p>
+      <div class="mt-6">
+        <div class="mt-6">
+          <a
+            href="/login/"
+            class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+            {$_('go-to-login')}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+{:else if state==="reset_error"}
+<div class="min-h-screen flex items-center justify-center bg-gray-100">
+  <div class="max-w-md w-full py-12 px-6">
+    <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
+    <p class="mt-6 text-lg text-center font-bold text-gray-900">
+      {$_('application_name')}
+    </p>
+    <p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
+      {$_('password-reset-failed')}
+    </p>
+    <p class="mt-2 mb-2 text-sm text-center text-gray-900">
+      {$_('please-request-a-new-reset-mail')}
+    </p>
+    <div class="mt-6">
+      <div class="mt-6">
+        <a
+          href="/forgot_password/"
+          class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+          {$_('request-a-new-reset-mail')}
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+{:else if state==="reset_in_progress"}
+  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+    <div class="max-w-md w-full py-12 px-6">
+      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
+      <p class="mt-6 text-lg text-center font-bold text-gray-900">
+        {$_('application_name')}
+      </p>
+      <p class="mt-2 mb-4 text-md text-center text-gray-900">
+        {$_('reset-password')}
+      </p>
+      <div>
+        <div class="rounded-md shadow-sm">
+          <div>
+            <input
+              aria-label={$_('new-password')}
+              name="password"
+              type="password"
+              required=""
+              class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border text-gray-900 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
+              placeholder={$_('new-password')}
+              bind:value={password} />
+          </div>
+        </div>
+
+        <div class="mt-5">
+          <button
+            on:click={set_new_password}
+            type="submit"
+            class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+            <span class="absolute left-0 inset-y pl-3">
+              <svg
+                class="h-5 w-5 text-gray-500"
+                fill="currentColor"
+                viewBox="0 0 20 20">
+                <path
+                  fill-rule="evenodd"
+                  d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+                  clip-rule="evenodd" />
+              </svg>
+            </span>
+            {$_('reset-my-password')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/base/NoComponentLoaded.svelte

@@ -7,12 +7,12 @@
     <div class="w-full bg-white flex items-center justify-center ">
       <div class="max-w-sm m-8">
         <div class="text-black text-5xl md:text-15xl font-black">
-          Internal Error
+          {$_('internal-error')}
         </div>
         <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
         <p
           class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
-          Something went wrong in the UI logic
+          {$_('generic-ui-logic-error')}
         </p>
         <a
           href="/"

src/components/contacts/AddContactModal.svelte

@@ -0,0 +1,436 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import {
+    GroupContactService,
+    RunnerTeamService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
+  import isEmail from "validator/es/lib/isEmail";
+  import isMobilePhone from "validator/es/lib/isMobilePhone";
+  import Toastify from "toastify-js";
+  export let modal_open;
+  export let current_contacts;
+  $: selected_team = [];
+  let firstname_input;
+  let lastname_input;
+  let middlename_input;
+  let phone_input;
+  let email_input;
+  let address_input1;
+  let address_input2;
+  let address_zipcode;
+  let address_city;
+  let teams = [];
+  let orgs = [];
+  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+    teams = val;
+  });
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    orgs = val;
+  });
+  function focus(el) {
+    el.focus();
+  }
+  $: middlename_input_value = "";
+  $: phone_input_value = "";
+  $: email_input_value = "";
+  $: lastname_input_value = "";
+  $: firstname_input_value = "";
+  $: address_input1_value = "";
+  $: address_input2_value = "";
+  $: address_zipcode_value = "";
+  $: address_city_value = "";
+  $: processed_last_submit = true;
+  $: address_checked = true;
+  $: isPhoneValidOrEmpty =
+    (phone_input_value.includes("+") &&
+      isMobilePhone(
+        phone_input_value
+          .replaceAll("(", "")
+          .replaceAll(")", "")
+          .replaceAll("-", "")
+          .replaceAll(" ", "")
+      )) ||
+    phone_input_value === "";
+  $: isEmailValidOrEmpty =
+    isEmail(email_input_value) || email_input_value === "";
+  $: isLastnameValid = lastname_input_value.trim().length !== 0;
+  $: isFirstnameValid = firstname_input_value.trim().length !== 0;
+  $: isAddress1Valid = address_input1_value.trim().length !== 0;
+  $: iszipcodevalid = address_zipcode_value.trim().length !== 0;
+  $: iscityvalid = address_city_value.trim().length !== 0;
+  $: createbtnenabled =
+    isFirstnameValid &&
+    isLastnameValid &&
+    isEmailValidOrEmpty &&
+    isPhoneValidOrEmpty &&
+    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
+      address_checked === false);
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: "Contact is being added...",
+        duration: -1,
+      }).showToast();
+      let address = {};
+      if (address_checked === true) {
+        address = {
+          address1: address_input1_value,
+          address2: address_input2_value || "",
+          postalcode: address_zipcode_value,
+          city: address_city_value,
+          country: "DE",
+        };
+      }
+      let postdata = {
+        groups: selected_team,
+        firstname: firstname_input_value,
+        lastname: lastname_input_value,
+        address,
+      };
+      if (middlename_input_value) {
+        postdata.middlename = middlename_input_value;
+      }
+      if (phone_input_value) {
+        postdata.phone = phone_input_value;
+      }
+      if (email_input_value) {
+        postdata.email = email_input_value;
+      }
+      GroupContactService.groupContactControllerPost(postdata)
+        .then((result) => {
+          firstname_input_value = "";
+          lastname_input_value = "";
+          middlename_input_value = "";
+          email_input_value = "";
+          modal_open = false;
+          //
+          Toastify({
+            text: "Contact added",
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_contacts.push(result);
+          current_contacts = current_contacts;
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}>
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span>
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              <svg
+                class="h-6 w-6 text-blue-600"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                {$_('create-a-new-contact')}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_('please-provide-the-required-information-to-add-a-new-contact')}
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="firstname"
+                    class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
+                  <input
+                    use:focus
+                    autocomplete="off"
+                    placeholder={$_('first-name')}
+                    class:border-red-500={!isFirstnameValid}
+                    class:focus:border-red-500={!isFirstnameValid}
+                    class:focus:ring-red-500={!isFirstnameValid}
+                    bind:value={firstname_input_value}
+                    bind:this={firstname_input}
+                    type="text"
+                    name="firstname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isFirstnameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('first-name-is-required')}
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="trackname"
+                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                  <input
+                    autocomplete="off"
+                    placeholder={$_('middle-name')}
+                    bind:value={middlename_input_value}
+                    bind:this={middlename_input}
+                    type="text"
+                    name="trackname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="lastname"
+                    class="block text-sm font-medium text-gray-700">Last Name</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Last Name"
+                    class:border-red-500={!isLastnameValid}
+                    class:focus:border-red-500={!isLastnameValid}
+                    class:focus:ring-red-500={!isLastnameValid}
+                    bind:value={lastname_input_value}
+                    bind:this={lastname_input}
+                    type="text"
+                    name="lastname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isLastnameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('last-name-is-required')}
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="team"
+                    class="block text-sm font-medium text-gray-700">{$_('team')}</label>
+                  <select
+                    name="team"
+                    multiple
+                    bind:value={selected_team}
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+                    {#each teams as team}
+                      <option value={team.id}>
+                        {team.parentGroup.name}
+                        &gt;
+                        {team.name}
+                      </option>
+                    {/each}
+                    {#each orgs as org}
+                      <option value={org.id}>{org.name}</option>
+                    {/each}
+                  </select>
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="phone"
+                    class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
+                  <input
+                    autocomplete="off"
+                    placeholder={$_('phone')}
+                    class:border-red-500={!isPhoneValidOrEmpty}
+                    class:focus:border-red-500={!isPhoneValidOrEmpty}
+                    class:focus:ring-red-500={!isPhoneValidOrEmpty}
+                    bind:value={phone_input_value}
+                    bind:this={phone_input}
+                    type="tel"
+                    name="phone"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isPhoneValidOrEmpty}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="email"
+                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
+                  <input
+                    autocomplete="off"
+                    placeholder={$_('e-mail-adress')}
+                    class:border-red-500={!isEmailValidOrEmpty}
+                    class:focus:border-red-500={!isEmailValidOrEmpty}
+                    class:focus:ring-red-500={!isEmailValidOrEmpty}
+                    bind:value={email_input_value}
+                    bind:this={email_input}
+                    type="email"
+                    name="email"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isEmailValidOrEmpty}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('valid-email-is-required')}
+                    </span>
+                  {/if}
+                </div>
+                <div class="flex items-start">
+                  <div class="flex items-center h-5">
+                    <input
+                      bind:checked={address_checked}
+                      id="comments"
+                      name="comments"
+                      type="checkbox"
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                  </div>
+                  <div class="ml-3 text-sm">
+                    <label
+                      for="comments"
+                      class="font-medium text-gray-700">{$_('address')}</label>
+                  </div>
+                </div>
+                {#if address_checked === true}
+                  <div class="col-span-6">
+                    <label
+                      for="address1"
+                      class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+                    <input
+                      autocomplete="off"
+                      placeholder="Address"
+                      class:border-red-500={!isAddress1Valid}
+                      class:focus:border-red-500={!isAddress1Valid}
+                      class:focus:ring-red-500={!isAddress1Valid}
+                      bind:value={address_input1_value}
+                      bind:this={address_input1}
+                      type="text"
+                      name="address1"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    {#if !isAddress1Valid}
+                      <span
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        {$_('address-is-required')}
+                      </span>
+                    {/if}
+                  </div>
+                  <div class="col-span-6">
+                    <label
+                      for="address2"
+                      class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+                    <input
+                      autocomplete="off"
+                      placeholder={$_('apartment-suite-etc')}
+                      bind:value={address_input2_value}
+                      bind:this={address_input2}
+                      type="text"
+                      name="address2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  </div>
+                  <div class="col-span-6">
+                    <label
+                      for="zipcode"
+                      class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+                    <input
+                      autocomplete="off"
+                      placeholder={$_('zip-postal-code')}
+                      class:border-red-500={!iszipcodevalid}
+                      class:focus:border-red-500={!iszipcodevalid}
+                      class:focus:ring-red-500={!iszipcodevalid}
+                      bind:value={address_zipcode_value}
+                      bind:this={address_zipcode}
+                      type="text"
+                      name="zipcode"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    {#if !iszipcodevalid}
+                      <span
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        {$_('valid-zipcode-postal-code-is-required')}
+                      </span>
+                    {/if}
+                  </div>
+                  <div class="col-span-6">
+                    <label
+                      for="city"
+                      class="block text-sm font-medium text-gray-700">City</label>
+                    <input
+                      autocomplete="off"
+                      placeholder="City"
+                      class:border-red-500={!iscityvalid}
+                      class:focus:border-red-500={!iscityvalid}
+                      class:focus:ring-red-500={!iscityvalid}
+                      bind:value={address_city_value}
+                      bind:this={address_city}
+                      type="text"
+                      name="city"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    {#if !iscityvalid}
+                      <span
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        {$_('valid-city-is-required')}
+                      </span>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
+            on:click={submit}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('create')}
+          </button>
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('cancel')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/contacts/ContactDetail.svelte

@@ -0,0 +1,394 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import store from "../../store";
+  import {
+    GroupContactService,
+    RunnerTeamService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  import PromiseError from "../base/PromiseError.svelte";
+  import isEmail from "validator/es/lib/isEmail";
+  let data_loaded = false;
+  let orgs = [];
+  let teams = [];
+  export let params;
+  $: delete_triggered = false;
+  $: original_data = {};
+  $: editable = {};
+  $: changes_performed = !(
+    JSON.stringify(original_data) === JSON.stringify(editable)
+  );
+  $: isEmailValid =
+    (editable.email || "") === "" ||
+    (editable.email && isEmail(editable.email || ""));
+  $: isFirstnameValid = editable.firstname !== "";
+  $: isLastnameValid = editable.lastname !== "";
+  $: save_enabled =
+    changes_performed &&
+    isFirstnameValid &&
+    isLastnameValid &&
+    isEmailValid &&
+    isPhoneValidOrEmpty &&
+    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
+    editable.address_checked === false);
+  const promise = GroupContactService.groupContactControllerGetOne(
+    params.contact
+  ).then((data) => {
+    data_loaded = true;
+    original_data = Object.assign(original_data, data);
+    editable = Object.assign(editable, original_data);
+    editable.groups = editable.groups.map((g) => g.id);
+    original_data.groups = original_data.groups.map((g) => g.id);
+    editable.address_checked = editable.address.address1 !== null;
+    original_data.address_checked = editable.address.address1 !== null;
+    if(editable.address_checked===false){
+      editable.address = {
+        address1: "",
+        address2: "",
+        city: "",
+        postalcode: "",
+        country: ""
+      }
+    }
+  });
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    orgs = val;
+  });
+  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+    teams = val;
+  });
+  $: isPhoneValidOrEmpty =
+    editable.phone?.includes("+") ||
+    editable.phone === "" ||
+    editable.phone === null;
+  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
+  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
+  $: iscityvalid = editable.address?.city?.trim().length !== 0;
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      Toastify({
+        text: $_("contact-is-being-updated"),
+        duration: 2500,
+      }).showToast();
+      editable.address.country = "DE";
+      if (editable.address_checked === false) {
+        editable.address = null;
+      }
+      if (editable.email) editable.email = editable.email;
+      if (editable.phone) editable.phone = editable.phone;
+      if (editable.middlename) editable.middlename = editable.middlename;
+      GroupContactService.groupContactControllerPut(original_data.id, editable)
+        .then((resp) => {
+          Object.assign(original_data, editable);
+          original_data=original_data;
+          Toastify({
+            text: $_("updated-contact"),
+            duration: 2500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+        })
+        .catch((err) => {});
+    } else {
+    }
+  }
+  function deleteContact() {
+    GroupContactService.groupContactControllerRemove(original_data.id, true)
+      .then((resp) => {
+        location.replace("./");
+      })
+      .catch((err) => {});
+  }
+</script>
+
+{#await promise}
+  {$_('loading-contact-details')}
+{:then}
+  <section class="container p-5 select-none">
+    <div class="flex flex-row mb-4">
+      <div class="w-full">
+        <nav class="w-full flex">
+          <ol class="list-none flex flex-row items-center justify-start">
+            <li class="flex items-center">
+              <svg
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
+            </li>
+            <li class="flex items-center ml-2">
+              <a class="mr-2" href="./">{$_('contacts')}</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2">{original_data.firstname}
+                {original_data.middlename || ''}
+                {original_data.lastname}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
+      {original_data.firstname}
+      {original_data.middlename || ''}
+      {original_data.lastname}
+      <span data-id="contact_actions_${editable.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:DELETE')}
+          {#if delete_triggered}
+            <button
+              on:click={deleteContact}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
+            <button
+              on:click={() => {
+                delete_triggered = !delete_triggered;
+              }}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+          {/if}
+          {#if !delete_triggered}
+            <button
+              on:click={() => {
+                delete_triggered = true;
+              }}
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-contact')}</button>
+          {/if}
+        {/if}
+        {#if !delete_triggered}
+          <button
+            disabled={!save_enabled}
+            class:opacity-50={!save_enabled}
+            type="button"
+            on:click={submit}
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
+        {/if}
+      </span>
+    </div>
+    <!--  -->
+    <div class="text-sm w-full">
+      <label
+        for="firstname"
+        class="font-medium text-gray-700">{$_('first-name')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('first-name')}
+        type="text"
+        class:border-red-500={!isFirstnameValid}
+        class:focus:border-red-500={!isFirstnameValid}
+        class:focus:ring-red-500={!isFirstnameValid}
+        bind:value={editable.firstname}
+        name="firstname"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+      {#if !isFirstnameValid}
+        <span
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          {$_('first-name-is-required')}
+        </span>
+      {/if}
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="middlename"
+        class="font-medium text-gray-700">{$_('middle-name')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('middle-name')}
+        type="text"
+        bind:value={editable.middlename}
+        name="middlename"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="lastname"
+        class="font-medium text-gray-700">{$_('last-name')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('last-name')}
+        type="text"
+        bind:value={editable.lastname}
+        class:border-red-500={!isLastnameValid}
+        class:focus:border-red-500={!isLastnameValid}
+        class:focus:ring-red-500={!isLastnameValid}
+        name="lastname"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+      {#if !isLastnameValid}
+        <span
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          {$_('last-name-is-required')}
+        </span>
+      {/if}
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="email"
+        class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('e-mail-adress')}
+        type="email"
+        bind:value={editable.email}
+        class:border-red-500={!isEmailValid}
+        class:focus:border-red-500={!isEmailValid}
+        class:focus:ring-red-500={!isEmailValid}
+        name="email"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+      {#if !isEmailValid}
+        <span
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          {$_('valid-email-is-required')}
+        </span>
+      {/if}
+    </div>
+    <div class="text-sm w-full">
+      <label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('phone')}
+        type="tel"
+        class:border-red-500={!isPhoneValidOrEmpty}
+        class:focus:border-red-500={!isPhoneValidOrEmpty}
+        class:focus:ring-red-500={!isPhoneValidOrEmpty}
+        bind:value={editable.phone}
+        name="phone"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+      {#if !isPhoneValidOrEmpty}
+        <span
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          {$_('valid-international-phone-number-is-required')}
+        </span>
+      {/if}
+    </div>
+    <div class="text-sm w-full">
+      <span class="font-medium text-gray-700">{$_('groups')}</span>
+      <select
+        bind:value={editable.groups}
+        name="team"
+        multiple
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+        {#each teams as team}
+          <option value={team.id}>
+            {team.parentGroup.name}
+            &gt;
+            {team.name}
+          </option>
+        {/each}
+        {#each orgs as org}
+          <option value={org.id}>{org.name}</option>
+        {/each}
+      </select>
+    </div>
+    <!--  -->
+    <div class="flex items-start mt-2">
+      <div class="flex items-center h-5">
+        <input
+          bind:checked={editable.address_checked}
+          id="comments"
+          name="comments"
+          type="checkbox"
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+      </div>
+      <div class="ml-3 text-sm">
+        <label
+          for="comments"
+          class="font-medium text-gray-700">{$_('address')}</label>
+      </div>
+    </div>
+    {#if editable.address_checked === true}
+      <div class="col-span-6">
+        <label
+          for="address1"
+          class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+        <input
+          autocomplete="off"
+          placeholder="Address"
+          class:border-red-500={!isAddress1Valid}
+          class:focus:border-red-500={!isAddress1Valid}
+          class:focus:ring-red-500={!isAddress1Valid}
+          bind:value={editable.address.address1}
+          type="text"
+          name="address1"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        {#if !isAddress1Valid}
+          <span
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            {$_('address-is-required')}
+          </span>
+        {/if}
+      </div>
+      <div class="col-span-6">
+        <label
+          for="address2"
+          class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+        <input
+          autocomplete="off"
+          placeholder={$_('apartment-suite-etc')}
+          bind:value={editable.address.address2}
+          type="text"
+          name="address2"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+      </div>
+      <div class="col-span-6">
+        <label
+          for="zipcode"
+          class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+        <input
+          autocomplete="off"
+          placeholder={$_('zip-postal-code')}
+          class:border-red-500={!iszipcodevalid}
+          class:focus:border-red-500={!iszipcodevalid}
+          class:focus:ring-red-500={!iszipcodevalid}
+          bind:value={editable.address.postalcode}
+          type="text"
+          name="zipcode"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        {#if !iszipcodevalid}
+          <span
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            {$_('valid-zipcode-postal-code-is-required')}
+          </span>
+        {/if}
+      </div>
+      <div class="col-span-6">
+        <label
+          for="city"
+          class="block text-sm font-medium text-gray-700">{$_('city')}</label>
+        <input
+          autocomplete="off"
+          placeholder={$_('city')}
+          class:border-red-500={!iscityvalid}
+          class:focus:border-red-500={!iscityvalid}
+          class:focus:ring-red-500={!iscityvalid}
+          bind:value={editable.address.city}
+          type="text"
+          name="city"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        {#if !iscityvalid}
+          <span
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            {$_('valid-city-is-required')}
+          </span>
+        {/if}
+      </div>
+    {/if}
+  </section>
+{:catch error}
+  <PromiseError {error} />
+{/await}

src/components/contacts/Contacts.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import store from "../../store";
+  import AddContactModal from "./AddContactModal.svelte";
+  import ContactsOverview from "./ContactsOverview.svelte";
+  export let modal_open = false;
+  let current_contacts = [];
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_('contacts')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:CREATE')}
+      <button
+        on:click={() => {
+          modal_open = true;
+        }}
+        type="button"
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+        {$_('create-a-new-contact')}
+      </button>
+    {/if}
+  </span>
+  <ContactsOverview bind:current_contacts />
+</section>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:CREATE')}
+  <AddContactModal bind:current_contacts bind:modal_open />
+{/if}

src/components/contacts/ContactsEmptyState.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import AddContactModal from "./AddContactModal.svelte";
+  import team_empty from "../teams/team_empty.svg";
+  let modal_open = false;
+  let current_contacts = [];
+</script>
+
+<div class="text-center items-center justify-center">
+  <p class="mb-16 text-lg text-gray-500">
+    <img class="w-full h-44" src={team_empty} alt="" />
+    <span class="font-bold">{$_('there-are-no-contacts-added-yet')}</span><br />
+    <span>{$_('add-your-first-contact')}</span>
+  </p>
+</div>
+
+<AddContactModal bind:modal_open bind:current_contacts />

src/components/contacts/ContactsOverview.svelte

@@ -0,0 +1,177 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import { GroupContactService } from "@odit/lfk-client-js";
+  const promise = GroupContactService.groupContactControllerGetAll().then(
+    (result) => {
+      current_contacts = result;
+    }
+  );
+  import store from "../../store";
+  import ContactsEmptyState from "./ContactsEmptyState.svelte";
+  $: searchvalue = "";
+  $: active_deletes = [];
+  export let current_contacts = [];
+</script>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
+  {#await promise}
+    <div
+      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+      role="alert">
+      <p class="font-bold">{$_('contacts-are-being-loaded')}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then}
+    {#if current_contacts.length === 0}
+      <ContactsEmptyState />
+    {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
+      <div
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('name')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('groups')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('address')}
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <span class="sr-only">{$_('action')}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each current_contacts as t}
+              {#if Object.values(t)
+                .toString()
+                .toLowerCase()
+                .includes(searchvalue)}
+                <tr data-rowid="team_{t.id}">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900">
+                          {t.firstname}
+                          {t.middlename || ''}
+                          {t.lastname}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900">
+                          {#if t.groups.length > 0}
+                            {#each t.groups as g}
+                              {#if g.responseType === 'RUNNERORGANIZATION'}
+                                <a
+                                  href="../orgs/{g.id}"
+                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
+                              {:else}
+                                <a
+                                  href="../teams/{g.id}"
+                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.parentGroup.name}
+                                  &gt;
+                                  {g.name}</a>
+                              {/if}
+                            {/each}
+                          {:else}
+                            {$_('contact-is-not-a-member-in-any-group')}
+                          {/if}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900">
+                          {#if t.address.address1 !== null}
+                            {t.address.address1}<br />
+                            {t.address.address2 || ''}<br />
+                            {t.address.postalcode}
+                            {t.address.city}
+                            {t.address.country}
+                          {/if}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  {#if active_deletes[t.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          active_deletes[t.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                      <button
+                        on:click={() => {
+                          GroupContactService.groupContactControllerRemove(t.id, false).then(
+                            (resp) => {
+                              current_contacts = current_contacts.filter(
+                                (obj) => obj.id !== t.id
+                              );
+                              Toastify({
+                                text: $_('contact-deleted'),
+                                duration: 500,
+                                backgroundColor:
+                                  'linear-gradient(to right, #00b09b, #96c93d)',
+                              }).showToast();
+                            }
+                          );
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                    </td>
+                  {:else}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <a
+                        href="./{t.id}"
+                        class="text-indigo-600 hover:text-indigo-900">{$_('edit')}</a>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
+                        <button
+                          on:click={() => {
+                            active_deletes[t.id] = true;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                      {/if}
+                    </td>
+                  {/if}
+                </tr>
+              {/if}
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {:catch error}
+    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+      <span class="inline-block align-middle mr-8">
+        <b class="capitalize">{$_('general_promise_error')}</b>
+        {error}
+      </span>
+    </div>
+  {/await}
+{/if}

src/components/dashboard/Dashboard.svelte

@@ -1,11 +1,10 @@
 <script>
   import { _ } from "svelte-i18n";
   import localForage from "localforage";
-  import store from "../store";
+  import store from "../../store";
   import { router } from "tinro";
-  import NoComponentLoaded from "./NoComponentLoaded.svelte";
+  import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
   import { AuthService } from "@odit/lfk-client-js";
-  let dropdown1 = false;
   $: navOpen = false;
   function logout() {
     localForage.clear();
@@ -122,99 +121,21 @@
           <span>{$_('tracks')}</span>
         </a>
       {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
+        <a
+          class:bg-gray-100={$router.path === '/groups/'}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/groups/">
+          <svg class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600" fill="currentColor" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg>
+          <span>UserGroups</span>
+        </a>
+      {/if}
       <a
-        class:bg-gray-100={false}
+        class:bg-gray-100={$router.path === '/contacts/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="#">
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor">
-          <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
-          <path
-            fill-rule="evenodd"
-            d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-            clip-rule="evenodd" />
-        </svg>
-        <span>Checklists</span>
-      </a>
-      <div>
-        <div
-          tabindex="0"
-          class:bg-gray-100={false}
-          class="flex items-center justify-between px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          role="button"
-          on:click={() => {
-            dropdown1 = !dropdown1;
-          }}>
-          <div class="flex items-center">
-            <svg
-              class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor">
-              <path
-                fill-rule="evenodd"
-                d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
-                clip-rule="evenodd" />
-            </svg>
-            <span>Integrations</span>
-          </div>
-          {#if dropdown1}
-            <svg
-              class="flex-shrink-0 w-4 h-4 ml-2 transition transform"
-              xmlns="http://www.w3.org/2000/svg"
-              style="transform:rotate(90deg)"
-              viewBox="0 0 20 20"
-              fill="currentColor">
-              <path
-                fill-rule="evenodd"
-                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                clip-rule="evenodd" />
-            </svg>
-          {:else}
-            <svg
-              class="flex-shrink-0 w-4 h-4 ml-2 transition transform"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor">
-              <path
-                fill-rule="evenodd"
-                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                clip-rule="evenodd" />
-            </svg>
-          {/if}
-        </div>
-        {#if dropdown1}
-          <div class="mb-4">
-            <a
-              class="flex items-center py-2 pl-12 pr-4 transition cursor-pointer hover:bg-gray-100 hover:text-gray-900"
-              href="#">Shopify</a>
-            <a
-              class="flex items-center py-2 pl-12 pr-4 transition cursor-pointer hover:bg-gray-100 hover:text-gray-900"
-              href="#">Slack</a>
-            <a
-              class="flex items-center py-2 pl-12 pr-4 transition cursor-pointer hover:bg-gray-100 hover:text-gray-900"
-              href="#">Zapier</a>
-          </div>
-        {/if}
-      </div>
-      <a
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="#">
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor">
-          <path
-            fill-rule="evenodd"
-            d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1 1h1zm3 0a1 1 0 10-1-1v1h1z"
-            clip-rule="evenodd" />
-          <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z" />
-        </svg>
-        <span>{$_('changelog')}</span>
+        href="/contacts/">
+        <svg fill="currentColor" class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"/></svg>
+        <span>{$_('contacts')}</span>
       </a>
       <a
         class:bg-gray-100={$router.path === '/settings/'}
@@ -269,6 +190,10 @@
     </nav>
   </nav>
   <div class="ml-0 transition md:ml-60">
+    <header on:click={() => {
+      navOpen = true;
+    }} class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden"><button class="block btn btn-light md:hidden">
+      <span class="sr-only">Menu</span><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentcolor"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4A1 1 0 013 5zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg></button></header>
     <slot>
       <NoComponentLoaded />
     </slot>

src/components/dashboard/MainDashContent.svelte

@@ -1,8 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import StatCards from "./StatCards.svelte";
-  import store from "../store";
-  import ComponentDump from "./ComponentDump.svelte";
+  import store from "../../store";
   let navOpen = false;
 </script>
 
@@ -11,9 +10,9 @@
   on:click={() => {
     navOpen = false;
   }}>
-  <!-- <div class="border-4 border-dashed rounded h-96" /> -->
   <h1 class="text-3xl leading-tight">
-    <span class="font-extrabold">{$_('dashboard-title')}</span> <span>
+    <span class="font-extrabold">{$_('dashboard-title')}</span>
+    <span>
       -
       {$_('dashboard-greeting')},
       <span
@@ -21,5 +20,4 @@
       👋</span>
   </h1>
   <StatCards />
-  <ComponentDump />
 </div>

src/components/general/About.svelte

@@ -1,6 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { clickOutside } from "./outsideclick";
+  import { clickOutside } from "../base/outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   export let modal_open;
   (function () {

src/components/general/Footer.svelte

@@ -1,12 +1,13 @@
 <script>
+  import { onMount } from "svelte";
   import { _ } from "svelte-i18n";
   $: releaseinfo = "";
-  setTimeout(() => {
+  onMount(() => {
     releaseinfo = document
       .getElementById("buildinfo")
       .textContent.replace("RELEASE_INFO-", "")
       .replace("-RELEASE_INFO", "");
-  }, 1500);
+  });
   const year = new Date().getFullYear();
 </script>
 
@@ -31,5 +32,9 @@
       target="_blank"
       rel="noopener, noreferrer"
       href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}">{releaseinfo}</a>
+    -
+    <a class="underline" href="/privacy">{$_('privacy')}</a>
+    -
+    <a class="underline" href="/imprint">{$_('imprint')}</a>
   </p>
 </footer>

src/components/general/Imprint.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { _, getLocaleFromNavigator } from "svelte-i18n";
+  import marked from "marked";
+  import Footer from "./Footer.svelte";
+  import * as css from "../base/simple.css";
+  let html = "";
+  async function load() {
+    let md = await fetch("/imprint_" + getLocaleFromNavigator() + ".md");
+    if((await md.text()).includes("<meta")){
+      md.ok=false
+    }
+    if (!md.ok) {
+      md = await fetch("/imprint_en.md");
+    }
+    html = marked(await md.text());
+  }
+  const promise = load();
+</script>
+
+<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
+  <div class="text-center mb-8">
+    <h1
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+      {$_('imprint')}
+    </h1>
+  </div>
+</div>
+
+<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
+  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+    {#await promise}
+      <p class="text-center w-full">{$_('imprint-loading')}</p>
+    {:then}
+      <div class="simplecontent">
+        {@html html}
+      </div>
+    {:catch error}
+      <div
+        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+        <span class="inline-block align-middle mr-8">
+          <b class="capitalize">{$_('general_promise_error')}</b>
+          {error}
+        </span>
+      </div>
+    {/await}
+  </div>
+</div>
+<Footer />

src/components/general/Privacy.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { _, getLocaleFromNavigator } from "svelte-i18n";
+  import marked from "marked";
+  import Footer from "./Footer.svelte";
+  import * as css from "../base/simple.css";
+  let html = "";
+  async function load() {
+    let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");
+    if((await md.text()).includes("<meta")){
+      md.ok=false
+    }
+    if (!md.ok) {
+      md = await fetch("/privacy_en.md");
+    }
+    html = marked(await md.text());
+  }
+  const promise = load();
+</script>
+
+<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
+  <div class="text-center mb-8">
+    <h1
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+      {$_('privacy')}
+    </h1>
+  </div>
+</div>
+
+<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
+  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+    {#await promise}
+      <p class="text-center w-full">{$_('privacy-loading')}</p>
+    {:then}
+      <div class="simplecontent">
+        {@html html}
+      </div>
+    {:catch error}
+      <div
+        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+        <span class="inline-block align-middle mr-8">
+          <b class="capitalize">{$_('general_promise_error')}</b>
+          {error}
+        </span>
+      </div>
+    {/await}
+  </div>
+</div>
+<Footer />

src/components/general/Settings.svelte

@@ -1,6 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
-import FormLayout from "./FormLayout.svelte";
+  import FormLayout from "../base/FormLayout.svelte";
 </script>
 
 <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
@@ -32,4 +32,4 @@ import FormLayout from "./FormLayout.svelte";
     </div>
     <FormLayout />
   </div>
-</div>
+</div>

src/components/orgs/AddOrgModal.svelte

@@ -0,0 +1,281 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { RunnerOrganizationService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  export let modal_open;
+  export let current_organizations;
+  let name_input_dom;
+  function focus(el) {
+    el.focus();
+  }
+  $: name = "";
+  $: processed_last_submit = true;
+  $: isOrgnameValid = name.trim().length !== 0;
+  $: isAddress1Valid = address_input1_value.trim().length !== 0;
+  $: iszipcodevalid = address_zipcode_value.trim().length !== 0;
+  $: iscityvalid = address_city_value.trim().length !== 0;
+  $: createbtnenabled =
+    isOrgnameValid &&
+    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
+      address_checked === false);
+  $: address_input1_value = "";
+  $: address_input2_value = "";
+  $: address_zipcode_value = "";
+  $: address_city_value = "";
+  $: address_checked = true;
+
+  let address_input1;
+  let address_input2;
+  let address_zipcode;
+  let address_city;
+
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: $_("organization-is-being-added"),
+        duration: -1,
+      }).showToast();
+      let address = {};
+      if (address_checked === true) {
+        address = {
+          address1: address_input1_value,
+          address2: address_input2_value || "",
+          postalcode: address_zipcode_value,
+          city: address_city_value,
+          country: "DE",
+        };
+      }
+      RunnerOrganizationService.runnerOrganizationControllerPost({
+        name,
+        address: address,
+        contact: undefined,
+      })
+        .then((result) => {
+          name = "";
+          modal_open = false;
+          Toastify({
+            text: $_("organization-added"),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_organizations = current_organizations.concat([result]);
+        })
+        .catch((err) => {})
+        .finally(() => {
+          processed_last_submit = true;
+          toast.hideToast();
+        });
+    }
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}>
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span>
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              <svg
+                class="h-6 w-6 text-blue-600"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path
+                  d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                {$_('create-a-new-organization')}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_('please-provide-the-required-information-to-add-a-new-organization')}
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="firstname"
+                    class="block text-sm font-medium text-gray-700">{$_('name')}</label>
+                  <input
+                    use:focus
+                    autocomplete="off"
+                    placeholder={$_('name')}
+                    class:border-red-500={!isOrgnameValid}
+                    class:focus:border-red-500={!isOrgnameValid}
+                    class:focus:ring-red-500={!isOrgnameValid}
+                    bind:value={name}
+                    bind:this={name_input_dom}
+                    type="text"
+                    name="firstname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isOrgnameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('organization-name-is-required')}
+                    </span>
+                  {/if}
+                </div>
+                <div class="flex items-start">
+                  <div class="flex items-center h-5">
+                    <input
+                      bind:checked={address_checked}
+                      id="comments"
+                      name="comments"
+                      type="checkbox"
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                  </div>
+                  <div class="ml-3 text-sm">
+                    <label
+                      for="comments"
+                      class="font-medium text-gray-700">Address</label>
+                  </div>
+                </div>
+              {#if address_checked === true}
+                <div class="col-span-6">
+                  <label
+                    for="address1"
+                    class="block text-sm font-medium text-gray-700">Address</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Address"
+                    class:border-red-500={!isAddress1Valid}
+                    class:focus:border-red-500={!isAddress1Valid}
+                    class:focus:ring-red-500={!isAddress1Valid}
+                    bind:value={address_input1_value}
+                    bind:this={address_input1}
+                    type="text"
+                    name="address1"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isAddress1Valid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Address is required
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="address2"
+                    class="block text-sm font-medium text-gray-700">Apartment,
+                    suite, etc.</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Apartment, suite, etc."
+                    bind:value={address_input2_value}
+                    bind:this={address_input2}
+                    type="text"
+                    name="address2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="zipcode"
+                    class="block text-sm font-medium text-gray-700">ZIP/ postal
+                    code</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="ZIP/ postal code"
+                    class:border-red-500={!iszipcodevalid}
+                    class:focus:border-red-500={!iszipcodevalid}
+                    class:focus:ring-red-500={!iszipcodevalid}
+                    bind:value={address_zipcode_value}
+                    bind:this={address_zipcode}
+                    type="text"
+                    name="zipcode"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !iszipcodevalid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Valid zipcode/ postal code is required
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="city"
+                    class="block text-sm font-medium text-gray-700">City</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="City"
+                    class:border-red-500={!iscityvalid}
+                    class:focus:border-red-500={!iscityvalid}
+                    class:focus:ring-red-500={!iscityvalid}
+                    bind:value={address_city_value}
+                    bind:this={address_city}
+                    type="text"
+                    name="city"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !iscityvalid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Valid city is required
+                    </span>
+                  {/if}
+                </div>
+              {/if}
+            </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
+            on:click={submit}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('create')}
+          </button>
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('cancel')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/orgs/ConfirmOrgDeletion.svelte

@@ -1,6 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { clickOutside } from "./outsideclick";
+  import { clickOutside } from "../base/outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import { RunnerOrganizationService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
@@ -25,9 +25,7 @@
         }).showToast();
         location.replace("./");
       })
-      .catch((err) => {
-        //
-      });
+      .catch((err) => {});
   }
 </script>
 
@@ -68,13 +66,17 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                Attention!
+                {$_('attention')}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  Do you want to delete the organization
-                  {delete_org.name}?<br />All associated teams and runners will
-                  be deleted too!
+                  {$_(
+                    'do-you-want-to-delete-the-organization-delete_org-name',
+                    {
+                      values: { orgname: delete_org.name },
+                    }
+                  )}<br />
+                  {$_('all-associated-teams-and-runners-will-be-deleted-too')}
                 </p>
               </div>
             </div>
@@ -85,13 +87,13 @@
             on:click={deleteOrg}
             type="button"
             class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
-            Confirm, delete organization and associated teams+runners.
+            {$_('confirm-delete-organization-and-associated-teams-runners')}
           </button>
           <button
             on:click={cancelDelete}
             type="button"
             class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-            Cancel, keep organization
+            {$_('cancel-keep-organization')}
           </button>
         </div>
       </div>

src/components/orgs/OrgDetail.svelte

@@ -0,0 +1,361 @@
+<script>
+  import {
+    GroupContactService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import store from "../../store";
+  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+  import PromiseError from "../base/PromiseError.svelte";
+  $: delete_triggered = false;
+  $: address_valid_or_none =
+    (isAddress1Valid && iszipcodevalid && iscityvalid) ||
+    editable.address_checked === false;
+  $: save_enabled = data_changed && address_valid_or_none;
+  let original = "";
+  let original_object = {};
+  let contacts = [];
+  export let params;
+  $: editable = {};
+  $: data_loaded = false;
+  $: data_changed = !(JSON.stringify(editable) === original);
+  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
+  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
+  $: iscityvalid = editable.address?.city?.trim().length !== 0;
+
+  const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
+    params.orgid
+  ).then((value) => {
+    data_loaded = true;
+    if (value.contact) {
+      if (value.contact !== "null") {
+        value.contact = value.contact.id;
+      }
+    }
+    value.address_checked = value.address.address1 !== null;
+    if(value.address_checked===false){
+      value.address = {
+        address1: "",
+        address2: "",
+        city: "",
+        postalcode: "",
+        country: ""
+      }
+    }
+    editable = Object.assign(editable, value);
+    editable = editable;
+    original_object = Object.assign(editable, value);
+    original = JSON.stringify(value);
+  });
+  GroupContactService.groupContactControllerGetAll().then((val) => {
+    contacts = val;
+  });
+  let modal_open = false;
+  let delete_org = {};
+  function deleteOrganization() {
+    RunnerOrganizationService.runnerOrganizationControllerRemove(
+      original_object.id,
+      false
+    )
+      .then((resp) => {
+        Toastify({
+          text: $_("organization-deleted"),
+          duration: 500,
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }).showToast();
+        location.replace("./");
+      })
+      .catch((err) => {
+        modal_open = true;
+        delete_org = original_object;
+      });
+  }
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      Toastify({
+        text: $_("updating-organization"),
+        duration: 2500,
+      }).showToast();
+      let postdata = Object.assign({}, editable);
+      if (postdata.address_checked === false) {
+        postdata.address = null;
+      }
+      console.log(postdata)
+      postdata.contact = postdata.contact === "null" ? null : postdata.contact;
+      RunnerOrganizationService.runnerOrganizationControllerPut(
+        original_object.id,
+        postdata
+      )
+        .then((resp) => {
+          original = JSON.stringify(editable);
+          Toastify({
+            text: $_("updated-organization"),
+            duration: 2500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+        })
+        .catch((err) => {});
+    } else {
+    }
+  }
+  export let import_modal_open = false;
+</script>
+
+<ImportRunnerModal
+  on:cancelDelete={(event) => {
+    import_modal_open = false;
+  }}
+  current_runners={[]}
+  passed_team={{}}
+  passed_orgs={[]}
+  passed_org={editable}
+  opened_from="OrgDetail"
+  bind:import_modal_open />
+<ConfirmOrgDeletion bind:modal_open bind:delete_org />
+{#if data_loaded}
+  <section class="container p-5">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
+      {original_object.name}
+      <span data-id="org_actions_${editable.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
+          <button
+            on:click={() => {
+              import_modal_open = true;
+            }}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('import-runners')}
+          </button>
+        {/if}
+        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+          {#if delete_triggered}
+            <button
+              on:click={deleteOrganization}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-delete')}</button>
+            <button
+              on:click={() => {
+                delete_triggered = !delete_triggered;
+              }}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+          {/if}
+          {#if !delete_triggered}
+            <button
+              on:click={() => {
+                delete_triggered = true;
+              }}
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-organization')}</button>
+          {/if}
+        {/if}
+        {#if !delete_triggered}
+          <button
+            on:click={submit}
+            disabled={!save_enabled}
+            class:opacity-50={!save_enabled}
+            type="button"
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
+        {/if}
+      </span>
+    </div>
+    <div class="flex flex-row mb-4">
+      <div class="w-full">
+        <nav class="w-full flex">
+          <ol class="list-none flex flex-row items-center justify-start">
+            <li class="mr-2 flex items-center">
+              <svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><path
+                  d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                <polyline points="9 22 9 12 15 12 15 22" /></svg>
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="/">{$_('home')}</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="mr-2 flex items-center">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z" /></svg>
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="./">{$_('organizations')}</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2">Org-Details #{params.orgid}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <div class="text-sm w-full">
+      <label for="name" class="font-medium text-gray-700">{$_('name')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('name')}
+        type="text"
+        bind:value={editable.name}
+        name="name"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="contact"
+        class="font-medium text-gray-700">{$_('contact')}</label>
+      <select
+        name="contact"
+        bind:value={editable.contact}
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+        <option value="null">no contact</option>
+        {#each contacts as c}
+          <option value={c.id}>
+            {c.firstname}
+            {c.middlename || ''}
+            {c.lastname}
+          </option>
+        {/each}
+      </select>
+    </div>
+    <!--  -->
+    <div class="flex items-start mt-2">
+      <div class="flex items-center h-5">
+        <input
+          bind:checked={editable.address_checked}
+          id="comments"
+          name="comments"
+          type="checkbox"
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+      </div>
+      <div class="ml-3 text-sm">
+        <label
+          for="comments"
+          class="font-medium text-gray-700">{$_('address')}</label>
+      </div>
+    </div>
+    {#if editable.address_checked === true}
+      <div class="col-span-6">
+        <label
+          for="address1"
+          class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+        <input
+          autocomplete="off"
+          placeholder="Address"
+          class:border-red-500={!isAddress1Valid}
+          class:focus:border-red-500={!isAddress1Valid}
+          class:focus:ring-red-500={!isAddress1Valid}
+          bind:value={editable.address.address1}
+          type="text"
+          name="address1"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        {#if !isAddress1Valid}
+          <span
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            {$_('address-is-required')}
+          </span>
+        {/if}
+      </div>
+      <div class="col-span-6">
+        <label
+          for="address2"
+          class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+        <input
+          autocomplete="off"
+          placeholder={$_('apartment-suite-etc')}
+          bind:value={editable.address.address2}
+          type="text"
+          name="address2"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+      </div>
+      <div class="col-span-6">
+        <label
+          for="zipcode"
+          class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+        <input
+          autocomplete="off"
+          placeholder={$_('zip-postal-code')}
+          class:border-red-500={!iszipcodevalid}
+          class:focus:border-red-500={!iszipcodevalid}
+          class:focus:ring-red-500={!iszipcodevalid}
+          bind:value={editable.address.postalcode}
+          type="text"
+          name="zipcode"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        {#if !iszipcodevalid}
+          <span
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            {$_('valid-zipcode-postal-code-is-required')}
+          </span>
+        {/if}
+      </div>
+      <div class="col-span-6">
+        <label
+          for="city"
+          class="block text-sm font-medium text-gray-700">{$_('city')}</label>
+        <input
+          autocomplete="off"
+          placeholder={$_('city')}
+          class:border-red-500={!iscityvalid}
+          class:focus:border-red-500={!iscityvalid}
+          class:focus:ring-red-500={!iscityvalid}
+          bind:value={editable.address.city}
+          type="text"
+          name="city"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        {#if !iscityvalid}
+          <span
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            {$_('valid-city-is-required')}
+          </span>
+        {/if}
+      </div>
+    {/if}
+  </section>
+{:else}
+  {#await promise}
+    {$_('organization-detail-is-being-loaded')}
+  {:catch error}
+    <PromiseError />
+  {/await}
+{/if}

src/components/orgs/OrgOverview.svelte

@@ -3,7 +3,7 @@
   let modal_open = false;
   let delete_org = {};
   import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import store from "../store";
+  import store from "../../store";
   import OrgsEmptyState from "./OrgsEmptyState.svelte";
   import Toastify from "toastify-js";
   import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
@@ -30,7 +30,7 @@
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
       role="alert">
-      <p class="font-bold">organizations are being loaded...</p>
+      <p class="font-bold">{$_('organizations-are-being-loaded')}</p>
       <p class="text-sm">{$_('this-might-take-a-moment')}</p>
     </div>
   {:then}
@@ -51,20 +51,20 @@
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Name
+                {$_('name')}
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Address
+                {$_('address')}
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Contact
+                {$_('contact')}
               </th>
               <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">Action</span>
+                <span class="sr-only">{$_('action')}</span>
               </th>
             </tr>
           </thead>
@@ -78,8 +78,7 @@
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <div class="ml-4">
-                        <div
-                          class="text-sm font-medium text-gray-900">
+                        <div class="text-sm font-medium text-gray-900">
                           {o.name}
                         </div>
                       </div>
@@ -88,11 +87,14 @@
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <div class="ml-4">
-                        <div
-                          class="text-sm font-medium text-gray-900">
-                          {#if o.address}
-                            {JSON.stringify(o.address)}
-                          {:else}no address specified{/if}
+                        <div class="text-sm font-medium text-gray-900">
+                          {#if o.address.address1 !== null}
+                            {o.address.address1}<br />
+                            {o.address.address2 || ''}<br />
+                            {o.address.postalcode}
+                            {o.address.city}
+                            {o.address.country}
+                          {/if}
                         </div>
                       </div>
                     </div>
@@ -100,11 +102,14 @@
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <div class="ml-4">
-                        <div
-                          class="text-sm font-medium text-gray-900">
+                        <div class="text-sm font-medium text-gray-900">
                           {#if o.contact}
-                            {JSON.stringify(o.contact)}
-                          {:else}no contact specified{/if}
+                            <a
+                              href="../contacts/{o.contact.id}"
+                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{o.contact.firstname}
+                              {o.contact.middlename || ''}
+                              {o.contact.lastname}</a>
+                          {:else}{$_('no-contact-specified')}{/if}
                         </div>
                       </div>
                     </div>
@@ -117,8 +122,7 @@
                           active_deletes[o.id] = false;
                         }}
                         tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
-                        Delete</button>
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
                       <button
                         on:click={() => {
                           RunnerOrganizationService.runnerOrganizationControllerRemove(o.id, false)
@@ -137,22 +141,21 @@
                             });
                         }}
                         tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
-                        Delete</button>
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
                     </td>
                   {:else}
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <a
                         href="./{o.id}"
-                        class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                        class="text-indigo-600 hover:text-indigo-900">{$_('edit')}</a>
                       {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:DELETE')}
                         <button
                           on:click={() => {
                             active_deletes[o.id] = true;
                           }}
                           tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
                       {/if}
                     </td>
                   {/if}

src/components/orgs/Orgs.svelte

@@ -1,10 +1,10 @@
 <script>
   import { _ } from "svelte-i18n";
-  import store from "../store";
+  import store from "../../store";
   import AddOrgModal from "./AddOrgModal.svelte";
   export let modal_open = false;
   import OrgOverview from "./OrgOverview.svelte";
-  import ImportRunnerModal from "./ImportRunnerModal.svelte";
+  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
   let current_organizations = [];
   export let import_modal_open = false;
 </script>
@@ -33,7 +33,6 @@
       </button>
     {/if}
   </span>
-  <p class="mb-8 text-lg text-gray-500">manage runner organizations</p>
   <OrgOverview bind:current_organizations />
 </section>
 
@@ -47,5 +46,6 @@
     passed_org={{}}
     passed_orgs={current_organizations}
     opened_from="OrgOverview"
+    current_runners={[]}
     bind:import_modal_open />
 {/if}

src/components/orgs/OrgsEmptyState.svelte

@@ -9,8 +9,9 @@
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="w-full h-44" src={org_empty} alt="" />
-    <span class="font-bold">There are no organizations added yet.</span><br />
-    <span>Add your first organization</span>
+    <span
+      class="font-bold">{$_('there-are-no-organizations-added-yet')}</span><br />
+    <span>{$_('add-your-first-organization')}</span>
   </p>
 </div>
 

src/components/presets/Table.svelte

@@ -28,7 +28,7 @@
                 Role
               </th>
               <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">Edit</span>
+                <span class="sr-only">{$_('edit')}</span>
               </th>
             </tr>
           </thead>
@@ -71,7 +71,7 @@
                 class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                 <a
                   href="#"
-                  class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                  class="text-indigo-600 hover:text-indigo-900">{$_('edit')}</a>
               </td>
             </tr>
 

src/components/runners/AddRunnerModal.svelte

@@ -0,0 +1,314 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import {
+    RunnerService,
+    RunnerTeamService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
+  import isEmail from "validator/es/lib/isEmail";
+  import isMobilePhone from "validator/es/lib/isMobilePhone";
+  import Toastify from "toastify-js";
+  export let modal_open;
+  export let current_runners;
+  $: selected_team = undefined;
+  let firstname_input;
+  let lastname_input;
+  let middlename_input;
+  let phone_input;
+  let email_input;
+  let teams = [];
+  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+    teams = val;
+  });
+  let orgs = [];
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    orgs = val;
+  });
+  function focus(el) {
+    el.focus();
+  }
+  $: middlename_input_value = "";
+  $: phone_input_value = "";
+  $: email_input_value = "";
+  $: lastname_input_value = "";
+  $: firstname_input_value = "";
+  $: processed_last_submit = true;
+  $: isPhoneValidOrEmpty =
+    (phone_input_value.includes("+") &&
+      isMobilePhone(
+        phone_input_value
+          .replaceAll("(", "")
+          .replaceAll(")", "")
+          .replaceAll("-", "")
+          .replaceAll(" ", "")
+      )) ||
+    phone_input_value === "";
+  $: isEmailValidOrEmpty =
+    isEmail(email_input_value) || email_input_value === "";
+  $: isLastnameValid = lastname_input_value.trim().length !== 0;
+  $: isFirstnameValid = firstname_input_value.trim().length !== 0;
+  $: createbtnenabled =
+    isFirstnameValid &&
+    isLastnameValid &&
+    isEmailValidOrEmpty &&
+    isPhoneValidOrEmpty;
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: $_("runner-is-being-added"),
+        duration: -1,
+      }).showToast();
+      let postdata = {
+        group: selected_team,
+        firstname: firstname_input_value,
+        lastname: lastname_input_value,
+      };
+      if (middlename_input_value) {
+        postdata.middlename = middlename_input_value;
+      }
+      if (phone_input_value) {
+        postdata.phone = phone_input_value;
+      }
+      if (email_input_value) {
+        postdata.email = email_input_value;
+      }
+      RunnerService.runnerControllerPost(postdata)
+        .then((result) => {
+          firstname_input_value = "";
+          lastname_input_value = "";
+          middlename_input_value = "";
+          email_input_value = "";
+          modal_open = false;
+          //
+          Toastify({
+            text: $_("runner-added"),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_runners.push(result);
+          current_runners = current_runners;
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}>
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span>
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="h-6 w-6 text-blue-600"
+                fill="currentColor"
+                width="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                {$_('create-a-new-runner')}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_('please-provide-the-required-information-to-add-a-new-runner')}
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="firstname"
+                    class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
+                  <input
+                    use:focus
+                    autocomplete="off"
+                    placeholder={$_('first-name')}
+                    class:border-red-500={!isFirstnameValid}
+                    class:focus:border-red-500={!isFirstnameValid}
+                    class:focus:ring-red-500={!isFirstnameValid}
+                    bind:value={firstname_input_value}
+                    bind:this={firstname_input}
+                    type="text"
+                    name="firstname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isFirstnameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('first-name-is-required')}
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="trackname"
+                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                  <input
+                    autocomplete="off"
+                    placeholder={$_('middle-name')}
+                    bind:value={middlename_input_value}
+                    bind:this={middlename_input}
+                    type="text"
+                    name="trackname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="lastname"
+                    class="block text-sm font-medium text-gray-700">Last Name</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Last Name"
+                    class:border-red-500={!isLastnameValid}
+                    class:focus:border-red-500={!isLastnameValid}
+                    class:focus:ring-red-500={!isLastnameValid}
+                    bind:value={lastname_input_value}
+                    bind:this={lastname_input}
+                    type="text"
+                    name="lastname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isLastnameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('last-name-is-required')}
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="team"
+                    class="block text-sm font-medium text-gray-700">{$_('team')}</label>
+                  <select
+                    name="team"
+                    bind:value={selected_team}
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+                    {#each teams as team}
+                      <option value={team.id}>
+                        {team.parentGroup.name}
+                        &gt;
+                        {team.name}
+                      </option>
+                    {/each}
+                    {#each orgs as org}
+                      <option value={org.id}>{org.name}</option>
+                    {/each}
+                  </select>
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="phone"
+                    class="block text-sm font-medium text-gray-700">Phone</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Phone"
+                    class:border-red-500={!isPhoneValidOrEmpty}
+                    class:focus:border-red-500={!isPhoneValidOrEmpty}
+                    class:focus:ring-red-500={!isPhoneValidOrEmpty}
+                    bind:value={phone_input_value}
+                    bind:this={phone_input}
+                    type="tel"
+                    name="phone"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isPhoneValidOrEmpty}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="email"
+                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
+                  <input
+                    autocomplete="off"
+                    placeholder={$_('e-mail-adress')}
+                    class:border-red-500={!isEmailValidOrEmpty}
+                    class:focus:border-red-500={!isEmailValidOrEmpty}
+                    class:focus:ring-red-500={!isEmailValidOrEmpty}
+                    bind:value={email_input_value}
+                    bind:this={email_input}
+                    type="email"
+                    name="email"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isEmailValidOrEmpty}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('valid-email-is-required')}
+                    </span>
+                  {/if}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
+            on:click={submit}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('create')}
+          </button>
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('cancel')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/runners/ImportRunnerModal.svelte

@@ -2,15 +2,20 @@
   import csv from "csvtojson";
   import { read as readXlsx, utils as xlsx_utils } from "xlsx";
   import { _ } from "svelte-i18n";
-  import { clickOutside } from "./outsideclick";
+  import { clickOutside } from "../base/outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import Toastify from "toastify-js";
-  import { ImportService } from "@odit/lfk-client-js";
+  import {
+    ImportService,
+    RunnerTeamService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
   import { createEventDispatcher } from "svelte";
   export let opened_from;
   export let passed_org;
   export let passed_orgs;
   export let passed_team;
+  export let current_runners;
   export let import_modal_open;
   $: searchvalue = "";
   const dispatch = createEventDispatcher();
@@ -29,7 +34,16 @@
       }
     };
   })();
+  let orgs = [];
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    orgs = val;
+  });
+  let teams = [];
+  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+    teams = val;
+  });
   let selected_org;
+  $: selected_org_or_team = "";
   let files;
   let recent_processed = true;
   $: json_output = [];
@@ -63,7 +77,7 @@
   function importAction() {
     if (recent_processed === true) {
       const toast = Toastify({
-        text: "Runners are being imported...",
+        text: $_("runners-are-being-imported"),
         duration: -1,
       }).showToast();
       recent_processed = false;
@@ -90,7 +104,7 @@
             toast.hideToast();
             recent_processed = true;
             Toastify({
-              text: "Import finished",
+              text: $_("import-finished"),
               duration: 500,
               backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
@@ -107,7 +121,7 @@
             toast.hideToast();
             recent_processed = true;
             Toastify({
-              text: "Import finished",
+              text: $_("import-finished"),
               duration: 500,
               backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
@@ -118,6 +132,52 @@
             recent_processed = true;
           });
       }
+      if (opened_from === "RunnerOverview") {
+        if (selected_org_or_team.includes("ORG_")) {
+          selected_org_or_team = selected_org_or_team.split("_")[1];
+          ImportService.importControllerPostOrgsJson(
+            selected_org_or_team,
+            mapped
+          )
+            .then((resp) => {
+              current_runners = current_runners.concat(resp);
+              toast.hideToast();
+              recent_processed = true;
+              Toastify({
+                text: $_("import-finished"),
+                duration: 500,
+                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+              }).showToast();
+              cancelModal();
+            })
+            .catch((err) => {
+              toast.hideToast();
+              recent_processed = true;
+            });
+        }
+        if (selected_org_or_team.includes("TEAM_")) {
+          selected_org_or_team = selected_org_or_team.split("_")[1];
+          ImportService.importControllerPostTeamsJson(
+            selected_org_or_team,
+            mapped
+          )
+            .then((resp) => {
+              current_runners = current_runners.concat(resp);
+              toast.hideToast();
+              recent_processed = true;
+              Toastify({
+                text: "Import finished",
+                duration: 500,
+                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+              }).showToast();
+              cancelModal();
+            })
+            .catch((err) => {
+              toast.hideToast();
+              recent_processed = true;
+            });
+        }
+      }
     }
   }
 </script>
@@ -141,7 +201,7 @@
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
         aria-hidden="true">&#8203;</span>
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-max sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline">
@@ -192,6 +252,24 @@
                 </select>
                 <p>{$_('bitte-bestaetige-diese-laeufer-fuer-den-import')}</p>
               {/if}
+              {#if opened_from === 'RunnerOverview'}
+                <p>{$_('group')}</p>
+                <select
+                  name="team"
+                  bind:value={selected_org_or_team}
+                  class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+                  {#each teams as team}
+                    <option value="TEAM_{team.id}">
+                      {team.parentGroup.name}
+                      &gt;
+                      {team.name}
+                    </option>
+                  {/each}
+                  {#each orgs as org}
+                    <option value="ORG_{org.id}">{org.name}</option>
+                  {/each}
+                </select>
+              {/if}
               {#if opened_from === 'OrgDetail'}
                 <p>
                   {$_('runnerimport_verify_runners_org', {
@@ -225,7 +303,7 @@
                           class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                           {$_('csv_import__lastname')}
                         </th>
-                        {#if opened_from !== 'TeamDetail'}
+                        {#if (opened_from !== 'TeamDetail' && opened_from !== 'RunnerOverview') || (opened_from === 'RunnerOverview' && selected_org_or_team.includes('ORG_'))}
                           <th
                             scope="col"
                             class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -250,7 +328,7 @@
                             <td class="px-6 py-4 whitespace-nowrap">
                               {runner[`${$_('csv_import__lastname')}`]}
                             </td>
-                            {#if opened_from !== 'TeamDetail'}
+                            {#if (opened_from !== 'TeamDetail' && opened_from !== 'RunnerOverview') || (opened_from === 'RunnerOverview' && selected_org_or_team.includes('ORG_'))}
                               <td class="px-6 py-4 whitespace-nowrap">
                                 {runner[`${$_('csv_import__team')}`] || runner[`${$_('csv_import__class')}`] || '---'}
                               </td>

src/components/runners/RunnerDetail.svelte

@@ -1,14 +1,14 @@
 <script>
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
-  import store from "../store";
+  import store from "../../store";
   import {
     RunnerService,
     RunnerTeamService,
     RunnerOrganizationService,
   } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
-  import PromiseError from "./PromiseError.svelte";
+  import PromiseError from "../base/PromiseError.svelte";
   import isEmail from "validator/es/lib/isEmail";
   let data_loaded = false;
   export let params;

src/components/runners/Runners.svelte

@@ -1,10 +1,10 @@
 <script>
   import { _ } from "svelte-i18n";
-  import store from "../store";
+  import store from "../../store";
   import AddRunnerModal from "./AddRunnerModal.svelte";
   import ImportRunnerModal from "./ImportRunnerModal.svelte";
   import RunnersOverview from "./RunnersOverview.svelte";
-  let current_runners = [];
+  $: current_runners = [];
   export let modal_open = false;
   export let import_modal_open = false;
 </script>
@@ -19,7 +19,7 @@
         }}
         type="button"
         class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-        Läufer hinzufügen
+        {$_('laeufer-hinzufuegen')}
       </button>
       <button
         on:click={() => {
@@ -27,7 +27,7 @@
         }}
         type="button"
         class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-        Läufer importieren
+        {$_('laeufer-importieren')}
       </button>
     {/if}
   </span>
@@ -43,6 +43,7 @@
     passed_team={{}}
     passed_orgs={[]}
     passed_org={{}}
+    bind:current_runners
     opened_from="RunnerOverview"
     bind:import_modal_open />
 {/if}

src/components/runners/RunnersEmptyState.svelte

@@ -1,16 +1,12 @@
 <script>
   import { _ } from "svelte-i18n";
-  // import AddUserModal from "./AddUserModal.svelte";
   import runners_empty from "./runners_empty.svg";
-  // let modal_open = false;
 </script>
 
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="w-full h-44" src={runners_empty} alt="" />
-    <span class="font-bold">There are no runners added yet.</span><br />
-    <span>Add your first runner</span>
+    <span class="font-bold">{$_('there-are-no-runners-added-yet')}</span><br />
+    <span>{$_('add-your-first-runner')}</span>
   </p>
 </div>
-
-<!-- <AddUserModal bind:modal_open /> -->

src/components/runners/RunnersOverview.svelte

@@ -0,0 +1,221 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import {
+    RunnerService,
+    RunnerTeamService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
+  import store from "../../store";
+  import RunnersEmptyState from "./RunnersEmptyState.svelte";
+  import Select from "svelte-select";
+  $: searchvalue = "";
+  $: active_deletes = [];
+  export let current_runners = [];
+  const runners_promise = RunnerService.runnerControllerGetAll().then((val) => {
+    current_runners = val;
+  });
+  $: selectedFilter_teams = null;
+  $: selectedFilter = null;
+  $: filter__teams = selectedFilter_teams || [];
+  $: filter__orgs = selectedFilter || [];
+  $: filterGroupIDs = filter__teams.concat(filter__orgs).map((i) => i.value);
+  $: teams = [];
+  $: orgs = [];
+  $: mappedteams = teams.map(function (g) {
+    return { value: g.id, label: g.parentGroup.name + " > " + g.name };
+  });
+  $: selectgroups = orgs
+    .map(function (g) {
+      return { value: g.id, label: g.name };
+    })
+    .concat(mappedteams);
+  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+    teams = val;
+  });
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    orgs = val;
+  });
+  function should_display_based_on_id(id) {
+    if (searchvalue.toString().slice(-1) === "*") {
+      return id.toString().startsWith(searchvalue.replace("*", ""));
+    }
+    return id.toString() === searchvalue;
+  }
+</script>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
+  {#await runners_promise}
+    <div
+      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+      role="alert">
+      <p class="font-bold">{$_('runners-are-being-loaded')}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then}
+    {#if current_runners.length === 0}
+      <RunnersEmptyState />
+    {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
+      <div class="block mb-1">
+        <label
+          for="country"
+          class="text-sm font-medium text-gray-700">{$_('filter-by-organization-team')}</label>
+        <Select
+          on:select={(event) => {
+            selectedFilter = event.detail;
+          }}
+          selectedValue={selectedFilter}
+          placeholder={$_('filter-by-organization-team')}
+          containerClasses="mt-1 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+          items={selectgroups}
+          isMulti={true} />
+      </div>
+      <div
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('name')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('contact-information')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('group')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('distance-in-km')}
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <span class="sr-only">{$_('action')}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each current_runners as runner}
+              {#if runner.firstname
+                .toLowerCase()
+                .includes(
+                  searchvalue.toLowerCase()
+                ) || runner.middlename
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || runner.lastname
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || should_display_based_on_id(runner.id)}
+                {#if filterGroupIDs.includes(runner.group.id) || filterGroupIDs.includes(runner.group.parentGroup?.id) || filterGroupIDs.length === 0}
+                  <tr
+                    data-rowid="user_{runner.id}"
+                    data-groupid={runner.group.id}>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <div class="flex items-center">
+                        <div class="ml-4">
+                          <div class="text-sm font-medium text-gray-900">
+                            {runner.firstname}
+                            {runner.middlename || ''}
+                            {runner.lastname}
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    {#if runner.email}
+                      <div class="text-sm text-gray-500">{runner.email}</div>
+                    {/if}
+                    {#if runner.phone}
+                      <div class="text-sm text-gray-500">{runner.phone}</div>
+                    {/if}
+                    {#if runner.address.address1 !== null}
+                      {runner.address.address1}<br />
+                      {runner.address.address2 || ''}<br />
+                      {runner.address.postalcode}
+                      {runner.address.city}
+                      {runner.address.country}
+                    {/if}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    {#if runner.group.responseType === 'RUNNERTEAM'}
+                      <a
+                        href="../teams/{runner.group.id}"
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
+                    {/if}
+                    {#if runner.group.responseType === 'RUNNERORGANIZATION'}
+                      <a
+                        href="../orgs/{runner.group.id}"
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
+                    {/if}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">{runner.distance}</td>
+                  {#if active_deletes[runner.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          active_deletes[runner.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
+                        Delete</button>
+                      <button
+                        on:click={() => {
+                          RunnerService.runnerControllerRemove(runner.id, true)
+                            .then((resp) => {
+                              current_runners = current_runners.filter((obj) => obj.id !== runner.id);
+                            })
+                            .catch((err) => {
+                              // error deleting user
+                            });
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                      </td>
+                    {:else}
+                      <td
+                        class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <a
+                          href="./{runner.id}"
+                          class="text-indigo-600 hover:text-indigo-900">{$_('edit')}</a>
+                        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
+                          <button
+                            on:click={() => {
+                              active_deletes[runner.id] = true;
+                            }}
+                            tabindex="0"
+                            class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                        {/if}
+                      </td>
+                    {/if}
+                  </tr>
+                {/if}
+              {/if}
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {:catch error}
+    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+      <span class="inline-block align-middle mr-8">
+        <b class="capitalize">{$_('general_promise_error')}</b>
+        {error}
+      </span>
+    </div>
+  {/await}
+{/if}

src/components/runners/runners_empty.svg

@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 854.63 686"><path fill="#3f3d56" d="M0 600h821v9.053H0zM0 676.947h821V686H0z"/><path d="M750.178 608.328c-.49-.802-12.06-20.12-16.071-60.234-3.68-36.802-1.313-98.836 30.858-185.367 60.947-163.928-14.046-296.194-14.812-297.512l3.7-2.146c.194.334 19.545 34.057 30.977 87.755a382.846 382.846 0 01-15.856 213.394c-60.844 163.648-15.61 241.118-15.146 241.882z" fill="#3f3d56"/><circle cx="726.346" cy="27.795" r="27.795" fill="#3f3d56"/><circle cx="814.007" cy="130.422" r="27.795" fill="#3f3d56"/><circle cx="754.141" cy="198.841" r="27.795" fill="#dfe5ee"/><circle cx="826.835" cy="256.569" r="27.795" fill="#dfe5ee"/><circle cx="732.76" cy="346.368" r="27.795" fill="#3f3d56"/><path d="M766.97 609.35s-27.796-68.418 55.59-119.731zM732.786 608.11s-12.65-72.758-110.557-72.134z" fill="#3f3d56"/><circle cx="136.5" cy="387.5" r="41" fill="#a0616a"/><path d="M143.928 336.504c-7.84-1.925-16.272-2.247-23.868.49-7.824 2.817-14.263 8.708-19 15.542s-7.918 14.613-10.767 22.425a78.442 78.442 0 00-3.845 13.14 44.992 44.992 0 008.167 34.325c-1.2-3.166 1.822-6.617 5.138-7.303s6.693.474 9.963 1.353a61.559 61.559 0 0017.68 2.078c2.284-.065 4.679-.295 6.578-1.565 5.952-3.98 2.802-14.263 7.754-19.434 1.767-1.845 4.29-2.708 6.567-3.865 8.2-4.167 13.604-12.576 16.156-21.413 1.599-5.54 5.567-21.45 2.185-26.598-3.057-4.653-17.516-7.9-22.708-9.175z" fill="#2f2e41"/><path d="M248.066 342.291a24.396 24.396 0 00-18.677 1.041c-10.695 5.016-29.608 17.167-28.889 40.168 1 32 12 53 12 53l-2 65-10 118s-49 40-30 50 51-48 51-48l25-67 9-65s15-68 0-98c0 0 17.328-40.17-7.434-49.209zM367.5 445.5s-17 72 43 92 139 54 139 54l10 17 23-31-4-24-39-11s-73-56-105-60l4-37zM527.307 387.717L548.5 422.5s70 40 88 67 61 56 61 56l-19 45s-54-63-77-69-125-88-125-88z" fill="#a0616a"/><path d="M338.568 265.819c-7.805 1.226-15.617 2.454-23.33 4.174-17.917 3.995-35.147 10.616-51.966 17.974a608.405 608.405 0 00-68.447 35.267 132.255 132.255 0 00-16.97 11.523c-3.559 2.964-6.91 6.363-8.82 10.584a33.406 33.406 0 00-2.33 9.221c-1.55 11.12-1.477 22.595 1.535 33.41s9.124 20.955 18.119 27.674a29.88 29.88 0 007.84 4.348 45.675 45.675 0 0011.675 1.957c12.617 1.003 25.798 1.923 37.474-2.964 7.42-3.105 13.701-8.354 20.528-12.607 28.913-18.008 65.646-17.241 97.26-29.92 3.074-1.233 6.204-2.67 8.354-5.189a22.578 22.578 0 003.62-7.187l11.99-33.188c2.533-7.01 5.067-14.023 7.193-21.167 2.224-7.472 3.996-15.07 5.766-22.661 1.524-6.534 3.093-13.376 2.507-20.13-.864-9.962-3.166-10.367-12.316-8.925q-24.839 3.915-49.682 7.806z" fill="#dfe5ee"/><path d="M218.066 342.291a24.396 24.396 0 00-18.677 1.041c-10.695 5.016-29.608 17.167-28.889 40.168 1 32 12 53 12 53l-2 65-10 118s-49 40-30 50 51-48 51-48l25-67 9-65s15-68 0-98c0 0 17.328-40.17-7.434-49.209z" fill="#a0616a"/><path d="M391.66 257.544S480.5 249.5 476.5 304.5s-34 150-34 150l-77 4s-10-65 4-87z" fill="#2f2e41"/><path d="M453.5 275.5s22 14 34 42 48 83 48 83l-59 42-44-45zM559.5 587.5s-19 7-6 21a126.61 126.61 0 0120 29s-4 26 13 25 24-36 20-48-9-69-9-69-35 3-34 8 6 30-4 34zM678.5 567.5s-18 9-13 17 21 31 21 31-6 30 11 33 27-36 24-44-3-39-3-39 1-31-9-31-27 4-27 4 4 28-4 29z" fill="#2f2e41"/><path fill="#dfe5ee" d="M96 617.871h29v50.612H96z"/></svg>

src/components/teams/AddTeamModal.svelte

@@ -1,6 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { clickOutside } from "./outsideclick";
+  import { clickOutside } from "../base/outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import {
     RunnerOrganizationService,
@@ -110,11 +110,11 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                Create a new team
+                {$_('create-a-new-team')}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  Please provide the required information to add a new team.
+                  {$_('please-provide-the-required-information-to-add-a-new-team')}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
@@ -137,7 +137,7 @@
                   {#if !isTeamNameValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      team name is required
+                      {$_('team-name-is-required')}
                     </span>
                   {/if}
                 </div>

src/components/teams/ConfirmTeamDeletion.svelte

@@ -1,6 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { clickOutside } from "./outsideclick";
+  import { clickOutside } from "../base/outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import { RunnerTeamService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
@@ -22,9 +22,7 @@
         }).showToast();
         location.replace("./");
       })
-      .catch((err) => {
-        //
-      });
+      .catch((err) => {});
   }
 </script>
 
@@ -65,13 +63,13 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                Attention!
+                {$_('attention')}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  Do you want to delete the team
-                  {delete_team.name}?<br />All associated runners will be
-                  deleted too!
+                  {$_('do-you-want-to-delete-the-team-delete_team-name', {
+                    values: { teamname: delete_team.name },
+                  })}<br />{$_('all-associated-runners-will-be-deleted-too')}
                 </p>
               </div>
             </div>
@@ -82,13 +80,13 @@
             on:click={deleteTeam}
             type="button"
             class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
-            Confirm, delete team and associated runners.
+            {$_('confirm-delete-team-and-associated-runners')}
           </button>
           <button
             on:click={cancelDelete}
             type="button"
             class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-            Cancel, keep team
+            {$_('cancel-keep-team')}
           </button>
         </div>
       </div>

src/components/teams/TeamDetail.svelte

@@ -1,22 +1,24 @@
 <script>
   import {
+    GroupContactService,
     RunnerOrganizationService,
     RunnerTeamService,
   } from "@odit/lfk-client-js";
   import { _ } from "svelte-i18n";
   import Toastify from "toastify-js";
-  import store from "../store";
-  import ImportRunnerModal from "./ImportRunnerModal.svelte";
-  import PromiseError from "./PromiseError.svelte";
+  import store from "../../store";
+  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+  import PromiseError from "../base/PromiseError.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
-  export let params;
-  let [teamdata, original, delete_team, orgs, modal_open] = [
+  let [teamdata, original, delete_team, orgs, contacts, modal_open] = [
     {},
     {},
     {},
     [],
+    [],
     false,
   ];
+  export let params;
   export let import_modal_open = false;
   $: delete_triggered = false;
   $: save_enabled = !data_changed;
@@ -27,12 +29,20 @@
     params.teamid
   ).then((value) => {
     data_loaded = true;
+    if (value.contact) {
+      if (value.contact !== "null") {
+        value.contact = value.contact.id;
+      }
+    }
     teamdata = Object.assign(teamdata, value);
     original = Object.assign(original, value);
   });
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
     orgs = val;
   });
+  GroupContactService.groupContactControllerGetAll().then((val) => {
+    contacts = val;
+  });
   function deleteTeam() {
     RunnerTeamService.runnerTeamControllerRemove(original.id, false)
       .then((resp) => {
@@ -55,7 +65,9 @@
         duration: 2500,
       }).showToast();
       teamdata.parentGroup = teamdata.parentGroup.id;
-      RunnerTeamService.runnerTeamControllerPut(original.id, teamdata)
+      let postdata = teamdata;
+      postdata.contact = postdata.contact === "null" ? null : postdata.contact;
+      RunnerTeamService.runnerTeamControllerPut(original.id, postdata)
         .then((resp) => {
           Object.assign(original, teamdata);
           original = teamdata;
@@ -68,12 +80,12 @@
           }).showToast();
         })
         .catch((err) => {});
-    } else {
     }
   }
 </script>
 
 <ImportRunnerModal
+  current_runners={[]}
   on:cancelDelete={(event) => {
     import_modal_open = false;
   }}
@@ -215,13 +227,19 @@
       <label
         for="contact"
         class="font-medium text-gray-700">{$_('contact')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('contact')}
-        type="text"
-        bind:value={teamdata.contact}
+      <select
         name="contact"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        bind:value={teamdata.contact}
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+        <option value="null">no contact</option>
+        {#each contacts as c}
+          <option value={c.id}>
+            {c.firstname}
+            {c.middlename || ''}
+            {c.lastname}
+          </option>
+        {/each}
+      </select>
     </div>
     <div class="text-sm w-full">
       <label for="org" class="font-medium text-gray-700">Parent Organization</label>

src/components/teams/Teams.svelte

@@ -1,11 +1,10 @@
 <script>
   import { _ } from "svelte-i18n";
-  import store from "../store";
+  import store from "../../store";
   import AddTeamModal from "./AddTeamModal.svelte";
   export let modal_open = false;
   import TeamsOverview from "./TeamsOverview.svelte";
-  console.log(store.state.jwtinfo.userdetails.permissions);
-  let current_teams=[];
+  let current_teams = [];
 </script>
 
 <section class="container p-5">
@@ -18,11 +17,13 @@
         }}
         type="button"
         class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-        Create Team
+        {$_('create-team')}
       </button>
     {/if}
   </span>
-  <p class="mb-8 text-lg text-gray-500">everything is more fun together 🏃‍♂️🏃‍♀️🏃‍♂️</p>
+  <p class="mb-8 text-lg text-gray-500">
+    {$_('everything-is-more-fun-together')}
+  </p>
   <TeamsOverview bind:current_teams />
 </section>
 

src/components/teams/TeamsEmptyState.svelte

@@ -9,8 +9,8 @@
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="w-full h-44" src={team_empty} alt="" />
-    <span class="font-bold">There are no teams added yet.</span><br />
-    <span>Add your first team</span>
+    <span class="font-bold">{$_('there-are-no-teams-added-yet')}</span><br />
+    <span>{$_('add-your-first-team')}</span>
   </p>
 </div>
 

src/components/teams/TeamsOverview.svelte

@@ -3,8 +3,7 @@
   import Toastify from "toastify-js";
   import { RunnerTeamService } from "@odit/lfk-client-js";
   const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
-  import { users as usersstore } from "../store.js";
-  import store from "../store";
+  import store, { users as usersstore } from "../../store.js";
   import TeamsEmptyState from "./TeamsEmptyState.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
   $: searchvalue = "";
@@ -32,7 +31,7 @@
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
       role="alert">
-      <p class="font-bold">teams are being loaded...</p>
+      <p class="font-bold">{$_('teams-are-being-loaded')}</p>
       <p class="text-sm">{$_('this-might-take-a-moment')}</p>
     </div>
   {:then}
@@ -53,7 +52,7 @@
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Name
+                {$_('name')}
               </th>
               <th
                 scope="col"
@@ -63,10 +62,10 @@
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Contact
+                {$_('contact')}
               </th>
               <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">Action</span>
+                <span class="sr-only">{$_('action')}</span>
               </th>
             </tr>
           </thead>
@@ -80,8 +79,7 @@
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <div class="ml-4">
-                        <div
-                          class="text-sm font-medium text-gray-900">
+                        <div class="text-sm font-medium text-gray-900">
                           {t.name}
                         </div>
                       </div>
@@ -90,11 +88,12 @@
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <div class="ml-4">
-                        <div
-                          class="text-sm font-medium text-gray-900">
+                        <div class="text-sm font-medium text-gray-900">
                           {#if t.parentGroup}
-                            {t.parentGroup.name}
-                          {:else}no organization specified{/if}
+                            <a
+                              href="../orgs/{t.parentGroup.id}"
+                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{t.parentGroup.name}</a>
+                          {:else}{$_('no-organization-specified')}{/if}
                         </div>
                       </div>
                     </div>
@@ -102,11 +101,14 @@
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <div class="ml-4">
-                        <div
-                          class="text-sm font-medium text-gray-900">
+                        <div class="text-sm font-medium text-gray-900">
                           {#if t.contact}
-                            {JSON.stringify(t.contact)}
-                          {:else}no contact specified{/if}
+                            <a
+                              href="../contacts/{t.contact.id}"
+                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{t.contact.firstname}
+                              {t.contact.middlename || ''}
+                              {t.contact.lastname}</a>
+                          {:else}{$_('no-contact-specified')}{/if}
                         </div>
                       </div>
                     </div>
@@ -127,7 +129,7 @@
                             .then((resp) => {
                               current_teams = current_teams.filter((obj) => obj.id !== t.id);
                               Toastify({
-                                text: 'Organization deleted',
+                                text: $_('organization-deleted'),
                                 duration: 500,
                                 backgroundColor:
                                   'linear-gradient(to right, #00b09b, #96c93d)',
@@ -139,22 +141,21 @@
                             });
                         }}
                         tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
-                        Delete</button>
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
                     </td>
                   {:else}
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <a
                         href="./{t.id}"
-                        class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                        class="text-indigo-600 hover:text-indigo-900">{$_('edit')}</a>
                       {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
                         <button
                           on:click={() => {
                             active_deletes[t.id] = true;
                           }}
                           tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
                       {/if}
                     </td>
                   {/if}

src/components/tracks/AddTrackModal.svelte

@@ -1,8 +1,8 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { clickOutside } from "./outsideclick";
+  import { clickOutside } from "../base/outsideclick";
   import { focusTrap } from "svelte-focus-trap";
-  import { tracks as tracksstore } from "../store.js";
+  import { tracks as tracksstore } from "../../store.js";
   import { TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import "toastify-js/src/toastify.css";
@@ -51,7 +51,6 @@
           track_min_duration = 0;
           tracklength = 0;
           modal_open = false;
-          //
           Toastify({
             text: $_("track-added"),
             duration: 500,
@@ -64,12 +63,9 @@
           storeval.push(result);
           tracksstore.set(storeval);
         })
-        .catch((err) => {
-          //
-        })
+        .catch((err) => {})
         .finally(() => {
           processed_last_submit = true;
-          //
           toast.hideToast();
         });
     }
@@ -142,7 +138,7 @@
                   {#if isTracknameValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      Track name must not be empty
+                      {$_('track-name-must-not-be-empty')}
                     </span>
                   {/if}
                 </div>
@@ -167,7 +163,7 @@
                   {#if isTracklengthValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      Track length must be greater than 0
+                      {$_('track-length-must-be-greater-than-0')}
                     </span>
                   {/if}
                 </div>
@@ -192,7 +188,7 @@
                   {#if !trackMintimevalid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      minimum lap time must be a positive number or 0
+                      {$_('minimum-lap-time-must-be-a-positive-number-or-0')}
                     </span>
                   {/if}
                 </div>
@@ -215,7 +211,7 @@
             }}
             type="button"
             class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-            Cancel
+            {$_('cancel')}
           </button>
         </div>
       </div>

src/components/tracks/Tracks.svelte

@@ -4,9 +4,9 @@
   import TracksEmptyState from "./TracksEmptyState.svelte";
   import { TrackService } from "@odit/lfk-client-js";
   const tracks_promise = TrackService.trackControllerGetAll();
-  import { getlang } from "./datatable_i18n";
+  import { getlang } from "../base/datatable_i18n";
   import { Grid, html } from "gridjs";
-  import { tracks as tracksstore } from "../store.js";
+  import { tracks as tracksstore } from "../../store.js";
   $: trackscache = [];
   $: blocked = [];
   let table;
@@ -61,9 +61,7 @@
           elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
           elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
         })
-        .catch((err) => {
-          console.error(err);
-        });
+        .catch((err) => {});
     }
   };
   window.track__delete_handler = () => {
@@ -92,9 +90,7 @@
         tracksstore.set(newStoreVal);
         renderdatatable();
       })
-      .catch((err) => {
-        console.log(err);
-      });
+      .catch((err) => {});
   };
   window.track__edit_handler = () => {
     const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
@@ -124,16 +120,30 @@
         track.minimumLapTime || 0,
         html(`
         <div class="hidden" data-id="triggered_table_actions_${track.id}">
-          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_save()">Save</button>
-          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_cancel()">Cancel</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
+            track.id
+          }" onclick="track__edit_save()">${$_("save")}</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
+            track.id
+          }" onclick="track__edit_cancel()">${$_("cancel")}</button>
         </div>
         <div data-id="default_table_actions_${track.id}">
-          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_handler()">Edit</button>
-          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_handler()">Delete</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
+            track.id
+          }" onclick="track__edit_handler()">${$_("edit")}</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
+            track.id
+          }" onclick="track__delete_handler()">${$_("delete")}</button>
         </div>
-        <div class="hidden" data-id="deleteconfirmation_table_actions_${track.id}">
-          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_cancel()">Cancel</button>
-          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_confirm()">Confirm</button>
+        <div class="hidden" data-id="deleteconfirmation_table_actions_${
+          track.id
+        }">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
+            track.id
+          }" onclick="track__delete_cancel()">${$_("cancel")}</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
+            track.id
+          }" onclick="track__delete_confirm()">${$_("confirm")}</button>
         </div>
       `),
       ]);

src/components/tracks/TracksOverview.svelte

@@ -14,11 +14,11 @@
       }}
       type="button"
       class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-      Create Track
+      {$_('create-track')}
     </button>
   </span>
   <p class="mb-8 text-lg text-gray-500">
-    configure the tracks & minimum lap times
+    {$_('configure-the-tracks-and-minimum-lap-times')}
   </p>
   <Tracks />
 </section>

src/components/users/AddUserModal.svelte

@@ -1,6 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { clickOutside } from "./outsideclick";
+  import { clickOutside } from "../base/outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import { UserService } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
@@ -28,10 +28,7 @@
   $: isLastnameValid = lastname_input_value.trim().length !== 0;
   $: isFirstnameValid = firstname_input_value.trim().length !== 0;
   $: createbtnenabled =
-    isFirstnameValid &&
-    isLastnameValid &&
-    isPasswordValid &&
-    !(!isEmailValid && username_input_value.trim().length === 0);
+    isFirstnameValid && isLastnameValid && isPasswordValid && isEmailValid;
   (function () {
     document.onkeydown = function (e) {
       e = e || window.event;
@@ -50,7 +47,7 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: "User is being added...",
+        text: $_("user-is-being-added"),
         duration: -1,
       }).showToast();
       UserService.userControllerPost({
@@ -70,19 +67,16 @@
           modal_open = false;
           //
           Toastify({
-            text: "User added",
+            text: $_("user-added"),
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
           current_users.push(result);
           current_users = current_users;
         })
-        .catch((err) => {
-          //
-        })
+        .catch((err) => {})
         .finally(() => {
           processed_last_submit = true;
-          //
           toast.hideToast();
         });
     }
@@ -128,11 +122,11 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                Create a new User
+                {$_('create-a-new-user')}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  Please provide the required information to add a new user.
+                  {$_('please-provide-the-required-information-to-add-a-new-user')}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
@@ -241,17 +235,9 @@
                     type="email"
                     name="email"
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-                  <!-- {#if !isEmailValid}
+                  {#if !isEmailValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      valid email or username is required
-                    </span>
-                  {/if} -->
-                  {#if !isEmailValid && username_input_value.trim().length === 0}
-                    <span
-                      class="mt-8 flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      valid email or username is required
-                    </span>
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">{$_('valid-email-is-required')}</span>
                   {/if}
                 </div>
               </div>

src/components/users/UserDetail.svelte

@@ -1,10 +1,11 @@
 <script>
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
-  import store from "../store";
+  import store from "../../store";
+  import isEmail from "validator/es/lib/isEmail";
   import { UserService, UserGroupService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
-  import PromiseError from "./PromiseError.svelte";
+  import PromiseError from "../base/PromiseError.svelte";
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
   let data_loaded = false;
@@ -72,7 +73,8 @@
   $: groups_changed =
     JSON.stringify(usergroups_array) ===
     JSON.stringify(usergroups_array_original);
-  $: save_enabled = changes_performed || !groups_changed;
+  $: save_enabled =
+    (changes_performed || !groups_changed) && isEmail(editable_userdata.email);
   function submit() {
     if (data_loaded === true && save_enabled) {
       editable_userdata.groups = usergroups_array;
@@ -263,6 +265,10 @@
         name="email"
         class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
+    {#if !isEmail(editable_userdata.email)}
+      <span
+        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">{$_('valid-email-is-required')}</span>
+    {/if}
     <div class="text-sm w-full">
       <label
         for="username"

src/components/users/UserPermissions.svelte

@@ -6,7 +6,7 @@
     CreatePermission,
   } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
-  import PromiseError from "./PromiseError.svelte";
+  import PromiseError from "../base/PromiseError.svelte";
   export let params;
   let [
     grantedPermissions_initial,
@@ -51,7 +51,7 @@
         );
       });
       Toastify({
-        text: "Permissions updated!",
+        text: $_("permissions-updated"),
         duration: 2500,
         backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
       }).showToast();
@@ -134,14 +134,14 @@
                 <polyline points="12 5 19 12 12 19" /></svg>
             </li>
             <li class="flex items-center">
-              <span class="mr-2">Permissions</span>
+              <span class="mr-2">{$_('permissions')}</span>
             </li>
           </ol>
         </nav>
       </div>
     </div>
     <div class="mb-8 text-3xl font-extrabold">
-      Permissions:
+      {$_('permissions')}:
       {original_data.firstname}
       {original_data.middlename || ''}
       {original_data.lastname}
@@ -156,16 +156,21 @@
         {:else}
           <button
             type="button"
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm">Applying
-            Changes</button>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('applying-changes')}</button>
         {/if}
       </span>
     </div>
     <!--  -->
     <div class="flex flex-wrap -mx-1 overflow-hidden">
-      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">verfügbare</div>
-      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">erteilte</div>
-      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">geerbte</div>
+      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
+        {$_('verfuegbare')}
+      </div>
+      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
+        {$_('erteilte')}
+      </div>
+      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
+        {$_('geerbte')}
+      </div>
     </div>
     <!--  -->
     <div class="flex flex-wrap -mx-1 overflow-hidden">

src/components/users/Users.svelte

@@ -1,10 +1,9 @@
 <script>
   import { _ } from "svelte-i18n";
-  import store from "../store";
+  import store from "../../store";
   import AddUserModal from "./AddUserModal.svelte";
   export let modal_open = false;
   import UsersOverview from "./UsersOverview.svelte";
-  console.log(store.state.jwtinfo.userdetails.permissions);
   let current_users=[];
 </script>
 

src/components/users/UsersEmptyState.svelte

@@ -8,8 +8,8 @@
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="w-full h-44" src={users_empty} alt="" />
-    <span class="font-bold">There are no users added yet.</span><br />
-    <span>Add your first user</span>
+    <span class="font-bold">{$_('there-are-no-users-added-yet')}</span><br />
+    <span>{$_('add-your-first-user')}</span>
   </p>
 </div>
 

src/components/users/UsersOverview.svelte

@@ -2,15 +2,14 @@
   import { _ } from "svelte-i18n";
   import { UserService } from "@odit/lfk-client-js";
   const users_promise = UserService.userControllerGetAll();
-  import { users as usersstore } from "../store.js";
-  import store from "../store";
+  import store, { users as usersstore } from "../../store.js";
   import UsersEmptyState from "./UsersEmptyState.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
-  export let current_users=[];
+  export let current_users = [];
   $: advanced_search = false;
   usersstore.subscribe((val) => {
-    current_users=val;
+    current_users = val;
   });
   users_promise.then((data) => {
     usersstore.set(data);
@@ -32,12 +31,12 @@
       <!-- {#if advanced_search}
         advanced search
       {:else} -->
-        <input
-          type="search"
-          bind:value={searchvalue}
-          placeholder={$_('datatable.search')}
-          aria-label={$_('datatable.search')}
-          class="gridjs-input gridjs-search-input mb-4" />
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
       <!-- {/if} -->
       <!-- <button
         on:click={() => {
@@ -57,20 +56,20 @@
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Name
+                {$_('name')}
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Status
+                {$_('status')}
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Groups
+                {$_('groups')}
               </th>
               <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">Action</span>
+                <span class="sr-only">{$_('action')}</span>
               </th>
             </tr>
           </thead>
@@ -92,8 +91,7 @@
                         </div>
                       {/if}
                       <div class="ml-4">
-                        <div
-                          class="text-sm font-medium text-gray-900">
+                        <div class="text-sm font-medium text-gray-900">
                           {u.firstname}
                           {u.middlename || ''}
                           {u.lastname}
@@ -107,10 +105,10 @@
                   <td class="px-6 py-4 whitespace-nowrap">
                     {#if u.enabled}
                       <span
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('active')}</span>
                     {:else}
                       <span
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('inactive')}</span>
                     {/if}
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
@@ -128,35 +126,31 @@
                           active_deletes[u.id] = false;
                         }}
                         tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
-                        Delete</button>
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
                       <button
                         on:click={() => {
                           UserService.userControllerRemove(u.id, true)
                             .then((resp) => {
-                              current_users=current_users.filter(obj=>obj.id!==u.id);
+                              current_users = current_users.filter((obj) => obj.id !== u.id);
                             })
-                            .catch((err) => {
-                              // error deleting user
-                            });
+                            .catch((err) => {});
                         }}
                         tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
-                        Delete</button>
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
                     </td>
                   {:else}
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <a
                         href="./{u.id}"
-                        class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                        class="text-indigo-600 hover:text-indigo-900">{$_('edit')}</a>
                       {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
                         <button
                           on:click={() => {
                             active_deletes[u.id] = true;
                           }}
                           tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
                       {/if}
                     </td>
                   {/if}

src/locales/de.json

@@ -2,18 +2,66 @@
     "404message": "Die gesuchte Seite wurde leider nicht gefunden.",
     "404title": "Fehler 404",
     "about": "Über",
+    "action": "Aktionen",
+    "active": "Aktiv",
+    "add-your-first-contact": "Erstelle den ersten Kontakt",
+    "add-your-first-organization": "Erstelle die erste Organisation",
+    "add-your-first-runner": "Erstelle die erste Läufer:in",
+    "add-your-first-team": "Erstelle das erste Team",
+    "add-your-first-track": "Erstelle den ersten Track (Laufstrecke).",
+    "add-your-first-user": "Erstelle die erste Benutzer:in",
+    "address": "Adresse",
+    "address-is-required": "Du musst eine Adresse angeben",
+    "all-associated-runners-will-be-deleted-too": "Alle zugehörigen Läufer:innen werden auch gelöscht!",
+    "all-associated-teams-and-runners-will-be-deleted-too": "Alle assoziierten Teams und Läufer:innen werden auch gelöscht!",
+    "apartment-suite-etc": "Apartment, Wohnung, etc.",
     "application_name": "Lauf für Kaya! - Admin",
-    "bitte-bestaetige-diese-laeufer-fuer-den-import": "Bitte die Läufer für den import bestätigen.",
+    "applying-changes": "Änderungen anwenden",
+    "attention": "Achtung!",
+    "author": "Autor:in",
+    "bitte-bestaetige-diese-laeufer-fuer-den-import": "Bitte die Läufer:innen für den Import bestätigen.",
     "by": "von",
     "cancel": "Abbrechen",
+    "cancel-delete": "Löschen abbrechen",
+    "cancel-keep-organization": "Abbrechen und Organisation bearbeiten",
+    "cancel-keep-team": "Abbrechen, Team behalten",
     "cannot-reset-your-password-directly": "Schade. \nWir können das Passwort leider nicht direkt zurücksetzen.\nBitte sende uns eine Mail in der du deine Identität bestätigst.",
-    "credits": "",
+    "city": "Stadt",
+    "close": "Schließen",
+    "configure-the-tracks-and-minimum-lap-times": "Bearbeite die Tracks und ihre minimale Rundenzeit",
+    "confirm": "Bestätigen",
+    "confirm-delete": "Löschung Bestätigen",
+    "confirm-delete-organization-and-associated-teams-runners": "Bestätugung, lösche die Organisation und alle zugehörigen Teams und Läufer:innen.",
+    "confirm-delete-team-and-associated-runners": "Bestätigung, lösche das Team mitsamt seinen Läufer:innen.",
+    "confirm-deletion": "Löschung Bestätigen",
+    "contact": "Kontakt",
+    "contact-deleted": "Kontakt gelöscht",
+    "contact-information": "Kontaktinformation",
+    "contact-is-being-updated": "Kontakt wird aktualisiert ...",
+    "contact-is-not-a-member-in-any-group": "Kontakt gehört zu keiner Gruppe",
+    "contacts": "Kontakte",
+    "contacts-are-being-loaded": "Kontakte werden geladen ...",
+    "count_organizations": "Organisationen (Anzahl)",
+    "count_teams": "Teams (Anzahl)",
+    "create": "Erstellen",
+    "create-a-new-contact": "Kontakt erstellen",
+    "create-a-new-organization": "Neue Organisatio anlegen",
+    "create-a-new-runner": "Neue Läufer:in erstellen",
+    "create-a-new-team": "Erstelle ein neues Team",
+    "create-a-new-track": "Neuen Track erstellen",
+    "create-a-new-user": "Neue Benutzer:in anlegen",
+    "create-organization": "Organisation erstellen",
+    "create-team": "Team erstellen",
+    "create-track": "Track erstellen",
+    "create-user": "Benutzer anlegen",
+    "credits": "Credits",
     "csv_import__class": "Klasse",
     "csv_import__firstname": "Vorname",
     "csv_import__lastname": "Nachname",
     "csv_import__middlename": "Mittelname",
     "csv_import__team": "Team",
     "dashboard-greeting": "Moin",
+    "dashboard-title": "Dashboard",
     "datatable": {
         "search": "🔍 Suche ...",
         "an_error_happened_while_fetching_the_data": "Beim Abrufen der Daten ist ein Fehler aufgetreten",
@@ -22,39 +70,171 @@
         "of": "von",
         "previous": "Vorherige",
         "to": "bis",
-        "showing": "Zeige"
+        "showing": "Zeige",
+        "no_matching_records_found": "Keine passenden Einträge gefunden",
+        "page": "Seite",
+        "records": "Einträge",
+        "sort_column_ascending": "Spalte aufsteigend sortieren",
+        "sort_column_descending": "Spalte absteigend sortieren"
     },
+    "delete": "Löschen",
+    "delete-contact": "Kontakt löschen",
+    "delete-organization": "Organisation löschen",
+    "delete-runner": "Läufer:in löschen",
+    "delete-team": "Team Löschen",
+    "delete-user": "Benutzer:in löschen",
+    "dependency_name": "Name",
+    "distance": "Distanz",
+    "distance-in-km": "Distanz (in KM)",
+    "do-you-want-to-delete-the-organization-delete_org-name": "Möchtest du die Organisation {orgname} löschen?",
+    "do-you-want-to-delete-the-team-delete_team-name": "Möchtest du das Team {teamname} löschen?",
     "dont-have-your-email-connected": "Deine E-Mail ist nicht verknüpft?",
     "dont-panic-were-resetting-it": "Keine Panik, wir setzen es zurück ✌",
     "e-mail-adress": "E-Mail-Adresse",
-    "email_address_or_username": "E-Mail-Addresse/ Benutzername",
+    "edit": "Bearbeiten",
+    "edit-permissions": "Berechtigungen bearbeiten",
+    "email_address_or_username": "E-Mail-Adresse/ Benutzername",
     "error_on_login": "😢Fehler beim Login",
-    "forgot_password?": "Passwort vergessen?",
+    "erteilte": "Direkt erteilte",
+    "everything-is-more-fun-together": "Im Team macht's mehr Spaß 🏃‍♂️🏃‍♀️🏃‍♂️",
+    "faq": "FAQ",
+    "filter-by-organization-team": "Filtern nach Organisation / Team",
+    "first-name": "Vorname",
+    "first-name-is-required": "Vorname muss angegeben werden",
+    "forgot_password": "Passwort vergessen?",
+    "geerbte": "geerbte",
     "general-stats": "Allgemeine Statistiken",
+    "general_promise_error": "😢 Ein unbekannter Fehler ist aufgetreten",
+    "generic-ui-logic-error": "Etwas ist in der Benutzeroberfläche schiefgelaufen.",
+    "go-to-login": "Zum Login",
     "goback": "Zur Startseite",
-    "hallo": "hallo",
+    "group": "Gruppe",
+    "groups": "Gruppen",
+    "home": "Start",
     "icon-image-credits": "Wir möchten uns außerdem für die verwendeten Icons und Bilder bedanken bei:",
-    "import-runners": "Läufer importieren",
+    "import-finished": "Import abgeschlossen",
+    "import-runners": "Läufer:innen importieren",
     "import__target-organization": "Ziel Organisation",
+    "imprint": "Impressum ",
+    "imprint-loading": "Impressum lädt...",
+    "inactive": "Inaktiv",
+    "installed-version": "Installierte Version",
+    "internal-error": "Interner Fehler",
     "invalid-mail-reset": "Das ist keine gültige E-Mail",
+    "laeufer-hinzufuegen": "Läufer:in hinzufügen",
+    "laeufer-importieren": "Läufer:innen importieren",
+    "last-name": "Nachname",
+    "last-name-is-required": "Nachname muss angegeben werden",
     "lfk-is-os": "Das \"Lauf für Kaya!\" Frontend ist (wie alle anderen Projekte für den \"LfK!\" auch) ein OpenSource Projekt.",
+    "license": "Lizenz",
+    "licenses-are-being-loaded": "Lizenzen werden geladen...",
+    "loading-contact-details": "Kontaktdaten werden geladen ...",
+    "loading-runners": "Läufer:innen werden geladen...",
     "log_in": "Anmelden",
     "log_in_to_your_account": "Bitte melde dich an",
     "login_is_checked": "Login wird überprüft",
+    "logout": "Abmelden",
+    "mail-validation-in-progress": "E-Mail Verifizierung läuft... ",
+    "manage-admin-users": "Nutzer verwalten",
+    "middle-name": "Mittelname",
+    "minimum-lap-time-in-s": "Minimale Rundenzeit (in Sekunden)",
+    "minimum-lap-time-must-be-a-positive-number-or-0": "Die minimale Rundenzeit muss eine positive Zahl oder 0 sein",
+    "name": "Name",
+    "new-password": "Neues Passwort",
+    "no-contact-specified": "Kein Kontakt angegeben",
+    "no-license-text-could-be-found": "Kein Lizenz-Text gefunden 😢",
+    "no-organization-specified": "Keine Organisation angegeben",
+    "no-tracks-added-yet": "Es wurden noch keine Tracks erstellt.",
+    "organization": "Organisation",
+    "organization-added": "Organisation hinzugefügt",
+    "organization-deleted": "Organisation gelöscht",
+    "organization-detail-is-being-loaded": "Organisationsdetails werden geladen ...",
+    "organization-is-being-added": "Organisation wird hinzugefügt ...",
+    "organization-name-is-required": "Der Name muss angegeben werden",
+    "organizations": "Organisationen",
+    "organizations-are-being-loaded": "Organisationen werden geladen ...",
+    "orgs": "Orgs",
     "oss_credit_description": "Wir verwenden eine Menge Open Source-Software bei diesen Projekten und möchten uns bei den folgenden Projekten und Mitwirkenden bedanken, die dazu beitragen, Open Source großartig zu machen!",
     "password": "Passwort",
+    "password-is-required": "Passwort muss angegeben werden",
+    "password-reset-failed": "Passwort zurücksetzen ist fehlgeschlagen!",
+    "password-reset-in-progress": "Passwort wird zurückgesetzt...",
+    "password-reset-mail-sent": "Passwort-Reset Mail wurde an \"{usersEmail}\" geschickt.",
+    "password-reset-successful": "Passwort erfolgreich zurückgesetzt!",
+    "permissions": "Berechtigungen",
+    "permissions-updated": "Berechtigungen aktualisiert!",
+    "phone": "Telefon",
+    "please-provide-a-password": "Bitte gebe ein Passwort an...",
     "please-provide-the-required-csv-xlsx-file": "Bitte eine CSV oder XLSX Datei hochladen.",
-    "register": "Registrieren",
+    "please-provide-the-required-information-to-add-a-new-contact": "Bitte gebe alle nötigen Informationen an, im den neuen Kontakt zu erstellen.",
+    "please-provide-the-required-information-to-add-a-new-organization": "Bitte gebe alle nötigen Informationen an, im die neue Organisation zu erstellen.",
+    "please-provide-the-required-information-to-add-a-new-runner": "Bitte die benötigten Informationen angeben.",
+    "please-provide-the-required-information-to-add-a-new-team": "Bitte gebe alle nötigen Informationen an, im das neue Team zu erstellen.",
+    "please-provide-the-required-information-to-add-a-new-track": "Bitte die benötigten Informationen angeben.",
+    "please-provide-the-required-information-to-add-a-new-user": "Bitte gebe alle nötigen Informationen an, im die neue Benutzer:in zu erstellen.",
+    "please-request-a-new-reset-mail": "Bitte eine neue Passwortreset-Mail anfordern...",
+    "privacy": "Datenschutz",
+    "privacy-loading": "Datenschutzerklärung lädt...",
+    "profile-picture": "Profilbild",
+    "read-license": "Lizenz-Text lesen",
+    "repo_link": "Link",
+    "request-a-new-reset-mail": "Neue Reset-Mail anfordern",
     "reset-my-password": "Passwort zurücksetzen",
-    "runner-import": "Läufer Import",
-    "runnerimport_verify_runners_org": "Bitte die Läufer für den Import in die Organisation \"{org_name}\" bestätigen",
+    "reset-password": "Passwort zurücksetzen",
+    "runner-added": "Läufer:in hinzugefügt",
+    "runner-import": "Läufer:innen Import",
+    "runner-is-being-added": "Läufer:in wird hinzugefügt...",
+    "runner-updated": "Läufer:in aktualisiert!",
+    "runnerimport_verify_runners_org": "Bitte die Läufer:innen für den Import in die Organisation \"{org_name}\" bestätigen",
     "runners": "Läufer",
+    "runners-are-being-imported": "Läufer:innen werden importiert ...",
+    "runners-are-being-loaded": "Läufer:innen werden geladen ...",
+    "save": "Speichern",
+    "save-changes": "Änderungen speichern",
     "send-a-mail-to-lfk-odit-services": "Sende eine Mail an lfk@odit.services",
     "settings": "Einstellungen",
-    "signout": "Abmelden",
+    "stats-are-being-loaded": "Die Statistiken werden geladen...",
+    "status": "Status",
+    "successful-password-reset": "Passwort erfolgreich zurückgesetzt!",
+    "team": "Team",
+    "team-name": "Teamname",
+    "team-name-is-required": "Teamname ist erforderlich",
+    "teams": "Teams",
+    "teams-are-being-loaded": "Teams werden geladen ...",
+    "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number": "Die angegebene Telefonnummer ist nicht korrekt. <br /> Bitte gebe eine Telefonnummer im internationalen Format an...",
+    "there-are-no-contacts-added-yet": "Es wurden noch keine Kontakte hinzugefügt.",
+    "there-are-no-organizations-added-yet": "Es wurden noch keine Organisationen hinzugefügt.",
+    "there-are-no-runners-added-yet": "Es wurden noch keine Läufer:innen hinzugefügt.",
+    "there-are-no-teams-added-yet": "Es wurden noch keine Teams hinzugefügt.",
+    "there-are-no-users-added-yet": "Es wurden noch keine Benutzer hinzugefügt.",
+    "this-might-take-a-moment": "Das könnte einen kleinen Moment dauern",
     "total-distance": "gelaufene Strecke",
     "total-donations": "Spendensumme",
     "total-scans": "gesamte Scans",
+    "track-added": "Track hinzugefügt",
+    "track-data-is-being-loaded": "Trackdaten werden geladen",
+    "track-is-being-added": "Track wird hinzugefügt...",
+    "track-length-in-m": "Tracklänge (in Metern)",
+    "track-length-must-be-greater-than-0": "Die Länge muss größer als 0 (Meter) sein",
+    "track-name": "Trackname",
+    "track-name-must-not-be-empty": "Der Name muss angegeben werden",
+    "tracks": "Tracks",
+    "updated-contact": "Kontakt aktualisiert!",
+    "updated-organization": "Organisation wurde aktualisiert",
+    "updating-organization": "Organisation wird aktualisiert",
+    "updating-runner": "Läufer:in wird aktualisiert.",
+    "updating-user": "Benutzer:in wird aktualisiert...",
+    "user-added": "Benutzer hinzugefügt",
+    "user-is-being-added": "Benutzer wird hinzugefügt ...",
+    "user-updated": "Benutzer:in wurde aktualisiert",
+    "username": "Benutzername",
+    "users": "Benutzer",
+    "valid-city-is-required": "Du musst eine Stadt angeben",
+    "valid-email-is-required": "Es wird eine valide E-Mail Adresse benötigt",
+    "valid-international-phone-number-is-required": "Du musst eine Telefonnummer im internationalen Format angeben...",
+    "valid-zipcode-postal-code-is-required": "Du musst eine valide Postleitzahl angeben",
+    "verfuegbare": "verfügbare",
     "welcome_wavinghand": "Willkommen 👋",
-    "your_profile": "Dein Profil"
+    "you-can-now-use-your-new-password-to-log-in-to-your-account": "Du kannst dich jetzt mit deinem neuen Passwort anmelden! 🎉",
+    "zip-postal-code": "Postleitzahl"
 }

src/locales/en.json

@@ -3,27 +3,56 @@
     "404title": "Error 404",
     "about": "About",
     "action": "Action",
-    "add-your-first-track": "Add your first track",
+    "active": "Active",
+    "add-your-first-contact": "Add your first contact",
+    "add-your-first-organization": "Add your first organization",
+    "add-your-first-runner": "Add your first runner",
+    "add-your-first-team": "Add your first team",
+    "add-your-first-track": "Add your first track.",
+    "add-your-first-user": "Add your first user",
     "address": "Address",
+    "address-is-required": "Address is required",
+    "all-associated-runners-will-be-deleted-too": "All associated runners will be deleted too!",
+    "all-associated-teams-and-runners-will-be-deleted-too": "All associated teams and runners will be deleted too!",
+    "apartment-suite-etc": "Apartment, suite, etc.",
     "application_name": "Lauf für Kaya! - Admin",
+    "applying-changes": "Applying Changes",
+    "attention": "Attention!",
     "author": "Author",
-    "bitte-bestaetige-diese-laeufer-fuer-den-import": "Please confirm these runners for import",
-    "browse": "Browse",
+    "bitte-bestaetige-diese-laeufer-fuer-den-import": "Please confirm these runners for import.",
     "by": "by",
     "cancel": "Cancel",
+    "cancel-delete": "Cancel Delete",
+    "cancel-keep-organization": "Cancel, keep organization",
+    "cancel-keep-team": "Cancel, keep team",
     "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
-    "changelog": "Changelog",
+    "city": "City",
     "close": "Close",
+    "configure-the-tracks-and-minimum-lap-times": "configure the tracks & minimum lap times",
+    "confirm": "Confirm",
     "confirm-delete": "Confirm Delete",
+    "confirm-delete-organization-and-associated-teams-runners": "Confirm, delete organization and associated teams+runners.",
+    "confirm-delete-team-and-associated-runners": "Confirm, delete team and associated runners.",
     "confirm-deletion": "Confirm Deletion",
     "contact": "Contact",
+    "contact-deleted": "Contact deleted",
     "contact-information": "Contact Information",
+    "contact-is-being-updated": "Contact is being updated...",
+    "contact-is-not-a-member-in-any-group": "Contact is not a member in any group",
+    "contacts": "Contacts",
+    "contacts-are-being-loaded": "contacts are being loaded...",
     "count_organizations": "# Organizations",
     "count_teams": "# Teams",
     "create": "Create",
+    "create-a-new-contact": "Create a new contact",
+    "create-a-new-organization": "Create a new Organization",
     "create-a-new-runner": "Create a new Runner",
+    "create-a-new-team": "Create a new team",
     "create-a-new-track": "Create a new Track",
+    "create-a-new-user": "Create a new User",
     "create-organization": "Create Organization",
+    "create-team": "Create Team",
+    "create-track": "Create Track",
     "create-user": "Create User",
     "credits": "Credits",
     "csv_import__class": "Class",
@@ -49,6 +78,7 @@
         "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
     },
     "delete": "Delete",
+    "delete-contact": "Delete Contact",
     "delete-organization": "Delete Organization",
     "delete-runner": "Delete Runner",
     "delete-team": "Delete Team",
@@ -56,53 +86,49 @@
     "dependency_name": "Name",
     "distance": "Distance",
     "distance-in-km": "Distance in km",
+    "do-you-want-to-delete-the-organization-delete_org-name": "Do you want to delete the organization {orgname}?",
+    "do-you-want-to-delete-the-team-delete_team-name": "Do you want to delete the team {teamname}?",
     "dont-have-your-email-connected": "Don't have your email connected?",
     "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
-    "drag-and-drop-your-files-or": "Drag & Drop your files or",
     "e-mail-adress": "E-Mail Adress",
+    "edit": "Edit",
     "edit-permissions": "edit permissions",
     "email_address_or_username": "Email / username",
     "error_on_login": "Error on login",
+    "erteilte": "Directly granted",
+    "everything-is-more-fun-together": "everything is more fun together 🏃‍♂️🏃‍♀️🏃‍♂️",
     "faq": "FAQ",
-    "filepond__abort": "Abort",
-    "filepond__cancel": "Cancel",
-    "filepond__error-during-load": "Error during load",
-    "filepond__error-during-remove": "Error during remove",
-    "filepond__error-during-revert": "Error during revert",
-    "filepond__error-during-upload": "Error during upload",
-    "filepond__field-contains-invalid-files": "Field contains invalid files",
-    "filepond__loading": "Loading",
-    "filepond__remove": "Remove",
-    "filepond__retry": "Retry",
-    "filepond__size-not-available": "Size not available",
-    "filepond__tap-to-cancel": "tap to cancel",
-    "filepond__tap-to-retry": "tap to retry",
-    "filepond__tap-to-undo": "tap to undo",
-    "filepond__undo": "Undo",
-    "filepond__upload": "Upload",
-    "filepond__upload-cancelled": "Upload cancelled",
-    "filepond__upload-complete": "Upload complete",
-    "filepond__uploading": "Uploading",
-    "filepond__waiting-for-size": "Waiting for size",
+    "filter-by-organization-team": "Filter by Organization/ Team",
     "first-name": "First name",
     "first-name-is-required": "First Name is required",
-    "forgot_password?": "Forgot your password?",
+    "forgot_password": "Forgot your password?",
+    "geerbte": "inherited",
     "general-stats": "General Stats",
     "general_promise_error": "😢 Error",
+    "generic-ui-logic-error": "Something went wrong in the UI logic",
+    "go-to-login": "Go To Login",
     "goback": "Go Home",
     "group": "Group",
     "groups": "Groups",
-    "hallo": "hello",
+    "home": "Home",
     "icon-image-credits": "We also want to thank these projects for illustrations and icons:",
+    "import-finished": "Import finished",
     "import-runners": "Import runners",
     "import__target-organization": "Target Organization",
+    "imprint": "Imprint",
+    "imprint-loading": "Imprint loading...",
+    "inactive": "Inactive",
     "installed-version": "Installed version",
+    "internal-error": "Internal Error",
     "invalid-mail-reset": "the provided email is invalid",
+    "laeufer-hinzufuegen": "Add runner",
+    "laeufer-importieren": "Läufer importieren",
     "last-name": "Last name",
     "last-name-is-required": "Last Name is required",
     "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
     "license": "License",
     "licenses-are-being-loaded": "Licenses are being loaded...",
+    "loading-contact-details": "Loading contact details...",
     "loading-runners": "loading runners...",
     "log_in": "Log in",
     "log_in_to_your_account": "Log in to your account",
@@ -112,38 +138,75 @@
     "manage-admin-users": "manage admin users",
     "middle-name": "Middle name",
     "minimum-lap-time-in-s": "minimum lap time in s",
+    "minimum-lap-time-must-be-a-positive-number-or-0": "minimum lap time must be a positive number or 0",
     "name": "Name",
+    "new-password": "New password",
+    "no-contact-specified": "no contact specified",
     "no-license-text-could-be-found": "No license text could be found 😢",
+    "no-organization-specified": "no organization specified",
     "no-tracks-added-yet": "there are no tracks added yet.",
     "organization": "Organization",
+    "organization-added": "Organization added",
+    "organization-deleted": "Organization deleted",
+    "organization-detail-is-being-loaded": "organization detail is being loaded...",
+    "organization-is-being-added": "Organization is being added...",
+    "organization-name-is-required": "Organization name is required",
     "organizations": "Organizations",
+    "organizations-are-being-loaded": "organizations are being loaded...",
     "orgs": "Orgs",
     "oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",
     "password": "Password",
     "password-is-required": "Password is required",
+    "password-reset-failed": "Password reset failed!",
+    "password-reset-in-progress": "Password Reset in Progress...",
+    "password-reset-mail-sent": "Password reset mail was sent to \"{usersEmail}\".",
+    "password-reset-successful": "Password Reset successful!",
     "permissions": "Permissions",
+    "permissions-updated": "Permissions updated!",
     "phone": "Phone",
+    "please-provide-a-password": "Please provide a password...",
     "please-provide-the-required-csv-xlsx-file": "Please provide the required csv/ xlsx file",
+    "please-provide-the-required-information-to-add-a-new-contact": "Please provide the required information to add a new contact.",
+    "please-provide-the-required-information-to-add-a-new-organization": "Please provide the required information to add a new organization.",
     "please-provide-the-required-information-to-add-a-new-runner": "Please provide the required information to add a new runner.",
+    "please-provide-the-required-information-to-add-a-new-team": "Please provide the required information to add a new team.",
     "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
+    "please-provide-the-required-information-to-add-a-new-user": "Please provide the required information to add a new user.",
+    "please-request-a-new-reset-mail": "Please request a new reset mail...",
+    "privacy": "Privacy",
+    "privacy-loading": "Privacy loading...",
     "profile-picture": "Profile Picture",
     "read-license": "Read License",
-    "register": "Register",
     "repo_link": "Link",
+    "request-a-new-reset-mail": "Request a new reset mail",
     "reset-my-password": "Reset my password",
+    "reset-password": "Reset your password",
+    "runner-added": "Runner added",
     "runner-import": "Runner Import",
+    "runner-is-being-added": "Runner is being added...",
     "runner-updated": "Runner updated!",
     "runnerimport_verify_runners_org": "Please confirm these runners for import into the organization \"{org_name}\"",
     "runners": "Runners",
+    "runners-are-being-imported": "Runners are being imported...",
+    "runners-are-being-loaded": "runners are being loaded...",
+    "save": "Save",
     "save-changes": "Save Changes",
     "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
     "settings": "Settings",
-    "signout": "Sign out",
     "stats-are-being-loaded": "stats are being loaded...",
+    "status": "Status",
+    "successful-password-reset": "Successful password reset!",
     "team": "Team",
     "team-name": "Team name",
+    "team-name-is-required": "team name is required",
     "teams": "Teams",
+    "teams-are-being-loaded": "teams are being loaded...",
     "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number": "the provided phone number is invalid.<br />please enter a valid international number...",
+    "there-are-no-contacts-added-yet": "There are no contacts added yet.",
+    "there-are-no-organizations-added-yet": "There are no organizations added yet.",
+    "there-are-no-runners-added-yet": "There are no runners added yet.",
+    "there-are-no-teams-added-yet": "There are no teams added yet.",
+    "there-are-no-users-added-yet": "There are no users added yet.",
     "this-might-take-a-moment": "This might take a moment 👀",
     "total-distance": "total distance",
     "total-donations": "total donations",
@@ -152,14 +215,26 @@
     "track-data-is-being-loaded": "Track data is being loaded",
     "track-is-being-added": "Track is being added...",
     "track-length-in-m": "Track Length in m",
+    "track-length-must-be-greater-than-0": "Track length must be greater than 0",
     "track-name": "Track name",
+    "track-name-must-not-be-empty": "Track name must not be empty",
     "tracks": "Tracks",
+    "updated-contact": "Updated contact!",
+    "updated-organization": "updated organization",
+    "updating-organization": "updating organization",
     "updating-runner": "Updating runner...",
     "updating-user": "updating user...",
+    "user-added": "User added",
+    "user-is-being-added": "User is being added...",
     "user-updated": "User updated",
     "username": "Username",
     "users": "Users",
+    "valid-city-is-required": "Valid city is required",
     "valid-email-is-required": "valid email is required",
+    "valid-international-phone-number-is-required": "valid international phone number is required...",
+    "valid-zipcode-postal-code-is-required": "Valid zipcode/ postal code is required",
+    "verfuegbare": "availdable",
     "welcome_wavinghand": "Welcome 👋",
-    "your_profile": "Your Profile"
+    "you-can-now-use-your-new-password-to-log-in-to-your-account": "You can now use your new password to log in to your account! 🎉",
+    "zip-postal-code": "ZIP/ postal code"
 }

src/store.js

@@ -23,14 +23,12 @@ const store = () => {
 			});
 		},
 		refreshAuth() {
-			console.log('refreshing auth');
 			AuthService.authControllerRefresh({ token: state.auth.refresh_token }).then((auth) => {
-				console.log('got new auth');
 				OpenAPI.TOKEN = auth.access_token;
 				const jwtinfo = JSON.parse(atob(auth.access_token.split('.')[1]));
 				state.jwtinfo = jwtinfo;
 				localForage.setItem('logindata', auth);
-			});
+			}).catch(this.logout());
 		},
 		login(auth, jwtinfo) {
 			update((state) => {