@@ -5,15 +5,12 @@ import UserInformationInput, {
5
5
} from "./UserInformationInput"
6
6
import { useSelector } from "react-redux"
7
7
import { RootState } from "../../../background/redux/store"
8
- import {
9
- DEFAULT_ALERT_DURATION ,
10
- MIN_PASSWORD_LENGTH ,
11
- } from "../../../background/constants"
8
+ import { DEFAULT_ALERT_DURATION } from "../../../background/constants"
12
9
import {
13
10
changeUserInformation ,
14
11
UserInformation ,
15
12
} from "../../../background/api/userInformation"
16
- import { notMinStrLength } from "../../../background/methods/checkInput "
13
+ import { ApiStatusResponse } from "../../../background/api/sharedApiTypes "
17
14
import edit_svg from "../../../assets/images/icons/material.io/edit_white_24dp.svg"
18
15
import { hashPassword } from "../../../background/methods/passwords"
19
16
@@ -59,75 +56,81 @@ export default function Profile(): ReactElement {
59
56
}
60
57
61
58
function changeEditMode ( ) : void {
62
- console . log ( "[PROFILE ] changedEditMode" )
59
+ console . log ( "[Profile ] changedEditMode" )
63
60
setIsEditing ( ! isEditing )
64
61
}
65
62
66
- const handleSubmit = async ( inputUser : UserInformationInputInterface ) => {
67
- console . log ( "[PROFILE] handleSubmit" )
68
- let newUser : UserInformation = {
69
- groups : user . groups ,
70
- userId : user . userId ,
63
+ const handleSubmit = async ( userInput : UserInformationInputInterface ) => {
64
+ console . log ( "[Profile] handleSubmit" )
65
+
66
+ let updatedUser : UserInformation = {
67
+ ...user ,
68
+ username : userInput . username ,
71
69
}
72
- if ( ! inputUser . username ) {
70
+
71
+ if ( userInput . password ) {
72
+ // if the user updated the password
73
+ const hashedPassword = await hashPassword ( userInput . password )
74
+ updatedUser . password = hashedPassword
75
+ updatedUser . confirmationPassword = hashedPassword
76
+ } else if ( user . username === userInput . username ) {
77
+ // if the new username is the old one show erorr instead of calling the backend
78
+ // FIXME should we even show something here?
73
79
handleAlertVisibility (
74
80
DEFAULT_ALERT_DURATION ,
75
81
"danger" ,
76
- "Error: Please choose an username ."
82
+ "Error: No Changes ."
77
83
)
78
84
return
79
85
}
80
- newUser [ "username" ] = inputUser . username
81
- if ( inputUser . password || inputUser . passwordConfirmation ) {
82
- if ( inputUser . password !== inputUser . passwordConfirmation ) {
83
- handleAlertVisibility (
84
- DEFAULT_ALERT_DURATION ,
85
- "danger" ,
86
- "Error: Password and password confirmation must match."
87
- )
88
- return
89
- }
90
- if (
91
- inputUser . password . match ( / \d / ) == null ||
92
- inputUser . password . match ( / [ a - z ] / ) == null ||
93
- inputUser . password . match ( / [ A - Z ] / ) == null ||
94
- notMinStrLength ( inputUser . password , MIN_PASSWORD_LENGTH )
95
- ) {
96
- handleAlertVisibility (
97
- DEFAULT_ALERT_DURATION ,
98
- "danger" ,
99
- "Error: Please pay attention to the notes below the input fields."
100
- )
101
- return
102
- }
103
- newUser [ "password" ] = await hashPassword ( inputUser . password )
104
- newUser [ "confirmationPassword" ] = newUser [ "password" ]
105
- }
106
86
107
- await changeUserInformation ( newUser )
87
+ // trigger api call
88
+ await changeUserInformation ( updatedUser )
108
89
. then ( ( res ) => {
109
90
changeEditMode ( )
91
+ // FIXME this does never appear, because we rerender it and this gets lost
110
92
handleAlertVisibility (
111
93
DEFAULT_ALERT_DURATION ,
112
94
"success" ,
113
95
"Worked: " + res
114
96
)
115
97
} )
116
- . catch ( ( err ) => {
117
- console . log ( "Error:" + err )
118
- handleAlertVisibility (
119
- DEFAULT_ALERT_DURATION ,
120
- "danger" ,
121
- "Error: " + err
98
+ . catch ( ( { responseStatus , responseCode } : ApiStatusResponse ) => {
99
+ console . log (
100
+ "[Profile] Error: (" +
101
+ responseCode +
102
+ ") - " +
103
+ responseStatus . message
122
104
)
105
+
106
+ // 409 === Username already taken
107
+ if ( responseCode === 409 ) {
108
+ handleAlertVisibility (
109
+ DEFAULT_ALERT_DURATION ,
110
+ "danger" ,
111
+ "Error: Username already taken"
112
+ )
113
+ } else {
114
+ handleAlertVisibility (
115
+ DEFAULT_ALERT_DURATION ,
116
+ "danger" ,
117
+ "Error: " + responseStatus . message
118
+ )
119
+ }
123
120
} )
124
121
}
125
122
126
123
function EditProfile ( ) : ReactElement {
127
124
return (
128
125
< >
129
126
< UserInformationInput
130
- triggerAlert = { handleAlertVisibility }
127
+ triggerAlert = { ( errorMessage : string ) =>
128
+ handleAlertVisibility (
129
+ DEFAULT_ALERT_DURATION ,
130
+ "danger" ,
131
+ errorMessage
132
+ )
133
+ }
131
134
submitFunction = { handleSubmit }
132
135
presets = { { username : user . username ?? "" , password : "" } }
133
136
/>
0 commit comments