fumix / fublog Goto Github PK

• Implement an option to add attachments (images) to a post, when creating or editing a post.
• Attachment is shown in the preview
• Attachment is deleteable

At the moment we login the user with the ID token, which we receive from the OAuth provider, which will expire after a while (usually 3600 seconds).

This time span should be extended by refreshing the token.

Die Bearbeitung von Blog-Einträgen soll nur durch authentifizierte Benutzer erfolgen. Im ersten Wurf über Google-OAuth.

Der Login Button ist für jeden sichtlich, und jeder kann sich mit einem Google-Login anmelden. Neu angemeldete Benutzer werden in der Datenbank angelegt, aber ohne Rechte.

Über eine Umgebungsvariable wir eine Admin-Email-Adresse im Container konfiguriert. Wenn sich dieser Benutzer registriert, bekommt er auch gleich Admin-Rechte.

Aufgaben:

-[ ] Google als OAuth-Provider einrichten.
-[ ] Anleitung, wie ein neues Blog-Deployment (produktiv und für lokale Tests) bei Google registriert werden kann.
-[ ] Anlegen der Benutzer in die Datenbank, bei erstmaligem Login, ohne Rechte.
-[ ] Docker-Umgebungsvariable für Admin-Email umsetzen - diesen User bei erstmaligem Login mit Admin Rechten speichern.

See #6 & #4

Provide a link to:

• our website
• the imprint (for now as external link to our website imprint, maybe there could even be an option to provide an imprint as markdown)
• the GitHub repository for the blog

Either configure the links via environment variables, or make it configurable in UI: #37

The admin panel should have some settings that can be toggled by ADMIN users in the UI.

For starters I'd suggest:

• a boolean setting to turn on/off registrations of new users
• an image upload setting for the blog logo (default to the hardcoded one)

When getting a post from the backend, createdBy and updatedBy leaks complete user info (email, roles etc), that is not relevant to the client. This should be hidden. Only return what is relevant for display.

Sometimes when a user filled the registration form and clicks submit, they get the message "User info not found!". When they try again it usually works, because it seems to be an issue that happens randomly sometimes.

Observed in production when logging in via our GitLab.

Extracted from #17:

Allow deletion of users:

• a user should be able to delete their own account
• admins should be able to delete user accounts

If there are still posts, these should be showing as „authored by a deleted user“.

There's already an endpoint implemented that returns autocompletion suggestions.

see https://github.com/fumiX/fuBlog/blob/main/client/src/views/PostFormView.vue#L331
https://github.com/fumiX/fuBlog/blob/main/server/src/routes/posts.ts#L219

When trying to save a newly created post in production environment, a 401 err is being thrown.

Edit/Display blog posts from DB.

First shot to blog posts, just markdown. When stored in the DB, the original markdown is stored and also the rendered HTML (caching).

• Create database and ORM binding for blog posts.
• Create blog posts (from the main/start page) -> Edit view
• Edit blog posts -> Edit view again.

