Compare commits
17 Commits
0ab1e95690
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 812a40492f | |||
| 093b33db0d | |||
| 8633309968 | |||
| 093b258b84 | |||
| 5a80d61d9b | |||
| 6a985c1a84 | |||
| 590ea73a92 | |||
| 8de145adbc | |||
| 8f0291bb8a | |||
| cde41b82b2 | |||
| 37c6978d1b | |||
| 9389df28e4 | |||
| b94bc612c3 | |||
| 25e61c553f | |||
| a31d21456c | |||
| a1f58e817e | |||
| 387bd2d0ae |
25
README.md
25
README.md
@@ -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.
|
* **LDAP Authentication**: Secure login with existing FreeIPA credentials.
|
||||||
* **Profile Management**: View user details (Display Name, Email).
|
* **Profile Management**: View user details (Display Name, Email).
|
||||||
* **Photo Upload**: Users can upload and update their profile picture (`jpegPhoto` attribute).
|
* **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.
|
* **Session Management**: Secure, cookie-based sessions with CSRF protection.
|
||||||
* **Customizable**: Configurable styling (logo, favicon) and LDAP settings.
|
* **Customizable**: Configurable styling (logo, favicon) and LDAP settings.
|
||||||
|
|
||||||
## Prerequisites
|
## Prerequisites
|
||||||
|
* **Go 1.26+** installed on your machine.
|
||||||
* **Go 1.20+** installed on your machine.
|
* Access to a **FreeIPA Server**.
|
||||||
* Access to an **FreeIPA Server**.
|
* A Service Account with permission to search and modify the `jpegPhoto` attribute.
|
||||||
* A Service Account (Bind DN) with permission to search users and modify the `jpegPhoto` attribute.
|
|
||||||
|
|
||||||
## Setup & Installation
|
## Setup & Installation
|
||||||
|
|
||||||
1. **Clone the Repository**
|
1. **Clone the Repository**
|
||||||
```bash
|
```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
|
cd Self-Service-Dashboard
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -30,7 +30,10 @@ A simple, lightweight web application for managing user profile photos in a Free
|
|||||||
```
|
```
|
||||||
|
|
||||||
5. **Edit config**
|
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**
|
4. **Install Dependencies**
|
||||||
```bash
|
```bash
|
||||||
@@ -41,15 +44,7 @@ A simple, lightweight web application for managing user profile photos in a Free
|
|||||||
```bash
|
```bash
|
||||||
go run ./src/main/
|
go run ./src/main/
|
||||||
```
|
```
|
||||||
The application will be available at `http://<host>:<port>`.
|
The application will be available at `http://localhost:<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.
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
@@ -12,6 +12,14 @@
|
|||||||
"logo_path": "./data/astraltech_logo_large.png"
|
"logo_path": "./data/astraltech_logo_large.png"
|
||||||
},
|
},
|
||||||
"server_config": {
|
"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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
112
data/email-templates/expired-password.html
Normal file
112
data/email-templates/expired-password.html
Normal 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>
|
||||||
@@ -33,7 +33,7 @@ var (
|
|||||||
)
|
)
|
||||||
|
|
||||||
func ReadBlankPhoto() {
|
func ReadBlankPhoto() {
|
||||||
blank, err := helpers.ReadFile("static/blank_profile.jpg")
|
blank, err := helpers.ReadFile("static/images/blank_profile.jpg")
|
||||||
if err != nil {
|
if err != nil {
|
||||||
logging.Fatal("Could not load blank profile image")
|
logging.Fatal("Could not load blank profile image")
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,35 +16,38 @@ type EmailAccount struct {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type EmailAccountData struct {
|
type EmailAccountData struct {
|
||||||
username string
|
Username string
|
||||||
password string
|
Password string
|
||||||
email string
|
Email string
|
||||||
}
|
}
|
||||||
|
|
||||||
func createEmailAccount(accountData EmailAccountData, smtpHost string, smtpPort int) EmailAccount {
|
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)
|
logging.Debugf("Creating Email Account: \n\tUsername: %s\n\tEmail: %s\n\tSMTP Host: %s:%d", accountData.Username, accountData.Email, smtpHost, smtpPort)
|
||||||
account := EmailAccount{
|
account := EmailAccount{
|
||||||
email: accountData.email,
|
email: accountData.Email,
|
||||||
smtpHost: smtpHost,
|
smtpHost: smtpHost,
|
||||||
smtpPort: strconv.Itoa(smtpPort),
|
smtpPort: strconv.Itoa(smtpPort),
|
||||||
}
|
}
|
||||||
account.auth = smtp.PlainAuth("", accountData.username, accountData.password, smtpHost)
|
account.auth = smtp.PlainAuth("", accountData.Username, accountData.Password, smtpHost)
|
||||||
return account
|
return account
|
||||||
}
|
}
|
||||||
|
|
||||||
func sendEmail(account EmailAccount, toEmail []string, subject string, message string) {
|
func (account *EmailAccount) SendEmail(toEmails []string, subject string, message string) {
|
||||||
logging.Debugf("Sending an email from %s to %s", account.email, strings.Join(toEmail, ""))
|
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(
|
messageData := []byte(
|
||||||
"From: " + account.email + "\r\n" +
|
"From: " + account.email + "\r\n" +
|
||||||
"To: " + ToEmailList + "\r\n" +
|
"To: " + ToEmailList + "\r\n" +
|
||||||
"Subject: " + subject + "\r\n" +
|
"Subject: " + subject + "\r\n" +
|
||||||
|
mime +
|
||||||
"\r\n" +
|
"\r\n" +
|
||||||
message,
|
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 {
|
if err != nil {
|
||||||
logging.Error("Failed to send email")
|
logging.Error("Failed to send email")
|
||||||
logging.Error(err.Error())
|
logging.Error(err.Error())
|
||||||
|
|||||||
28
src/email/render_template.go
Normal file
28
src/email/render_template.go
Normal 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
|
||||||
|
}
|
||||||
@@ -23,12 +23,22 @@ type StyleConfig struct {
|
|||||||
|
|
||||||
type WebserverConfig struct {
|
type WebserverConfig struct {
|
||||||
Port int `json:"port"`
|
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 {
|
type ServerConfig struct {
|
||||||
LDAPConfig LDAPConfig `json:"ldap_config"`
|
LDAPConfig LDAPConfig `json:"ldap_config"`
|
||||||
StyleConfig StyleConfig `json:"style_config"`
|
StyleConfig StyleConfig `json:"style_config"`
|
||||||
WebserverConfig WebserverConfig `json:"server_config"`
|
WebserverConfig WebserverConfig `json:"server_config"`
|
||||||
|
EmailConfig EmailConfig `json:"email_config"`
|
||||||
}
|
}
|
||||||
|
|
||||||
func loadServerConfig(path string) (*ServerConfig, error) {
|
func loadServerConfig(path string) (*ServerConfig, error) {
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import (
|
|||||||
"sync"
|
"sync"
|
||||||
|
|
||||||
"astraltech.xyz/accountmanager/src/components"
|
"astraltech.xyz/accountmanager/src/components"
|
||||||
|
"astraltech.xyz/accountmanager/src/email"
|
||||||
"astraltech.xyz/accountmanager/src/helpers"
|
"astraltech.xyz/accountmanager/src/helpers"
|
||||||
"astraltech.xyz/accountmanager/src/ldap"
|
"astraltech.xyz/accountmanager/src/ldap"
|
||||||
"astraltech.xyz/accountmanager/src/logging"
|
"astraltech.xyz/accountmanager/src/logging"
|
||||||
@@ -19,6 +20,7 @@ var (
|
|||||||
ldapServer ldap.LDAPServer
|
ldapServer ldap.LDAPServer
|
||||||
serverConfig *ServerConfig
|
serverConfig *ServerConfig
|
||||||
sessionManager *session.SessionManager
|
sessionManager *session.SessionManager
|
||||||
|
noReplyEmail email.EmailAccount
|
||||||
)
|
)
|
||||||
|
|
||||||
type UserData struct {
|
type UserData struct {
|
||||||
@@ -38,6 +40,9 @@ func authenticateUser(username, password string) (*UserData, error) {
|
|||||||
|
|
||||||
connected, err := ldapServer.AuthenticateUser(userDN, password)
|
connected, err := ldapServer.AuthenticateUser(userDN, password)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
|
if strings.Contains(err.Error(), "Password is expired") {
|
||||||
|
return nil, fmt.Errorf("Password expired for %s\n", username)
|
||||||
|
}
|
||||||
return nil, err
|
return nil, err
|
||||||
}
|
}
|
||||||
if connected == false {
|
if connected == false {
|
||||||
@@ -85,7 +90,6 @@ func loginHandler(w http.ResponseWriter, r *http.Request) {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. Logic for processing the form
|
|
||||||
if r.Method == http.MethodPost {
|
if r.Method == http.MethodPost {
|
||||||
username := r.FormValue("username")
|
username := r.FormValue("username")
|
||||||
if strings.Contains(username, "/") {
|
if strings.Contains(username, "/") {
|
||||||
@@ -250,6 +254,12 @@ func main() {
|
|||||||
log.Fatal("Could not load server config")
|
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{
|
ldapServer = ldap.LDAPServer{
|
||||||
URL: serverConfig.LDAPConfig.LDAPURL,
|
URL: serverConfig.LDAPConfig.LDAPURL,
|
||||||
StartTLS: serverConfig.LDAPConfig.Security == "tls",
|
StartTLS: serverConfig.LDAPConfig.Security == "tls",
|
||||||
@@ -269,6 +279,8 @@ func main() {
|
|||||||
logging.Fatal("Failed to connect to LDAP server")
|
logging.Fatal("Failed to connect to LDAP server")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
InitPasswordExpiry()
|
||||||
|
|
||||||
helpers.HandleFunc("/favicon.ico", faviconHandler)
|
helpers.HandleFunc("/favicon.ico", faviconHandler)
|
||||||
helpers.HandleFunc("/logo", logoHandler)
|
helpers.HandleFunc("/logo", logoHandler)
|
||||||
|
|
||||||
|
|||||||
57
src/main/password_expiry.go
Normal file
57
src/main/password_expiry.go
Normal 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)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -28,9 +28,16 @@
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label class="input_label">Password</label><br />
|
<label class="input_label">Password</label><br />
|
||||||
|
<div class="password_box">
|
||||||
<input type="password" name="password" placeholder="" required />
|
<input type="password" name="password" placeholder="" required />
|
||||||
|
<button type="button" class="show_password_toggle closed"></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit">Login</button>
|
<button type="submit">Login</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<script src="/static/error/error.js" type="text/javascript"></script>
|
<script src="/static/error/error.js" type="text/javascript"></script>
|
||||||
|
<script
|
||||||
|
src="/static/javascript/show_password.js"
|
||||||
|
type="text/javascript"
|
||||||
|
></script>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<div id="popup_background" class="blocked hidden"></div>
|
<div id="popup_background" class="blocked hidden"></div>
|
||||||
|
|
||||||
<div id="change_password_dialogue" class="card hidden static_center">
|
<div id="change_password_dialogue" class="card static_center hidden">
|
||||||
<div class="dialouge_title">Change Password</div>
|
<div class="dialouge_title">Change Password</div>
|
||||||
<button id="close_password_dialogue">X</button>
|
<button id="close_password_dialogue">X</button>
|
||||||
|
|
||||||
@@ -36,6 +36,7 @@
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label class="input_label">Current password</label><br />
|
<label class="input_label">Current password</label><br />
|
||||||
|
<div class="password_box">
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
id="current_password"
|
id="current_password"
|
||||||
@@ -43,10 +44,13 @@
|
|||||||
placeholder=""
|
placeholder=""
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
<button type="button" class="show_password_toggle closed"></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label class="input_label">New password</label><br />
|
<label class="input_label">New password</label><br />
|
||||||
|
<div class="password_box">
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
id="new_password"
|
id="new_password"
|
||||||
@@ -54,10 +58,13 @@
|
|||||||
placeholder=""
|
placeholder=""
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
<button type="button" class="show_password_toggle closed"></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label class="input_label">New password (repeat)</label><br />
|
<label class="input_label">New password (repeat)</label><br />
|
||||||
|
<div class="password_box">
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
id="new_password_repeat"
|
id="new_password_repeat"
|
||||||
@@ -65,6 +72,8 @@
|
|||||||
placeholder=""
|
placeholder=""
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
<button type="button" class="show_password_toggle closed"></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@@ -79,6 +88,16 @@
|
|||||||
</div>
|
</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>
|
<button id="final_change_password_button">Change Password</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -102,7 +121,7 @@
|
|||||||
|
|
||||||
<button id="edit_picture_button">
|
<button id="edit_picture_button">
|
||||||
<img
|
<img
|
||||||
src="/static/crayon_icon.png"
|
src="/static/images/crayon_icon.png"
|
||||||
id="edit_picture_image"
|
id="edit_picture_image"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
@@ -206,3 +225,8 @@
|
|||||||
src="/static/javascript/handle_password_change.js"
|
src="/static/javascript/handle_password_change.js"
|
||||||
type="text/javascript"
|
type="text/javascript"
|
||||||
></script>
|
></script>
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="/static/javascript/show_password.js"
|
||||||
|
type="text/javascript"
|
||||||
|
></script>
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
.card {
|
.card {
|
||||||
background: rgba(
|
background: rgba(255, 255, 255, 1);
|
||||||
255,
|
|
||||||
255,
|
|
||||||
255,
|
|
||||||
1
|
|
||||||
); /* Semi-transparent white for light theme */
|
|
||||||
border: 1px solid var(--border-subtle);
|
border: 1px solid var(--border-subtle);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 2.5rem;
|
padding: 2.5rem;
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
BIN
static/images/closed_eye.png
Normal file
BIN
static/images/closed_eye.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
BIN
static/images/filled_eye.png
Normal file
BIN
static/images/filled_eye.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
22
static/javascript/show_password.js
Normal file
22
static/javascript/show_password.js
Normal 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");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -136,3 +136,23 @@
|
|||||||
margin: 0px;
|
margin: 0px;
|
||||||
width: 30px;
|
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,8 +16,11 @@
|
|||||||
--error-red: #ef4444; /* Professional Red */
|
--error-red: #ef4444; /* Professional Red */
|
||||||
--error-border-red: #e22d2d;
|
--error-border-red: #e22d2d;
|
||||||
|
|
||||||
|
--warning-yellow: #fef08a;
|
||||||
|
--warning-border-yellow: #fde047;
|
||||||
|
|
||||||
--password-strength-weak: var(--error-red);
|
--password-strength-weak: var(--error-red);
|
||||||
--password-strength-medium: #efe943;
|
--password-strength-medium: var(--warning-border-yellow);
|
||||||
--password-strength-strong: #43ef6b;
|
--password-strength-strong: #43ef6b;
|
||||||
|
|
||||||
font-family: "Inter", sans-serif;
|
font-family: "Inter", sans-serif;
|
||||||
@@ -90,4 +93,39 @@ input::placeholder {
|
|||||||
.dialouge_title {
|
.dialouge_title {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin-bottom: 0px;
|
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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user