mirrors
/
gotosocial
mirror of
1
Fork 0
Code Issues Releases Activity

implement password change

This commit is contained in:
f0x 2022-09-12 19:47:13 +02:00
parent 43f2e988b9
commit fa5e65b640
6 changed files with 93 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/source/css/base.css
View File

@ -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;

3
web/source/settings-panel/lib/api/index.js
View File

@ -125,5 +125,6 @@ module.exports = {
fetch: fetchInstance
},
oauth: require("./oauth")({apiCall, getCurrentUrl}),
user: require("./user")({apiCall})
user: require("./user")({apiCall}),
apiCall
};

80
web/source/settings-panel/old/user/security.js
View File

@ -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>
);
};

118
web/source/settings-panel/old/user/style.css
View File

@ -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
View 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");

58
web/source/settings-panel/user/settings.js
View File

@ -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}/>
</>
);
}