Change username setting (#190)

internal/i18n/locales/en-US.yml

@@ -109,6 +109,7 @@ settings.delete-ssh-key-confirm: Confirm deletion of SSH key
 settings.ssh-key-added-at: Added
 settings.ssh-key-never-used: Never used
 settings.ssh-key-last-used: Last used
+settings.change-username: Change username
 settings.create-password: Create password
 settings.create-password-help: Create your password to login to Opengist via HTTP
 settings.change-password: Change password

internal/web/server.go

@@ -222,6 +222,7 @@ func NewServer(isDev bool) *Server {
 		g1.POST("/settings/ssh-keys", sshKeysProcess, logged)
 		g1.DELETE("/settings/ssh-keys/:id", sshKeysDelete, logged)
 		g1.PUT("/settings/password", passwordProcess, logged)
+		g1.PUT("/settings/username", usernameProcess, logged)
 
 		g2 := g1.Group("/admin-panel")
 		{

internal/web/settings.go

@@ -3,6 +3,9 @@ package web
 import (
 	"crypto/md5"
 	"fmt"
+	"github.com/thomiceli/opengist/internal/config"
+	"os"
+	"path/filepath"
 	"strconv"
 	"strings"
 	"time"
@@ -139,3 +142,39 @@ func passwordProcess(ctx echo.Context) error {
 	addFlash(ctx, "Password updated", "success")
 	return redirect(ctx, "/settings")
 }
+
+func usernameProcess(ctx echo.Context) error {
+	user := getUserLogged(ctx)
+
+	dto := new(db.UserDTO)
+	if err := ctx.Bind(dto); err != nil {
+		return errorRes(400, "Cannot bind data", err)
+	}
+	dto.Password = user.Password
+
+	if err := ctx.Validate(dto); err != nil {
+		addFlash(ctx, validationMessages(&err), "error")
+		return redirect(ctx, "/settings")
+	}
+
+	if exists, err := db.UserExists(dto.Username); err != nil || exists {
+		addFlash(ctx, "Username already exists", "error")
+		return redirect(ctx, "/settings")
+	}
+
+	err := os.Rename(
+		filepath.Join(config.C.OpengistHome, "repos", user.Username),
+		filepath.Join(config.C.OpengistHome, "repos", dto.Username))
+	if err != nil {
+		return errorRes(500, "Cannot rename user directory", err)
+	}
+
+	user.Username = dto.Username
+
+	if err := user.Update(); err != nil {
+		return errorRes(500, "Cannot update username", err)
+	}
+
+	addFlash(ctx, "Username updated", "success")
+	return redirect(ctx, "/settings")
+}

templates/pages/settings.html

@@ -6,104 +6,28 @@
         </div>
     </header>
     <main>
-        <div class="space-y-4">
+        <div class="relative mx-auto max-w-[40rem] space-y-8">
-            <div class="sm:grid {{ if or .githubOauth .gitlabOauth .giteaOauth .oidcOauth }}grid-cols-3{{else}}grid-cols-2{{end}} gap-x-4 md:gap-x-8">
+            <div class="sm:grid grid-cols-2 gap-x-4 md:gap-x-8 space-y-8 md:space-y-0">
                 <div class="w-full">
-                    <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
+                    <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10 h-full">
                         <h2 class="text-md font-bold text-slate-700 dark:text-slate-300">
-                            {{ .locale.Tr "settings.email" }}
+                            {{ .locale.Tr "settings.change-username" }}
                         </h2>
-                        <h3 class="text-sm text-gray-600 dark:text-gray-400 italic mb-4">
+                        <form class="space-y-6" action="/settings/username" method="post">
-                            {{ .locale.Tr "settings.email-help" }}
-                        </h3>
-                        <form class="space-y-6" action="/settings/email" method="post">
                             <div>
                                 <div class="mt-1">
-                                    <input id="email" name="email" value="{{ .userLogged.Email }}" type="email" required autocomplete="off" class="dark:bg-gray-800 appearance-none block w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
+                                    <input id="username-change" name="username" type="text" required autocomplete="off" class="dark:bg-gray-800 appearance-none block w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                                 </div>
                             </div>
-                            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">{{ .locale.Tr "settings.email-set" }}</button>
+                            <input type="hidden" name="_method" value="PUT">
+
+                            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+                                {{ .locale.Tr "settings.change-username" }}
+                            </button>
                             {{ .csrfHtml }}
                         </form>
                     </div>
                 </div>
-                {{ if or .githubOauth .gitlabOauth .giteaOauth .oidcOauth }}
-                <div class="w-full">
-                    <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
-                        <h2 class="text-md font-bold text-slate-700 dark:text-slate-300 mb-2">
-                            {{ .locale.Tr "settings.link-accounts" }}
-                        </h2>
-                        <div class="gap-y-2">
-
-                                {{ if .githubOauth }}
-                                    {{ if .userLogged.GithubID }}
-                                        <a href="{{ $.c.ExternalUrl }}/oauth/github" class="block w-full mb-2 text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3"
-                                           onclick="return confirm('Are you sure you want to unlink your GitHub account? You may lose access to Opengist if it\'s your only way to log in.')">
-                                            {{ .locale.Tr "settings.unlink-github-account" }}
-                                        </a>
-                                    {{ else }}
-                                        <a href="{{ $.c.ExternalUrl }}/oauth/github" class="block w-full mb-2 text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
-                                            {{ .locale.Tr "settings.link-github-account" }}
-                                        </a>
-                                    {{ end }}
-                                {{ end }}
-
-                                {{ if .gitlabOauth }}
-                                    {{ if .userLogged.GitlabID }}
-                                        <a href="{{ $.c.ExternalUrl }}/oauth/gitlab" class="block w-full mb-2 text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3"
-                                           onclick="return confirm('Are you sure you want to unlink your GitLab account? You may lose access to Opengist if it\'s your only way to log in.')">
-                                            {{ .locale.Tr "settings.unlink-gitlab-account" }}
-                                        </a>
-                                    {{ else }}
-                                        <a href="{{ $.c.ExternalUrl }}/oauth/gitlab" class="block w-full mb-2 text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
-                                            {{ .locale.Tr "settings.link-gitlab-account" }}
-                                        </a>
-                                    {{ end }}
-                                {{ end }}
-
-                                {{ if .giteaOauth }}
-                                    {{ if .userLogged.GiteaID }}
-                                        <a href="{{ $.c.ExternalUrl }}/oauth/gitea" class="block w-full text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3"
-                                           onclick="return confirm('Are you sure you want to unlink your Gitea account? You may lose access to Opengist if it\'s your only way to log in.')">
-                                            {{ .locale.Tr "settings.unlink-gitea-account" }}
-                                        </a>
-                                        {{ else }}
-                                        <a href="{{ $.c.ExternalUrl }}/oauth/gitea" class="block w-full text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
-                                            {{ .locale.Tr "settings.link-gitea-account" }}
-                                        </a>
-                                    {{ end }}
-                                {{ end }}
-                                {{ if .oidcOauth }}
-                                    {{ if .userLogged.OIDCID }}
-                                        <a href="{{ $.c.ExternalUrl }}/oauth/openid-connect" class="block w-full text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3"
-                                        onclick="return confirm('Are you sure you want to unlink your OpenID account? You may lose access to Opengist if it\'s your only way to log in.')">
-                                            Unlink OpenID account
-                                        </a>
-                                        {{ else }}
-                                        <a href="{{ $.c.ExternalUrl }}/oauth/openid-connect" class="block w-full text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
-                                            Link OpenID account
-                                        </a>
-                                    {{ end }}
-                                {{ end }}
-
-                        </div>
-                    </div>
-                </div>
-                {{ end }}
-                <div class="w-full">
-                    <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
-                        <h2 class="text-md font-bold text-slate-700 dark:text-slate-300">
-                            {{ .locale.Tr "settings.delete-account" }}
-                        </h2>
-                        <form class="space-y-6" action="/settings/account" method="post" onsubmit="return confirm('{{ .locale.Tr "settings.delete-account-confirm" }}')">
-                            <input type="hidden" name="_method" value="DELETE">
-                            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 mt-2">{{ .locale.Tr "settings.delete-account" }}</button>
-                            {{ .csrfHtml }}
-                        </form>
-                    </div>
-                </div>
-            </div>
-            <div class="sm:grid grid-cols-3 gap-x-4 md:gap-x-8">
                 <div class="w-full">
                     <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
                         <h2 class="text-md font-bold text-slate-700 dark:text-slate-300">
@@ -140,6 +64,89 @@
                         </form>
                     </div>
                 </div>
+            </div>
+            <div class="w-full">
+                <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
+                    <h2 class="text-md font-bold text-slate-700 dark:text-slate-300">
+                        {{ .locale.Tr "settings.email" }}
+                    </h2>
+                    <h3 class="text-sm text-gray-600 dark:text-gray-400 italic mb-4">
+                        {{ .locale.Tr "settings.email-help" }}
+                    </h3>
+                    <form class="space-y-6" action="/settings/email" method="post">
+                        <div>
+                            <div class="mt-1">
+                                <input id="email" name="email" value="{{ .userLogged.Email }}" type="email" required autocomplete="off" class="dark:bg-gray-800 appearance-none block w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
+                            </div>
+                        </div>
+                        <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">{{ .locale.Tr "settings.email-set" }}</button>
+                        {{ .csrfHtml }}
+                    </form>
+                </div>
+            </div>
+            {{ if or .githubOauth .gitlabOauth .giteaOauth .oidcOauth }}
+            <div class="w-full">
+                <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
+                    <h2 class="text-md font-bold text-slate-700 dark:text-slate-300 mb-2">
+                        {{ .locale.Tr "settings.link-accounts" }}
+                    </h2>
+                    <div class="gap-y-2">
+
+                        {{ if .githubOauth }}
+                            {{ if .userLogged.GithubID }}
+                                <a href="{{ $.c.ExternalUrl }}/oauth/github" class="block w-full mb-2 text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3"
+                                   onclick="return confirm('Are you sure you want to unlink your GitHub account? You may lose access to Opengist if it\'s your only way to log in.')">
+                                    {{ .locale.Tr "settings.unlink-github-account" }}
+                                </a>
+                            {{ else }}
+                                <a href="{{ $.c.ExternalUrl }}/oauth/github" class="block w-full mb-2 text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
+                                    {{ .locale.Tr "settings.link-github-account" }}
+                                </a>
+                            {{ end }}
+                        {{ end }}
+
+                        {{ if .gitlabOauth }}
+                            {{ if .userLogged.GitlabID }}
+                                <a href="{{ $.c.ExternalUrl }}/oauth/gitlab" class="block w-full mb-2 text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3"
+                                   onclick="return confirm('Are you sure you want to unlink your GitLab account? You may lose access to Opengist if it\'s your only way to log in.')">
+                                    {{ .locale.Tr "settings.unlink-gitlab-account" }}
+                                </a>
+                            {{ else }}
+                                <a href="{{ $.c.ExternalUrl }}/oauth/gitlab" class="block w-full mb-2 text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
+                                    {{ .locale.Tr "settings.link-gitlab-account" }}
+                                </a>
+                            {{ end }}
+                        {{ end }}
+
+                        {{ if .giteaOauth }}
+                            {{ if .userLogged.GiteaID }}
+                                <a href="{{ $.c.ExternalUrl }}/oauth/gitea" class="block w-full text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3"
+                                   onclick="return confirm('Are you sure you want to unlink your Gitea account? You may lose access to Opengist if it\'s your only way to log in.')">
+                                    {{ .locale.Tr "settings.unlink-gitea-account" }}
+                                </a>
+                            {{ else }}
+                                <a href="{{ $.c.ExternalUrl }}/oauth/gitea" class="block w-full text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
+                                    {{ .locale.Tr "settings.link-gitea-account" }}
+                                </a>
+                            {{ end }}
+                        {{ end }}
+                        {{ if .oidcOauth }}
+                            {{ if .userLogged.OIDCID }}
+                                <a href="{{ $.c.ExternalUrl }}/oauth/openid-connect" class="block w-full text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3"
+                                   onclick="return confirm('Are you sure you want to unlink your OpenID account? You may lose access to Opengist if it\'s your only way to log in.')">
+                                    Unlink OpenID account
+                                </a>
+                            {{ else }}
+                                <a href="{{ $.c.ExternalUrl }}/oauth/openid-connect" class="block w-full text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
+                                    Link OpenID account
+                                </a>
+                            {{ end }}
+                        {{ end }}
+                    </div>
+                </div>
+            </div>
+            {{ end }}
+            <div class="sm:grid grid-cols-2 gap-x-4 md:gap-x-8">
                 <div class="w-full">
                     <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
                         <h2 class="text-md font-bold text-slate-700 dark:text-slate-300">
@@ -201,6 +208,18 @@
                     </div>
                 </div>
             </div>
+            <div class="w-full">
+                <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
+                    <h2 class="text-md font-bold text-slate-700 dark:text-slate-300">
+                        {{ .locale.Tr "settings.delete-account" }}
+                    </h2>
+                    <form class="space-y-6" action="/settings/account" method="post" onsubmit="return confirm('{{ .locale.Tr "settings.delete-account-confirm" }}')">
+                        <input type="hidden" name="_method" value="DELETE">
+                        <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 mt-2">{{ .locale.Tr "settings.delete-account" }}</button>
+                        {{ .csrfHtml }}
+                    </form>
+                </div>
+            </div>
         </div>
     </main>
 </div>