75 |
98 |
124 | )
125 | }
126 |
127 | export default DisplayBlog
128 |
--------------------------------------------------------------------------------
/client/src/components/cards/CardHoriz.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link, useParams } from 'react-router-dom'
3 | import { useSelector, useDispatch } from 'react-redux'
4 |
5 | import { IBlog, IParams, RootStore } from '../../utils/TypeScript'
6 |
7 | import { deleteBlog } from '../../redux/actions/blogAction'
8 |
9 |
10 | interface IProps {
11 | blog: IBlog
12 | }
13 |
14 | const CardHoriz: React.FC77 | {blog.title} 78 |
79 | 80 |
81 |
82 | {
83 | typeof(blog.user) !== 'string' &&
84 | `By: ${blog.user.name}`
85 | }
86 |
87 |
88 |
89 | { new Date(blog.createdAt).toLocaleString() }
90 |
91 |
92 |
93 |
96 |
97 | 98 |
✩ Comments ✩
99 | 100 | { 101 | auth.user 102 | ? 103 | :104 | Please login to comment. 105 |
106 | } 107 | 108 | { 109 | loading 110 | ?
34 |
92 | )
93 | }
94 |
95 | export default CardHoriz
96 |
--------------------------------------------------------------------------------
/client/src/components/cards/CardVert.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link} from 'react-router-dom'
3 |
4 | import { IBlog } from '../../utils/TypeScript'
5 |
6 | interface IProps {
7 | blog: IBlog
8 | }
9 |
10 | const CardVert: React.FC
35 |
91 |
38 | {
39 | blog.thumbnail &&
40 | <>
41 | {
42 | typeof(blog.thumbnail) === 'string'
43 | ?
44 | 
47 |
48 | :})
51 | }
52 |
53 | }
54 |
55 |
56 |
57 |
58 |
90 |
59 |
89 | 60 | 62 | {blog.title} 63 | 64 |
65 |{blog.description}
66 | 67 | { 68 | blog.title && 69 |
72 | {
73 | (auth.user && slug === auth.user._id) &&
74 |
87 | }
88 |
75 |
76 |
77 |
78 |
79 |
81 |
82 | }
83 |
84 | {new Date(blog.createdAt).toLocaleString()}
85 |
86 |
13 | {
14 | typeof(blog.thumbnail) === 'string' &&
15 |
17 | }
18 |
19 |
49 | )
50 | }
51 |
52 | export default CardVert
53 |
--------------------------------------------------------------------------------
/client/src/components/cards/CreateForm.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useSelector } from 'react-redux'
3 |
4 | import { RootStore, IBlog, InputChange } from '../../utils/TypeScript'
5 |
6 |
7 | interface IProps {
8 | blog: IBlog,
9 | setBlog: (blog: IBlog) => void
10 | }
11 |
12 | const CreateForm: React.FC
20 |
48 | 21 | 24 | {blog.title.slice(0,50) + '...'} 25 | 26 |
27 |28 | { blog.description.slice(0,100) + '...' } 29 |
30 | 31 |32 | 33 | { 34 | typeof(blog.user) !== 'string' && 35 | 38 | By: {blog.user.name} 39 | 40 | } 41 | 42 | 43 | 44 | { new Date(blog.createdAt).toLocaleString() } 45 | 46 |
47 |
13 | 
14 |
15 |
16 |
17 | {user.name}
18 |
19 |
20 |
21 | )
22 | }
23 |
24 | export default AvatarComment
25 |
--------------------------------------------------------------------------------
/client/src/components/comments/AvatarReply.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 |
4 | import { IUser } from '../../utils/TypeScript'
5 |
6 | interface IProps {
7 | user: IUser
8 | reply_user?: IUser
9 | }
10 | const AvatarReply: React.FC
13 |
14 |
15 |
30 | )
31 | }
32 |
33 | export default AvatarReply
34 |
--------------------------------------------------------------------------------
/client/src/components/comments/CommentList.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { useDispatch, useSelector } from 'react-redux'
3 |
4 | import { IComment, RootStore } from '../../utils/TypeScript'
5 |
6 | import {
7 | replyComment,
8 | updateComment,
9 | deleteComment
10 | } from '../../redux/actions/commentAction'
11 |
12 | import Input from './Input'
13 |
14 | interface IProps {
15 | comment: IComment
16 | showReply: IComment[]
17 | setShowReply: (showReply: IComment[]) => void
18 | }
19 |
20 | const CommentList: React.FC
16 |
17 |
19 | { user.name }
20 |
21 |
22 |
23 |
24 | Reply to
25 | { reply_user?.name }
26 |
27 |
28 |
29 |
70 | handleDelete(comment)} />
72 |
73 | setEdit(comment)} />
75 |
76 | )
77 | }
78 |
79 | return (
80 |
81 | {
82 | edit
83 | ?
88 |
89 | :
127 | )
128 | }
129 |
130 | export default CommentList
131 |
--------------------------------------------------------------------------------
/client/src/components/comments/Comments.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 |
3 | import { IComment } from '../../utils/TypeScript'
4 |
5 | import AvatarComment from './AvatarComment'
6 | import AvatarReply from './AvatarReply'
7 | import CommentList from './CommentList'
8 |
9 |
10 | interface IProps {
11 | comment: IComment
12 | }
13 |
14 | const Comments: React.FC
90 |
93 |
94 |
119 | }
120 |
121 | {
122 | onReply &&
123 | }
124 |
125 | { children }
126 |
95 | setOnReply(!onReply)}>
97 | {onReply ? '- Cancel -' :'- Reply -'}
98 |
99 |
100 |
101 |
117 |
118 |
102 | {
103 | comment.blog_user_id === auth.user?._id
104 | ? comment.user._id === auth.user._id
105 | ? Nav(comment)
106 | : handleDelete(comment)} />
108 | : comment.user._id === auth.user?._id && Nav(comment)
109 | }
110 |
111 |
112 |
113 | { new Date(comment.createdAt).toLocaleString() }
114 |
115 |
116 |
28 |
35 | {
36 | showReply.slice(0, next).map((comment, index) => (
37 |
71 |
72 | )
73 | }
74 |
75 | export default Comments
76 |
--------------------------------------------------------------------------------
/client/src/components/comments/Input.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from 'react'
2 | import { IComment } from '../../utils/TypeScript'
3 | import LiteQuill from '../editor/LiteQuill'
4 |
5 |
6 | interface IProps {
7 | callback: (body: string) => void
8 | edit?: IComment
9 | setEdit?:(edit?: IComment) => void
10 | }
11 |
12 | const Input: React.FC
41 |
52 | ))
53 | }
54 |
55 |
56 | {
57 | showReply.length -next > 0
58 | ? setNext(next + 5)}>
60 | See more comments...
61 |
62 | : showReply.length > 2 &&
63 | setNext(2)}>
65 | Hide comments...
66 |
67 | }
68 |
69 |
70 |
37 |
48 | )
49 | }
50 |
51 | export default Input
52 |
--------------------------------------------------------------------------------
/client/src/components/editor/LiteQuill.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactQuill from 'react-quill';
3 | import 'react-quill/dist/quill.snow.css';
4 |
5 |
6 |
7 | interface IProps {
8 | body: string
9 | setBody: (value: string) => void
10 | }
11 |
12 | const LiteQuill: React.FC
19 | setBody(e)}
23 | value={body}
24 | />
25 |
26 | )
27 | }
28 |
29 | let container = [
30 | [{ 'font': [] }],
31 | ['bold', 'italic', 'underline', 'strike'],
32 | ['blockquote', 'code-block', 'link'],
33 | [{ 'color': [] }, { 'background': [] }],
34 | [{ 'script': 'sub'}, { 'script': 'super' }]
35 | ]
36 |
37 | export default LiteQuill
38 |
--------------------------------------------------------------------------------
/client/src/components/editor/ReactQuill.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useCallback } from 'react'
2 | import ReactQuill from 'react-quill';
3 | import 'react-quill/dist/quill.snow.css';
4 |
5 | import { useDispatch } from 'react-redux'
6 |
7 | import { checkImage, imageUpload } from '../../utils/ImageUpload'
8 | import { ALERT } from '../../redux/types/alertType'
9 |
10 | interface IProps {
11 | setBody: (value: string) => void
12 | body: string
13 | }
14 |
15 | const Quill: React.FC
62 | setBody(e)}
66 | value={body}
67 | ref={quillRef} />
68 |
69 | )
70 | }
71 |
72 | let container = [
73 | [{ 'font': [] }],
74 | [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
75 | [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
76 |
77 | ['bold', 'italic', 'underline', 'strike'], // toggled buttons
78 | ['blockquote', 'code-block'],
79 | [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
80 | [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
81 |
82 | [{ 'list': 'ordered'}, { 'list': 'bullet' }],
83 | [{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
84 | [{ 'direction': 'rtl' }], // text direction
85 | [{ 'align': [] }],
86 |
87 | ['clean', 'link', 'image','video']
88 | ]
89 |
90 | export default Quill
91 |
--------------------------------------------------------------------------------
/client/src/components/global/Footer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Footer = () => {
4 | return (
5 |
6 |
14 | )
15 | }
16 |
17 | export default Footer
18 |
--------------------------------------------------------------------------------
/client/src/components/global/Header.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import Search from './Search'
4 | import Menu from './Menu'
5 |
6 | const Header = () => {
7 | return (
8 |
22 | )
23 | }
24 |
25 | export default Header
26 |
--------------------------------------------------------------------------------
/client/src/components/global/Loading.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Loading = () => {
4 | return (
5 | Welcome my chanel DevAT-VietNam
7 | 10 | https://www.youtube.com/c/DevATHTML 11 | 12 |Copyright © 2021
13 |
6 |
10 | )
11 | }
12 |
13 | export default Loading
14 |
--------------------------------------------------------------------------------
/client/src/components/global/Menu.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link, useLocation } from 'react-router-dom'
3 | import { useSelector, useDispatch } from 'react-redux'
4 | import { RootStore } from '../../utils/TypeScript'
5 | import { logout } from '../../redux/actions/authAction'
6 |
7 | const Menu = () => {
8 | const { auth } = useSelector((state: RootStore) => state)
9 | const dispatch = useDispatch()
10 |
11 | const { pathname } = useLocation()
12 |
13 | const bfLoginLinks = [
14 | { label: 'Login', path: '/login' },
15 | { label: 'Register', path: '/register' }
16 | ]
17 |
18 | const afLoginLinks = [
19 | { label: 'Home', path: '/' },
20 | { label: 'CreateBlog', path: '/create_blog' }
21 | ]
22 |
23 | const navLinks = auth.access_token ? afLoginLinks : bfLoginLinks
24 |
25 | const isActive = (pn: string) => {
26 | if(pn === pathname) return 'active';
27 | }
28 |
29 | const handleLogout = () => {
30 | if(!auth.access_token) return;
31 | dispatch(logout(auth.access_token))
32 | }
33 |
34 |
35 | return (
36 |
7 | Loading...
8 |
9 | -
37 | {
38 | navLinks.map((link, index) => (
39 |
- 40 | {link.label} 41 | 42 | )) 43 | } 44 | 45 | { 46 | auth.user?.role === 'admin' && 47 |
- 48 | Category 49 | 50 | } 51 | 52 | { 53 | auth.user && 54 |
-
55 |
56 |
57 | 58 | 59 |
-
60 |
- 61 | 64 | Profile 65 | 66 | 67 | 68 |
- 71 | 73 | Logout 74 | 75 | 76 | 77 |
79 | }
80 |
81 |
9 |
16 | );
17 | };
18 |
19 | export default NotFound;
20 |
--------------------------------------------------------------------------------
/client/src/components/global/Pagination.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { useHistory } from 'react-router-dom'
3 |
4 | interface IProps {
5 | total: number
6 | callback: (num: number) => void
7 | }
8 |
9 | const Pagination: React.FC13 | 404 | NotFound 14 |
15 |
38 | setSearch(e.target.value)} />
41 |
42 | {
43 | search.length >= 2 &&
44 |
60 | )
61 | }
62 |
63 | export default Search
64 |
--------------------------------------------------------------------------------
/client/src/components/profile/OtherInfo.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { useSelector, useDispatch } from 'react-redux'
3 |
4 | import { getOtherInfo } from '../../redux/actions/userAction'
5 | import { RootStore, IUser } from '../../utils/TypeScript'
6 |
7 | import Loading from '../global/Loading'
8 |
9 |
10 | interface IProps {
11 | id: string
12 | }
13 |
14 | const OtherInfo: React.FC
50 | {
51 | blogs.length
52 | ? blogs.map(blog => (
53 |
58 | }
59 | No Blogs
56 | } 57 |
35 |
60 | )
61 | }
62 |
63 | export default OtherInfo
64 |
--------------------------------------------------------------------------------
/client/src/components/profile/UserBlogs.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { useDispatch, useSelector } from 'react-redux'
3 | import { useParams, useHistory } from 'react-router-dom'
4 |
5 | import { IParams, RootStore, IBlog } from '../../utils/TypeScript'
6 |
7 | import { getBlogsByUserId } from '../../redux/actions/blogAction'
8 |
9 | import CardHoriz from '../cards/CardHoriz'
10 | import Loading from '../global/Loading'
11 | import Pagination from '../global/Pagination'
12 |
13 | const UserBlogs = () => {
14 | const { blogsUser } = useSelector((state: RootStore) => state)
15 | const dispatch = useDispatch()
16 | const user_id = useParams
36 | 
37 |
38 |
39 | 40 | {other.role} 41 |
42 | 43 |
44 | Name:
45 | {other.name}
46 |
47 |
48 |
49 | Email / Phone number
50 |
51 | {other.account}
52 |
53 |
54 |
55 | Join Date:
56 | { new Date(other.createdAt).toLocaleString() }
57 |
58 |
59 | No Blogs
49 | ) 50 | 51 | return ( 52 |
53 |
68 | )
69 | }
70 |
71 | export default UserBlogs
72 |
--------------------------------------------------------------------------------
/client/src/components/profile/UserInfo.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { useSelector, useDispatch } from 'react-redux'
3 |
4 | import { RootStore, InputChange, IUserProfile, FormSubmit } from '../../utils/TypeScript'
5 |
6 | import NotFound from '../global/NotFound'
7 |
8 | import { updateUser, resetPassword } from '../../redux/actions/userAction'
9 |
10 | const UserInfo = () => {
11 | const initState = {
12 | name: '', account: '', avatar: '', password: '', cf_password: ''
13 | }
14 |
15 | const { auth } = useSelector((state: RootStore) => state)
16 | const dispatch = useDispatch()
17 |
18 | const [user, setUser] = useState
54 | {
55 | blogs.map(blog => (
56 |
60 |
61 |
62 |
67 |
23 | { err && showErrMsg(err) }
24 | { success && showSuccessMsg(success) }
25 |
26 | )
27 | }
28 |
29 | export default Active
30 |
--------------------------------------------------------------------------------
/client/src/pages/blog/[slug].tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { useParams } from 'react-router-dom'
3 | import { useSelector } from 'react-redux'
4 |
5 | import { IParams, IBlog, RootStore } from '../../utils/TypeScript'
6 | import { getAPI } from '../../utils/FetchData'
7 |
8 | import Loading from '../../components/global/Loading'
9 | import { showErrMsg } from '../../components/alert/Alert'
10 | import DisplayBlog from '../../components/blog/DisplayBlog'
11 |
12 | const DetailBlog = () => {
13 | const id = useParams
52 | { error && showErrMsg(error) }
53 |
54 | { blog &&
57 | )
58 | }
59 |
60 | export default DetailBlog
61 |
--------------------------------------------------------------------------------
/client/src/pages/blogs/[slug].tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { useParams, useHistory } from 'react-router-dom'
3 | import { useSelector, useDispatch } from 'react-redux'
4 |
5 | import { getBlogsByCategoryId } from '../../redux/actions/blogAction'
6 |
7 | import { RootStore, IParams, IBlog } from '../../utils/TypeScript'
8 |
9 | import Loading from '../../components/global/Loading'
10 | import Pagination from '../../components/global/Pagination'
11 | import CardVert from '../../components/cards/CardVert'
12 |
13 |
14 | const BlogsByCategory = () => {
15 | const { categories, blogsCategory } = useSelector((state: RootStore) => state)
16 | const dispatch = useDispatch()
17 | const { slug } = useParams
57 |
74 | )
75 | }
76 |
77 | export default BlogsByCategory
78 |
--------------------------------------------------------------------------------
/client/src/pages/category.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { useSelector, useDispatch } from 'react-redux'
3 |
4 | import { FormSubmit, RootStore, ICategory } from '../utils/TypeScript'
5 |
6 | import { createCategory, updateCategory, deleteCategory } from '../redux/actions/categoryAction'
7 |
8 | import NotFound from '../components/global/NotFound'
9 |
10 | const Category = () => {
11 | const [name, setName] = useState('')
12 | const [edit, setEdit] = useState
58 | {
59 | blogs.map(blog => (
60 |
64 |
65 | {
66 | total > 1 &&
67 |
48 |
65 |
66 |
83 | )
84 | }
85 |
86 | export default Category
87 |
--------------------------------------------------------------------------------
/client/src/pages/create_blog.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from 'react'
2 | import { useSelector, useDispatch } from 'react-redux'
3 |
4 | import { RootStore, IBlog, IUser } from '../utils/TypeScript'
5 | import { validCreateBlog, shallowEqual } from '../utils/Valid'
6 | import { getAPI } from '../utils/FetchData'
7 |
8 | import NotFound from '../components/global/NotFound'
9 | import CreateForm from '../components/cards/CreateForm'
10 | import CardHoriz from '../components/cards/CardHoriz'
11 |
12 | import ReactQuill from '../components/editor/ReactQuill'
13 |
14 | import { ALERT } from '../redux/types/alertType'
15 |
16 | import { createBlog, updateBlog } from '../redux/actions/blogAction'
17 |
18 | interface IProps {
19 | id?: string
20 | }
21 | const CreateBlog: React.FC
67 | {
68 | categories.map(category => (
69 |
82 |
70 |
79 | ))
80 | }
81 | {category.name}
71 | 72 |
73 | setEdit(category)} />
75 | handleDelete(category._id)} />
77 |
78 |
112 |
113 |
138 | )
139 | }
140 |
141 | export default CreateBlog
142 |
--------------------------------------------------------------------------------
/client/src/pages/forgot_password.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { useDispatch } from 'react-redux'
3 |
4 | import { forgotPassword} from '../redux/actions/authAction'
5 |
6 | import { FormSubmit} from '../utils/TypeScript'
7 |
8 | const ForgotPassword = () => {
9 | const [account, setAccount] = useState('')
10 | const dispatch = useDispatch()
11 |
12 | const handleSubmit = (e: FormSubmit) => {
13 | e.preventDefault()
14 | dispatch(forgotPassword(account))
15 | }
16 |
17 | return (
18 |
114 |
124 |
125 |
115 |
118 |
119 | Create
116 |
120 |
123 | Preview
121 |
19 |
35 | )
36 | }
37 |
38 | export default ForgotPassword
39 |
--------------------------------------------------------------------------------
/client/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useSelector } from 'react-redux'
3 | import { Link } from 'react-router-dom'
4 |
5 | import { RootStore } from '../utils/TypeScript'
6 |
7 | import CardVert from '../components/cards/CardVert'
8 | import Loading from '../components/global/Loading'
9 |
10 | const Home = () => {
11 | const { homeBlogs } = useSelector((state: RootStore) => state)
12 |
13 |
14 | if(homeBlogs.length === 0) return Forgot Password?
20 | 21 | 34 |
17 | {
18 | homeBlogs.map(homeBlog => (
19 |
52 | )
53 | }
54 |
55 | export default Home
56 |
--------------------------------------------------------------------------------
/client/src/pages/login.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { Link, useHistory } from 'react-router-dom'
3 | import { useSelector } from 'react-redux'
4 |
5 | import LoginPass from '../components/auth/LoginPass'
6 | import LoginSMS from '../components/auth/LoginSMS'
7 | import SocialLogin from '../components/auth/SocialLogin'
8 |
9 | import { RootStore } from '../utils/TypeScript'
10 |
11 | const Login = () => {
12 | const [sms, setSms] = useState(false)
13 | const history = useHistory()
14 |
15 | const { auth } = useSelector((state: RootStore) => state)
16 |
17 | useEffect(() => {
18 | if(auth.access_token) {
19 | let url = history.location.search.replace('?', '/')
20 | return history.push(url)
21 | }
22 | },[auth.access_token, history])
23 |
24 | return (
25 |
20 | {
21 | homeBlog.count > 0 &&
22 | <>
23 |
29 | 30 |
49 | ))
50 | }
51 | 24 | 25 | { homeBlog.name } ({ homeBlog.count }) 26 | 27 |
28 |29 | 30 |
31 | {
32 | homeBlog.blogs.map(blog => (
33 |
37 |
38 | }
39 |
40 | {
41 | homeBlog.count > 4 &&
42 |
45 | Read more >>
46 |
47 | }
48 |
26 |
54 | )
55 | }
56 |
57 | export default Login
58 |
--------------------------------------------------------------------------------
/client/src/pages/profile/[slug].tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useParams } from 'react-router-dom'
3 | import { useSelector } from 'react-redux'
4 |
5 | import { IParams, RootStore } from '../../utils/TypeScript'
6 |
7 | import UserInfo from '../../components/profile/UserInfo'
8 | import OtherInfo from '../../components/profile/OtherInfo'
9 | import UserBlogs from '../../components/profile/UserBlogs'
10 |
11 | const Profile = () => {
12 | const { slug }: IParams = useParams()
13 | const { auth } = useSelector((state: RootStore) => state)
14 |
15 | return (
16 |
27 |
53 | Login
28 | 29 |46 | {`You don't have an account? `} 47 | 48 | Register Now 49 | 50 |
51 | 52 |
17 |
29 | )
30 | }
31 |
32 | export default Profile
33 |
--------------------------------------------------------------------------------
/client/src/pages/register.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link, useHistory } from 'react-router-dom'
3 |
4 | import RegisterForm from '../components/auth/RegisterForm'
5 |
6 | const Register = () => {
7 | const history = useHistory()
8 |
9 | return (
10 |
18 | {
19 | auth.user?._id === slug
20 | ?
24 |
25 |
26 |
28 |
11 |
25 | )
26 | }
27 |
28 | export default Register
29 |
--------------------------------------------------------------------------------
/client/src/pages/reset_password/[slug].tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { useParams } from 'react-router-dom'
3 | import { useDispatch } from 'react-redux'
4 |
5 | import { IParams, FormSubmit } from '../../utils/TypeScript'
6 |
7 | import { resetPassword } from '../../redux/actions/userAction'
8 |
9 | const ResetPassword = () => {
10 | const token = useParams
12 |
24 | Register
13 | 14 |17 | {`Already have an account? `} 18 | 19 | Login Now 20 | 21 |
22 | 23 |
25 |
64 |
65 | )
66 | }
67 |
68 | export default ResetPassword
69 |
--------------------------------------------------------------------------------
/client/src/pages/update_blog/[slug].tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useParams } from 'react-router-dom'
3 |
4 | import { IParams } from '../../utils/TypeScript'
5 |
6 | import CreateBlog from '../create_blog'
7 |
8 | const UpdateBlog = () => {
9 | const { slug } = useParams
42 |
53 | `,
54 | };
55 |
56 | const result = await transport.sendMail(mailOptions);
57 | return result;
58 | } catch (err) {
59 | console.log(err);
60 | }
61 | };
62 |
63 | export default sendEmail;
64 |
--------------------------------------------------------------------------------
/server/config/sendSMS.ts:
--------------------------------------------------------------------------------
1 | import { Twilio } from 'twilio'
2 |
3 | const accountSid = `${process.env.TWILIO_ACCOUNT_SID}`;
4 | const authToken = `${process.env.TWILIO_AUTH_TOKEN}`;
5 | const from = `${process.env.TWILIO_PHONE_NUMBER}`;
6 | const serviceID = `${process.env.TWILIO_SERVICE_ID}`;
7 |
8 | const client = new Twilio(accountSid, authToken)
9 |
10 |
11 | export const sendSms = (to: string, body: string, txt: string) => {
12 | try {
13 | client.messages
14 | .create({
15 | body: `BlogDev ${txt} - ${body}`,
16 | from,
17 | to
18 | })
19 | .then(message => console.log(message.sid));
20 |
21 | } catch (err) {
22 | console.log(err)
23 | }
24 | }
25 |
26 |
27 | export const smsOTP = async(to: string, channel: string) => {
28 | try {
29 | const data = await client
30 | .verify
31 | .services(serviceID)
32 | .verifications
33 | .create({
34 | to,
35 | channel
36 | })
37 |
38 | return data;
39 | } catch (err) {
40 | console.log(err)
41 | }
42 | }
43 |
44 | export const smsVerify = async(to: string, code: string) => {
45 | try {
46 | const data = await client
47 | .verify
48 | .services(serviceID)
49 | .verificationChecks
50 | .create({
51 | to,
52 | code
53 | })
54 |
55 | return data;
56 | } catch (err) {
57 | console.log(err)
58 | }
59 | }
--------------------------------------------------------------------------------
/server/config/socket.ts:
--------------------------------------------------------------------------------
1 | import { Socket } from 'socket.io'
2 |
3 |
4 | export const SocketServer = (socket: Socket) => {
5 | socket.on('joinRoom', (id: string) => {
6 | socket.join(id)
7 | // console.log({ joinRoom: (socket as any).adapter.rooms })
8 | })
9 |
10 | socket.on('outRoom', (id: string) => {
11 | socket.leave(id)
12 | // console.log({ outRoom: (socket as any).adapter.rooms })
13 | })
14 |
15 | socket.on('disconnect', () =>{
16 | console.log(socket.id + ' disconnected')
17 | })
18 | }
--------------------------------------------------------------------------------
/server/controllers/authCtrl.ts:
--------------------------------------------------------------------------------
1 | import { Request, Response } from 'express'
2 | import Users from '../models/userModel'
3 | import bcrypt from 'bcrypt'
4 | import jwt from 'jsonwebtoken'
5 | import { generateActiveToken, generateAccessToken, generateRefreshToken } from '../config/generateToken'
6 | import sendMail from '../config/sendMail'
7 | import { validateEmail, validPhone } from '../middleware/vaild'
8 | import { sendSms, smsOTP, smsVerify } from '../config/sendSMS'
9 | import { IDecodedToken, IUser, IGgPayload, IUserParams, IReqAuth } from '../config/interface'
10 |
11 | import { OAuth2Client } from 'google-auth-library'
12 | import fetch from 'node-fetch'
13 |
14 |
15 | const client = new OAuth2Client(`${process.env.MAIL_CLIENT_ID}`)
16 | const CLIENT_URL = `${process.env.BASE_URL}`
17 |
18 | const authCtrl = {
19 | register: async(req: Request, res: Response) => {
20 | try {
21 | const { name, account, password } = req.body
22 |
23 | const user = await Users.findOne({account})
24 | if(user) return res.status(400).json({msg: 'Email or Phone number already exists.'})
25 |
26 | const passwordHash = await bcrypt.hash(password, 12)
27 |
28 | const newUser = { name, account, password: passwordHash }
29 |
30 | const active_token = generateActiveToken({newUser})
31 |
32 | const url = `${CLIENT_URL}/active/${active_token}`
33 |
34 | if(validateEmail(account)){
35 | sendMail(account, url, "Verify your email address")
36 | return res.json({ msg: "Success! Please check your email." })
37 |
38 | }else if(validPhone(account)){
39 | sendSms(account, url, "Verify your phone number")
40 | return res.json({ msg: "Success! Please check phone." })
41 | }
42 |
43 | } catch (err: any) {
44 | return res.status(500).json({msg: err.message})
45 | }
46 | },
47 | activeAccount: async(req: Request, res: Response) => {
48 | try {
49 | const { active_token } = req.body
50 |
51 | const decoded = Welcome to the DevAT channel.
43 |Congratulations! You're almost set to start using BlogDEV. 44 | Just click the button below to validate your email address. 45 |
46 | 47 | ${txt} 48 | 49 |If the button doesn't work for any reason, you can also click on the link below:
50 | 51 |${url}
52 |