From e256e32341b6b4040fed88eb913c320c6526d2bb Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Sun, 12 Jan 2020 08:16:09 +0000 Subject: [PATCH] Add api route and webclient page for account settings --- apiserver/apiserver/api/models.py | 2 + apiserver/apiserver/api/serializers.py | 42 ++++++++++-- apiserver/apiserver/api/views.py | 42 +++++++----- apiserver/apiserver/urls.py | 2 +- webclient/src/Account.js | 94 ++++++++++++++++++++++++++ webclient/src/App.js | 16 ++--- webclient/src/Home.js | 51 +++++--------- webclient/src/LoginSignup.js | 40 +++++------ 8 files changed, 200 insertions(+), 89 deletions(-) create mode 100644 webclient/src/Account.js diff --git a/apiserver/apiserver/api/models.py b/apiserver/apiserver/api/models.py index 5050ffc..7448a50 100644 --- a/apiserver/apiserver/api/models.py +++ b/apiserver/apiserver/api/models.py @@ -11,6 +11,8 @@ class Member(models.Model): last_name = models.CharField(max_length=32) set_details = models.BooleanField(default=False) + is_director = models.BooleanField(default=False) + is_instructor = models.BooleanField(default=False) preferred_name = models.CharField(max_length=32, blank=True) status = models.CharField(max_length=32, blank=True) phone = models.CharField(max_length=32, blank=True) diff --git a/apiserver/apiserver/api/serializers.py b/apiserver/apiserver/api/serializers.py index e315895..c2a0a65 100644 --- a/apiserver/apiserver/api/serializers.py +++ b/apiserver/apiserver/api/serializers.py @@ -12,8 +12,8 @@ from . import models, old_models STATIC_FOLDER = 'data/static/' LARGE_SIZE = 1080 -MEDIUM_SIZE = 150 -SMALL_SIZE = 80 +MEDIUM_SIZE = 220 +SMALL_SIZE = 110 def process_image(upload): try: @@ -74,17 +74,49 @@ class OtherMemberSerializer(serializers.ModelSerializer): # member viewing himself class MemberSerializer(serializers.ModelSerializer): + photo = serializers.ImageField(write_only=True, required=False) class Meta: model = models.Member fields = '__all__' - read_only_fields = ['user', 'application_date', 'current_start_date', 'vetted_date', 'monthly_fees', 'old_member_id'] + read_only_fields = [ + 'id', + 'is_director', + 'is_instructor', + 'status', + 'expire_date', + 'current_start_date', + 'application_date', + 'vetted_date', + 'monthly_fees', + 'photo_large', + 'photo_medium', + 'photo_small', + 'user', + ] + + def update(self, instance, validated_data): + photo = validated_data.get('photo', None) + if photo: + small, medium, large = process_image(photo) + instance.photo_small = small + instance.photo_medium = medium + instance.photo_large = large + + return super().update(instance, validated_data) + # adming viewing member -class AdminMemberSerializer(serializers.ModelSerializer): +class AdminMemberSerializer(MemberSerializer): class Meta: model = models.Member fields = '__all__' - read_only_fields = ['id', 'user'] + read_only_fields = [ + 'id', + 'photo_large', + 'photo_medium', + 'photo_small', + 'user', + ] class TransactionSerializer(serializers.ModelSerializer): diff --git a/apiserver/apiserver/api/views.py b/apiserver/apiserver/api/views.py index 9827e5b..f80cfa2 100644 --- a/apiserver/apiserver/api/views.py +++ b/apiserver/apiserver/api/views.py @@ -1,6 +1,7 @@ from django.contrib.auth.models import User, Group from django.db.models import Max -from rest_framework import viewsets, views, permissions, mixins +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.registration.views import RegisterView from fuzzywuzzy import fuzz, process @@ -8,10 +9,23 @@ from collections import OrderedDict from . import models, serializers -class AllowMetadata(permissions.BasePermission): +class AllowMetadata(BasePermission): def has_permission(self, request, view): return request.method in ['OPTIONS', 'HEAD'] +def is_admin_director(user): + return user.is_staff or user.member.is_director + +class IsOwnerOrAdmin(BasePermission): + def has_object_permission(self, request, view, obj): + return obj.user == request.user or is_admin_director(request.user) + +class RetrieveUpdateViewSet( + viewsets.GenericViewSet, + mixins.RetrieveModelMixin, + mixins.UpdateModelMixin): + def list(self, request): + raise exceptions.PermissionDenied search_strings = {} @@ -25,11 +39,10 @@ def gen_search_strings(): NUM_SEARCH_RESULTS = 10 class SearchViewSet(viewsets.GenericViewSet, mixins.RetrieveModelMixin): - permission_classes = [AllowMetadata | permissions.IsAuthenticated] + permission_classes = [AllowMetadata | IsAuthenticated] serializer_class = serializers.OtherMemberSerializer def get_queryset(self): - queryset = models.Member.objects.all() search = self.request.data.get('q', '').lower() @@ -71,26 +84,19 @@ class SearchViewSet(viewsets.GenericViewSet, mixins.RetrieveModelMixin): return Response({'seq': seq, 'results': serializer.data}) -class MemberViewSet(viewsets.ModelViewSet): - permission_classes = [AllowMetadata | permissions.IsAuthenticated] - http_method_names = ['options', 'head', 'get', 'put', 'patch'] - - def get_queryset(self): - objects = models.Member.objects.all() - if self.request.user.is_staff: - return objects.order_by('id') - else: - return objects.filter(user=self.request.user) +class MemberViewSet(RetrieveUpdateViewSet): + permission_classes = [AllowMetadata | IsAuthenticated, IsOwnerOrAdmin] + queryset = models.Member.objects.all() def get_serializer_class(self): - if self.request.user.is_staff: + if is_admin_director(self.request.user): return serializers.AdminMemberSerializer else: return serializers.MemberSerializer class CourseViewSet(viewsets.ModelViewSet): - permission_classes = [AllowMetadata | permissions.IsAuthenticated] + permission_classes = [AllowMetadata | IsAuthenticated] queryset = models.Course.objects.annotate(date=Max('sessions__datetime')).order_by('-date') def get_serializer_class(self): @@ -101,7 +107,7 @@ class CourseViewSet(viewsets.ModelViewSet): class SessionViewSet(viewsets.ModelViewSet): - permission_classes = [AllowMetadata | permissions.IsAuthenticated] + permission_classes = [AllowMetadata | IsAuthenticated] def get_queryset(self): if self.action == 'list': @@ -117,7 +123,7 @@ class SessionViewSet(viewsets.ModelViewSet): class MyUserView(views.APIView): - permission_classes = [AllowMetadata | permissions.IsAuthenticated] + permission_classes = [AllowMetadata | IsAuthenticated] def get(self, request): serializer = serializers.UserSerializer(request.user) diff --git a/apiserver/apiserver/urls.py b/apiserver/apiserver/urls.py index a70c513..93dd861 100644 --- a/apiserver/apiserver/urls.py +++ b/apiserver/apiserver/urls.py @@ -7,7 +7,7 @@ from .api import views router = routers.DefaultRouter() #router.register(r'users', views.UserViewSet) -router.register(r'members', views.MemberViewSet, basename='member') +router.register(r'members', views.MemberViewSet, basename='members') router.register(r'courses', views.CourseViewSet, basename='course') router.register(r'sessions', views.SessionViewSet, basename='session') router.register(r'search', views.SearchViewSet, basename='search') diff --git a/webclient/src/Account.js b/webclient/src/Account.js new file mode 100644 index 0000000..3c0cbfb --- /dev/null +++ b/webclient/src/Account.js @@ -0,0 +1,94 @@ +import React, { useState, useEffect } from 'react'; +import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom'; +import './light.css'; +import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react'; +import { BasicTable, staticUrl, requester } from './utils.js'; +import { LoginForm, SignupForm } from './LoginSignup.js'; + +function AccountForm(props) { + const member = props.user.member; + const [input, setInput] = useState({ ...member, set_details: true }); + 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('/members/' + member.id + '/', 'PATCH', props.token, input) + .then(res => { + console.log(res); + setError({}); + props.setUserCache({...props.user, member: res}); + 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 ( +
+
Member Details
+ + + + + + + + + + + + + Submit + + + ); +}; + +export function Account(props) { + return ( + +
Account Settings
+ + + ); +}; diff --git a/webclient/src/App.js b/webclient/src/App.js index e21627f..80b87fe 100644 --- a/webclient/src/App.js +++ b/webclient/src/App.js @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-r import './light.css'; import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react'; import { requester } from './utils.js'; import { Home } from './Home.js'; +import { Account } from './Account.js'; import { Transactions, TransactionDetail } from './Transactions.js'; import { Cards } from './Cards.js'; import { Training } from './Training.js'; @@ -39,9 +40,9 @@ function App() { }, [token]); function logout() { - window.location = '/'; setTokenCache(''); setUserCache(false); + window.location = '/'; } return ( @@ -65,9 +66,9 @@ function App() { - @@ -130,6 +126,10 @@ function App() {
{user ? + + + + diff --git a/webclient/src/Home.js b/webclient/src/Home.js index 139fb23..46e9c60 100644 --- a/webclient/src/Home.js +++ b/webclient/src/Home.js @@ -7,21 +7,11 @@ import { LoginForm, SignupForm } from './LoginSignup.js'; function SignupDetailsForm(props) { const member = props.user.member; - const [input, setInput] = useState({ - preferred_name: member.preferred_name, - phone: member.phone, - emergency_contact_name: member.emergency_contact_name, - emergency_contact_phone: member.emergency_contact_phone, - set_details: true, - }); + const [input, setInput] = useState({ ...member, set_details: true }); const [error, setError] = useState({}); const [loading, setLoading] = useState(false); - const handleValues = (e, v) => setInput({ - ...input, - [v.name]: v.value - }); - + const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value }); const handleChange = (e) => handleValues(e, e.currentTarget); const handleSubmit = (e) => { @@ -39,36 +29,31 @@ function SignupDetailsForm(props) { }); }; + const makeProps = (name) => ({ + name: name, + onChange: handleChange, + value: input[name], + error: error[name], + }); + return (
Enter Member Details
@@ -107,7 +92,7 @@ function MemberInfo(props) { Status: - {member.status} + {member.status || 'Unknown'} Expiry: @@ -123,11 +108,11 @@ function MemberInfo(props) { Application: - {member.application_date || '???'} + {member.application_date || 'Unknown'} Start: - {member.current_start_date || '???'} + {member.current_start_date || 'Unknown'} Vetted: @@ -135,7 +120,7 @@ function MemberInfo(props) { Monthly: - ${member.monthly_fees || '???'} + ${member.monthly_fees || 'Unknown'} Card Number: diff --git a/webclient/src/LoginSignup.js b/webclient/src/LoginSignup.js index 49c0246..e2f96c5 100644 --- a/webclient/src/LoginSignup.js +++ b/webclient/src/LoginSignup.js @@ -9,11 +9,7 @@ export function LoginForm(props) { const [error, setError] = useState({}); const [loading, setLoading] = useState(false); - const handleValues = (e, v) => setInput({ - ...input, - [v.name]: v.value - }); - + const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value }); const handleChange = (e) => handleValues(e, e.currentTarget); const handleSubmit = (e) => { @@ -60,11 +56,7 @@ export function SignupForm(props) { const [error, setError] = useState({}); const [loading, setLoading] = useState(false); - const handleValues = (e, v) => setInput({ - ...input, - [v.name]: v.value - }); - + const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value }); const handleChange = (e) => handleValues(e, e.currentTarget); const genUsername = () => ( @@ -93,26 +85,26 @@ export function SignupForm(props) { return (
Sign Up
- - - - + + +