bagas/filekeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add password reset functionality to user dashboard page

Browse Source
This commit is contained in:
Bagas Aulia Rezki
2024-07-08 23:08:45 +07:00
parent f01407990f
commit 97a9e72d7b
9 changed files with 151 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
handler/user/ResetPassword/ResetPassword.go Normal file
View File

@ -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
}

24
handler/user/user.go
View File

@ -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)

36
public/validatePassword.js
View File

@ -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);
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) {
if ( isValid && isMatch) {
document.getElementById("submit").disabled = false;
} else {
document.getElementById("submit").disabled = true;

5
routes/routes.go
View File

@ -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)
})

11
utils/utils.go
View File

@ -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 {

9
view/auth/auth.templ
View File

@ -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>

9
view/forgotPassword/forgotPassword.templ
View File

@ -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>

9
view/signup/signup.templ
View File

@ -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>

111
view/user/user.templ
View File

@ -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>
<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">
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" />
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="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="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="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="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="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="confirmPassword" placeholder="New password confirmation" />
</div>
<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>
<div class="grid gap-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="name">
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" />
</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">
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" />
</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>
</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) {
@content(title, user, ListSession)
templ Main(title string, user types.User, ListSession []*session.SessionInfo, message types.Message) {
@content(message, title, user, ListSession)
}