![status icon passwords match]()
{
- reject(error.response?.data?.message)
+ const errorResponse: ApiStatusResponse = {
+ responseCode: error.response.status,
+ responseStatus: {
+ statusMessage: error.response.data.status,
+ message: error.response.data.message,
+ },
+ }
+ reject(errorResponse)
})
})
}
diff --git a/src/background/constants.ts b/src/background/constants.ts
index bdace2a4..41a9487f 100644
--- a/src/background/constants.ts
+++ b/src/background/constants.ts
@@ -21,6 +21,5 @@ const dev: constantsdef = {
}
export const constants = process.env.NODE_ENV === "development" ? dev : prod
-export const MIN_PASSWORD_LENGTH = 8
-export const MAX_PASSWORD_LENGTH = 20
+export const REQUIRED_PASSWORD_STRENGTH = 3 // 3/4 (starting at 0)
export const DEFAULT_ALERT_DURATION = 3500
diff --git a/src/background/methods/checkInput.ts b/src/background/methods/checkInput.ts
deleted file mode 100644
index 24a778a0..00000000
--- a/src/background/methods/checkInput.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function notMinStrLength(text: string, minAnz: number): boolean {
- return text.length < minAnz
-}
-
-export function biggerMaxStrLength(text: string, maxAnz: number): boolean {
- return text.length > maxAnz
-}
diff --git a/src/components/pages/User/PasswordStrengthBar.tsx b/src/components/pages/User/PasswordStrengthBar.tsx
new file mode 100644
index 00000000..f23b948b
--- /dev/null
+++ b/src/components/pages/User/PasswordStrengthBar.tsx
@@ -0,0 +1,37 @@
+import React, { Suspense } from "react"
+import { PasswordFeedback } from "react-password-strength-bar"
+
+// lazy load the lib
+const PasswordStrengthBar = React.lazy(
+ () => import("react-password-strength-bar")
+)
+
+type PasswordStrengthBarWrapperArgs = {
+ currentPassword: string
+ scoreChangeCallback: (score: number, feedback: PasswordFeedback) => void
+}
+
+// a small component wrapping the password strength checks by lazy loading the component if necessary.
+const PasswordStrengthBarWrapper = ({
+ currentPassword,
+ scoreChangeCallback,
+}: PasswordStrengthBarWrapperArgs): JSX.Element | null => {
+ // if the user typed something show the component
+ if (currentPassword.length > 0) {
+ return (
+
+
+ scoreChangeCallback(score, feedback)
+ }
+ scoreWords={["weak", "weak", "ok", "strong", "epic"]}
+ />
+
+ )
+ } else {
+ return null
+ }
+}
+
+export { PasswordStrengthBarWrapper }
diff --git a/src/components/pages/User/Profile.tsx b/src/components/pages/User/Profile.tsx
index 6bd6c963..82530e50 100644
--- a/src/components/pages/User/Profile.tsx
+++ b/src/components/pages/User/Profile.tsx
@@ -5,15 +5,12 @@ import UserInformationInput, {
} from "./UserInformationInput"
import { useSelector } from "react-redux"
import { RootState } from "../../../background/redux/store"
-import {
- DEFAULT_ALERT_DURATION,
- MIN_PASSWORD_LENGTH,
-} from "../../../background/constants"
+import { DEFAULT_ALERT_DURATION } from "../../../background/constants"
import {
changeUserInformation,
UserInformation,
} from "../../../background/api/userInformation"
-import { notMinStrLength } from "../../../background/methods/checkInput"
+import { ApiStatusResponse } from "../../../background/api/sharedApiTypes"
import edit_svg from "../../../assets/images/icons/material.io/edit_white_24dp.svg"
import { hashPassword } from "../../../background/methods/passwords"
@@ -59,67 +56,67 @@ export default function Profile(): ReactElement {
}
function changeEditMode(): void {
- console.log("[PROFILE] changedEditMode")
+ console.log("[Profile] changedEditMode")
setIsEditing(!isEditing)
}
- const handleSubmit = async (inputUser: UserInformationInputInterface) => {
- console.log("[PROFILE] handleSubmit")
- let newUser: UserInformation = {
- groups: user.groups,
- userId: user.userId,
+ const handleSubmit = async (userInput: UserInformationInputInterface) => {
+ console.log("[Profile] handleSubmit")
+
+ let updatedUser: UserInformation = {
+ ...user,
+ username: userInput.username,
}
- if (!inputUser.username) {
+
+ if (userInput.password) {
+ // if the user updated the password
+ const hashedPassword = await hashPassword(userInput.password)
+ updatedUser.password = hashedPassword
+ updatedUser.confirmationPassword = hashedPassword
+ } else if (user.username === userInput.username) {
+ // if the new username is the old one show erorr instead of calling the backend
+ // FIXME should we even show something here?
handleAlertVisibility(
DEFAULT_ALERT_DURATION,
"danger",
- "Error: Please choose an username."
+ "Error: No Changes."
)
return
}
- newUser["username"] = inputUser.username
- if (inputUser.password || inputUser.passwordConfirmation) {
- if (inputUser.password !== inputUser.passwordConfirmation) {
- handleAlertVisibility(
- DEFAULT_ALERT_DURATION,
- "danger",
- "Error: Password and password confirmation must match."
- )
- return
- }
- if (
- inputUser.password.match(/\d/) == null ||
- inputUser.password.match(/[a-z]/) == null ||
- inputUser.password.match(/[A-Z]/) == null ||
- notMinStrLength(inputUser.password, MIN_PASSWORD_LENGTH)
- ) {
- handleAlertVisibility(
- DEFAULT_ALERT_DURATION,
- "danger",
- "Error: Please pay attention to the notes below the input fields."
- )
- return
- }
- newUser["password"] = await hashPassword(inputUser.password)
- newUser["confirmationPassword"] = newUser["password"]
- }
- await changeUserInformation(newUser)
+ // trigger api call
+ await changeUserInformation(updatedUser)
.then((res) => {
changeEditMode()
+ // FIXME this does never appear, because we rerender it and this gets lost
handleAlertVisibility(
DEFAULT_ALERT_DURATION,
"success",
"Worked: " + res
)
})
- .catch((err) => {
- console.log("Error:" + err)
- handleAlertVisibility(
- DEFAULT_ALERT_DURATION,
- "danger",
- "Error: " + err
+ .catch(({ responseStatus, responseCode }: ApiStatusResponse) => {
+ console.log(
+ "[Profile] Error: (" +
+ responseCode +
+ ") - " +
+ responseStatus.message
)
+
+ // 409 === Username already taken
+ if (responseCode === 409) {
+ handleAlertVisibility(
+ DEFAULT_ALERT_DURATION,
+ "danger",
+ "Error: Username already taken"
+ )
+ } else {
+ handleAlertVisibility(
+ DEFAULT_ALERT_DURATION,
+ "danger",
+ "Error: " + responseStatus.message
+ )
+ }
})
}
@@ -127,7 +124,13 @@ export default function Profile(): ReactElement {
return (
<>
+ handleAlertVisibility(
+ DEFAULT_ALERT_DURATION,
+ "danger",
+ errorMessage
+ )
+ }
submitFunction={handleSubmit}
presets={{ username: user.username ?? "", password: "" }}
/>
diff --git a/src/components/pages/User/Registration.tsx b/src/components/pages/User/Registration.tsx
index 2712d0b5..23296768 100644
--- a/src/components/pages/User/Registration.tsx
+++ b/src/components/pages/User/Registration.tsx
@@ -1,6 +1,5 @@
import React, { ReactElement, useEffect, useState } from "react"
import { Alert, Container, Row } from "react-bootstrap"
-import { notMinStrLength } from "../../../background/methods/checkInput"
import fileFighter from "../../../assets/images/logos/adventurer-run.gif"
import { registerNewUser } from "../../../background/api/registration"
import {
@@ -8,10 +7,7 @@ import {
getWindowSize_Interface,
} from "../../../background/methods/windowSize"
import { getStyleValue } from "../../../background/methods/style"
-import {
- DEFAULT_ALERT_DURATION,
- MIN_PASSWORD_LENGTH,
-} from "../../../background/constants"
+import { DEFAULT_ALERT_DURATION } from "../../../background/constants"
import UserInformationInput, {
UserInformationInputInterface,
} from "./UserInformationInput"
@@ -69,59 +65,45 @@ export default function Registration(): ReactElement {
repositionSubmitLogo()
}, [registrationContainer, logoSubmit])
- const handleSubmit = async (newUser: UserInformationInputInterface) => {
+ const handleSubmit = (newUser: UserInformationInputInterface) => {
console.log("[REGISTRATION] handleSubmit")
- if (!newUser.username) {
- handleAlertVisibility(
- DEFAULT_ALERT_DURATION,
- "danger",
- "Error: Please choose an username."
- )
- } else if (newUser.password !== newUser.passwordConfirmation) {
- handleAlertVisibility(
- DEFAULT_ALERT_DURATION,
- "danger",
- "Error: Password and password confirmation must match."
- )
- } else if (
- newUser.password.match(/\d/) == null ||
- newUser.password.match(/[a-z]/) == null ||
- newUser.password.match(/[A-Z]/) == null ||
- notMinStrLength(newUser.password, MIN_PASSWORD_LENGTH)
- ) {
+
+ if (!newUser.password) {
handleAlertVisibility(
DEFAULT_ALERT_DURATION,
"danger",
- "Error: Please pay attention to the notes below the input fields."
- )
- } else {
- registerNewUser(
- newUser.username,
- newUser.password,
- newUser.passwordConfirmation
+ "Please specify a password!"
)
- .then((res) => {
- handleAlertVisibility(
- DEFAULT_ALERT_DURATION,
- "success",
- "Worked: " +
- (res.outputMessage
- ? res.outputMessage
- : res.httpStatus + " " + res.httpMessage)
- )
- toggleSubmitLogo()
- })
- .catch((err) => {
- handleAlertVisibility(
- DEFAULT_ALERT_DURATION,
- "danger",
- "Error: " +
- (err.outputMessage
- ? err.outputMessage
- : err.httpStatus + " " + err.httpMessage)
- )
- })
+ return
}
+
+ // FIXME: remove confirmation-password in backend
+ registerNewUser(
+ newUser.username,
+ newUser.password!!,
+ newUser.password!!
+ )
+ .then((res) => {
+ handleAlertVisibility(
+ DEFAULT_ALERT_DURATION,
+ "success",
+ "Worked: " +
+ (res.outputMessage
+ ? res.outputMessage
+ : res.httpStatus + " " + res.httpMessage)
+ )
+ toggleSubmitLogo()
+ })
+ .catch((err) => {
+ handleAlertVisibility(
+ DEFAULT_ALERT_DURATION,
+ "danger",
+ "Error: " +
+ (err.outputMessage
+ ? err.outputMessage
+ : err.httpStatus + " " + err.httpMessage)
+ )
+ })
}
const handleAlertVisibility = (
@@ -153,7 +135,13 @@ export default function Registration(): ReactElement {
Create new account
+ handleAlertVisibility(
+ DEFAULT_ALERT_DURATION,
+ "danger",
+ errorMessage
+ )
+ }
submitFunction={handleSubmit}
/>
{
+ return (
+
+
+
+ {ruleToCheck ? "Done: " : "Missing: "}
+
+
+ {ruleDesc}
+
+
-
-
- {passwordInformationLength ? "Done: " : "Missing: "}
-
-
- Passwords must be between 8 and 20 characters.
-
-
-
-
- {passwordInformationUppercase ? "Done: " : "Missing: "}
-
-
- Passwords must be at least contain 1 uppercase
- character.
-
-
-
-
- {passwordInformationLowercase ? "Done: " : "Missing: "}
-
-
- Passwords must be at least contain 1 lowercase
- character.
-
-
-
-
- {passwordInformationNumber ? "Done: " : "Missing: "}
-
-
- Passwords must be at least contain 1 number.
-
-
![{"status]()
+
+
+
+
@@ -62,71 +76,9 @@ Object {
- Passwords must be between 8 and 20 characters.
-
-
-
-
-
- Missing:
-
-
- Passwords must be at least contain 1 uppercase character.
-
-
-
-
- Missing:
-
-
- Passwords must be at least contain 1 lowercase character.
+ Passwords must be at least strong.
-
-
- Missing:
-
-
- Passwords must be at least contain 1 number.
-
-
-
-
-
![status icon passwords match]()
+
+
+
+
@@ -221,71 +187,9 @@ Object {
- Passwords must be between 8 and 20 characters.
-
-
-
-
-
- Missing:
-
-
- Passwords must be at least contain 1 uppercase character.
-
-
-
-
-
- Missing:
-
-
- Passwords must be at least contain 1 lowercase character.
+ Passwords must be at least strong.
-
-
-
- Missing:
-
-
- Passwords must be at least contain 1 number.
-
-
-
-
-