Merge pull request #140 from mgilangjanuar/staging

Release v1.1.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "teledrive",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "repository": "[email protected]:mgilangjanuar/teledrive.git",
   "author": "M Gilang Januar <[email protected]>",
   "license": "MIT",

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "license": "MIT",
   "private": true,
@@ -9,7 +9,7 @@
     "build": "rimraf dist && eslint --fix -c .eslintrc.js --ext .ts . && tsc"
   },
   "dependencies": {
-    "@mgilangjanuar/telegram": "2.0.15",
+    "@mgilangjanuar/telegram": "2.1.0",
     "@sentry/node": "^6.14.1",
     "@sentry/tracing": "^6.14.1",
     "@types/moment": "^2.13.0",
@@ -24,6 +24,7 @@
     "dotenv": "^10.0.0",
     "express": "^4.17.1",
     "express-fileupload": "^1.2.1",
+    "express-ipinfo": "^1.0.0",
     "express-list-endpoints": "^6.0.0",
     "express-rate-limit": "^5.3.0",
     "flatted": "^3.2.2",

server/src/api/v1/Utils.ts

@@ -8,4 +8,9 @@ export class Utils {
   public async maintenance(_: Request, res: Response): Promise<any> {
     return res.send({ maintenance: ['1', 'true', 'yes'].includes(process.env.IS_MAINTENANCE) })
   }
+
+  @Endpoint.GET()
+  public async ipinfo(req: Request & { ipInfo: any }, res: Response): Promise<any> {
+    return res.send({ ipinfo: req.ipInfo })
+  }
 }

server/src/index.ts

@@ -14,7 +14,7 @@ import express, {
   urlencoded
 } from 'express'
 import listEndpoints from 'express-list-endpoints'
-// import bigInt from 'json-bigint'
+import expressip from 'express-ipinfo'
 import morgan from 'morgan'
 import path from 'path'
 import { Pool } from 'pg'
@@ -24,6 +24,7 @@ import * as Tracing from '@sentry/tracing'
 import { API } from './api'
 import { runDB } from './model'
 
+// import bigInt from 'json-bigint'
 // const parse = JSON.parse
 // JSON.parse = str => {
 //   if (!str) return str
@@ -75,6 +76,8 @@ app.use(Sentry.Handlers.tracingHandler())
 
 app.set('trust proxy', 1)
 
+app.use(expressip().getIpInfoMiddleware)
+
 app.use(cors({
   credentials: true,
   origin: [

server/src/model/entities/Files.ts

@@ -23,7 +23,7 @@ export class Files extends BaseModelWithID {
   @Column({ type: 'timestamptz', default: null })
   uploaded_at?: Date
 
-  @Column({ default: null })
+  @Column('double precision', { default: null })
   upload_progress?: number
 
   @Column()

server/src/model/entities/Users.ts

@@ -15,7 +15,7 @@ export class Users extends BaseModelWithID {
   email?: string
 
   @Column({ default: null })
-  tg_id?: number
+  tg_id?: string
 
   @Column({ default: 'free' })
   plan?: 'free' | 'premium' | 'professional'

web/package.json

@@ -1,10 +1,11 @@
 {
   "name": "web",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.3.0",
     "antd": "^4.16.13",
+    "antd-country-phone-input": "^4.2.1",
     "axios": "^0.21.4",
     "clipboardy": "^2.3.0",
     "craco-antd": "^1.19.0",
@@ -14,9 +15,11 @@
     "qs": "^6.10.1",
     "react": "^17.0.2",
     "react-chat-elements": "^10.16.0",
+    "react-dnd": "^14.0.4",
     "react-dom": "^17.0.2",
     "react-github-btn": "^1.2.1",
     "react-markdown": "^7.0.1",
+    "react-otp-input": "^2.4.0",
     "react-paypal-button-v2": "^2.6.3",
     "react-qr-code": "^2.0.2",
     "react-router-dom": "^5.3.0",
@@ -27,7 +30,8 @@
     "swr": "^1.0.0",
     "typescript": "^4.0.3",
     "use-debounce": "^7.0.0",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "^0.2.4",
+    "world_countries_lists": "^2.3.0"
   },
   "scripts": {
     "start": "craco start",
@@ -67,7 +71,10 @@
     "@types/pretty-bytes": "^5.2.0",
     "@types/qs": "^6.9.7",
     "@types/react": "^16.9.53",
+    "@types/react-dnd": "^3.0.2",
+    "@types/react-dnd-html5-backend": "^3.0.2",
     "@types/react-dom": "^16.9.8",
+    "@types/react-otp-input": "^2.0.1",
     "@types/react-router-dom": "^5.1.8",
     "@types/react-virtualized": "^9.21.13",
     "@typescript-eslint/eslint-plugin": "^4.31.0",

web/src/App.tsx

@@ -6,6 +6,7 @@ import useSWR from 'swr'
 import { fetcher } from './utils/Fetcher'
 
 import './App.less'
+import 'antd-country-phone-input/dist/index.css'
 
 const Dashboard = lazy(
   () => import(/* webpackChunkName: 'DashboardPage' */ './pages/dashboard')

web/src/pages/Home.tsx

@@ -37,7 +37,7 @@ const Home: React.FC = () => {
             <a style={{ position: 'fixed', bottom: '15px', right: '25px', zIndex: 999  }} href="https://www.producthunt.com/posts/teledrive?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-teledrive" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=315149&theme=dark&period=daily" alt="TeleDrive - Free unlimited cloud storage service using the Telegram API | Product Hunt" style={{ width: '250px', height: '54px' }} width="250" height="54" /></a>
             <Typography.Paragraph>
               <Space>
-                <Follow username="teledriveapp" options={{ dnt: true }} />
+                <Follow username="teledriveapp" options={{ dnt: true, showCount: false }} />
                 <GitHubButton href="https://github.com/mgilangjanuar/teledrive" data-show-count="true" aria-label="Star mgilangjanuar/teledrive on GitHub">Star</GitHubButton>
               </Space>
             </Typography.Paragraph>

web/src/pages/Login.tsx

@@ -1,25 +1,33 @@
-import { LoginOutlined } from '@ant-design/icons'
-import { Button, Card, Col, Form, Input, Layout, notification, Row, Typography } from 'antd'
+import { ArrowRightOutlined, LoginOutlined } from '@ant-design/icons'
+import { Button, Card, Col, Form, Input, Layout, notification, Row, Steps, Typography } from 'antd'
+import CountryPhoneInput, { ConfigProvider } from 'antd-country-phone-input'
 import { useForm } from 'antd/lib/form/Form'
 import JSCookie from 'js-cookie'
 import React, { useEffect, useState } from 'react'
+import OtpInput from 'react-otp-input'
 import { useHistory } from 'react-router'
 import useSWRImmutable from 'swr/immutable'
+import en from 'world_countries_lists/data/en/world.json'
 import { fetcher, req } from '../utils/Fetcher'
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 
 const Login: React.FC = () => {
   const history = useHistory()
   const [formLogin] = useForm()
+  const [currentStep, setCurrentStep] = useState(0)
+  const [phoneData, setPhoneData] = useState<{ phone?: string, code?: number, short?: string }>({})
+  const [otp, setOtp] = useState<string>()
   const [loadingSendCode, setLoadingSendCode] = useState<boolean>()
   const [loadingLogin, setLoadingLogin] = useState<boolean>()
   const [countdown, setCountdown] = useState<number>()
   const [phoneCodeHash, setPhoneCodeHash] = useState<string>()
   const [needPassword, setNeedPassword] = useState<boolean>()
   const { data: me } = useSWRImmutable('/users/me', fetcher)
+  const { data: _ } = useSWRImmutable('/utils/ipinfo', fetcher, { onSuccess: ({ ipinfo }) => setPhoneData({ short: ipinfo?.country || 'ID' }) })
 
-  const sendCode = async (phoneNumber: string) => {
+  const sendCode = async (phoneNumber?: string) => {
+    phoneNumber = phoneNumber || phoneData.phone ? `+${phoneData.code}${phoneData.phone}` : ''
     if (!phoneNumber) {
       return notification.error({
         message: 'Error',
@@ -40,6 +48,7 @@ const Login: React.FC = () => {
     try {
       setLoadingSendCode(true)
       await fetch(phoneCodeHash)
+      setCurrentStep(currentStep + 1)
     } catch (error: any) {
       setLoadingSendCode(false)
       notification.error({
@@ -54,21 +63,24 @@ const Login: React.FC = () => {
 
   const login = async () => {
     if (!phoneCodeHash) {
-      return notification.error({
-        message: 'Error',
-        description: 'Please send code first'
-      })
+      return sendCode()
     }
     setLoadingLogin(true)
-    const { phoneNumber, phoneCode, password } = formLogin.getFieldsValue()
+    const phoneNumber = `+${phoneData.code}${phoneData.phone}`
+    const phoneCode = otp
+    const { password } = formLogin.getFieldsValue()
     try {
       const { data } = await req.post('/auth/login', { ...needPassword ? { password } : { phoneNumber, phoneCode, phoneCodeHash } })
       setLoadingLogin(false)
       notification.success({
         message: 'Success',
         description: `Welcome back, ${data.user.username}!`
       })
-      return history.replace('/dashboard')
+      history.replace('/dashboard')
+      return notification.info({
+        message: 'Info',
+        description: 'Please wait a moment...'
+      })
     } catch (error: any) {
       setLoadingLogin(false)
       const { data } = error?.response
@@ -77,6 +89,7 @@ const Login: React.FC = () => {
           message: 'Info',
           description: 'Please input your 2FA password'
         })
+        setCurrentStep(currentStep + 1)
         return setNeedPassword(true)
       }
       return notification.error({
@@ -106,26 +119,58 @@ const Login: React.FC = () => {
     <Layout.Content className="container">
       <Row style={{ marginTop: '80px' }}>
         <Col lg={{ span: 10, offset: 7 }} md={{ span: 14, offset: 5 }} span={20} offset={2}>
-          <Typography.Title>
-            Welcome!
+          <Typography.Title level={2}>
+            Login with Telegram
           </Typography.Title>
           <Typography.Paragraph type="secondary" style={{ fontSize: '14px' }}>
             Please download <a href="https://telegram.org/" target="_blank">Telegram</a> app and login with your account.
           </Typography.Paragraph>
           <Card>
-            <Form layout="horizontal" form={formLogin} onFinish={login} labelCol={{ span: 9 }} wrapperCol={{ span: 15 }}>
-              <Form.Item label="Phone Number" name="phoneNumber" rules={[{ required: true, message: 'Please input your phone number' }]}>
-                <Input.Search placeholder="+6289123456789" type="tel" enterButton={countdown ? `Re-send in ${countdown}s...` : phoneCodeHash ? 'Re-send' : 'Send'} loading={loadingSendCode} onSearch={sendCode} />
-              </Form.Item>
-              <Form.Item label="Code" name="phoneCode" rules={[{ required: true, message: 'Please input your code' }]}>
-                <Input disabled={!phoneCodeHash} />
-              </Form.Item>
-              <Form.Item label="Password 2FA" name="password" hidden={!needPassword}>
-                <Input.Password />
-              </Form.Item>
-              <Form.Item style={{ marginTop: '50px' }} wrapperCol={{ span: 24 }}>
-                <Button shape="round" block size="large" type="primary" htmlType="submit" loading={loadingLogin} icon={<LoginOutlined />}>Login with Telegram</Button>
-              </Form.Item>
+            <Steps current={currentStep} style={{ marginBottom: '35px' }} responsive>
+              <Steps.Step key="inputPhoneNumber" title="Phone Number" />
+              <Steps.Step key="inputCode" title="Code" />
+              {needPassword && <Steps.Step key="inputPassword" title="Password 2FA" />}
+            </Steps>
+            <Form layout="vertical" form={formLogin} onFinish={login}>
+
+              {currentStep === 0 && <>
+                <Form.Item>
+                  <ConfigProvider locale={en}>
+                    <CountryPhoneInput value={phoneData} onChange={e => setPhoneData(e)} />
+                  </ConfigProvider>
+                  {/* <Input.Search placeholder="+6289123456789" type="tel" enterButton={countdown ? `Re-send in ${countdown}s...` : phoneCodeHash ? 'Re-send' : 'Send'} loading={loadingSendCode} onSearch={sendCode} /> */}
+                </Form.Item>
+                <Form.Item style={{ marginTop: '50px', textAlign: 'center' }} wrapperCol={{ span: 24 }}>
+                  <Button type="primary" size="large" htmlType="submit" icon={<ArrowRightOutlined />} shape="round" loading={loadingSendCode}>{phoneCodeHash ? 'Re-send code' : 'Send code'}</Button>
+                </Form.Item>
+              </>}
+
+              {currentStep === 1 && <>
+                <Form.Item>
+                  <OtpInput numInputs={5} value={otp} onChange={setOtp} isInputNum containerStyle={{ justifyContent: 'center' }} inputStyle={{
+                    width: '2.7rem',
+                    height: '2.7rem',
+                    margin: '0 0.3rem 0 0',
+                    borderRadius: '4px',
+                    fontSize: '1.2rem',
+                    border: '1px solid rgba(0, 0, 0, 0.3)' }} />
+                  {/* <Input disabled={!phoneCodeHash} /> */}
+                </Form.Item>
+                <Form.Item style={{ marginTop: '50px' }} wrapperCol={{ span: 24 }}>
+                  <Button shape="round" block size="large" type="primary" htmlType="submit" loading={loadingLogin} icon={<LoginOutlined />}>Login</Button>
+                </Form.Item>
+              </>}
+
+              {currentStep === 2 && <>
+                <Form.Item name="password" hidden={!needPassword}>
+                  <Input.Password size="large" />
+                </Form.Item>
+                <Form.Item style={{ marginTop: '50px' }} wrapperCol={{ span: 24 }}>
+                  <Button shape="round" block size="large" type="primary" htmlType="submit" loading={loadingLogin} icon={<LoginOutlined />}>Login</Button>
+                </Form.Item>
+              </>}
+
+
             </Form>
           </Card>
         </Col>

web/src/pages/dashboard/components/Messaging.tsx

@@ -150,6 +150,7 @@ const Messaging: React.FC<Props> = ({ me, collapsed, parent, setCollapsed }) =>
             position: me?.user.tg_id == user?.id ? 'right' : 'left',
             type: 'file',
             title: user ? user.title || `${user.firstName || ''} ${user.lastName || ''}`.trim() : 'Unknown',
+            onTitleClick: () => user?.username ? window.open(`https://t.me/${user?.username}`, '_blank') : undefined,
             titleColor: `#${`${user?.id.toString(16)}000000`.slice(0, 6)}`,
             text: `${fileTitle.slice(0, 20)}${fileTitle.length > 20 ? '...' : ''}`,
             message: `${fileTitle.slice(0, 20)}${fileTitle.length > 20 ? '...' : ''}`,
@@ -184,6 +185,7 @@ const Messaging: React.FC<Props> = ({ me, collapsed, parent, setCollapsed }) =>
             type: 'text',
             status: me?.user.tg_id == user?.id ? msg.id <= dialog?.dialog?.readOutboxMaxId ? 'read' : 'received' : undefined,
             title: user ? user.title || `${user.firstName || ''} ${user.lastName || ''}`.trim() : 'Unknown',
+            onTitleClick: () => user?.username ? window.open(`https://t.me/${user?.username}`, '_blank') : undefined,
             text: <ReactMarkdown className="messageItem" remarkPlugins={[remarkGfm]}>{msg.message ? `${msg.message.replaceAll('\n', '  \n')}${msg.editDate && !msg.editHide ? '\n\n_(edited)_' : ''}${msg.fwdFrom ? '\n\n_(forwarded)_' : ''}` : 'Unknown message'}</ReactMarkdown>,
             message: msg.message,
             fwdFrom: msg.fwdFrom,
@@ -210,6 +212,7 @@ const Messaging: React.FC<Props> = ({ me, collapsed, parent, setCollapsed }) =>
           type: 'text',
           // status: me?.user.tg_id == user?.id ? msg.id <= dialog?.dialog?.readOutboxMaxId ? 'read' : 'received' : undefined,
           title: user ? user.title || `${user.firstName || ''} ${user.lastName || ''}`.trim() : 'Unknown',
+          onTitleClick: () => user?.username ? window.open(`https://t.me/${user?.username}`, '_blank') : undefined,
           text: <ReactMarkdown className="messageItem" remarkPlugins={[remarkGfm]}>{msg.message ? `${msg.message.replaceAll('\n', '  \n')}\n\n_(sponsored message)_` : 'Unknown message'}</ReactMarkdown>,
           message: msg.message,
           fwdFrom: msg.fwdFrom,