27 Commits

Author SHA1 Message Date
812a40492f password expiry email 2026-04-16 14:23:07 -04:00
093b33db0d add more logging into the password expiry checks 2026-04-16 09:12:46 -04:00
8633309968 send password expired emails every 12 hours from the program start 2026-04-15 09:43:38 -04:00
093b258b84 expried password email template 2026-04-13 10:24:12 -04:00
5a80d61d9b remove old comment 2026-04-13 09:40:24 -04:00
6a985c1a84 send simple test email to my email on server startup 2026-04-13 09:32:22 -04:00
590ea73a92 send all emails as HTML 2026-04-13 09:22:57 -04:00
8de145adbc add email config to config file 2026-04-13 09:19:35 -04:00
8f0291bb8a make small changes to the email package 2026-04-13 09:13:49 -04:00
cde41b82b2 base URL param for config 2026-04-09 16:45:02 -04:00
37c6978d1b move all files to images folder 2026-04-08 10:18:07 -04:00
9389df28e4 add show password buttons to all password inputs 2026-04-08 10:17:01 -04:00
b94bc612c3 implement logic for a show password button 2026-04-08 10:14:33 -04:00
25e61c553f hide the warnings because I dont like the UI 2026-04-07 12:36:17 -04:00
a31d21456c warnings box 2026-04-06 18:56:58 -04:00
a1f58e817e build sample error box 2026-04-06 18:49:01 -04:00
387bd2d0ae Update README.md 2026-04-06 18:41:30 -04:00
0ab1e95690 blur background when changing password 2026-04-06 18:15:07 -04:00
d7727e9b0d remove block 2026-04-06 16:14:43 -04:00
72dfaf5da1 reset password boxes on close 2026-04-06 16:14:11 -04:00
5e0771d482 add a couple stylistic changes to the password dialouge 2026-04-06 16:02:34 -04:00
b9ed00c127 password strength meter 2026-04-06 15:48:27 -04:00
8b74cab34e move password changing to seperate file 2026-04-06 11:50:40 -04:00
dbb91fac62 add in simple password progress bar 2026-04-06 11:48:31 -04:00
8cb1fff36b password strength function 2026-04-06 11:46:49 -04:00
d0524f901c bug where a users profile photo would not display if the user had not
logged in
2026-04-06 09:30:15 -04:00
384ef90ea8 move errors to a different file 2026-04-05 11:37:00 -04:00
25 changed files with 668 additions and 181 deletions

View File

@@ -6,20 +6,20 @@ A simple, lightweight web application for managing user profile photos in a Free
* **LDAP Authentication**: Secure login with existing FreeIPA credentials.
* **Profile Management**: View user details (Display Name, Email).
* **Photo Upload**: Users can upload and update their profile picture (`jpegPhoto` attribute).
* **Change Password**: Users can change there password once logged in
* **Session Management**: Secure, cookie-based sessions with CSRF protection.
* **Customizable**: Configurable styling (logo, favicon) and LDAP settings.
## Prerequisites
* **Go 1.20+** installed on your machine.
* Access to an **FreeIPA Server**.
* A Service Account (Bind DN) with permission to search users and modify the `jpegPhoto` attribute.
* **Go 1.26+** installed on your machine.
* Access to a **FreeIPA Server**.
* A Service Account with permission to search and modify the `jpegPhoto` attribute.
## Setup & Installation
1. **Clone the Repository**
```bash
git clone https://git.astraltech.xyz/gawells/Self-Service-Dashboard
git clone https://git.astraltech.xyz/gawells/Self-Service-Dashboard.git
cd Self-Service-Dashboard
```
@@ -30,7 +30,10 @@ A simple, lightweight web application for managing user profile photos in a Free
```
5. **Edit config**
put in your config values for ldap, and whatevery styling guidelines you would want to use
Edit the config file
```bash
nvim data/config.json
```
4. **Install Dependencies**
```bash
@@ -41,15 +44,7 @@ A simple, lightweight web application for managing user profile photos in a Free
```bash
go run ./src/main/
```
The application will be available at `http://<host>:<port>`.
## Directory Structure
* `src/`: Go source code (`main.go`, `ldap.go`, `session.go`, etc.).
* `src/pages/`: HTML templates for login and profile pages.
* `static/`: CSS files, images, and other static assets.
* `data/`: Configuration files and local assets (logos).
* `avatars/`: Stores cached user profile photos.
The application will be available at `http://localhost:<port>`.
## License