NOT:
kroki connect for diagramms (that's another story)

API key must not be checked in here!

Provide API key via local configuration only.

We should use some key shortcut here to trigger auto completion to avoid unnecessary request we have to pay. Then maybe show a popup with three choices to select from.

Docs:
https://platform.openai.com/docs/guides/completion

API key must not be checked in here!

Provide API key via local configuration only.

Provide Login for the blog required for creating/editing posts.

The users are intended to be "internal" users.

• Database table for users (Name, login, credentials or OpenId reference).
• Technical login process - once decided if simple username/password or OpenId is to be used.
• Login mechanism working. On the UI the logged in user is displayed (with logout button), and login button is displayed.

NOT:

• Any extras like profile pictures or other infos for the authors.

Avoid sql injection via type orm, as this is still possible via search function for example.

• Improve frontend to upload multiple items and reference them in text
• Uploaded items should be listed
• Uploaded items can be deleted
• Uploaded items can be inserted into markdown
• Uploaded images can be selected as cover image (max 1)

Sharing images should be added to at least links to a single post.

https://github.blog/2021-06-22-framework-building-open-graph-images/
https://ogp.me/

• Basic direktory structure for node.js server and vue3-ui.
  Separate main folders in one repo, one for node-server, one for Vue3-UI
• Server
  • Simple single REST service with express and single route/call for first try.
  • Devserver setup to start the server for local development.
• UI
  • Standard-Setup with Vue-CLI, Vite.
  • Access to node-Devserver REST call.

DoD

Server and client running on developer machine.

Initial setup of the main blog UI.

• Single page Vue3-app for listing, reading and editing posts.
• First welcome page/dashboard/article list (without data yet).
• CSS-Framework already set up.

Not:

• Admin UI: We will decide later, if this will be part of the main single page app, or on another page.
• All the detail pages, editing, etc., and without login yet.

• Startansicht "Posts": Einfache Liste aller Posts, mit Suchfeld. Noch keine weiteren Infos.
  • Nav-Bar/Menü:
    • Login -> Direkt auf Google-Login/Registrierung
    • User-Name/Icon: Wenn angemeldet
    • Logout (wenn angemeldet)
    • Administration (wenn berechtigt)
    • Neuer Post (wenn berechtigt)
• Post: Lese-Ansicht eines Artikels
  • Buttons: bearbeiten, löschen (wenn berechtigt)

https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/

56047e0

If blog entries are linked or bookmarked from outside the system they may get deleted and still be referenced.
At the moment there will be just a blank screen.

• show 404 Not Found error page for unmatched URL
• show 410 Gone error page for deleted blogposts

• be logged out
• search for something that has search results
• some search results can be clicked
• some search results link to a 404

This is about this endpoint, which returns e.g. createdBy and updatedBy as ID instead of entity:

https://kroki.io/ is a service to render diagrams from text. It's a HTTP interface to a number of tools like plantUML. It's also available as OS docker container for self hosting.

The markdown code-blocks can be used for embedded diagrams. When the markdown is rendered kroki is called on the content of such code blocks to render svg-diagrams. The svg-diagrams are inlined into the output html.

Within markdown the type of the diagram is defined at the "language" level, e.g. "diagram-plantuml". The string after "diagram-" has to match the kroki diagram id.

  ```diagram-plantuml
  <some  plantuml markup>
   \```

implement i18n to project.
add german and english messages

locale is set by env variables.

• Add m:n tags to posts -> new form field in post create/edit form
• Use tags to fill word cloud

Administrative UI mit Liste aller Benutzer in der DB (alle, die sich schon mal registriert haben).

Erstmal ohne Suche/Filter/Paging.

Jeder Benutzer in einer Zeile, mit Checkboxen o.ä. für die Berechtigungen.

Benutzer können gelöscht werden. Es genügt im ersten Anlauf richtiges Löschen. Später evtl. nur markieren und damit erneute Registrierung sperren, oder ähnliche Mechanismen.

Datensparsam: Nur absolut relevante Benutzerdaten werden gespeichert -> Email-Adresse.

Berechtigung: Diese Seite sollte über die Nav-Bar ("Administration" ?) erreichbar sein und über das "Adminstrations"-Recht gesichert sein:

• Der Administrations-Punkt wird nur angezeigt, wenn der Benutzer das Recht hat.
• Der Serive sichert den Zugriff auf die Benutzerdaten über das Recht ab.

Add code highlighting to code blocks

https://marked.js.org/using_advanced#highlight

At the moment we use (at least) two different indentations:

• 2 spaces (*.json, *.yml, on client side: *.ts)
• 4 spaces (on server side: *.ts)

I created an .editorconfig file, so the different editors pick up the correct basic formatting (indentation, line feed type, character encoding, …). JetBrains IDEs have a plugin respecting .editorconfig files installed by default. In VSCode this extension needs to be installed.

Probably we should move to a unified indentation style across file types.

In order to avoid merge conflicts, this change should probably wait for a moment when there are as few branches around as possible.

cc @fumix/entwickler

Currently we fetch the profile picture once on registration and then it does not change.

This should be done every time a user logs in, so changes in profile picture are reflected on our end.

Question: Should we allow people to opt-out of using the profile picture from the OAuth provider and instead use a different one or none?

• Setup TypeORM for database connectivity.
• First Table for testing.
• Configuration of database properties by environmentvariables.

DoD

Node server can access a postgres database.

Figure out how the user management, authentication and authorization should work.

Ideally deferred to some OpenID connect service like Azure (what we have for everybody).

Questions to be decided:

• What user data has to be stored in the blog's DB?
• What are the required roles? (Admin, Author, Anonymous, more?)
• Should we start with OpenId right away, or better with something more simple?
• If we use OpenId, which should be the first authentication provider? Keycloak? Azure-AD? Github? Google?
  It should be one that all fumiX developers can use right away, but is ideally also usable with OS in mind, i.e. others can install the app and can use it without too much hassle.

API key must not be checked in here!

Provide API key via local configuration only.

Docs:
https://platform.openai.com/docs/guides/images

Folgende Berechtigungen sind vorgesehen:

• Administration: Zugang zum Admin-Bereich ohne Einschränkung - zunächst User-Verwaltung.
• Post-Create: Blog-Eintrag anlegen
• Post-Update: Blog-Eintrag ändern
• Post-Delete: Blog-Eintrag löschen

Aufgaben:

• Konzept/Umsetzung zum Speichern der Berechtigungen am User in der DB.
• Buttons (Client) und Funktionen (Service) nutzen die Funktionen. Bei angemeldeten Benutzern werden die nicht-berechtigten Buttons deaktiviert. Bei nicht-angemeldeten Benutzern werden die Buttons mit Berechtigungen nicht angezeigt.

When composing a new post, a draft should be persisted in intervals to avoid losing data when accidentally closing a tab or ending the session in some other way.

Create a docker container containing node server and able to serve the UI pages.

Details TBD.

When I start writing a new post, but leave the page without saving, the progress should be saved and the user should be able to continue where they left off when they return to the form.

The state should probably be stored in local storage or session storage, kind of like how Github does it with comments on issues and PRs, which are stored in the session storage.