Add password reset functionality to user dashboard page

handler/user/ResetPassword/ResetPassword.go

@@ -0,0 +1,45 @@
+package userHandlerResetPassword
+
+import (
+	"github.com/fossyy/filekeeper/cache"
+	"github.com/fossyy/filekeeper/db"
+	"github.com/fossyy/filekeeper/session"
+	"github.com/fossyy/filekeeper/types"
+	"github.com/fossyy/filekeeper/utils"
+	"net/http"
+)
+
+func POST(w http.ResponseWriter, r *http.Request) {
+	r.ParseForm()
+	userSession := r.Context().Value("user").(types.User)
+	currentPassword := r.Form.Get("currentPassword")
+	password := r.Form.Get("password")
+	user, err := cache.GetUser(userSession.Email)
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		return
+	}
+
+	hashPassword, err := utils.HashPassword(password)
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		return
+	}
+
+	if !utils.CheckPasswordHash(currentPassword, user.Password) {
+		http.Redirect(w, r, "/user?error=password_not_match", http.StatusSeeOther)
+		return
+	}
+
+	err = db.DB.UpdateUserPassword(user.Email, hashPassword)
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		return
+	}
+
+	session.RemoveAllSessions(userSession.Email)
+	cache.DeleteUser(userSession.Email)
+
+	http.Redirect(w, r, "/signin", http.StatusSeeOther)
+	return
+}

handler/user/user.go

