From 68ca8b0976efe90c0c40bcae69f0825671b98bad Mon Sep 17 00:00:00 2001 From: crupest Date: Sat, 30 May 2020 16:23:25 +0800 Subject: Merge front end to this repo. But I need to wait for aspnet core support for custom port and package manager for dev server. --- Timeline/ClientApp/src/user/ChangeAvatarDialog.tsx | 305 +++++++++++++++++++++ .../ClientApp/src/user/ChangeNicknameDialog.tsx | 28 ++ Timeline/ClientApp/src/user/Login.tsx | 146 ++++++++++ Timeline/ClientApp/src/user/User.tsx | 70 +++++ Timeline/ClientApp/src/user/UserInfoCard.tsx | 126 +++++++++ Timeline/ClientApp/src/user/UserPage.tsx | 20 ++ Timeline/ClientApp/src/user/api.ts | 78 ++++++ Timeline/ClientApp/src/user/user-page.scss | 13 + 8 files changed, 786 insertions(+) create mode 100644 Timeline/ClientApp/src/user/ChangeAvatarDialog.tsx create mode 100644 Timeline/ClientApp/src/user/ChangeNicknameDialog.tsx create mode 100644 Timeline/ClientApp/src/user/Login.tsx create mode 100644 Timeline/ClientApp/src/user/User.tsx create mode 100644 Timeline/ClientApp/src/user/UserInfoCard.tsx create mode 100644 Timeline/ClientApp/src/user/UserPage.tsx create mode 100644 Timeline/ClientApp/src/user/api.ts create mode 100644 Timeline/ClientApp/src/user/user-page.scss (limited to 'Timeline/ClientApp/src/user') diff --git a/Timeline/ClientApp/src/user/ChangeAvatarDialog.tsx b/Timeline/ClientApp/src/user/ChangeAvatarDialog.tsx new file mode 100644 index 00000000..e082d5a0 --- /dev/null +++ b/Timeline/ClientApp/src/user/ChangeAvatarDialog.tsx @@ -0,0 +1,305 @@ +import React, { useState, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import { + Modal, + ModalHeader, + Row, + Button, + ModalBody, + ModalFooter, +} from 'reactstrap'; +import { AxiosError } from 'axios'; + +import ImageCropper, { Clip, applyClipToImage } from '../common/ImageCropper'; + +export interface ChangeAvatarDialogProps { + open: boolean; + close: () => void; + process: (blob: Blob) => Promise; +} + +const ChangeAvatarDialog: React.FC = (props) => { + const { t } = useTranslation(); + + const [file, setFile] = React.useState(null); + const [fileUrl, setFileUrl] = React.useState(null); + const [clip, setClip] = React.useState(null); + const [ + cropImgElement, + setCropImgElement, + ] = React.useState(null); + const [resultBlob, setResultBlob] = React.useState(null); + const [resultUrl, setResultUrl] = React.useState(null); + + const [state, setState] = React.useState< + | 'select' + | 'crop' + | 'processcrop' + | 'preview' + | 'uploading' + | 'success' + | 'error' + >('select'); + + const [message, setMessage] = useState< + string | { type: 'custom'; text: string } | null + >('userPage.dialogChangeAvatar.prompt.select'); + + const trueMessage = + message == null + ? null + : typeof message === 'string' + ? t(message) + : message.text; + + const closeDialog = props.close; + + const toggle = React.useCallback((): void => { + if (!(state === 'uploading')) { + closeDialog(); + } + }, [state, closeDialog]); + + useEffect(() => { + if (file != null) { + const url = URL.createObjectURL(file); + setClip(null); + setFileUrl(url); + setState('crop'); + return () => { + URL.revokeObjectURL(url); + }; + } else { + setFileUrl(null); + setState('select'); + } + }, [file]); + + React.useEffect(() => { + if (resultBlob != null) { + const url = URL.createObjectURL(resultBlob); + setResultUrl(url); + setState('preview'); + return () => { + URL.revokeObjectURL(url); + }; + } else { + setResultUrl(null); + } + }, [resultBlob]); + + const onSelectFile = React.useCallback( + (e: React.ChangeEvent): void => { + const files = e.target.files; + if (files == null || files.length === 0) { + setFile(null); + } else { + setFile(files[0]); + } + }, + [] + ); + + const onCropNext = React.useCallback(() => { + if ( + cropImgElement == null || + clip == null || + clip.width === 0 || + file == null + ) { + throw new Error('Invalid state.'); + } + + setState('processcrop'); + applyClipToImage(cropImgElement, clip, file.type).then((b) => { + setResultBlob(b); + }); + }, [cropImgElement, clip, file]); + + const onCropPrevious = React.useCallback(() => { + setFile(null); + setState('select'); + }, []); + + const onPreviewPrevious = React.useCallback(() => { + setResultBlob(null); + setState('crop'); + }, []); + + const process = props.process; + + const upload = React.useCallback(() => { + if (resultBlob == null) { + throw new Error('Invalid state.'); + } + + setState('uploading'); + process(resultBlob).then( + () => { + setState('success'); + }, + (e: unknown) => { + setState('error'); + setMessage({ type: 'custom', text: (e as AxiosError).message }); + } + ); + }, [resultBlob, process]); + + const createPreviewRow = (): React.ReactElement => { + if (resultUrl == null) { + throw new Error('Invalid state.'); + } + return ( + + {t('userPage.dialogChangeAvatar.previewImgAlt')} + + ); + }; + + return ( + + {t('userPage.dialogChangeAvatar.title')} + {(() => { + if (state === 'select') { + return ( + <> + + {t('userPage.dialogChangeAvatar.prompt.select')} + + + + + + + + + ); + } else if (state === 'crop') { + if (fileUrl == null) { + throw new Error('Invalid state.'); + } + return ( + <> + + + + + {t('userPage.dialogChangeAvatar.prompt.crop')} + + + + + + + + ); + } else if (state === 'processcrop') { + return ( + <> + + + {t('userPage.dialogChangeAvatar.prompt.processingCrop')} + + + + + + + + ); + } else if (state === 'preview') { + return ( + <> + + {createPreviewRow()} + {t('userPage.dialogChangeAvatar.prompt.preview')} + + + + + + + + ); + } else if (state === 'uploading') { + return ( + <> + + {createPreviewRow()} + {t('userPage.dialogChangeAvatar.prompt.uploading')} + + + + ); + } else if (state === 'success') { + return ( + <> + + + {t('operationDialog.success')} + + + + + + + ); + } else { + return ( + <> + + {createPreviewRow()} + {trueMessage} + + + + + + + ); + } + })()} + + ); +}; + +export default ChangeAvatarDialog; diff --git a/Timeline/ClientApp/src/user/ChangeNicknameDialog.tsx b/Timeline/ClientApp/src/user/ChangeNicknameDialog.tsx new file mode 100644 index 00000000..393d88f6 --- /dev/null +++ b/Timeline/ClientApp/src/user/ChangeNicknameDialog.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import OperationDialog from '../common/OperationDialog'; + +export interface ChangeNicknameDialogProps { + open: boolean; + close: () => void; + onProcess: (newNickname: string) => Promise; +} + +const ChangeNicknameDialog: React.FC = props => { + return ( + { + return props.onProcess(newNickname as string); + }} + close={props.close} + /> + ); +}; + +export default ChangeNicknameDialog; diff --git a/Timeline/ClientApp/src/user/Login.tsx b/Timeline/ClientApp/src/user/Login.tsx new file mode 100644 index 00000000..fc9364c0 --- /dev/null +++ b/Timeline/ClientApp/src/user/Login.tsx @@ -0,0 +1,146 @@ +import React, { Fragment, useState, useEffect } from 'react'; +import { useHistory } from 'react-router'; +import { useTranslation } from 'react-i18next'; + +import AppBar from '../common/AppBar'; + +import { userLogin, useUser } from '../data/user'; +import { + Label, + FormGroup, + Input, + Form, + FormFeedback, + Spinner, + Button, +} from 'reactstrap'; + +const Login: React.FC = (_) => { + const { t } = useTranslation(); + const history = useHistory(); + const [username, setUsername] = useState(''); + const [usernameDirty, setUsernameDirty] = useState(false); + const [password, setPassword] = useState(''); + const [passwordDirty, setPasswordDirty] = useState(false); + const [rememberMe, setRememberMe] = useState(true); + const [process, setProcess] = useState(false); + const [error, setError] = useState(null); + + const user = useUser(); + + useEffect(() => { + if (user != null) { + const id = setTimeout(() => history.push('/'), 3000); + return () => { + clearTimeout(id); + }; + } + }, [history, user]); + + if (user != null) { + return ( + <> + +

{t('login.alreadyLogin')}

+ + ); + } + + function onSubmit(event: React.SyntheticEvent): void { + if (username === '' || password === '') { + setUsernameDirty(true); + setPasswordDirty(true); + return; + } + + setProcess(true); + userLogin( + { + username: username, + password: password, + }, + rememberMe + ).then( + (_) => { + if (history.length === 0) { + history.push('/'); + } else { + history.goBack(); + } + }, + (e) => { + setProcess(false); + setError(e.message); + } + ); + event.preventDefault(); + } + + return ( + + +
+

{t('welcome')}

+
+ + + { + setUsername(e.target.value); + setUsernameDirty(true); + }} + value={username} + invalid={usernameDirty && username === ''} + /> + {usernameDirty && username === '' && ( + {t('login.emptyUsername')} + )} + + + + { + setPassword(e.target.value); + setPasswordDirty(true); + }} + value={password} + invalid={passwordDirty && password === ''} + /> + {passwordDirty && password === '' && ( + {t('login.emptyPassword')} + )} + + + { + const v = (e.target as HTMLInputElement).checked; + setRememberMe(v); + }} + /> + + + {error ?

{t(error)}

: null} +
+ {process ? ( + + ) : ( + + )} +
+
+
+ + ); +}; + +export default Login; diff --git a/Timeline/ClientApp/src/user/User.tsx b/Timeline/ClientApp/src/user/User.tsx new file mode 100644 index 00000000..7bdd64b7 --- /dev/null +++ b/Timeline/ClientApp/src/user/User.tsx @@ -0,0 +1,70 @@ +import React, { useState } from 'react'; +import { useParams } from 'react-router'; + +import { useUser } from '../data/user'; +import { changeNickname, changeAvatar } from './api'; +import { personalTimelineService } from '../data/timeline'; + +import UserPage from './UserPage'; +import ChangeNicknameDialog from './ChangeNicknameDialog'; +import ChangeAvatarDialog from './ChangeAvatarDialog'; +import TimelinePageTemplate from '../timeline/TimelinePageTemplate'; +import { PersonalTimelineManageItem } from './UserInfoCard'; + +const User: React.FC = (_) => { + const { username } = useParams<{ username: string }>(); + + const user = useUser(); + + const [dialog, setDialog] = useState(null); + const [dataKey, setDataKey] = useState(0); + + let dialogElement: React.ReactElement | undefined; + + const closeDialogHandler = (): void => { + setDialog(null); + }; + + if (dialog === 'nickname') { + dialogElement = ( + { + const p = changeNickname(user!.token, username, newNickname); + return p.then((_) => { + setDataKey(dataKey + 1); + }); + }} + /> + ); + } else if (dialog === 'avatar') { + dialogElement = ( + changeAvatar(user!.token, username, file, file.type)} + /> + ); + } + + const onManage = React.useCallback((item: PersonalTimelineManageItem) => { + setDialog(item); + }, []); + + return ( + <> + + {dialogElement} + + ); +}; + +export default User; diff --git a/Timeline/ClientApp/src/user/UserInfoCard.tsx b/Timeline/ClientApp/src/user/UserInfoCard.tsx new file mode 100644 index 00000000..280cddce --- /dev/null +++ b/Timeline/ClientApp/src/user/UserInfoCard.tsx @@ -0,0 +1,126 @@ +import React from 'react'; +import clsx from 'clsx'; +import { + Dropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + Button, +} from 'reactstrap'; +import { useTranslation } from 'react-i18next'; +import { fromEvent } from 'rxjs'; + +import { + TimelineInfo, + timelineVisibilityTooltipTranslationMap, +} from '../data/timeline'; +import { useAvatarVersion, useAvatarUrlWithGivenVersion } from './api'; +import { useUser } from '../data/user'; + +import { TimelineCardComponentProps } from '../timeline/TimelinePageTemplateUI'; + +export type PersonalTimelineManageItem = 'avatar' | 'nickname'; + +export type UserInfoCardProps = TimelineCardComponentProps< + TimelineInfo, + PersonalTimelineManageItem +>; + +const UserInfoCard: React.FC = (props) => { + const { onHeight, onManage } = props; + const { t } = useTranslation(); + const user = useUser(); + + const avatarVersion = useAvatarVersion(); + const avatarUrl = useAvatarUrlWithGivenVersion( + user != null && user.username === props.timeline.owner.username + ? avatarVersion + : undefined, + props.timeline.owner._links.avatar + ); + + const containerRef = React.useRef(null!); + + const notifyHeight = React.useCallback((): void => { + if (onHeight) { + onHeight(containerRef.current.getBoundingClientRect().height); + } + }, [onHeight]); + + React.useEffect(() => { + const subscription = fromEvent(window, 'resize').subscribe(notifyHeight); + return () => subscription.unsubscribe(); + }); + + const [manageDropdownOpen, setManageDropdownOpen] = React.useState( + false + ); + const toggleManageDropdown = React.useCallback( + (): void => setManageDropdownOpen((old) => !old), + [] + ); + const onManageProperty = React.useCallback( + (): void => onManage!('property'), + [onManage] + ); + const onManageAvatar = React.useCallback((): void => onManage!('avatar'), [ + onManage, + ]); + const onManageNickname = React.useCallback( + (): void => onManage!('nickname'), + [onManage] + ); + + return ( +
+ +
+ {props.timeline.owner.nickname} + + @{props.timeline.owner.username} + +
+

{props.timeline.description}

+ + {t(timelineVisibilityTooltipTranslationMap[props.timeline.visibility])} + +
+ {props.onManage != null ? ( + + + {t('timeline.manage')} + + + + {t('timeline.manageItem.nickname')} + + + {t('timeline.manageItem.avatar')} + + + {t('timeline.manageItem.property')} + + + {t('timeline.manageItem.member')} + + + + ) : ( + + )} +
+
+ ); +}; + +export default UserInfoCard; diff --git a/Timeline/ClientApp/src/user/UserPage.tsx b/Timeline/ClientApp/src/user/UserPage.tsx new file mode 100644 index 00000000..723415c7 --- /dev/null +++ b/Timeline/ClientApp/src/user/UserPage.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import { ExcludeKey } from '../type-utilities'; +import { TimelineInfo } from '../data/timeline'; + +import TimelinePageTemplateUI, { + TimelinePageTemplateUIProps +} from '../timeline/TimelinePageTemplateUI'; +import UserInfoCard, { PersonalTimelineManageItem } from './UserInfoCard'; + +export type UserPageProps = ExcludeKey< + TimelinePageTemplateUIProps, + 'CardComponent' +>; + +const UserPage: React.FC = props => { + return ; +}; + +export default UserPage; diff --git a/Timeline/ClientApp/src/user/api.ts b/Timeline/ClientApp/src/user/api.ts new file mode 100644 index 00000000..184c011f --- /dev/null +++ b/Timeline/ClientApp/src/user/api.ts @@ -0,0 +1,78 @@ +import React from 'react'; +import axios from 'axios'; +import { BehaviorSubject, Observable } from 'rxjs'; + +import { apiBaseUrl } from '../config'; +import { User } from '../data/user'; +import { updateQueryString } from '../helper'; + +export function changeNickname( + token: string, + username: string, + newNickname: string +): Promise { + return axios + .patch(`${apiBaseUrl}/users/${username}?token=${token}`, { + nickname: newNickname, + }) + .then((res) => res.data); +} + +const avatarVersionSubject = new BehaviorSubject(undefined); + +export function changeAvatar( + token: string, + username: string, + data: Blob, + type: string +): Promise { + return axios + .put(`${apiBaseUrl}/users/${username}/avatar?token=${token}`, data, { + headers: { + 'Content-Type': type, + }, + }) + .then(() => { + avatarVersionSubject.next((avatarVersionSubject.value ?? 0) + 1); + }); +} + +export const avatarVersion$: Observable< + number | undefined +> = avatarVersionSubject; + +export function useAvatarVersion(): number | undefined { + const [version, setVersion] = React.useState(); + React.useEffect(() => { + const subscription = avatarVersion$.subscribe((v) => setVersion(v)); + return () => subscription.unsubscribe(); + }, []); + return version; +} + +export function useOptionalVersionedAvatarUrl( + url: string | undefined +): string | undefined { + const avatarVersion = useAvatarVersion(); + return React.useMemo( + () => + url == null + ? undefined + : updateQueryString( + 'v', + avatarVersion == null ? null : avatarVersion + '', + url + ), + [avatarVersion, url] + ); +} + +export function useAvatarUrlWithGivenVersion( + version: number | null | undefined, + url: string +): string { + return React.useMemo( + () => updateQueryString('v', version == null ? null : version + '', url), + [version, url] + ); +} diff --git a/Timeline/ClientApp/src/user/user-page.scss b/Timeline/ClientApp/src/user/user-page.scss new file mode 100644 index 00000000..a102fbe6 --- /dev/null +++ b/Timeline/ClientApp/src/user/user-page.scss @@ -0,0 +1,13 @@ +.login-container { + max-width: 600px; +} + +.change-avatar-cropper-row { + max-height: 400px; +} + +.change-avatar-img { + min-width: 50%; + max-width: 100%; + max-height: 400px; +} -- cgit v1.2.3