implement password change
This commit is contained in:
f0x
parent
43f2e988b9
commit
fa5e65b640
|
|
@ -290,6 +290,12 @@ input, textarea {
|
||||||
padding-bottom: 0.1rem;
|
padding-bottom: 0.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
color: transparent;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 0.02rem solid $border-accent;
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
align-self: end;
|
align-self: end;
|
||||||
padding: 2rem 0 1rem 0;
|
padding: 2rem 0 1rem 0;
|
||||||
|
|
|
||||||
|
|
@ -125,5 +125,6 @@ module.exports = {
|
||||||
fetch: fetchInstance
|
fetch: fetchInstance
|
||||||
},
|
},
|
||||||
oauth: require("./oauth")({apiCall, getCurrentUrl}),
|
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;
|
|
||||||
}
|
|
||||||
|
|
@ -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")}/>
|
<input id="sensitive" type="checkbox" checked={account.source.sensitive} onChange={onCheckChange("source.sensitive")}/>
|
||||||
</div>
|
</div>
|
||||||
<Submit onClick={submit} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/>
|
<Submit onClick={submit} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<PasswordChange/>
|
||||||
</div>
|
</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 New Issue