feat: password reset #32

2026-08-19 11:43:22 +02:00 · 2024-06-14 13:46:39 +02:00
parent 727418c8e6
commit e4c2230b64
16 changed files with 527 additions and 64 deletions
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<body>
+<h1>
+    <img src="{{.Host}}/static/gocms-favicon-128.png" alt="G" style="width: 2.5rem"/>
+    GoCMS
+</h1>
+<main>
+    <p>You or someone tried to create reset your GoCMS account with this e-mail address. If you are not responsible for
+        this, please do not validate the password reset.</p>
+    <p><b>If you want to reset your password, please <a
+            href="{{.Host}}/register/reset/validate?c={{.VerificationCode}}&email={{.Email}}" target="_blank">click HERE</a>.</b>
+    </p>
+    <p>If you can't click the link:</p>
+    <p>{{.Host}}/register/reset/validate?c={{.VerificationCode}}&email={{.Email}}</p>
+</main>
+</body>
+</html>
@@ -7,13 +7,14 @@ import (

 type User struct {
 	gorm.Model
-	ID                     uint32    `gorm:"primaryKey;autoIncrement"`
-	Username               string    `gorm:"unique;not null"`
-	Password               string    `gorm:"not null"`
-	Email                  string    `gorm:"unique;not null"`
-	IsVerified             bool      `gorm:"default=false;not null"`
-	VerificationCode       string    `gorm:"unique;not null"`
-	VerificationExpiration time.Time `gorm:"not null"`
+	ID                     uint32 `gorm:"primaryKey;autoIncrement"`
+	Username               string `gorm:"unique;not null"`
+	Password               string `gorm:"not null"`
+	PasswordResetCode      string `gorm:"unique"`
+	Email                  string `gorm:"unique;not null"`
+	IsVerified             bool   `gorm:"default=false;not null"`
+	VerificationCode       string `gorm:"unique"`
+	VerificationExpiration time.Time
 	CreatedAt              time.Time `gorm:"autoCreateTime"`
 	UpdatedAt              time.Time `gorm:"autoUpdateTime"`
 }
@@ -22,6 +22,7 @@ func mapUserToDomain(user entity.User) domain.User {
 		user.ID,
 		user.Username,
 		user.Password,
+		user.PasswordResetCode,
 		user.Email,
 		user.IsVerified,
 		user.VerificationCode,
@@ -88,6 +89,16 @@ func (u *UserRepository) GetByUsername(username string) (domain.User, error) {
 	return mapUserToDomain(localUser), nil
 }

+func (u *UserRepository) GetByEmail(email string) (domain.User, error) {
+	var localUser entity.User
+	err := u.db.Model(&entity.User{}).Where("email = ?", email).First(&localUser).Error
+	if err != nil {
+		return domain.User{}, err
+	}
+
+	return mapUserToDomain(localUser), nil
+}
+
 func (u *UserRepository) UpdateVerificationStatus(userId uint32, isVerified bool) (domain.User, error) {
 	var localUser entity.User
 	err := u.db.Model(&entity.User{}).First(&localUser, userId).Error
@@ -104,4 +115,38 @@ func (u *UserRepository) UpdateVerificationStatus(userId uint32, isVerified bool
 	return mapUserToDomain(localUser), nil
 }

+func (u *UserRepository) UpdatePassword(userId uint32, password string) (domain.User, error) {
+	var localUser entity.User
+	err := u.db.Model(&entity.User{}).First(&localUser, userId).Error
+	if err != nil {
+		return domain.User{}, err
+	}
+
+	hashedPassword, _ := bcrypt.GenerateFromPassword([]byte(password), 12)
+	localUser.Password = string(hashedPassword)
+	err = u.db.Save(&localUser).Error
+	if err != nil {
+		return domain.User{}, err
+	}
+
+	return mapUserToDomain(localUser), nil
+}
+
+func (u *UserRepository) UpdatePasswordResetCode(userId uint32, code string) (domain.User, error) {
+	var localUser entity.User
+	err := u.db.Model(&entity.User{}).First(&localUser, userId).Error
+	if err != nil {
+		return domain.User{}, err
+	}
+
+	hashedCode, _ := bcrypt.GenerateFromPassword([]byte(code), 12)
+	localUser.PasswordResetCode = string(hashedCode)
+	err = u.db.Save(&localUser).Error
+	if err != nil {
+		return domain.User{}, err
+	}
+
+	return mapUserToDomain(localUser), nil
+}
+
 var _ gateways.IUserRepository = &UserRepository{}
@@ -1,70 +1,82 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<title>GoCMS | Login</title>
-	{{.Head}}
+    <title>GoCMS | Login</title>
+    {{.Head}}

-	<style>
+    <style>
        .form-container {
            max-width: 24rem;
        }
-	</style>
+    </style>
 </head>
 <body class="d-flex min-vh-100 vw-100 justify-content-center align-items-center text-dark">
 <div class="container">
-	<div class="d-flex flex-column m-auto form-container">
-		<div>
-			<h1>GoCMS</h1>
-			<h2>Login</h2>
-		</div>
-		<form action="login" method="POST" class="mt-5" id="loginForm">
-			<div class="d-flex flex-column gap-4">
-				<div class="form-floating">
-					<input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
-						   id="username"
-						   name="username"
-						   placeholder="Username"
-						   required
-						   type="text"
-						   value="{{.Username}}">
-					<label for="username">Username</label>
-				</div>
-				<div class="form-floating">
-					<input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
-						   id="password"
-						   name="password"
-						   placeholder="Password"
-						   required
-						   type="password">
-					<label for="password">Password</label>
-					<div class="invalid-feedback">{{.PageError.Message}}</div>
-				</div>
-				<button id="loginFormButton" class="btn btn-primary" disabled type="submit">
+    <div class="d-flex flex-column m-auto form-container">
+        <div>
+            <h1>GoCMS</h1>
+            <h2>Login</h2>
+        </div>
+        <form action="login" method="POST" class="mt-5" id="loginForm">
+            <div class="d-flex flex-column gap-4">
+                <div class="form-floating">
+                    <input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
+                           id="username"
+                           name="username"
+                           placeholder="Username"
+                           required
+                           type="text"
+                           value="{{.Username}}">
+                    <label for="username">Username</label>
+                </div>
+                <div class="form-floating">
+                    <input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
+                           id="password"
+                           name="password"
+                           placeholder="Password"
+                           required
+                           type="password">
+                    <label for="password">Password</label>
+                    <div class="invalid-feedback">{{.PageError.Message}}</div>
+                </div>
+                <button id="loginFormButton" class="btn btn-primary" disabled type="submit">
 						<span class="loginFormButtonLoading visually-hidden spinner-border spinner-border-sm"
-							  role="status"></span>
-					<span class="loginFormButtonDefault">Log in</span>
-				</button>
-			</div>
-		</form>
-        <form action="register" method="get" class="mt-2 w-100">
-            <button class="btn btn-link w-100" type="submit">
-				Don't have any verified account? Register here.
-			</button>
-		</form>
-	</div>
+                              role="status"></span>
+                    <span class="loginFormButtonDefault">Log in</span>
+                </button>
+            </div>
+        </form>
+        <div class="d-flex gap-2 my-2 w-100">
+            <a href="register" class="btn btn-outline-secondary w-100" type="submit">
+                First setup? Register
+            </a>
+            <a href="register/reset/request" class="btn btn-outline-secondary w-100" type="submit">
+                Forgot password
+            </a>
+        </div>
+        {{ if .Success }}
+        <div class="alert alert-success my-4" role="alert">
+            {{ .Success }}
+        </div>
+        {{ end }}
+    </div>
 </div>

 <script>
    const button = document.querySelector("#loginFormButton")
    const inputs = document.querySelectorAll('input')
-	const form = document.querySelector("#loginForm")
+    const form = document.querySelector("#loginForm")

    function formFieldsEmpty() {
        return Array.from(inputs).some((input) => input.value === "")
    }

+    function isFormValid() {
+        return !formFieldsEmpty() && validateEmail()
+    }
+
    function setButtonDisabled() {
-        button.disabled = formFieldsEmpty() ? "disabled" : ""
+        button.disabled = isFormValid() ? "disabled" : ""
    }

    function setButtonLoading() {
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>GoCMS | Password reset</title>
+    {{.Head}}
+
+    <style>
+        .form-container {
+            max-width: 24rem;
+        }
+    </style>
+</head>
+<body class="d-flex min-vh-100 vw-100 justify-content-center align-items-center text-dark">
+<div class="container">
+    <div class="d-flex flex-column m-auto form-container">
+        <div>
+            <h1>GoCMS</h1>
+            <h2>Admin account password reset</h2>
+        </div>
+        <form action="request" method="POST" class="mt-5" id="registerForm">
+            <div class="d-flex flex-column gap-4">
+                <div class="form-floating">
+                    <input class="form-control {{ if .PageError.Email }} is-invalid {{ end }}"
+                           id="email"
+                           name="email"
+                           placeholder="E-mail"
+                           required
+                           type="email"
+                           value="{{.Email}}"
+                           onblur="validateEmail()"
+                           {{ if .Email }} disabled {{ end }}>
+                    <label for="email">E-mail</label>
+                </div>
+                <button id="registerFormButton" class="btn btn-primary" disabled type="submit">
+                    <span class="registerFormButtonLoading visually-hidden spinner-border spinner-border-sm"
+                          role="status"></span>
+                    <span class="registerFormButtonDefault">Send e-mail</span>
+                </button>
+            </div>
+        </form>
+        {{ if .Success }}
+        <div class="alert alert-success my-4" role="alert">
+            {{ .Success }}
+        </div>
+        {{ end }}
+    </div>
+</div>
+
+<script>
+    const docElems = {
+        form: document.querySelector("#registerForm"),
+        button: document.querySelector("#registerFormButton"),
+        inputs: document.querySelectorAll("input"),
+        email: document.querySelector("#email"),
+    }
+
+    function formSomeFieldsEmpty() {
+        return Array.from(docElems.inputs).some((input) => input.value === "")
+    }
+
+    function setButtonLoading() {
+        docElems.button.classList.add("disabled")
+        docElems.button.querySelector(".registerFormButtonDefault").classList.add("visually-hidden")
+        docElems.button.querySelector(".registerFormButtonLoading").classList.remove("visually-hidden")
+    }
+
+    function onRegisterFormSubmit(event) {
+        event.preventDefault()
+        setButtonLoading()
+        if (formSomeFieldsEmpty()) return
+        event.target.submit()
+    }
+
+    function validateEmail() {
+        const email = docElems.email.value.trim()
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+        if (!emailRegex.test(email)) {
+            docElems.email.classList.add("is-invalid")
+            return false
+        } else {
+            docElems.email.classList.remove("is-invalid")
+            return true
+        }
+    }
+
+    function onInput(event) {
+        if (event.target.tagName === "INPUT") {
+            docElems.button.disabled = !validateEmail() || formSomeFieldsEmpty()
+        }
+    }
+
+    docElems.form.addEventListener('submit', onRegisterFormSubmit)
+    window.addEventListener('input', onInput)
+</script>
+
+</body>
+</html>
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>GoCMS | Password reset</title>
+    {{.Head}}
+
+    <style>
+        .form-container {
+            max-width: 24rem;
+        }
+    </style>
+</head>
+<body class="d-flex min-vh-100 vw-100 justify-content-center align-items-center text-dark">
+<div class="container">
+    <div class="d-flex flex-column m-auto form-container">
+        <div>
+            <h1>GoCMS</h1>
+            <h2>Admin account password reset</h2>
+        </div>
+        <form action="validate" method="POST" class="mt-5" id="registerForm">
+            <div class="d-flex flex-column gap-4">
+                <div class="form-floating">
+                    <input class="form-control"
+                           id="code"
+                           name="code"
+                           placeholder="Code"
+                           type="text"
+                           value="{{.Code}}"
+                           readonly>
+                    <label for="code">Code</label>
+                </div>
+                <div class="form-floating">
+                    <input class="form-control"
+                           id="email"
+                           name="email"
+                           placeholder="E-mail"
+                           type="email"
+                           value="{{.Email}}"
+                           readonly>
+                    <label for="email">E-mail</label>
+                </div>
+                <div class="form-floating">
+                    <input class="form-control {{ if .PageError.Password }} is-invalid {{ end }}"
+                           id="password"
+                           name="password"
+                           placeholder="Password"
+                           required
+                           type="password">
+                    <label for="password">Password</label>
+                    <div class="invalid-feedback">The password must contain at least 8 characters.</div>
+                </div>
+                <div class="form-floating">
+                    <input class="form-control {{ if .PageError.Password }} is-invalid {{ end }}"
+                           id="confirmPassword"
+                           name="confirmPassword"
+                           placeholder="Password confirmation"
+                           required
+                           type="password"
+                           onblur="validatePasswordMatch()"
+                           oninput="validatePasswordMatch()">
+                    <label for="confirmPassword">Password confirmation</label>
+                    <div class="invalid-feedback">The passwords do not match.</div>
+                </div>
+                <button id="registerFormButton" class="btn btn-primary" disabled type="submit">
+                    <span class="registerFormButtonLoading visually-hidden spinner-border spinner-border-sm"
+                          role="status"></span>
+                    <span class="registerFormButtonDefault">Confirm changes</span>
+                </button>
+            </div>
+        </form>
+        {{ if .Error.Message }}
+        <div class="alert alert-danger my-4" role="alert">
+            {{ .Error.Message }}
+        </div>
+        {{ end }}
+    </div>
+</div>
+
+<script>
+    const docElems = {
+        form: document.querySelector("#registerForm"),
+        button: document.querySelector("#registerFormButton"),
+        inputs: document.querySelectorAll("input"),
+        email: document.querySelector("#email"),
+        password: document.querySelector("#password"),
+        confirmPassword: document.querySelector("#confirmPassword"),
+    }
+
+    function formSomeFieldsEmpty() {
+        return Array.from(docElems.inputs).some((input) => input.value === "")
+    }
+
+    function setButtonLoading() {
+        docElems.button.classList.add("disabled")
+        docElems.button.querySelector(".registerFormButtonDefault").classList.add("visually-hidden")
+        docElems.button.querySelector(".registerFormButtonLoading").classList.remove("visually-hidden")
+    }
+
+    function onRegisterFormSubmit(event) {
+        event.preventDefault()
+        setButtonLoading()
+        if (formSomeFieldsEmpty()) return
+        event.target.submit()
+    }
+
+    function validateEmail() {
+        const email = docElems.email.value.trim()
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+        if (!emailRegex.test(email)) {
+            docElems.email.classList.add("is-invalid")
+            return false
+        } else {
+            docElems.email.classList.remove("is-invalid")
+            return true
+        }
+    }
+
+    function onInput(event) {
+        if (event.target.tagName === "INPUT") {
+            docElems.button.disabled = !validateEmail() || formSomeFieldsEmpty()
+        }
+    }
+
+    function validatePasswordMatch() {
+        if (docElems.password.value !== docElems.confirmPassword.value) {
+            docElems.confirmPassword.classList.add("is-invalid")
+            return false
+        } else {
+            docElems.confirmPassword.classList.remove("is-invalid")
+            return true
+        }
+    }
+
+    docElems.form.addEventListener('submit', onRegisterFormSubmit)
+    window.addEventListener('input', onInput)
+</script>
+
+</body>
+</html>