View File

@@ -12,6 +12,14 @@
"logo_path": "./data/astraltech_logo_large.png"
},
"server_config": {
"port": 8080
"port": 8080,
"base_url": "https://profile.example.com"
},
"email_config": {
"username": "noreply",
"email": "noreply@example.com",
"password": "",
"smtp_url": "mx.example.com",
"smtp_port": 587
}
}

View File

@@ -0,0 +1,112 @@
<!doctype html>
<html>
<head>
<!-- Tell iOS we support light mode -->
<meta name="color-scheme" content="light" />
<meta name="supported-color-schemes" content="light" />
</head>
<body
style="margin: 0; padding: 0; background-color: #f7fff7; color: #000000"
>
<table
width="100%"
cellpadding="0"
cellspacing="0"
border="0"
style="background-color: #f7fff7"
>
<tr>
<td align="center">
<!-- Outer container -->
<table
width="600"
cellpadding="0"
cellspacing="0"
border="0"
style="
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
margin-top: 25px;
"
>
<tr>
<td
style="
padding: 30px;
font-family: Arial, sans-serif;
color: #000000;
"
>
<p style="margin: 0 0 15px 0">
Hi <strong>{{.Username}}</strong>,
</p>
<p style="margin: 0 0 15px 0">
Your account password has expired and needs
to be updated to continue accessing your
account.
</p>
<p style="margin: 0 0 15px 0">
<strong>Expiration Date:</strong><br />
{{.ExpiredAt}}
</p>
<p style="margin: 0 0 20px 0">
For security reasons, passwords must be
updated periodically. Please reset your
password as soon as possible.
</p>
<!-- Button -->
<table
align="center"
cellpadding="0"
cellspacing="0"
border="0"
>
<tr>
<td
bgcolor="#1a535c"
style="border-radius: 6px"
>
<a
href="{{.ResetURL}}"
style="
display: inline-block;
padding: 12px 20px;
font-weight: bold;
font-family:
Arial, sans-serif;
color: #ffffff;
text-decoration: none;
background-color: #1a535c;
border-radius: 6px;
-webkit-text-fill-color: #ffffff;
"
>
Reset Password
</a>
</td>
</tr>
</table>
<p style="margin: 20px 0 15px 0">
If you did not expect this, please contact
your system administrator.
</p>
<p style="margin: 0">
Thanks,<br />
<strong>{{.ServiceName}}</strong>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

View File

