IcyNetwork/sso-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

settings and avatar

Browse Source
This commit is contained in:
Evert Prants 2024-05-17 17:31:14 +03:00
parent 5e178a6a19
commit 4a07389cca
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
35 changed files with 1397 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"editor.formatOnSave": true
}

277
package-lock.json generated
View File

@ -10,9 +10,12 @@
"dependencies": { "dependencies": {
"@sveltejs/adapter-node": "^5.0.1", "@sveltejs/adapter-node": "^5.0.1",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"cropperjs": "^1.6.2",
"drizzle-orm": "^0.30.10", "drizzle-orm": "^0.30.10",
"mime-types": "^2.1.35",
"mysql2": "^3.9.7", "mysql2": "^3.9.7",
"otplib": "^12.0.1", "otplib": "^12.0.1",
"qrcode": "^1.5.3",
"svelte-kit-cookie-session": "^4.0.0", "svelte-kit-cookie-session": "^4.0.0",
"sveltekit-i18n": "^2.4.2", "sveltekit-i18n": "^2.4.2",
"uuid": "^9.0.1" "uuid": "^9.0.1"
@ -23,7 +26,9 @@
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/bcryptjs": "^2.4.6", "@types/bcryptjs": "^2.4.6",
"@types/eslint": "^8.56.0", "@types/eslint": "^8.56.0",
"@types/mime-types": "^2.1.4",
"@types/node": "^20.12.12", "@types/node": "^20.12.12",
"@types/qrcode": "^1.5.5",
"@types/uuid": "^9.0.8", "@types/uuid": "^9.0.8",
"@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0", "@typescript-eslint/parser": "^7.0.0",
@ -1538,6 +1543,12 @@
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
"dev": true "dev": true
}, },
"node_modules/@types/mime-types": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.4.tgz",
"integrity": "sha512-lfU4b34HOri+kAY5UheuFMWPDOI+OPceBSHZKp69gEyTL/mmJ4cnU6Y/rlme3UL3GyOn6Y42hyIEw0/q8sWx5w==",
"dev": true
},
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "20.12.12", "version": "20.12.12",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
@ -1553,6 +1564,15 @@
"integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==", "integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==",
"dev": true "dev": true
}, },
"node_modules/@types/qrcode": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.5.tgz",
"integrity": "sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==",
"dev": true,
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@types/resolve": { "node_modules/@types/resolve": {
"version": "1.20.2", "version": "1.20.2",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@ -1795,7 +1815,6 @@
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"dev": true,
"engines": { "engines": {
"node": ">=8" "node": ">=8"
} }
@ -1804,7 +1823,6 @@
"version": "4.3.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"dependencies": { "dependencies": {
"color-convert": "^2.0.1" "color-convert": "^2.0.1"
}, },
@ -1936,6 +1954,14 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/camelcase": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
"engines": {
"node": ">=6"
}
},
"node_modules/chalk": { "node_modules/chalk": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@ -2004,6 +2030,16 @@
"node": ">=0.10" "node": ">=0.10"
} }
}, },
"node_modules/cliui": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
"dependencies": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^6.2.0"
}
},
"node_modules/code-red": { "node_modules/code-red": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz", "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
@ -2020,7 +2056,6 @@
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"dependencies": { "dependencies": {
"color-name": "~1.1.4" "color-name": "~1.1.4"
}, },
@ -2031,8 +2066,7 @@
"node_modules/color-name": { "node_modules/color-name": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
"dev": true
}, },
"node_modules/commander": { "node_modules/commander": {
"version": "9.5.0", "version": "9.5.0",
@ -2062,6 +2096,11 @@
"node": ">= 0.6" "node": ">= 0.6"
} }
}, },
"node_modules/cropperjs": {
"version": "1.6.2",
"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz",
"integrity": "sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA=="
},
"node_modules/cross-spawn": { "node_modules/cross-spawn": {
"version": "7.0.3", "version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -2129,6 +2168,14 @@
} }
} }
}, },
"node_modules/decamelize": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
"integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/deep-is": { "node_modules/deep-is": {
"version": "0.1.4", "version": "0.1.4",
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@ -2185,6 +2232,11 @@
"node": "*" "node": "*"
} }
}, },
"node_modules/dijkstrajs": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
"integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
},
"node_modules/dir-glob": { "node_modules/dir-glob": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@ -2787,6 +2839,16 @@
} }
} }
}, },
"node_modules/emoji-regex": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
},
"node_modules/encode-utf8": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
"integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
},
"node_modules/env-paths": { "node_modules/env-paths": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz", "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz",
@ -3340,6 +3402,14 @@
"is-property": "^1.0.2" "is-property": "^1.0.2"
} }
}, },
"node_modules/get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
"engines": {
"node": "6.* || 8.* || >= 10.*"
}
},
"node_modules/get-tsconfig": { "node_modules/get-tsconfig": {
"version": "4.7.5", "version": "4.7.5",
"resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.5.tgz", "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.5.tgz",
@ -3613,6 +3683,14 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/is-fullwidth-code-point": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
"engines": {
"node": ">=8"
}
},
"node_modules/is-glob": { "node_modules/is-glob": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@ -3870,6 +3948,25 @@
"node": ">=8.6" "node": ">=8.6"
} }
}, },
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/min-indent": { "node_modules/min-indent": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@ -4076,6 +4173,14 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/p-try": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
"engines": {
"node": ">=6"
}
},
"node_modules/parent-module": { "node_modules/parent-module": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@ -4092,7 +4197,6 @@
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
"dev": true,
"engines": { "engines": {
"node": ">=8" "node": ">=8"
} }
@ -4155,6 +4259,14 @@
"url": "https://github.com/sponsors/jonschlinkert" "url": "https://github.com/sponsors/jonschlinkert"
} }
}, },
"node_modules/pngjs": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
"integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/postcss": { "node_modules/postcss": {
"version": "8.4.38", "version": "8.4.38",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
@ -4309,6 +4421,23 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/qrcode": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz",
"integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
"dependencies": {
"dijkstrajs": "^1.0.1",
"encode-utf8": "^1.0.3",
"pngjs": "^5.0.0",
"yargs": "^15.3.1"
},
"bin": {
"qrcode": "bin/qrcode"
},
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/queue-microtask": { "node_modules/queue-microtask": {
"version": "1.2.3", "version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -4341,6 +4470,19 @@
"node": ">=8.10.0" "node": ">=8.10.0"
} }
}, },
"node_modules/require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/require-main-filename": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
},
"node_modules/resolve": { "node_modules/resolve": {
"version": "1.22.8", "version": "1.22.8",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@ -4514,6 +4656,11 @@
"resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz", "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz",
"integrity": "sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q==" "integrity": "sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q=="
}, },
"node_modules/set-blocking": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
},
"node_modules/set-cookie-parser": { "node_modules/set-cookie-parser": {
"version": "2.6.0", "version": "2.6.0",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz", "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
@ -4618,11 +4765,23 @@
"node": ">= 0.6" "node": ">= 0.6"
} }
}, },
"node_modules/string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
"dependencies": {
"emoji-regex": "^8.0.0",
"is-fullwidth-code-point": "^3.0.0",
"strip-ansi": "^6.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/strip-ansi": { "node_modules/strip-ansi": {
"version": "6.0.1", "version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"dependencies": { "dependencies": {
"ansi-regex": "^5.0.1" "ansi-regex": "^5.0.1"
}, },
@ -5072,6 +5231,11 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/which-module": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
"integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
},
"node_modules/word-wrap": { "node_modules/word-wrap": {
"version": "1.2.5", "version": "1.2.5",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@ -5087,11 +5251,29 @@
"integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==", "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
"dev": true "dev": true
}, },
"node_modules/wrap-ansi": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
"dependencies": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/wrappy": { "node_modules/wrappy": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
}, },
"node_modules/y18n": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
},
"node_modules/yaml": { "node_modules/yaml": {
"version": "1.10.2", "version": "1.10.2",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
@ -5101,6 +5283,87 @@
"node": ">= 6" "node": ">= 6"
} }
}, },
"node_modules/yargs": {
"version": "15.4.1",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
"dependencies": {
"cliui": "^6.0.0",
"decamelize": "^1.2.0",
"find-up": "^4.1.0",
"get-caller-file": "^2.0.1",
"require-directory": "^2.1.1",
"require-main-filename": "^2.0.0",
"set-blocking": "^2.0.0",
"string-width": "^4.2.0",
"which-module": "^2.0.0",
"y18n": "^4.0.0",
"yargs-parser": "^18.1.2"
},
"engines": {
"node": ">=8"
}
},
"node_modules/yargs-parser": {
"version": "18.1.3",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
"dependencies": {
"camelcase": "^5.0.0",
"decamelize": "^1.2.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/yargs/node_modules/find-up": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
"dependencies": {
"locate-path": "^5.0.0",
"path-exists": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/yargs/node_modules/locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
"dependencies": {
"p-locate": "^4.1.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/yargs/node_modules/p-limit": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
"dependencies": {
"p-try": "^2.0.0"
},
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/yargs/node_modules/p-locate": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
"dependencies": {
"p-limit": "^2.2.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/yocto-queue": { "node_modules/yocto-queue": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

5
package.json
View File

@ -17,7 +17,9 @@
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/bcryptjs": "^2.4.6", "@types/bcryptjs": "^2.4.6",
"@types/eslint": "^8.56.0", "@types/eslint": "^8.56.0",
"@types/mime-types": "^2.1.4",
"@types/node": "^20.12.12", "@types/node": "^20.12.12",
"@types/qrcode": "^1.5.5",
"@types/uuid": "^9.0.8", "@types/uuid": "^9.0.8",
"@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0", "@typescript-eslint/parser": "^7.0.0",
@ -37,9 +39,12 @@
"dependencies": { "dependencies": {
"@sveltejs/adapter-node": "^5.0.1", "@sveltejs/adapter-node": "^5.0.1",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"cropperjs": "^1.6.2",
"drizzle-orm": "^0.30.10", "drizzle-orm": "^0.30.10",
"mime-types": "^2.1.35",
"mysql2": "^3.9.7", "mysql2": "^3.9.7",
"otplib": "^12.0.1", "otplib": "^12.0.1",
"qrcode": "^1.5.3",
"svelte-kit-cookie-session": "^4.0.0", "svelte-kit-cookie-session": "^4.0.0",
"sveltekit-i18n": "^2.4.2", "sveltekit-i18n": "^2.4.2",
"uuid": "^9.0.1" "uuid": "^9.0.1"

25
src/app.css
View File

@ -10,25 +10,26 @@
--in-outline-color: #00aaff; --in-outline-color: #00aaff;
--in-normalized-background: #000; --in-normalized-background: #000;
--in-input-background: #fff; --in-input-background: #fff;
--in-input-background-disabled: #c2c2c2;
--in-input-color: #000; --in-input-color: #000;
--in-input-color-disabled: #414141;
--in-input-border-color: #ddd; --in-input-border-color: #ddd;
--in-input-border-color-disabled: #a0a0a0;
--in-alert-color: #006597;
--in-error-color: #b52e2e;
--in-success-color: #1e7f27;
--in-modal-background: #fff;
--in-modal-backdrop: rgba(0, 0, 0, 0.3);
--in-modal-divider-color: #ddd;
--in-focus-outline: 3px solid var(--in-outline-color); --in-focus-outline: 3px solid var(--in-outline-color);
} }
:root { :root {
font-family: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
system-ui, 'Open Sans', 'Helvetica Neue', sans-serif;
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Open Sans',
'Helvetica Neue',
sans-serif;
color: var(--in-text-color); color: var(--in-text-color);
} }

36
src/lib/components/Alert.svelte Normal file
View File

@ -0,0 +1,36 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import Button from './Button.svelte';
export let type: 'default' | 'error' | 'success' = 'default';
export let dismissable = false;
const dispatch = createEventDispatcher();
</script>
<div class="alert alert-{type}" role="alert">
<p><slot /></p>
{#if dismissable}<Button variant="link" on:click={() => dispatch('dismiss')}>x</Button>{/if}
</div>
<style>
.alert {
background-color: var(--in-alert-color);
width: 100%;
border-radius: 8px;
padding: 24px 28px;
font-size: 1.15rem;
& p {
margin: 0;
}
&.alert-error {
background-color: var(--in-error-color);
}
&.alert-success {
background-color: var(--in-success-color);
}
}
</style>

5
src/lib/components/Button.svelte
View File

@ -1,9 +1,12 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from 'svelte';
export let type: 'button' | 'submit' = 'button'; export let type: 'button' | 'submit' = 'button';
export let variant: 'default' | 'primary' | 'link' = 'default'; export let variant: 'default' | 'primary' | 'link' = 'default';
const dispath = createEventDispatcher();
</script> </script>
<button {type} class="btn btn-{variant}"><slot /></button> <button {type} class="btn btn-{variant}" on:click={(e) => dispath('click', e)}><slot /></button>
<style> <style>
.btn { .btn {

11
src/lib/components/ColumnView.svelte Normal file
View File

@ -0,0 +1,11 @@
<div class="column">
<slot />
</div>
<style>
.column {
display: flex;
flex-direction: column;
gap: 1rem;
}
</style>

23
src/lib/components/MainContainer.svelte Normal file
View File

@ -0,0 +1,23 @@
<section class="page-wrapper">
<div class="page-inner">
<slot />
</div>
</section>
<style>
.page-wrapper {
display: flex;
justify-content: center;
width: 100%;
}
.page-inner {
display: flex;
flex-direction: column;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 40px;
max-width: 1080px;
width: 100%;
}
</style>

115
src/lib/components/Modal.svelte Normal file
View File

@ -0,0 +1,115 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let showModal: boolean;
let dialog: HTMLDialogElement;
const dispatch = createEventDispatcher();
$: if (dialog && showModal) dialog.showModal();
$: if (dialog?.open && !showModal) dialog.close();
</script>
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
<dialog
bind:this={dialog}
on:close={() => {
showModal = false;
dispatch('close');
}}
on:click|self={() => dialog.close()}
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click|stopPropagation>
{#if $$slots.header}
<div class="dialog-header">
<slot name="header" />
</div>
{/if}
<div class="dialog-body">
<slot />
</div>
{#if $$slots.footer}
<div class="dialog-footer">
<slot name="footer" />
</div>
{/if}
</div>
</dialog>
<style>
dialog {
max-width: 32em;
border-radius: 0.2em;
border: none;
padding: 0;
background-color: var(--in-modal-background);
}
dialog::backdrop {
background: var(--in-modal-backdrop);
}
dialog[open] {
animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
dialog[open]::backdrop {
animation: fade 0.2s ease-out;
}
.dialog-header {
padding: auto;
}
.dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 2rem 1rem 2rem;
border-bottom: 1px solid var(--in-modal-divider-color);
}
.dialog-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem 2rem 2rem;
border-top: 1px solid var(--in-modal-divider-color);
}
.dialog-body {
padding: 1rem 2rem;
}
.dialog-header > :global(span) {
font-weight: 700;
}
.dialog-header > :global(.btn) {
font-weight: 700;
font-size: 1.5rem;
}
.dialog-footer :global(.btn-link) {
color: var(--in-input-color);
}
@keyframes zoom {
from {
transform: scale(0.9);
}
to {
transform: scale(1);
}
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>

27
src/lib/components/SideContainer.svelte Normal file
View File

@ -0,0 +1,27 @@
<div class="aside-wrapper">
<div class="aside-inner">
<slot />
</div>
</div>
<style>
.aside-wrapper {
display: flex;
justify-content: flex-end;
}
.aside-wrapper,
.aside-inner {
height: 100%;
}
.aside-inner {
display: flex;
flex-direction: column;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 40px;
max-width: 600px;
width: 100%;
}
</style>

19
src/lib/components/SplitView.svelte Normal file
View File

@ -0,0 +1,19 @@
<div class="split">
<slot />
<slot name="side" />
</div>
<style>
.split {
display: flex;
gap: 24px;
@media screen and (max-width: 768px) {
flex-direction: column;
}
}
.split > :global(*) {
flex-basis: calc(50% - 24px);
}
</style>

31
src/lib/components/avatar/AvatarCard.svelte Normal file
View File

@ -0,0 +1,31 @@
<script lang="ts">
export let user: { uuid: string; username: string };
export let cacheBust: number;
$: avatarSource = `/api/avatar/${user.uuid}?t=${cacheBust}`;
</script>
<div class="avatar-wrapper">
<div class="image-wrapper">
<img src={avatarSource} alt={user.username} />
</div>
<div class="actions-wrapper">
<slot />
</div>
</div>
<style>
.avatar-wrapper {
display: flex;
gap: 16px;
}
.image-wrapper {
display: flex;
height: 120px;
width: 120px;
flex: 0 0 120px;
background-color: var(--in-normalized-background);
}
</style>

152
src/lib/components/avatar/AvatarModal.svelte Normal file
View File

@ -0,0 +1,152 @@
<script lang="ts">
import type { Writable } from 'svelte/store';
import Modal from '../Modal.svelte';
import { t } from '$lib/i18n';
import Button from '../Button.svelte';
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';
import { invalidateAll } from '$app/navigation';
import FormControl from '../form/FormControl.svelte';
import { allowedImages } from '$lib/constants';
export let show: Writable<boolean>;
let cropper: Cropper;
let image: HTMLImageElement;
let resultImage: HTMLImageElement;
let resultBlob: Blob | null = null;
let picker = true;
let ready = false;
const resetCropper = () => {
cropper?.destroy();
image.src = '';
};
const reset = () => {
resultImage.src = '';
picker = true;
ready = false;
resultBlob = null;
resetCropper();
};
const createCrop = () => {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
modal: false
});
};
const createCropResult = (): void => {
const cropCanvas = cropper.getCroppedCanvas({
maxHeight: 1024,
maxWidth: 1024,
imageSmoothingEnabled: true,
imageSmoothingQuality: 'high'
});
resultImage.src = cropCanvas.toDataURL();
cropCanvas.toBlob((blob) => {
resultBlob = blob;
ready = true;
resetCropper();
});
};
const readFile = (target: EventTarget | null) => {
const input = target as HTMLInputElement;
const file = input?.files?.item(0);
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
picker = false;
image.src = reader.result as string;
createCrop();
};
reader.readAsDataURL(file);
input.value = '';
};
const upload = async () => {
if (!resultBlob) return;
const data = new FormData();
data.append('file', resultBlob);
await fetch(`/account?/avatar`, {
method: 'POST',
body: data,
credentials: 'include',
headers: {
'x-sveltekit-action': 'true'
}
});
$show = false;
await invalidateAll();
};
$: if (!$show && image?.src) reset();
</script>
<Modal showModal={$show} on:close={() => ($show = false)}>
<span slot="header">{$t('account.avatar.change')}</span>
<div>
{#if picker}
<FormControl>
<label for="avatar-file">{$t('account.avatar.uploadLabel')}</label>
<input type="file" on:change={(e) => readFile(e.target)} accept={allowedImages.join(',')} />
<span>{$t('account.avatar.hint')}</span>
</FormControl>
{/if}
<div class="crop-wrapper">
<img bind:this={image} alt="" class="preview" />
</div>
<div class="crop-result">
<img bind:this={resultImage} alt="" class="result" />
</div>
</div>
<div class="actions" slot="footer">
<Button variant="link" on:click={() => ($show = false)}>{$t('common.cancel')}</Button>
{#if !picker}
<Button variant="primary" on:click={() => reset()}>{$t('account.avatar.restart')}</Button>
{#if !ready}
<Button variant="primary" on:click={() => createCropResult()}
>{$t('account.avatar.done')}</Button
>
{:else}
<Button variant="primary" on:click={() => upload()}>{$t('account.avatar.upload')}</Button>
{/if}
{/if}
</div>
</Modal>
<style>
.crop-wrapper,
.crop-result {
display: flex;
flex-direction: column;
max-height: 400px;
& > img {
overflow: auto;
object-fit: contain;
}
}
.actions {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
}
</style>

32
src/lib/components/form/FormControl.svelte
View File

@ -1,33 +1,47 @@
<div class="form-control"> <div class="form-control">
<slot></slot> <slot></slot>
</div> </div>
<style> <style>
:global(input) { :global(input) {
&:not([type]),
&[type=text],
&[type=password],
&[type=email] {
padding: 8px;
font-size: 1rem;
background-color: var(--in-input-background); background-color: var(--in-input-background);
color: var(--in-input-color); color: var(--in-input-color);
border: 2px solid var(--in-input-border-color); border: 2px solid var(--in-input-border-color);
&:not([type]),
&[type='text'],
&[type='password'],
&[type='email'] {
padding: 8px;
font-size: 1rem;
border-radius: 6px; border-radius: 6px;
&:focus-visible { &:focus-visible {
outline: var(--in-focus-outline); outline: var(--in-focus-outline);
} }
&[disabled] {
background-color: var(--in-input-background-disabled);
border-color: var(--in-input-border-color-disabled);
color: var(--in-input-color-disabled);
cursor: not-allowed;
}
} }
} }
:global(label) { .form-control > :global(label) {
margin-bottom: 2px; margin-bottom: 4px;
font-size: 1.1rem;
}
.form-control > :global(span) {
margin-top: 4px;
font-size: 0.9rem;
} }
.form-control { .form-control {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
} }
</style> </style>

19
src/lib/components/form/FormSection.svelte
View File

@ -1,4 +1,23 @@
<script lang="ts">
export let title: string = '';
</script>
<div class="form-section"> <div class="form-section">
{#if title}<div class="form-subtitle">{title}</div>{/if}
<slot /> <slot />
</div> </div>
<style>
.form-section {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
align-items: flex-start;
}
.form-subtitle {
font-size: 1.2rem;
font-weight: 700;
}
</style>

9
src/lib/components/form/FormWrapper.svelte
View File

@ -1,10 +1,13 @@
<div class="form-wrapper"> <div class="form-wrapper">
<slot /> <slot />
</div> </div>
<style> <style>
:global(.form-control) { .form-wrapper {
margin-bottom: 16px; display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
align-items: flex-start;
} }
</style> </style>

1
src/lib/constants.ts Normal file
View File

@ -0,0 +1 @@
export const allowedImages = ['image/png', 'image/jpg', 'image/jpeg'];

32
src/lib/i18n/en/account.json
View File

@ -1,4 +1,5 @@
{ {
"title": "Manage your account",
"username": "Username", "username": "Username",
"displayName": "Display Name", "displayName": "Display Name",
"changeEmail": "Change email address", "changeEmail": "Change email address",
@ -8,12 +9,26 @@
"currentPassword": "Current password", "currentPassword": "Current password",
"newPassword": "New password", "newPassword": "New password",
"repeatPassword": "Repeat new password", "repeatPassword": "Repeat new password",
"passwordHint": "At least 8 characters, a capital letter and a number required.",
"submit": "Submit", "submit": "Submit",
"changeSuccess": "Account settings changed successfully!",
"avatar": {
"title": "Profile avatar",
"change": "Change avatar",
"remove": "Remove avatar",
"done": "Done",
"restart": "Restart",
"upload": "Upload",
"uploadLabel": "Upload image file",
"hint": "Allowed image formats: .png, .jpg, .jpeg. Image must be less than 10 MB in size."
},
"login": { "login": {
"title": "Log in", "title": "Log in",
"email": "Email", "email": "Email",
"password": "Password", "password": "Password",
"submit": "Log in" "submit": "Log in",
"otp": "Two-factor authentication is enabled",
"otpCode": "Enter the code displayed on the authenticator app"
}, },
"errors": { "errors": {
"invalidLogin": "Invalid email or password!", "invalidLogin": "Invalid email or password!",
@ -23,6 +38,19 @@
"passwordRequired": "The password is required.", "passwordRequired": "The password is required.",
"passwordMismatch": "The passwords do not match!", "passwordMismatch": "The passwords do not match!",
"invalidPassword": "The provided password is invalid.", "invalidPassword": "The provided password is invalid.",
"invalidDisplayName": "The provided display name is invalid." "invalidDisplayName": "The provided display name is invalid.",
"otpFailed": "The code you entered was invalid. Please note that you will be given a new QR code for subsequent retries."
},
"otp": {
"title": "Two-factor authentication",
"enabled": "Two-factor authentication is enabled",
"disabled": "Your account does not have two-factor authentication enabled.",
"activated": "Two-factor authentication has been activated successfully!",
"scan": "Scan this QR code with the authenticator app of your choice",
"code": "Enter the code displayed on the authenticator app",
"return": "Return to account management",
"retry": "Try again",
"activate": "Set up two factor authentication",
"deactivate": "Deactivate"
} }
} }

5
src/lib/i18n/en/common.json
View File

@ -1,5 +1,8 @@
{ {
"siteName": "Icy Network", "siteName": "Icy Network",
"description": "Icy Network is a Single-Sign-On service used by other applications.", "description": "Icy Network is a Single-Sign-On service used by other applications.",
"cookieDisclaimer": "The website may use temporary cookies for storing your login session and ensuring your security. This web service is&nbsp;<a href=\"https://git.icynet.eu/IcyNetwork/icynet-auth-server\" target=\"_blank\">completely open source</a> and can be audited by anyone." "cookieDisclaimer": "The website may use temporary cookies for storing your login session and ensuring your security. This web service is&nbsp;<a href=\"https://git.icynet.eu/IcyNetwork/icynet-auth-server\" target=\"_blank\">completely open source</a> and can be audited by anyone.",
"submit": "Submit",
"cancel": "Cancel",
"manage": "Manage"
} }

2
src/lib/server/challenge.ts
View File

@ -66,7 +66,7 @@ export class Challenge {
const userOtp = await TimeOTP.getUserOtp(subject); const userOtp = await TimeOTP.getUserOtp(subject);
if (!userOtp) { if (!userOtp) {
throw new Error('Invalid request'); throw new Error('User has no OTP');
} }
const data = await Challenge.challengeFromBody<TRes>(body, subject.uuid, userOtp.token); const data = await Challenge.challengeFromBody<TRes>(body, subject.uuid, userOtp.token);

4
src/lib/server/drizzle/schema.ts
View File

@ -9,7 +9,7 @@ import {
timestamp, timestamp,
mysqlEnum, mysqlEnum,
index, index,
type AnyMySqlColumn, type AnyMySqlColumn
} from 'drizzle-orm/mysql-core'; } from 'drizzle-orm/mysql-core';
export const auditLog = mysqlTable('audit_log', { export const auditLog = mysqlTable('audit_log', {
@ -131,6 +131,8 @@ export const upload = mysqlTable('upload', {
.notNull() .notNull()
}); });
export type Upload = typeof upload.$inferSelect;
export const user = mysqlTable( export const user = mysqlTable(
'user', 'user',
{ {

67
src/lib/server/upload.ts Normal file
View File

@ -0,0 +1,67 @@
import { eq } from 'drizzle-orm';
import { db, upload, user, type Upload, type User } from './drizzle';
import { Users } from './users';
import { readFile, unlink, writeFile } from 'fs/promises';
import { join } from 'path';
import * as mime from 'mime-types';
const fallbackImage = await readFile(join('static', 'avatar.png'));
export class Uploads {
static fallbackImage = fallbackImage;
static uploads = join('uploads');
static async getAvatarByUuid(
uuid: string
): Promise<{ file: string; mimetype: string } | undefined> {
const user = await Users.getByUuid(uuid);
if (!user?.pictureId) {
return undefined;
}
const [picture] = await db
.select({ mimetype: upload.mimetype, file: upload.file })
.from(upload)
.where(eq(upload.id, user.pictureId));
return picture;
}
static async removeUpload(subject: Upload) {
try {
unlink(join(Uploads.uploads, subject.file));
} catch {
// ignore unlink error
}
await db.delete(upload).where(eq(upload.id, subject.id));
}
static async removeAvatar(subject: User) {
if (!subject.pictureId) return;
const [fileinfo] = await db.select().from(upload).where(eq(upload.id, subject.pictureId));
if (fileinfo) {
await Uploads.removeUpload(fileinfo);
}
await db.update(user).set({ pictureId: null }).where(eq(user.id, subject.id));
}
static async saveAvatar(subject: User, file: File) {
const ext = mime.extension(file.type);
const newName = `user-${subject.uuid.split('-')[0]}-${Math.floor(Date.now() / 1000)}.${ext}`;
const arrayBuffer = await file.arrayBuffer();
// Write to filesystem
await writeFile(join(Uploads.uploads, newName), Buffer.from(arrayBuffer));
// Remove old
await Uploads.removeAvatar(subject);
// Update DB
const [retval] = await db.insert(upload).values({
original_name: file.name,
mimetype: file.type,
file: newName,
uploaderId: subject.id
});
await db.update(user).set({ pictureId: retval.insertId });
}
}

9
src/lib/server/users/index.ts
View File

@ -4,6 +4,15 @@ import { db, user, type User } from '../drizzle';
import type { UserSession } from './types'; import type { UserSession } from './types';
export class Users { export class Users {
static async getByUuid(uuid: string): Promise<User | undefined> {
const [result] = await db
.select()
.from(user)
.where(and(eq(user.uuid, uuid), eq(user.activated, 1)))
.limit(1);
return result;
}
static async getByLogin(login: string): Promise<User | undefined> { static async getByLogin(login: string): Promise<User | undefined> {
const [result] = await db const [result] = await db
.select() .select()

8
src/lib/server/users/totp.ts
View File

@ -47,4 +47,12 @@ export class TimeOTP {
.limit(1); .limit(1);
return token; return token;
} }
public static async saveUserOtp(subject: User, secret: string) {
await db.insert(userToken).values({
type: 'totp',
token: secret,
userId: subject.id
});
}
} }

3
src/routes/+page.server.ts Normal file
View File

@ -0,0 +1,3 @@
import { redirect } from '@sveltejs/kit';
export const load = () => redirect(302, '/account');

52
src/routes/account/+page.server.ts
View File

@ -1,7 +1,9 @@
import { Challenge } from '$lib/server/challenge.js'; import { Challenge } from '$lib/server/challenge.js';
import type { User } from '$lib/server/drizzle'; import type { User } from '$lib/server/drizzle';
import { Uploads } from '$lib/server/upload.js';
import { Users, type UserSession } from '$lib/server/users/index.js'; import { Users, type UserSession } from '$lib/server/users/index.js';
import { TimeOTP } from '$lib/server/users/totp.js'; import { TimeOTP } from '$lib/server/users/totp.js';
import { passwordRegex } from '$lib/validators.js';
import { fail, redirect } from '@sveltejs/kit'; import { fail, redirect } from '@sveltejs/kit';
interface AccountUpdate { interface AccountUpdate {
@ -23,7 +25,7 @@ export const actions = {
const currentUser = await Users.getBySession(locals.session.data?.user); const currentUser = await Users.getBySession(locals.session.data?.user);
if (!currentUser) { if (!currentUser) {
await locals.session.destroy(); await locals.session.destroy();
return redirect(301, '/login'); return redirect(303, '/login');
} }
const body = await request.formData(); const body = await request.formData();
@ -86,6 +88,14 @@ export const actions = {
}); });
} }
if (data.newPassword && !passwordRegex.test(data.newPassword)) {
return fail(400, {
displayName: data.displayName,
errors: ['invalidPassword'],
fields: ['newPassword']
});
}
// Invalid display name // Invalid display name
if (data.displayName && (data.displayName.length < 3 || data.displayName.length > 32)) { if (data.displayName && (data.displayName.length < 3 || data.displayName.length > 32)) {
return fail(400, { return fail(400, {
@ -97,7 +107,7 @@ export const actions = {
// When updating email or password, we check if OTP has been enabled. // When updating email or password, we check if OTP has been enabled.
// If it is, we need to ask for the OTP code. // If it is, we need to ask for the OTP code.
if (data.newEmail || data.newPassword) { if (!body.has('challenge') && (data.newEmail || data.newPassword)) {
const isOtp = await TimeOTP.isUserOtp(currentUser); const isOtp = await TimeOTP.isUserOtp(currentUser);
if (isOtp) { if (isOtp) {
const challenge = await Challenge.issueChallenge(data, currentUser.uuid); const challenge = await Challenge.issueChallenge(data, currentUser.uuid);
@ -136,6 +146,39 @@ export const actions = {
fields: <string[]>[], fields: <string[]>[],
displayName: data.displayName || currentUser.display_name displayName: data.displayName || currentUser.display_name
}; };
},
avatar: async ({ request, locals }) => {
const currentUser = await Users.getBySession(locals.session.data?.user);
if (!currentUser) {
await locals.session.destroy();
return redirect(303, '/login');
}
const formData = Object.fromEntries(await request.formData());
if (!(formData.file as File).name || (formData.file as File).name === 'undefined') {
return fail(400, {
error: true,
message: 'You must provide a file to upload'
});
}
const { file } = formData as { file: File };
await Uploads.saveAvatar(currentUser, file);
return { avatarChanged: true };
},
removeAvatar: async ({ locals }) => {
const currentUser = await Users.getBySession(locals.session.data?.user);
if (!currentUser) {
await locals.session.destroy();
return redirect(303, '/login');
}
await Uploads.removeAvatar(currentUser);
return { avatarChanged: true };
} }
}; };
@ -148,9 +191,12 @@ export async function load({ locals, url }) {
} }
const otpEnabled = await TimeOTP.isUserOtp(currentUser); const otpEnabled = await TimeOTP.isUserOtp(currentUser);
const updateRef = Date.now();
return { return {
user: userInfo, user: userInfo,
otpEnabled otpEnabled,
hasAvatar: !!currentUser.pictureId,
updateRef
}; };
} }

156
src/routes/account/+page.svelte
View File

@ -2,15 +2,82 @@
import { t } from '$lib/i18n'; import { t } from '$lib/i18n';
import LogoutButton from '$lib/components/LogoutButton.svelte'; import LogoutButton from '$lib/components/LogoutButton.svelte';
import type { ActionData, PageData } from './$types'; import type { ActionData, PageData } from './$types';
import FormControl from '$lib/components/form/FormControl.svelte';
import FormSection from '$lib/components/form/FormSection.svelte';
import FormWrapper from '$lib/components/form/FormWrapper.svelte';
import Button from '$lib/components/Button.svelte';
import Alert from '$lib/components/Alert.svelte';
import ViewColumn from '$lib/components/ColumnView.svelte';
import MainContainer from '$lib/components/MainContainer.svelte';
import SplitView from '$lib/components/SplitView.svelte';
import { enhance } from '$app/forms';
import type { SubmitFunction } from '@sveltejs/kit';
import AvatarCard from '$lib/components/avatar/AvatarCard.svelte';
import AvatarModal from '$lib/components/avatar/AvatarModal.svelte';
import { writable } from 'svelte/store';
export let data: PageData; export let data: PageData;
export let form: ActionData; export let form: ActionData;
let internalErrors: string[] = [];
$: errors = [...internalErrors, ...(form?.errors?.length ? form.errors : [])];
let usernameRef: HTMLInputElement;
let displayRef: HTMLInputElement;
let showAvatarModal = writable(false);
const enhanceFn: SubmitFunction = ({ formData, cancel }) => {
internalErrors.length = 0;
const pwd = formData.get('newPassword') as string;
const repeat = formData.get('repeatPassword') as string;
if (pwd && pwd !== repeat) {
internalErrors.push('passwordMismatch');
return cancel();
}
return async ({ update }) => {
await update();
// Reset these values, as they are cleared but we don't want that.
if (usernameRef) {
usernameRef.value = data.user.username;
}
if (displayRef) {
displayRef.value = form?.displayName || data.user.name;
}
};
};
</script> </script>
<span>{data.user.name}</span> <MainContainer>
<h1>{$t('common.siteName')}</h1>
<SplitView>
<div>
<h2>{$t('account.title')}</h2>
<form action="?/update" method="POST"> <form action="?/update" method="POST" use:enhance={enhanceFn}>
<div class="form-control"> <FormWrapper>
{#if form?.success}<Alert type="success">{$t('account.changeSuccess')}</Alert>{/if}
{#if errors.length}
{#each errors as error}
<Alert type="error">{$t(`account.errors.${error}`)}</Alert>
{/each}
{/if}
{#if form?.otpRequired}
<!-- Two-factor code request -->
<FormSection title={$t('account.login.otp')}>
<input name="challenge" value={form.otpRequired} type="hidden" />
<FormControl>
<label for="form-otpCode">{$t('account.login.otpCode')}</label>
<!-- svelte-ignore a11y-autofocus -->
<input id="form-otpCode" name="otpCode" autocomplete="off" autofocus />
</FormControl>
</FormSection>
{:else}
<FormControl>
<label for="form-username">{$t('account.username')}</label> <label for="form-username">{$t('account.username')}</label>
<input <input
type="text" type="text"
@ -18,34 +85,35 @@
value={data.user.username} value={data.user.username}
id="form-username" id="form-username"
autocomplete="username" autocomplete="username"
bind:this={usernameRef}
/> />
</div> </FormControl>
<div class="form-control"> <FormControl>
<label for="form-displayName">{$t('account.displayName')}</label> <label for="form-displayName">{$t('account.displayName')}</label>
<input <input
type="text" type="text"
name="displayName" name="displayName"
value={form?.displayName || data.user.name} value={form?.displayName || data.user.name}
id="form-displayName" id="form-displayName"
bind:this={displayRef}
/> />
</div> </FormControl>
<div class="form-subtitle">{$t('account.changeEmail')}</div> <FormSection title={$t('account.changeEmail')}>
<FormControl>
<div class="form-control">
<label for="form-currentEmail">{$t('account.currentEmail')}</label> <label for="form-currentEmail">{$t('account.currentEmail')}</label>
<input type="email" name="currentEmail" id="form-currentEmail" /> <input type="email" name="currentEmail" id="form-currentEmail" />
</div> </FormControl>
<div class="form-control"> <FormControl>
<label for="form-newEmail">{$t('account.newEmail')}</label> <label for="form-newEmail">{$t('account.newEmail')}</label>
<input type="email" name="newEmail" id="form-newEmail" /> <input type="email" name="newEmail" id="form-newEmail" />
</div> </FormControl>
</FormSection>
<div class="form-subtitle">{$t('account.changePassword')}</div> <FormSection title={$t('account.changePassword')}>
<FormControl>
<div class="form-control">
<label for="form-currentPassword">{$t('account.currentPassword')}</label> <label for="form-currentPassword">{$t('account.currentPassword')}</label>
<input <input
type="password" type="password"
@ -53,14 +121,21 @@
name="currentPassword" name="currentPassword"
id="form-currentPassword" id="form-currentPassword"
/> />
</div> </FormControl>
<div class="form-control"> <FormControl>
<label for="form-newPassword">{$t('account.newPassword')}</label> <label for="form-newPassword">{$t('account.newPassword')}</label>
<input type="password" autocomplete="new-password" name="newPassword" id="form-newPassword" /> <input
</div> type="password"
autocomplete="new-password"
name="newPassword"
id="form-newPassword"
aria-describedby="new-password-hint"
/>
<span id="new-password-hint">{$t('account.passwordHint')}</span>
</FormControl>
<div class="form-control"> <FormControl>
<label for="form-repeatPassword">{$t('account.repeatPassword')}</label> <label for="form-repeatPassword">{$t('account.repeatPassword')}</label>
<input <input
type="password" type="password"
@ -68,9 +143,44 @@
name="repeatPassword" name="repeatPassword"
id="form-repeatPassword" id="form-repeatPassword"
/> />
</FormControl>
</FormSection>
{/if}
<Button variant="primary" type="submit">{$t('account.submit')}</Button>
</FormWrapper>
</form>
</div> </div>
<button class="btn">{$t('account.submit')}</button> <ViewColumn slot="side">
</form> <div>
<h3>{$t('account.avatar.title')}</h3>
<AvatarCard user={data.user} cacheBust={data.updateRef}>
<ViewColumn>
<Button variant="primary" on:click={() => ($showAvatarModal = true)}
>{$t('account.avatar.change')}</Button
>
{#if data.hasAvatar}
<form action="?/removeAvatar" method="POST" use:enhance>
<Button variant="link" type="submit">{$t('account.avatar.remove')}</Button>
</form>
{/if}
</ViewColumn>
</AvatarCard>
</div>
<LogoutButton /> <div>
<h3>{$t('account.otp.title')}</h3>
{#if data.otpEnabled}
<p>{$t('account.otp.enabled')}</p>
{:else}
<p>{$t('account.otp.disabled')}</p>
{/if}
<a href="/account/two-factor">{$t('common.manage')}</a>
</div>
</ViewColumn>
</SplitView>
<LogoutButton />
</MainContainer>
<AvatarModal show={showAvatarModal} />

79
src/routes/account/two-factor/+page.server.ts Normal file
View File

@ -0,0 +1,79 @@
import { Challenge, type ChallengeBody } from '$lib/server/challenge.js';
import { Changesets } from '$lib/server/changesets.js';
import { CryptoUtils } from '$lib/server/crypto-utils';
import type { User } from '$lib/server/drizzle';
import { Users } from '$lib/server/users';
import { TimeOTP } from '$lib/server/users/totp.js';
import { fail, redirect } from '@sveltejs/kit';
import * as QRCode from 'qrcode';
interface ActivateChallenge {
secret: string;
}
interface ActivateRequest {
challenge: string;
otpCode?: string;
}
const issueActivateChallenge = async (subject: User) => {
const secret = TimeOTP.createSecret();
const challenge = await Challenge.issueChallenge<ActivateChallenge>({ secret }, subject.uuid);
const uri = TimeOTP.getUri(secret, subject.username);
const qr = await QRCode.toDataURL(uri);
return { challenge, qr, uri };
};
export const actions = {
activate: async ({ locals, request }) => {
const currentUser = await Users.getBySession(locals.session.data?.user);
if (!currentUser) {
await locals.session.destroy();
return redirect(303, '/login');
}
const body = await request.formData();
const { challenge, otpCode } = Changesets.take<ActivateRequest>(['challenge', 'otpCode'], body);
if (!challenge) {
return issueActivateChallenge(currentUser);
}
const decoded = await CryptoUtils.decryptChallenge<ChallengeBody<ActivateChallenge>>(challenge);
if (
!otpCode ||
decoded?.aud !== currentUser.uuid ||
!decoded?.data?.secret ||
!TimeOTP.validate(decoded.data.secret, otpCode)
) {
return fail(400, { invalid: true });
}
await TimeOTP.saveUserOtp(currentUser, decoded.data.secret);
// TODO: audit log
return { success: true };
},
deactivate: async ({ locals }) => {
const currentUser = await Users.getBySession(locals.session.data?.user);
if (!currentUser) {
await locals.session.destroy();
return redirect(303, '/login');
}
}
};
export async function load({ locals }) {
const currentUser = await Users.getBySession(locals.session.data?.user);
if (!currentUser) {
await locals.session.destroy();
return redirect(301, '/login');
}
const otpEnabled = await TimeOTP.isUserOtp(currentUser);
return {
otpEnabled
};
}

58
src/routes/account/two-factor/+page.svelte Normal file
View File

@ -0,0 +1,58 @@
<script lang="ts">
import Alert from '$lib/components/Alert.svelte';
import Button from '$lib/components/Button.svelte';
import MainContainer from '$lib/components/MainContainer.svelte';
import FormControl from '$lib/components/form/FormControl.svelte';
import FormSection from '$lib/components/form/FormSection.svelte';
import FormWrapper from '$lib/components/form/FormWrapper.svelte';
import { t } from '$lib/i18n';
import type { ActionData, PageData } from './$types';
export let data: PageData;
export let form: ActionData;
</script>
<MainContainer>
<h1>{$t('common.siteName')}</h1>
<h2>{$t('account.otp.title')}</h2>
{#if form?.success}
<Alert type="success">{$t('account.otp.activated')}</Alert>
<br />
<a href="/account">{$t('account.otp.return')}</a>
{:else if form?.challenge}
<form action="?/activate" method="POST">
<FormWrapper>
<FormSection title={$t('account.otp.scan')}>
<div class="qr-wrapper">
<img src={form?.qr} alt={form?.uri} />
</div>
<input value={form.challenge} type="hidden" name="challenge" />
</FormSection>
<FormControl>
<label for="form-otpCode">{$t('account.otp.code')}</label>
<input type="text" name="otpCode" id="form-otpCode" autocomplete="off" />
</FormControl>
<Button type="submit" variant="primary">{$t('account.submit')}</Button>
</FormWrapper>
</form>
{:else if form?.invalid}
<Alert type="error">{$t('account.errors.otpFailed')}</Alert>
<br />
<form action="?/activate" method="POST">
<Button type="submit" variant="link">{$t('account.otp.retry')}</Button>
</form>
{:else if data?.otpEnabled}
<Alert type="success">{$t('account.otp.enabled')}</Alert>
<br />
<form action="?/deactivate" method="POST">
<Button type="submit" variant="link">{$t('account.otp.deactivate')}</Button>
</form>
{:else}
<Alert type="default">{$t('account.otp.disabled')}</Alert>
<br />
<form action="?/activate" method="POST">
<Button type="submit" variant="link">{$t('account.otp.activate')}</Button>
</form>
{/if}
</MainContainer>

24
src/routes/api/avatar/[slug]/+server.ts Normal file
View File

@ -0,0 +1,24 @@
import { Uploads } from '$lib/server/upload.js';
import { readFile } from 'fs/promises';
import { join } from 'path';
export async function GET({ params }) {
const uuid = params.slug;
const uploadFile = await Uploads.getAvatarByUuid(uuid);
if (!uploadFile) {
return new Response(Uploads.fallbackImage, {
status: 200,
headers: {
'Content-Type': 'image/png'
}
});
}
const readUpload = await readFile(join(Uploads.uploads, uploadFile.file));
return new Response(readUpload, {
status: 200,
headers: {
'Content-Type': uploadFile.mimetype
}
});
}

71
src/routes/login/+page.server.ts
View File

@ -1,6 +1,20 @@
import { Challenge } from '$lib/server/challenge.js';
import { Changesets } from '$lib/server/changesets.js';
import { Users } from '$lib/server/users/index.js'; import { Users } from '$lib/server/users/index.js';
import { TimeOTP } from '$lib/server/users/totp.js';
import { fail, redirect, type Actions } from '@sveltejs/kit'; import { fail, redirect, type Actions } from '@sveltejs/kit';
interface LoginParams {
email: string;
password: string;
challenge: string;
otpCode: string;
}
interface LoginChallenge {
email: string;
}
export const actions = { export const actions = {
default: async ({ request, locals, url }) => { default: async ({ request, locals, url }) => {
// Redirect // Redirect
@ -13,23 +27,64 @@ export const actions = {
return redirect(303, redirectUrl); return redirect(303, redirectUrl);
} }
const data = await request.formData(); // TODO: Audit log failed attempts
const email = data.get('email') as string;
const password = data.get('password') as string;
if (!email?.trim() || !password?.trim()) { const body = await request.formData();
const { email, password, challenge, otpCode } = Changesets.take<LoginParams>(
['email', 'password', 'challenge', 'otpCode'],
body
);
if (!email) {
return fail(400, { incorrect: true });
}
if (!password && (!challenge || !otpCode)) {
return fail(400, { incorrect: true }); return fail(400, { incorrect: true });
} }
// Find existing active user // Find existing active user
const loginUser = await Users.getByLogin(email); const loginUser = await Users.getByLogin(email);
if (!loginUser) {
// Compare user password
if (!loginUser || !(await Users.validatePassword(loginUser, password))) {
return fail(400, { email, incorrect: true }); return fail(400, { email, incorrect: true });
} }
// TODO: check two-factor // Check OTP challenge
if (challenge && otpCode) {
const userOtp = await TimeOTP.getUserOtp(loginUser);
if (!userOtp) {
return fail(400, { email, incorrect: true });
}
try {
const valid = await Challenge.verifyChallenge<LoginChallenge>(
challenge,
loginUser.uuid,
otpCode,
userOtp.token
);
if (email !== valid.email) {
return fail(400, { email, incorrect: true });
}
} catch {
return fail(400, { email, incorrect: true });
}
} else {
// Compare user password
if (!loginUser || !password || !(await Users.validatePassword(loginUser, password))) {
return fail(400, { email, incorrect: true });
}
}
// Issue two-factor challenge
if (!challenge) {
const isOtp = await TimeOTP.isUserOtp(loginUser);
if (isOtp) {
const issued = await Challenge.issueChallenge<LoginChallenge>({ email }, loginUser.uuid);
return { otpRequired: issued, email };
}
}
// Create session data for user // Create session data for user
const sessionUser = await Users.toSession(loginUser); const sessionUser = await Users.toSession(loginUser);

49
src/routes/login/+page.svelte
View File

@ -1,6 +1,10 @@
<script lang="ts"> <script lang="ts">
import { enhance } from '$app/forms';
import Alert from '$lib/components/Alert.svelte';
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
import SideContainer from '$lib/components/SideContainer.svelte';
import FormControl from '$lib/components/form/FormControl.svelte'; import FormControl from '$lib/components/form/FormControl.svelte';
import FormSection from '$lib/components/form/FormSection.svelte';
import FormWrapper from '$lib/components/form/FormWrapper.svelte'; import FormWrapper from '$lib/components/form/FormWrapper.svelte';
import { t } from '$lib/i18n'; import { t } from '$lib/i18n';
import type { ActionData } from './$types'; import type { ActionData } from './$types';
@ -8,15 +12,27 @@
export let form: ActionData; export let form: ActionData;
</script> </script>
<div class="login-wrapper"> <SideContainer>
<div class="login-inner">
<h1>{$t('common.siteName')}</h1> <h1>{$t('common.siteName')}</h1>
<h2>{$t('account.login.title')}</h2> <h2>{$t('account.login.title')}</h2>
<form action="" method="POST"> <form action="" method="POST" use:enhance>
<FormWrapper> <FormWrapper>
{#if form?.incorrect}<p class="error">{$t('account.errors.invalidLogin')}</p>{/if} {#if form?.incorrect}<Alert type="error">{$t('account.errors.invalidLogin')}</Alert>{/if}
{#if form?.otpRequired}
<!-- Two-factor code request -->
<FormSection title={$t('account.login.otp')}>
<input name="email" value={form.email} type="hidden" />
<input name="challenge" value={form.otpRequired} type="hidden" />
<FormControl>
<label for="login-otpCode">{$t('account.login.otpCode')}</label>
<!-- svelte-ignore a11y-autofocus -->
<input id="login-otpCode" name="otpCode" autocomplete="off" autofocus />
</FormControl>
</FormSection>
{:else}
<!-- Normal login -->
<FormControl> <FormControl>
<label for="login-email">{$t('account.login.email')}</label> <label for="login-email">{$t('account.login.email')}</label>
<input id="login-email" name="email" value={form?.email ?? ''} autocomplete="username" /> <input id="login-email" name="email" value={form?.email ?? ''} autocomplete="username" />
@ -31,7 +47,7 @@
autocomplete="current-password" autocomplete="current-password"
/> />
</FormControl> </FormControl>
{/if}
<Button type="submit" variant="primary">{$t('account.login.submit')}</Button> <Button type="submit" variant="primary">{$t('account.login.submit')}</Button>
</FormWrapper> </FormWrapper>
</form> </form>
@ -40,30 +56,9 @@
<p class="text-bold">{$t('common.description')}</p> <p class="text-bold">{$t('common.description')}</p>
<p>{@html $t('common.cookieDisclaimer')}</p> <p>{@html $t('common.cookieDisclaimer')}</p>
</div> </div>
</div> </SideContainer>
</div>
<style> <style>
.login-wrapper {
display: flex;
justify-content: flex-end;
}
.login-wrapper,
.login-inner {
height: 100%;
}
.login-inner {
display: flex;
flex-direction: column;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 40px;
max-width: 600px;
width: 100%;
}
.welcome { .welcome {
margin-top: auto; margin-top: auto;

BIN
static/application.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

2
uploads/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
*
!.gitignore