@@ -1,6 +1,7 @@
 package userHandler
 
 import (
+	"github.com/a-h/templ"
 	"github.com/fossyy/filekeeper/types"
 	"net/http"
 
@@ -15,9 +16,30 @@ func init() {
 	log = logger.Logger()
 }
 
+var errorMessages = map[string]string{
+	"password_not_match": "The passwords provided do not match. Please try again.",
+}
+
 func GET(w http.ResponseWriter, r *http.Request) {
+	var component templ.Component
 	userSession := r.Context().Value("user").(types.User)
-	component := userView.Main("Filekeeper - User Page", userSession, session.GetSessions(userSession.Email))
+
+	if err := r.URL.Query().Get("error"); err != "" {
+		message, ok := errorMessages[err]
+		if !ok {
+			message = "Unknown error occurred. Please contact support at bagas@fossy.my.id for assistance."
+		}
+
+		component = userView.Main("Filekeeper - User Page", userSession, session.GetSessions(userSession.Email), types.Message{
+			Code:    0,
+			Message: message,
+		})
+	} else {
+		component = userView.Main("Filekeeper - User Page", userSession, session.GetSessions(userSession.Email), types.Message{
+			Code:    1,
+			Message: "",
+		})
+	}
 	err := component.Render(r.Context(), w)
 	if err != nil {
 		w.WriteHeader(http.StatusInternalServerError)

public/validatePassword.js

@@ -1,6 +1,5 @@
 var isMatch = false
 var isValid = false
-var isSecure = false
 function validatePasswords() {
     var password = document.getElementById('password').value;
     var confirmPassword = document.getElementById('confirmPassword').value;
@@ -8,18 +7,10 @@ function validatePasswords() {
     var matchBadPath = document.getElementById('matchBadPath');
     var lengthGoodPath = document.getElementById('lengthGoodPath');
     var lengthBadPath = document.getElementById('lengthBadPath');
-    var requirementsGoodPath = document.getElementById('requirementsGoodPath');
-    var requirementsBadPath = document.getElementById('requirementsBadPath');
     var matchSvgContainer = document.getElementById('matchSvgContainer');
     var lengthSvgContainer = document.getElementById('lengthSvgContainer');
-    var requirementsSvgContainer = document.getElementById('requirementsSvgContainer');
     var matchStatusText = document.getElementById('matchStatusText');
     var lengthStatusText = document.getElementById('lengthStatusText');
-    var requirementsStatusText = document.getElementById('requirementsStatusText');
-    var symbolRegex = /[!@#$%^&*]/;
-    var uppercaseRegex = /[A-Z]/;
-    var numberRegex = /\d/g;
-
 
     if (password === confirmPassword && password.length > 0 && confirmPassword.length > 0 && password.length === confirmPassword.length) {
         matchSvgContainer.classList.remove('bg-red-200');
@@ -29,7 +20,6 @@ function validatePasswords() {
         matchGoodPath.style.display = 'inline';
         matchBadPath.style.display = 'none';
         matchStatusText.textContent = "Passwords match";
-        console.log("anjay")
         isMatch = true
     } else {
         matchSvgContainer.classList.remove('bg-green-200');
@@ -62,31 +52,7 @@ function validatePasswords() {
         isValid = false
     }
 
-    var symbolCheck = symbolRegex.test(password);
+    if ( isValid && isMatch) {
-    var uppercaseCheck = uppercaseRegex.test(password);
-    var numberCount = (password.match(numberRegex) || []).length;
-
-    if (symbolCheck && uppercaseCheck && numberCount >= 3) {
-        requirementsSvgContainer.classList.remove('bg-red-200');
-        requirementsSvgContainer.classList.add('bg-green-200');
-        requirementsStatusText.classList.remove('text-red-700');
-        requirementsStatusText.classList.add('text-green-700');
-        requirementsGoodPath.style.display = 'inline';
-        requirementsBadPath.style.display = 'none';
-        requirementsStatusText.textContent = "Password meets additional requirements";
-        isSecure = true
-    } else {
-        requirementsSvgContainer.classList.remove('bg-green-200');
-        requirementsSvgContainer.classList.add('bg-red-200');
-        requirementsStatusText.classList.remove('text-green-700');
-        requirementsStatusText.classList.add('text-red-700');
-        requirementsGoodPath.style.display = 'none';
-        requirementsBadPath.style.display = 'inline';
-        requirementsStatusText.textContent = "The password must contain at least one symbol (!@#$%^&*), one uppercase letter, and three numbers";
-        isSecure = false
-    }
-
-    if (isSecure && isValid && isSecure && password === confirmPassword) {
         document.getElementById("submit").disabled = false;
     } else {
         document.getElementById("submit").disabled = true;

routes/routes.go

@@ -17,6 +17,7 @@ import (
 	uploadHandler "github.com/fossyy/filekeeper/handler/upload"
 	"github.com/fossyy/filekeeper/handler/upload/initialisation"
 	userHandler "github.com/fossyy/filekeeper/handler/user"
+	userHandlerResetPassword "github.com/fossyy/filekeeper/handler/user/ResetPassword"
 	userSessionTerminateHandler "github.com/fossyy/filekeeper/handler/user/session/terminate"
 	userHandlerTotpSetup "github.com/fossyy/filekeeper/handler/user/totp"
 	"github.com/fossyy/filekeeper/middleware"
@@ -93,6 +94,10 @@ func SetupRoutes() *http.ServeMux {
 		middleware.Auth(userHandler.GET, w, r)
 	})
 
+	handler.HandleFunc("POST /user/reset-password", func(w http.ResponseWriter, r *http.Request) {
+		middleware.Auth(userHandlerResetPassword.POST, w, r)
+	})
+
 	handler.HandleFunc("DELETE /user/session/terminate/{id}", func(w http.ResponseWriter, r *http.Request) {
 		middleware.Auth(userSessionTerminateHandler.DELETE, w, r)
 	})

utils/utils.go

@@ -72,19 +72,10 @@ func ValidatePassword(password string) bool {
 	}
 
 	var (
-		hasSymbol    bool
 		hasNumber    int
 		hasUppercase bool
 	)
 
-	symbols := []string{"!", "@", "#", "$", "%", "^", "&", "*"}
-
-	for _, symbol := range symbols {
-		if strings.Contains(password, symbol) {
-			hasSymbol = true
-		}
-	}
-
 	for _, char := range password {
 		switch {
 		case unicode.IsNumber(char):
@@ -94,7 +85,7 @@ func ValidatePassword(password string) bool {
 		}
 	}
 
-	return hasSymbol && hasNumber >= 3 && hasUppercase
+	return hasNumber >= 3 && hasUppercase
 }
 
 func ConvertFileSize(byte int64) string {

view/auth/auth.templ

@@ -58,15 +58,6 @@ templ form(err types.Message, title string) {
                             </div>
                             <span id="lengthStatusText" class="font-medium text-sm ml-3 text-red-700"> Password length must be at least 8 characters</span>
                         </li>
-                        <li class="flex items-center py-1">
-                            <div id="requirementsSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
-                                <svg id="requirementsSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path id="requirementsGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                    <path id="requirementsBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                                </svg>
-                            </div>
-                            <span id="requirementsStatusText" class="font-medium text-sm ml-3 text-red-700">The password must contain at least one symbol (!@#$%^&*), one uppercase letter, and three numbers</span>
-                        </li>
                     </ul>
                 </div>
               <button class="bg-slate-200 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full" type="submit" id="submit" name="submit" disabled>

view/forgotPassword/forgotPassword.templ

@@ -84,15 +84,6 @@ templ NewPasswordForm(title string, err types.Message) {
                           </div>
                           <span id="lengthStatusText" class="font-medium text-sm ml-3 text-red-700"> Password length must be at least 8 characters</span>
                       </li>
-                      <li class="flex items-center py-1">
-                          <div id="requirementsSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
-                              <svg id="requirementsSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                  <path id="requirementsGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                  <path id="requirementsBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                              </svg>
-                          </div>
-                          <span id="requirementsStatusText" class="font-medium text-sm ml-3 text-red-700">The password must contain at least one symbol (!@#$%^&*), one uppercase letter, and three numbers</span>
-                      </li>
                   </ul>
               </div>
               <button class="bg-slate-200 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full" type="submit" id="submit" name="submit" disabled>

view/signup/signup.templ

@@ -64,15 +64,6 @@ templ form(err types.Message, title string) {
                             </div>
                             <span id="lengthStatusText" class="font-medium text-sm ml-3 text-red-700"> Password length must be at least 8 characters</span>
                         </li>
-                        <li class="flex items-center py-1">
-                            <div id="requirementsSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
-                                <svg id="requirementsSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path id="requirementsGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                    <path id="requirementsBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                                </svg>
-                            </div>
-                            <span id="requirementsStatusText" class="font-medium text-sm ml-3 text-red-700">The password must contain at least one symbol (!@#$%^&*), one uppercase letter, and three numbers</span>
-                        </li>
                     </ul>
                 </div>
               <button class="bg-slate-200 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full" type="submit" id="submit" name="submit" disabled>

view/user/user.templ

@@ -6,7 +6,7 @@ import (
     "github.com/fossyy/filekeeper/session"
 )
 
-templ content(title string, user types.User, ListSession []*session.SessionInfo) {
+templ content(message types.Message, title string, user types.User, ListSession []*session.SessionInfo) {
     @layout.Base(title){
         @layout.Navbar(user)
         <main class="container mx-auto px-4 py-12 md:px-6 md:py-16 lg:py-10">
@@ -141,39 +141,69 @@ templ content(title string, user types.User, ListSession []*session.SessionInfo)
                     </section>
                     <section>
                         <h2 class="text-2xl font-bold tracking-tight">Reset Password</h2>
+                        switch message.Code {
+                            case 0:
+                                <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 text-center" role="alert">
+                                    {message.Message}
+                                </div>
+                        }
+                        <form method="POST" action="/user/reset-password">
                             <div class="mt-6 grid gap-6">
                                 <div class="grid gap-2">
                                     <label
                                         class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                    for="name">
+                                        for="currentPassword">
                                         Current password
                                     </label>
                                     <input
                                         class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                                    type="password" id="name" placeholder="Current password" />
+                                        type="password" id="currentPassword" name="currentPassword" placeholder="Current password" />
                                 </div>
                                 <div class="grid gap-2">
                                     <label
                                         class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                    for="name">
+                                        for="password">
                                         New password
                                     </label>
                                     <input
                                         class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                                    type="password" id="name" placeholder="New password" />
+                                        type="password" id="password" name="password" placeholder="New password" />
                                 </div>
                                 <div class="grid gap-2">
                                     <label
                                         class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                    for="name">
+                                        for="confirmPassword">
                                         New password confirmation
                                     </label>
                                     <input
                                         class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                                    type="password" id="name" placeholder="New password confirmation" />
+                                        type="password" id="confirmPassword" placeholder="New password confirmation" />
                                 </div>
-                            <button type="button" class="focus:outline-none text-white bg-red-500 hover:bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2">Update password</button>
+                                <div id="validationBox" class="justify-start mt-3 ml-4 p-1 hidden">
+                                    <ul>
+                                        <li class="flex items-center py-1">
+                                            <div id="matchSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
+                                                <svg id="matchSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                    <path id="matchGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                                    <path id="matchBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                                </svg>
                                             </div>
+                                            <span id="matchStatusText" class="font-medium text-sm ml-3 text-red-700"> New Passwords do not match</span>
+                                        </li>
+                                        <li class="flex items-center py-1">
+                                            <div id="lengthSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
+                                                <svg id="lengthSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                    <path id="lengthGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                                    <path id="lengthBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                                </svg>
+                                            </div>
+                                            <span id="lengthStatusText" class="font-medium text-sm ml-3 text-red-700"> New Password length must be at least 8 characters</span>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <button type="submit" id="submit" class="focus:outline-none disabled:bg-red-100 text-white bg-red-500 hover:bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" disabled>Update password</button>
+                            </div>
+                        </form>
                     </section>
                     <div class="grid gap-1">
                         <div class="flex items-center justify-between">
@@ -258,6 +288,17 @@ templ content(title string, user types.User, ListSession []*session.SessionInfo)
                 </div>
             </div>
         </main>
+        <script type="text/javascript">
+            document.getElementById('currentPassword').addEventListener('input', function() {
+                var validationBox = document.getElementById('validationBox');
+                if (this.value.length > 0) {
+                    validationBox.classList.remove('hidden');
+                } else {
+                    validationBox.classList.add('hidden');
+                }
+            });
+          </script>
+        <script src="/public/validatePassword.js" />
         @layout.Footer()
     }
 }
@@ -289,6 +330,6 @@ templ SessionTable(ListSession []*session.SessionInfo){
     </tbody>
 }
 
-templ Main(title string, user types.User, ListSession []*session.SessionInfo) {
+templ Main(title string, user types.User, ListSession []*session.SessionInfo, message types.Message) {
-	@content(title, user, ListSession)
+	@content(message, title, user, ListSession)
 }