Add change password form to webclient

apiserver/apiserver/api/views.py

@@ -3,6 +3,7 @@ from django.db.models import Max
 from rest_framework import viewsets, views, mixins, generics, exceptions
 from rest_framework.permissions import BasePermission, IsAuthenticated
 from rest_framework.response import Response
+from rest_auth.views import PasswordChangeView
 from rest_auth.registration.views import RegisterView
 from fuzzywuzzy import fuzz, process
 from collections import OrderedDict
@@ -130,15 +131,8 @@ class MyUserView(views.APIView):
         return Response(serializer.data)
 
 
-class RegistrationViewSet(RegisterView):
+class RegistrationView(RegisterView):
     serializer_class = serializers.RegistrationSerializer
 
-    #def create(self, request):
-    #    data = request.data.copy()
-    #    data['username'] = '{}.{}'.format(
-    #        data['first_name'],
-    #        data['last_name']
-    #    ).lower()
-    #    request._full_data = data
-    #    return super().create(request)
-
+class PasswordChangeView(PasswordChangeView):
+    permission_classes = [AllowMetadata | IsAuthenticated]

apiserver/apiserver/settings.py

@@ -223,3 +223,5 @@ ACCOUNT_EMAIL_REQUIRED = True
 ACCOUNT_EMAIL_VERIFICATION = 'none'
 ACCOUNT_USERNAME_MIN_LENGTH = 3
 ACCOUNT_AUTHENTICATION_METHOD = 'username'
+OLD_PASSWORD_FIELD_ENABLED = True
+LOGOUT_ON_PASSWORD_CHANGE = False

apiserver/apiserver/urls.py

@@ -19,6 +19,7 @@ urlpatterns = [
     path('admin/', admin.site.urls),
     path('api-auth/', include('rest_framework.urls')),
     url(r'^rest-auth/', include('rest_auth.urls')),
-    url(r'^registration/', views.RegistrationViewSet.as_view(), name='rest_name_register'),
+    url(r'^registration/', views.RegistrationView.as_view(), name='rest_name_register'),
+    url(r'^password/change/', views.PasswordChangeView.as_view(), name='rest_password_change'),
     url(r'^me/', views.MyUserView.as_view(), name='fullmember'),
 ]

webclient/src/Account.js

@@ -5,9 +5,67 @@ import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Me
 import { BasicTable, staticUrl, requester } from './utils.js';
 import { LoginForm, SignupForm } from './LoginSignup.js';
 
+function ChangePasswordForm(props) {
+	const [input, setInput] = useState({});
+	const [error, setError] = useState({});
+	const [loading, setLoading] = useState(false);
+	const history = useHistory();
+
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
+	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
+	const handleChange = (e) => handleValues(e, e.currentTarget);
+
+	const handleSubmit = (e) => {
+		setLoading(true);
+		requester('/rest-auth/password/change/', 'POST', props.token, input)
+		.then(res => {
+			setError({});
+			history.push('/');
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	const makeProps = (name) => ({
+		name: name,
+		onChange: handleChange,
+		value: input[name],
+		error: error[name],
+	});
+
+	return (
+		<Form onSubmit={handleSubmit}>
+			<Header size='medium'>Change Password</Header>
+
+			<Form.Input
+				label='Old Password'
+				type='password'
+				{...makeProps('old_password')}
+			/>
+			<Form.Input
+				label='New Password'
+				type='password'
+				{...makeProps('new_password1')}
+			/>
+			<Form.Input
+				label='Confirm Password'
+				type='password'
+				{...makeProps('new_password2')}
+			/>
+
+			<Form.Button loading={loading} error={error.non_field_errors}>
+				Submit
+			</Form.Button>
+		</Form>
+	);
+};
+
 function AccountForm(props) {
 	const member = props.user.member;
-	const [input, setInput] = useState({ ...member, set_details: true });
+	const [input, setInput] = useState({ ...member });
 	const [error, setError] = useState({});
 	const [loading, setLoading] = useState(false);
 	const history = useHistory();
@@ -20,7 +78,6 @@ function AccountForm(props) {
 		setLoading(true);
 		requester('/members/' + member.id + '/', 'PATCH', props.token, input)
 		.then(res => {
-			console.log(res);
 			setError({});
 			props.setUserCache({...props.user, member: res});
 			history.push('/');
@@ -88,7 +145,14 @@ export function Account(props) {
 	return (
 		<Container>
 			<Header size='large'>Account Settings</Header>
-			<AccountForm {...props} />
+			<Grid stackable columns={2}>
+				<Grid.Column>
+					<Segment padded><AccountForm {...props} /></Segment>
+				</Grid.Column>
+				<Grid.Column>
+					<Segment padded><ChangePasswordForm {...props} /></Segment>
+				</Grid.Column>
+			</Grid>
 		</Container>
 	);
 };