@@ -33,7 +33,7 @@ var (
)
func ReadBlankPhoto() {
blank, err := helpers.ReadFile("static/blank_profile.jpg")
blank, err := helpers.ReadFile("static/images/blank_profile.jpg")
if err != nil {
logging.Fatal("Could not load blank profile image")
}
@@ -98,7 +98,11 @@ func UploadPhotoHandler(w http.ResponseWriter, r *http.Request) {
return
}
userDN := fmt.Sprintf("uid=%s,cn=users,cn=accounts,%s", sessionData.UserID, BaseDN)
LDAPServer.ModifyAttribute(ServiceUserBindDN, ServiceUserPassword, userDN, "jpegphoto", []string{string(data)})
err = LDAPServer.ModifyAttribute(ServiceUserBindDN, ServiceUserPassword, userDN, "jpegphoto", []string{string(data)})
if err != nil {
logging.Error(err.Error())
return
}
CreateUserPhoto(sessionData.UserID, data)
}
@@ -112,17 +116,25 @@ func AvatarHandler(w http.ResponseWriter, r *http.Request) {
filePath := fmt.Sprintf("./avatars/%s.jpeg", username)
cleaned := filepath.Clean(filePath)
value, err := helpers.ReadFile(cleaned)
if err == nil {
fileExist, err := helpers.DoesFileExist(cleaned)
if err != nil {
w.Write(blankPhotoData)
logging.Error(err.Error())
return
}
photoCreatedMutex.Lock()
if time.Since(photoCreatedTimestamp[username]) <= 5*time.Minute {
if fileExist && time.Since(photoCreatedTimestamp[username]) <= 5*time.Minute {
photoCreatedMutex.Unlock()
w.Write(value)
val, err := helpers.ReadFile(cleaned)
if err != nil {
logging.Error(err.Error())
w.Write(blankPhotoData)
return
}
w.Write(val)
return
}
photoCreatedMutex.Unlock()
}
userSearch, err := LDAPServer.SerchServer(
ServiceUserBindDN, ServiceUserPassword,
@@ -130,10 +142,16 @@ func AvatarHandler(w http.ResponseWriter, r *http.Request) {
fmt.Sprintf("(&(objectClass=inetOrgPerson)(uid=%s))", ldap.LDAPEscapeFilter(username)),
[]string{"jpegphoto"},
)
if err == nil || userSearch.EntryCount() == 0 {
if err != nil {
logging.Error(err.Error())
w.Write(blankPhotoData)
return
}
if userSearch.EntryCount() == 0 {
w.Write(blankPhotoData)
return
}
entry := userSearch.GetEntry(0)
bytes := entry.GetRawAttributeValue("jpegphoto")
if len(bytes) == 0 {
@@ -142,5 +160,6 @@ func AvatarHandler(w http.ResponseWriter, r *http.Request) {
} else {
w.Write(bytes)
CreateUserPhoto(username, bytes)
return
}
}

View File

@@ -16,35 +16,38 @@ type EmailAccount struct {
}
type EmailAccountData struct {
username string
password string
email string
Username string
Password string
Email string
}
func createEmailAccount(accountData EmailAccountData, smtpHost string, smtpPort int) EmailAccount {
logging.Debugf("Creating Email Account: \n\tUsername: %s\n\tEmail: %s\n\tSMTP Host: %s:%d", accountData.username, accountData.email, smtpHost, smtpPort)
func CreateEmailAccount(accountData EmailAccountData, smtpHost string, smtpPort int) EmailAccount {
logging.Debugf("Creating Email Account: \n\tUsername: %s\n\tEmail: %s\n\tSMTP Host: %s:%d", accountData.Username, accountData.Email, smtpHost, smtpPort)
account := EmailAccount{
email: accountData.email,
email: accountData.Email,
smtpHost: smtpHost,
smtpPort: strconv.Itoa(smtpPort),
}
account.auth = smtp.PlainAuth("", accountData.username, accountData.password, smtpHost)
account.auth = smtp.PlainAuth("", accountData.Username, accountData.Password, smtpHost)
return account
}
func sendEmail(account EmailAccount, toEmail []string, subject string, message string) {
logging.Debugf("Sending an email from %s to %s", account.email, strings.Join(toEmail, ""))
func (account *EmailAccount) SendEmail(toEmails []string, subject string, message string) {
logging.Debugf("Sending an email from %s to %s", account.email, strings.Join(toEmails, ", "))
ToEmailList := strings.Join(toEmail, "")
ToEmailList := strings.Join(toEmails, ", ")
mime := "MIME-version: 1.0;\r\nContent-Type: text/html; charset=\"UTF-8\";\r\n\r\n"
messageData := []byte(
"From: " + account.email + "\r\n" +
"To: " + ToEmailList + "\r\n" +
"Subject: " + subject + "\r\n" +
mime +
"\r\n" +
message,
)
err := smtp.SendMail(account.smtpHost+":"+account.smtpPort, account.auth, account.email, toEmail, messageData)
err := smtp.SendMail(account.smtpHost+":"+account.smtpPort, account.auth, account.email, toEmails, messageData)
if err != nil {
logging.Error("Failed to send email")
logging.Error(err.Error())

View File

@@ -0,0 +1,28 @@
package email
import (
"bytes"
"path/filepath"
"text/template"
)
func RenderTemplate(path string, data any, funcMap template.FuncMap) (string, error) {
tmpl := template.New("")
if funcMap != nil {
tmpl = tmpl.Funcs(funcMap)
}
tmpl, err := tmpl.ParseFiles(path)
if err != nil {
return "", err
}
var buf bytes.Buffer
err = tmpl.ExecuteTemplate(&buf, filepath.Base(path), data)
if err != nil {
return "", err
}
return buf.String(), nil
}

View File

@@ -52,6 +52,17 @@ func CreateFile(path string) (*os.File, error) {
return file, nil
}
func DoesFileExist(path string) (bool, error) {
_, err := os.Stat(path)
if err == nil {
return true, nil
}
if os.IsNotExist(err) {
return false, nil
}
return false, err
}
func HandleFunc(path string, handler func(http.ResponseWriter, *http.Request)) {
logging.Infof("Handling %s", path)
http.HandleFunc(path, handler)

View File

@@ -23,12 +23,22 @@ type StyleConfig struct {
type WebserverConfig struct {
Port int `json:"port"`
BaseURL string `json:"base_url"`
}
type EmailConfig struct {
Username string `json:"username"`
Email string `json:"email"`
Password string `json:"password"`
SMTPURL string `json:"smtp_url"`
SMTPPort int `json:"smtp_port"`
}
type ServerConfig struct {
LDAPConfig LDAPConfig `json:"ldap_config"`
StyleConfig StyleConfig `json:"style_config"`
WebserverConfig WebserverConfig `json:"server_config"`
EmailConfig EmailConfig `json:"email_config"`
}
func loadServerConfig(path string) (*ServerConfig, error) {

View File

@@ -9,6 +9,7 @@ import (
"sync"
"astraltech.xyz/accountmanager/src/components"
"astraltech.xyz/accountmanager/src/email"
"astraltech.xyz/accountmanager/src/helpers"
"astraltech.xyz/accountmanager/src/ldap"
"astraltech.xyz/accountmanager/src/logging"
@@ -19,6 +20,7 @@ var (
ldapServer ldap.LDAPServer
serverConfig *ServerConfig
sessionManager *session.SessionManager
noReplyEmail email.EmailAccount
)
type UserData struct {
@@ -38,6 +40,9 @@ func authenticateUser(username, password string) (*UserData, error) {
connected, err := ldapServer.AuthenticateUser(userDN, password)
if err != nil {
if strings.Contains(err.Error(), "Password is expired") {
return nil, fmt.Errorf("Password expired for %s\n", username)
}
return nil, err
}
if connected == false {
@@ -85,7 +90,6 @@ func loginHandler(w http.ResponseWriter, r *http.Request) {
return
}
// 2. Logic for processing the form
if r.Method == http.MethodPost {
username := r.FormValue("username")
if strings.Contains(username, "/") {
@@ -250,6 +254,12 @@ func main() {
log.Fatal("Could not load server config")
}
noReplyEmail = email.CreateEmailAccount(email.EmailAccountData{
Username: serverConfig.EmailConfig.Username,
Password: serverConfig.EmailConfig.Password,
Email: serverConfig.EmailConfig.Email,
}, serverConfig.EmailConfig.SMTPURL, serverConfig.EmailConfig.SMTPPort)
ldapServer = ldap.LDAPServer{
URL: serverConfig.LDAPConfig.LDAPURL,
StartTLS: serverConfig.LDAPConfig.Security == "tls",
@@ -269,6 +279,8 @@ func main() {
logging.Fatal("Failed to connect to LDAP server")
}
InitPasswordExpiry()
helpers.HandleFunc("/favicon.ico", faviconHandler)
helpers.HandleFunc("/logo", logoHandler)

View File

@@ -0,0 +1,57 @@
package main
import (
"fmt"
"time"
"astraltech.xyz/accountmanager/src/email"
"astraltech.xyz/accountmanager/src/logging"
"astraltech.xyz/accountmanager/src/worker"
)
func InitPasswordExpiry() {
go func() {
CheckPasswordExpriy()
}()
worker.CreateWorker(time.Hour*12, CheckPasswordExpriy)
}
func CheckPasswordExpriy() {
logging.Infof("Starting password expiry check")
now := time.Now().UTC()
formatted := now.Format("20060102150405Z")
search, err := ldapServer.SerchServer(serverConfig.LDAPConfig.BindDN, serverConfig.LDAPConfig.BindPassword, serverConfig.LDAPConfig.BaseDN, fmt.Sprintf("(&(objectclass=person)(krbPasswordExpiration<=%s))", formatted), []string{"cn", "mail", "krbPasswordExpiration"})
if err != nil {
logging.Warn(err.Error())
}
logging.Infof("%d users with expired passwords", search.EntryCount())
for i := range search.EntryCount() {
emailAddr := search.GetEntry(i).GetAttributeValue("mail")
if len(emailAddr) <= 0 {
continue
}
t, err := time.Parse("20060102150405Z", search.GetEntry(i).GetAttributeValue("krbPasswordExpiration"))
if err != nil {
panic(err)
}
formatted := t.Format("January 2, 2006 at 3:04 PM MST")
data := map[string]any{
"Username": search.GetEntry(i).GetAttributeValue("cn"),
"ExpiredAt": formatted,
"ResetURL": fmt.Sprintf("%s", serverConfig.WebserverConfig.BaseURL),
"ServiceName": "Astral Tech",
}
email_template, err := email.RenderTemplate("./data/email-templates/expired-password.html", data, nil)
if err != nil {
logging.Errorf("Failed to load email template: %s", err.Error())
}
noReplyEmail.SendEmail([]string{emailAddr}, "Password expired", email_template)
}
}

View File

@@ -28,9 +28,16 @@
<div>
<label class="input_label">Password</label><br />
<div class="password_box">
<input type="password" name="password" placeholder="" required />
<button type="button" class="show_password_toggle closed"></button>
</div>
</div>
<button type="submit">Login</button>
</form>
<script src="/static/error/error.js" type="text/javascript"></script>
<script
src="/static/javascript/show_password.js"
type="text/javascript"
></script>

View File

@@ -9,14 +9,24 @@
<link rel="stylesheet" href="static/card.css" />
<link rel="stylesheet" href="static/error/error.css" />
<link rel="stylesheet" href="static/profile_page.css" />
<link rel="stylesheet" href="static/progress_bar.css" />
<div id="popup_background" class="blocked hidden"></div>
<div id="change_password_dialogue" class="hidden card static_center">
Change Password
<div id="change_password_dialogue" class="card static_center hidden">
<div class="dialouge_title">Change Password</div>
<button id="close_password_dialogue">X</button>
<hr
style="
border: 0;
border-top: 1px solid var(--border-subtle);
margin: 20px 0;
margin-bottom: 0px;
margin-top: 0px;
"
/>
<div id="password_error" class="error hidden">
<div id="password_text"></div>
<button id="password_error_close_button" class="close_error_button">
@@ -26,6 +36,7 @@
<div>
<label class="input_label">Current password</label><br />
<div class="password_box">
<input
type="password"
id="current_password"
@@ -33,10 +44,13 @@
placeholder=""
required
/>
<button type="button" class="show_password_toggle closed"></button>
</div>
</div>
<div>
<label class="input_label">New password</label><br />
<div class="password_box">
<input
type="password"
id="new_password"
@@ -44,10 +58,13 @@
placeholder=""
required
/>
<button type="button" class="show_password_toggle closed"></button>
</div>
</div>
<div>
<label class="input_label">New password (repeat)</label><br />
<div class="password_box">
<input
type="password"
id="new_password_repeat"
@@ -55,7 +72,31 @@
placeholder=""
required
/>
<button type="button" class="show_password_toggle closed"></button>
</div>
</div>
<div>
<label class="input_label" id="strengh-label">Strength: Weak</label
><br />
<div class="progress-bar">
<div
class="progress-bar-progress"
id="password-progress"
style="width: 0%"
></div>
</div>
</div>
<!--<div id="password_errors">
<div class="password_error">Error 1</div>
<div class="password_error">Error 2</div>
</div>
<div id="password_warnings">
<div class="password_error">Error 1</div>
<div class="password_error">Error 2</div>
</div>-->
<button id="final_change_password_button">Change Password</button>
</div>
@@ -80,7 +121,7 @@
<button id="edit_picture_button">
<img
src="/static/crayon_icon.png"
src="/static/images/crayon_icon.png"
id="edit_picture_image"
/>
</button>
@@ -136,96 +177,6 @@
});
</script>
<script type="text/javascript">
const popup_botton = document.getElementById("change_password_button");
popup_botton.addEventListener("click", () => {
document.getElementById("popup_background").classList.remove("hidden");
document
.getElementById("change_password_dialogue")
.classList.remove("hidden");
});
</script>
<script type="text/javascript">
const changePasswordButton = document.getElementById(
"final_change_password_button",
);
function displayError(errorText) {
document.getElementById("password_error").classList.remove("hidden");
document.getElementById("password_text").innerText =
"⚠️ " + errorText + ".";
return;
}
changePasswordButton.addEventListener("click", () => {
if (document.getElementById("current_password").value === "") {
displayError("Please enter current password");
return;
}
if (document.getElementById("new_password").value === "") {
displayError("No value for new password");
return;
}
if (document.getElementById("new_password_repeat").value === "") {
displayError("Please repeat new password");
return;
}
if (
document.getElementById("new_password").value !==
document.getElementById("new_password_repeat").value
) {
displayError("New password and new password repeat do not match");
return;
}
const formData = new FormData();
formData.append(
"csrf_token",
document.getElementById("csrf_token_storage").value,
);
formData.append(
"old_password",
document.getElementById("current_password").value,
);
formData.append(
"new_password",
document.getElementById("new_password").value,
);
formData.append(
"new_password_repeat",
document.getElementById("new_password_repeat").value,
);
fetch("/change-password", {
method: "POST",
body: formData,
})
.then(async (res) => {
const data = await res.json();
if (!res.ok) {
throw new Error(data.error || "Request failed");
}
return data;
})
.then((data) => {
document
.getElementById("change_password_dialogue")
.classList.add("hidden");
document
.getElementById("popup_background")
.classList.add("hidden");
})
.catch((err) => {
displayError(err.message);
});
});
</script>
<script type="text/javascript">
var currentPreviewURL = null;
@@ -265,15 +216,17 @@
});
</script>
<script type="text/javascript">
document
.getElementById("close_password_dialogue")
.addEventListener("click", () => {
document
.getElementById("change_password_dialogue")
.classList.add("hidden");
document.getElementById("popup_background").classList.add("hidden");
});
</script>
<script src="/static/error/error.js" type="text/javascript"></script>
<script
src="/static/javascript/password_strength.js"
type="text/javascript"
></script>
<script
src="/static/javascript/handle_password_change.js"
type="text/javascript"
></script>
<script
src="/static/javascript/show_password.js"
type="text/javascript"
></script>

View File

@@ -0,0 +1,7 @@
package session
import "errors"
var ErrSessionNotFound = errors.New("session not found")
var ErrSessionAlreadyExists = errors.New("session already exists")
var ErrSessionExpired = errors.New("session expired")

View File

@@ -1,7 +1,6 @@
package session
import (
"errors"
"sync"
"time"
@@ -9,10 +8,6 @@ import (
"astraltech.xyz/accountmanager/src/worker"
)
var ErrSessionNotFound = errors.New("session not found")
var ErrSessionAlreadyExists = errors.New("session already exists")
var ErrSessionExpired = errors.New("session expired")
type MemoryStore struct {
sessions map[string]*SessionData
lock sync.RWMutex

View File

@@ -1,10 +1,5 @@
.card {
background: rgba(
255,
255,
255,
1
); /* Semi-transparent white for light theme */
background: rgba(255, 255, 255, 1);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 2.5rem;

View File

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1,106 @@
document
.getElementById("close_password_dialogue")
.addEventListener("click", () => {
document.getElementById("change_password_dialogue").classList.add("hidden");
document.getElementById("popup_background").classList.add("hidden");
});
const popup_botton = document.getElementById("change_password_button");
const currentPasswordButton = document.getElementById("current_password"),
newPasswordButton = document.getElementById("new_password"),
newPasswordRepeatButton = document.getElementById("new_password_repeat");
const strengh_label = document.getElementById("strengh-label");
const password_progress = document.getElementById("password-progress");
popup_botton.addEventListener("click", () => {
document.getElementById("popup_background").classList.remove("hidden");
document
.getElementById("change_password_dialogue")
.classList.remove("hidden");
currentPasswordButton.value = "";
newPasswordButton.value = "";
newPasswordRepeatButton.value = "";
strengh_label.innerText = "Strength: Weak";
password_progress.style.width = "0%";
});
const changePasswordButton = document.getElementById(
"final_change_password_button",
);
function displayError(errorText) {
document.getElementById("password_error").classList.remove("hidden");
document.getElementById("password_text").innerText = "⚠️ " + errorText + ".";
return;
}
changePasswordButton.addEventListener("click", () => {
if (currentPasswordButton.value === "") {
displayError("Please enter current password");
return;
}
if (newPasswordButton.value === "") {
displayError("No value for new password");
return;
}
if (newPasswordRepeatButton.value === "") {
displayError("Please repeat new password");
return;
}
if (newPasswordButton.value !== newPasswordRepeatButton.value) {
displayError("New passwords do not match");
return;
}
const formData = new FormData();
formData.append(
"csrf_token",
document.getElementById("csrf_token_storage").value,
);
formData.append("old_password", currentPasswordButton.value);
formData.append("new_password", newPasswordButton.value);
formData.append("new_password_repeat", newPasswordRepeatButton.value);
fetch("/change-password", {
method: "POST",
body: formData,
})
.then(async (res) => {
const data = await res.json();
if (!res.ok) {
throw new Error(data.error || "Request failed");
}
return data;
})
.then((data) => {
document
.getElementById("change_password_dialogue")
.classList.add("hidden");
document.getElementById("popup_background").classList.add("hidden");
})
.catch((err) => {
displayError(err.message);
});
});
document.getElementById("new_password").addEventListener("input", () => {
score = EvaluatePassword(document.getElementById("new_password").value).score;
password_progress.style.width = score + "%";
if (score <= 40) {
strengh_label.innerText = "Strength: Weak";
password_progress.style.backgroundColor = "var(--password-strength-weak)";
} else if (score > 40 && score <= 70) {
strengh_label.innerText = "Strength: Medium";
password_progress.style.backgroundColor = "var(--password-strength-medium)";
} else if (score > 40 && score >= 70) {
strengh_label.innerText = "Strength: Strong";
password_progress.style.backgroundColor = "var(--password-strength-strong)";
}
});

View File

@@ -0,0 +1,51 @@
// build in evaluate password function
// Errors: reasons why the FreeIPA server would reject the password
// Suggestions: reasons the password should be made stronger
// You can change this code to change how complexity is rated
// Return values
// Score: 0-100
// Errors: A list of errors that would cause the server to reject the password
// Suggestions: A list of suggestions to make the password stronger
function EvaluatePassword(password) {
let score = 0;
let errors = [];
let suggestions = [];
const hasUpper = /[A-Z]/.test(password);
const hasLower = /[a-z]/.test(password);
const hasNumber = /[0-9]/.test(password);
const hasSpecial = /[^A-Za-z0-9]/.test(password);
const isLongEnough = password.length >= 8;
if (!isLongEnough) {
errors.push("Password must be at least 8 characters long.");
}
score += Math.min(password.length * 3, 60);
if (hasUpper) score += 10;
if (hasLower) score += 10;
if (hasNumber) score += 10;
if (hasSpecial) score += 10;
if (score < 100) {
if (password.length < 20) {
suggestions.push(
`Add ${20 - password.length} more characters to reach maximum length points.`,
);
}
if (!hasUpper) suggestions.push("Add an uppercase letter.");
if (!hasLower) suggestions.push("Add a lowercase letter.");
if (!hasNumber) suggestions.push("Add a number.");
if (!hasSpecial)
suggestions.push("Add a special character (e.g., !, @, #).");
if (score > 70 && score < 100) {
suggestions.push(
"Pro-tip: Use a full sentence (passphrase) to make it easier to remember and harder to crack.",
);
}
}
return {
score: Math.min(score, 100),
errors: errors,
suggestions: suggestions,
};
}

View File

@@ -0,0 +1,22 @@
const showPasswordButtons = document.getElementsByClassName(
"show_password_toggle",
);
for (const button of showPasswordButtons) {
button.addEventListener("click", function () {
const input = this.parentElement.querySelector(
"input[type='password'], input[type='text']",
);
if (!input) return;
const isHidden = input.type === "password";
input.type = isHidden ? "text" : "password";
if (isHidden) {
this.classList.add("open");
this.classList.remove("closed");
} else {
this.classList.remove("open");
this.classList.add("closed");
}
});
}

View File

@@ -128,7 +128,31 @@
}
#close_password_dialogue {
width: fit-content;
display: inline-block;
aspect-ratio: 1 / 1;
position: absolute;
right: 2.5rem;
padding: 0px;
margin: 0px;
width: 30px;
}
#password_errors {
background-color: var(--error-red);
border-radius: 8px;
padding: 20px;
border-color: var(--error-border-red);
border-width: 2px;
border-style: solid;
color: var(--text-main);
}
#password_warnings {
background-color: var(--warning-yellow);
border-radius: 8px;
padding: 20px;
border-color: var(--warning-border-yellow);
border-width: 2px;
border-style: solid;
color: var(--text-main);
}

16
static/progress_bar.css Normal file
View File

@@ -0,0 +1,16 @@
:root {
--progress-top: #becbd8;
}
.progress-bar {
width: 100%;
background-color: var(--bg-input);
height: 20px;
border-radius: 10px;
}
.progress-bar-progress {
background-color: var(--progress-top);
height: 20px;
border-radius: 10px;
}

View File

@@ -16,6 +16,13 @@
--error-red: #ef4444; /* Professional Red */
--error-border-red: #e22d2d;
--warning-yellow: #fef08a;
--warning-border-yellow: #fde047;
--password-strength-weak: var(--error-red);
--password-strength-medium: var(--warning-border-yellow);
--password-strength-strong: #43ef6b;
font-family: "Inter", sans-serif;
-webkit-font-smoothing: antialiased;
}
@@ -39,6 +46,10 @@ button:hover {
background-color: var(--primary-hover);
}
button:focus {
outline: 2px solid var(--primary-accent);
}
input {
padding: 12px;
background-color: var(--bg-input);
@@ -47,6 +58,10 @@ input {
border-radius: 6px;
}
input:focus {
outline: 2px solid var(--primary-accent);
}
input::placeholder {
color: var(--text-muted);
}
@@ -70,6 +85,47 @@ input::placeholder {
height: 100%;
z-index: 9999; /* higher = on top */
background-color: black;
opacity: 10%;
backdrop-filter: blur(4px);
background-color: rgba(0, 0, 0, 0.3);
pointer-events: all;
}
.dialouge_title {
font-size: 20px;
margin-bottom: 0px;
color: var(--text-main) !important;
}
.password_box {
position: relative;
display: inline-block;
}
.show_password_toggle {
width: 10px;
height: 10px;
position: absolute;
right: 5px;
bottom: 50%;
transform: translateY(50%);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(0, 0, 0, 0);
}
.show_password_toggle.closed {
background-image: url("/static/images/closed_eye.png");
}
.show_password_toggle.open {
background-image: url("/static/images/filled_eye.png");
}
.show_password_toggle:hover {
background-color: rgba(0, 0, 0, 0);
}
.show_password_toggle:focus {
outline: none !important;
}