mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-10-31 22:40:01 +00:00
implement password change
This commit is contained in:
f0x
parent
43f2e988b9
commit
fa5e65b640
6 changed files with 93 additions and 200 deletions
|
|
@ -290,6 +290,12 @@ input, textarea {
|
|||
padding-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: transparent;
|
||||
width: 100%;
|
||||
border-bottom: 0.02rem solid $border-accent;
|
||||
}
|
||||
|
||||
footer {
|
||||
align-self: end;
|
||||
padding: 2rem 0 1rem 0;
|
||||
|
|
|
|||
|
|
@ -125,5 +125,6 @@ module.exports = {
|
|||
fetch: fetchInstance
|
||||
},
|
||||
oauth: require("./oauth")({apiCall, getCurrentUrl}),
|
||||
user: require("./user")({apiCall})
|
||||
user: require("./user")({apiCall}),
|
||||
apiCall
|
||||
};
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const React = require("react");
|
||||
const Promise = require("bluebird");
|
||||
|
||||
const Submit = require("../../lib/submit");
|
||||
|
||||
module.exports = function Security({oauth}) {
|
||||
const [errorMsg, setError] = React.useState("");
|
||||
const [statusMsg, setStatus] = React.useState("");
|
||||
|
||||
const [oldPassword, setOldPassword] = React.useState("");
|
||||
const [newPassword, setNewPassword] = React.useState("");
|
||||
const [newPasswordConfirm, setNewPasswordConfirm] = React.useState("");
|
||||
|
||||
const submit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (newPassword !== newPasswordConfirm) {
|
||||
setError("New password and confirm new password did not match!");
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("PATCHing");
|
||||
setError("");
|
||||
return Promise.try(() => {
|
||||
let formDataInfo = new FormData();
|
||||
formDataInfo.set("old_password", oldPassword);
|
||||
formDataInfo.set("new_password", newPassword);
|
||||
return oauth.apiRequest("/api/v1/user/password_change", "POST", formDataInfo, "form");
|
||||
}).then((json) => {
|
||||
setStatus("Saved!");
|
||||
setOldPassword("");
|
||||
setNewPassword("");
|
||||
setNewPasswordConfirm("");
|
||||
}).catch((e) => {
|
||||
setError(e.message);
|
||||
setStatus("");
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="security">
|
||||
<h1>Password Change</h1>
|
||||
<form>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="password">Current password</label>
|
||||
<input name="password" id="password" type="password" autoComplete="current-password" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} />
|
||||
</div>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="new-password">New password</label>
|
||||
<input name="new-password" id="new-password" type="password" autoComplete="new-password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
|
||||
</div>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="confirm-new-password">Confirm new password</label>
|
||||
<input name="confirm-new-password" id="confirm-new-password" type="password" autoComplete="new-password" value={newPasswordConfirm} onChange={(e) => setNewPasswordConfirm(e.target.value)} />
|
||||
</div>
|
||||
<Submit onClick={submit} label="Save new password" errorMsg={errorMsg} statusMsg={statusMsg}/>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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/>.
|
||||
*/
|
||||
|
||||
section.basic, section.posts, section.security {
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
justify-self: start;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
input:read-only {
|
||||
border: none;
|
||||
}
|
||||
|
||||
input:invalid {
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: $boxshadow_border;
|
||||
box-shadow: $box-shadow;
|
||||
object-fit: cover;
|
||||
border-radius: 0.2rem;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.avatarpreview {
|
||||
height: 8.5rem;
|
||||
width: 8.5rem;
|
||||
}
|
||||
|
||||
.headerpreview {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.moreinfolink {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.labelinput .border {
|
||||
border-radius: 0.2rem;
|
||||
border: 0.15rem solid $border_accent;
|
||||
padding: 0.3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file-input.button {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
padding: 0.3rem 0.3rem;
|
||||
align-self: flex-start;
|
||||
/* background: $border_accent; */
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.labelinput, .labelselect {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.labelcheckbox {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.titlesave {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.logout {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
26
web/source/settings-panel/user/security.js
Normal file
26
web/source/settings-panel/user/security.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const React = require("react");
|
||||
const Promise = require("bluebird");
|
||||
const Redux = require("react-redux");
|
||||
|
||||
const Submit = require("../../lib/submit");
|
||||
const api = require("../../lib");
|
||||
|
|
@ -82,6 +82,64 @@ module.exports = function UserSettings() {
|
|||
<input id="sensitive" type="checkbox" checked={account.source.sensitive} onChange={onCheckChange("source.sensitive")}/>
|
||||
</div>
|
||||
<Submit onClick={submit} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/>
|
||||
|
||||
<hr/>
|
||||
<PasswordChange/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
function PasswordChange({oauth}) {
|
||||
const dispatch = Redux.useDispatch();
|
||||
|
||||
const [errorMsg, setError] = React.useState("");
|
||||
const [statusMsg, setStatus] = React.useState("");
|
||||
|
||||
const [oldPassword, setOldPassword] = React.useState("");
|
||||
const [newPassword, setNewPassword] = React.useState("");
|
||||
const [newPasswordConfirm, setNewPasswordConfirm] = React.useState("");
|
||||
|
||||
function submit() {
|
||||
if (newPassword !== newPasswordConfirm) {
|
||||
setError("New password and confirm new password did not match!");
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("PATCHing");
|
||||
setError("");
|
||||
return Promise.try(() => {
|
||||
let data = {
|
||||
old_password: oldPassword,
|
||||
new_password: newPassword
|
||||
};
|
||||
return dispatch(api.apiCall("POST", "/api/v1/user/password_change", data, "form"));
|
||||
}).then(() => {
|
||||
setStatus("Saved!");
|
||||
setOldPassword("");
|
||||
setNewPassword("");
|
||||
setNewPasswordConfirm("");
|
||||
}).catch((e) => {
|
||||
setError(e.message);
|
||||
setStatus("");
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Change password</h1>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="password">Current password</label>
|
||||
<input name="password" id="password" type="password" autoComplete="current-password" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} />
|
||||
</div>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="new-password">New password</label>
|
||||
<input name="new-password" id="new-password" type="password" autoComplete="new-password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
|
||||
</div>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="confirm-new-password">Confirm new password</label>
|
||||
<input name="confirm-new-password" id="confirm-new-password" type="password" autoComplete="new-password" value={newPasswordConfirm} onChange={(e) => setNewPasswordConfirm(e.target.value)} />
|
||||
</div>
|
||||
<Submit onClick={submit} label="Save new password" errorMsg={errorMsg} statusMsg={statusMsg}/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue