2022-08-08 10:40:51 +02:00
/ *
2022-09-09 20:43:55 +02:00
GoToSocial
Copyright ( C ) 2021 - 2022 GoToSocial Authors admin @ gotosocial . org
2022-08-08 10:40:51 +02:00
2022-09-09 20:43:55 +02:00
This program is free software : you can redistribute it and / or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation , either version 3 of the License , or
( at your option ) any later version .
2022-08-08 10:40:51 +02:00
2022-09-09 20:43:55 +02:00
This program is distributed in the hope that it will be useful ,
but WITHOUT ANY WARRANTY ; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE . See the
GNU Affero General Public License for more details .
2022-08-08 10:40:51 +02:00
2022-09-09 20:43:55 +02:00
You should have received a copy of the GNU Affero General Public License
along with this program . If not , see < http : //www.gnu.org/licenses/>.
2022-08-08 10:40:51 +02:00
* /
2022-09-07 13:51:16 +02:00
"use strict" ;
2022-08-08 10:40:51 +02:00
2022-09-09 01:39:43 +02:00
const Promise = require ( "bluebird" ) ;
const React = require ( "react" ) ;
const { useErrorHandler } = require ( "react-error-boundary" ) ;
const Submit = require ( "../components/submit" ) ;
module . exports = function UserProfile ( { account , oauth } ) {
const [ errorMsg , setError ] = React . useState ( "" ) ;
const [ statusMsg , setStatus ] = React . useState ( "" ) ;
const [ headerFile , setHeaderFile ] = React . useState ( undefined ) ;
const [ headerSrc , setHeaderSrc ] = React . useState ( "" ) ;
const [ avatarFile , setAvatarFile ] = React . useState ( undefined ) ;
const [ avatarSrc , setAvatarSrc ] = React . useState ( "" ) ;
const [ displayName , setDisplayName ] = React . useState ( "" ) ;
const [ bio , setBio ] = React . useState ( "" ) ;
const [ locked , setLocked ] = React . useState ( false ) ;
React . useEffect ( ( ) => {
setHeaderSrc ( account . header ) ;
setAvatarSrc ( account . avatar ) ;
setDisplayName ( account . display _name ) ;
setBio ( account . source ? account . source . note : "" ) ;
setLocked ( account . locked ) ;
} , [ account , setHeaderSrc , setAvatarSrc , setDisplayName , setBio , setLocked ] ) ;
const headerOnChange = ( e ) => {
setHeaderFile ( e . target . files [ 0 ] ) ;
setHeaderSrc ( URL . createObjectURL ( e . target . files [ 0 ] ) ) ;
} ;
const avatarOnChange = ( e ) => {
setAvatarFile ( e . target . files [ 0 ] ) ;
setAvatarSrc ( URL . createObjectURL ( e . target . files [ 0 ] ) ) ;
} ;
const submit = ( e ) => {
e . preventDefault ( ) ;
setStatus ( "PATCHing" ) ;
setError ( "" ) ;
return Promise . try ( ( ) => {
let formDataInfo = new FormData ( ) ;
if ( headerFile ) {
formDataInfo . set ( "header" , headerFile ) ;
}
if ( avatarFile ) {
formDataInfo . set ( "avatar" , avatarFile ) ;
}
formDataInfo . set ( "display_name" , displayName ) ;
formDataInfo . set ( "note" , bio ) ;
formDataInfo . set ( "locked" , locked ) ;
return oauth . apiRequest ( "/api/v1/accounts/update_credentials" , "PATCH" , formDataInfo , "form" ) ;
} ) . then ( ( json ) => {
setStatus ( "Saved!" ) ;
setHeaderSrc ( json . header ) ;
setAvatarSrc ( json . avatar ) ;
setDisplayName ( json . display _name ) ;
setBio ( json . source . note ) ;
setLocked ( json . locked ) ;
} ) . catch ( ( e ) => {
setError ( e . message ) ;
setStatus ( "" ) ;
} ) ;
} ;
return (
< section className = "basic" >
< h1 > @ { account . username } & apos ; s Profile Info < / h 1 >
< form >
< div className = "labelinput" >
< label htmlFor = "header" > Header < / l a b e l >
< div className = "border" >
< img className = "headerpreview" src = { headerSrc } alt = { headerSrc ? ` header image for ${ account . username } ` : "None set" } / >
< div >
< label htmlFor = "header" className = "file-input button" > Browse … < / l a b e l >
< span > { headerFile ? headerFile . name : "" } < / s p a n >
< / d i v >
< / d i v >
< input className = "hidden" id = "header" type = "file" accept = "image/*" onChange = { headerOnChange } / >
< / d i v >
< div className = "labelinput" >
< label htmlFor = "avatar" > Avatar < / l a b e l >
< div className = "border" >
< img className = "avatarpreview" src = { avatarSrc } alt = { headerSrc ? ` avatar image for ${ account . username } ` : "None set" } / >
< div >
< label htmlFor = "avatar" className = "file-input button" > Browse … < / l a b e l >
< span > { avatarFile ? avatarFile . name : "" } < / s p a n >
< / d i v >
< / d i v >
< input className = "hidden" id = "avatar" type = "file" accept = "image/*" onChange = { avatarOnChange } / >
< / d i v >
< div className = "labelinput" >
< label htmlFor = "displayname" > Display Name < / l a b e l >
< input id = "displayname" type = "text" value = { displayName } onChange = { ( e ) => setDisplayName ( e . target . value ) } placeholder = "A GoToSocial user" / >
< / d i v >
< div className = "labelinput" >
< label htmlFor = "bio" > Bio < / l a b e l >
< textarea id = "bio" value = { bio } onChange = { ( e ) => setBio ( e . target . value ) } placeholder = "Just trying out GoToSocial, my pronouns are they/them and I like sloths." / >
< / d i v >
< div className = "labelcheckbox" >
< label htmlFor = "locked" > Manually approve follow requests < / l a b e l >
< input id = "locked" type = "checkbox" checked = { locked } onChange = { ( e ) => setLocked ( e . target . checked ) } / >
< / d i v >
< Submit onClick = { submit } label = "Save profile info" errorMsg = { errorMsg } statusMsg = { statusMsg } / >
< / f o r m >
< / s e c t i o n >
) ;
2022-09-07 13:51:16 +02:00
} ;