diff --git a/package.json b/package.json index a45f10e..c1864b5 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "@types/react-dom": "^16.9.0", "@types/react-router-dom": "^5.1.6", "@types/validator": "^13.1.0", + "generate-avatar": "^1.4.6", "graphql": "^15.3.0", "react": "^16.13.1", "react-dom": "^16.13.1", @@ -38,6 +39,7 @@ }, "devDependencies": { "@graphql-codegen/cli": "^1.17.10", - "@graphql-codegen/typescript": "^1.17.10" + "@graphql-codegen/typescript": "^1.17.10", + "typescript-plugin-css-modules": "^2.7.0" } } diff --git a/public/index.css b/public/index.css new file mode 100644 index 0000000..219f97e --- /dev/null +++ b/public/index.css @@ -0,0 +1,28 @@ +:root { + --backgroundColor: rgba(54, 54, 69, 0.05); + --containerColor: rgb(54, 54, 69); + --accentColor: rgb(109, 245, 119); + --accentShadowColor: rgba(109, 245, 119, 0.16); + + --onAccentFontColor: #ffffff; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--backgroundColor); + min-height: 100vh; + color: var(--containerColor); +} + +input { + color: var(--containerColor); +} + +#root { + height: 100vh; +} diff --git a/public/index.html b/public/index.html index 58c6549..a02d5c6 100644 --- a/public/index.html +++ b/public/index.html @@ -23,6 +23,8 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + QuestionForm diff --git a/src/components/App.tsx b/src/components/App.tsx index ac8193a..d63a876 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -8,7 +8,9 @@ import { useUser } from '../hooks' import Authorize from './Authorize' import CreateForm from './CreateForm' import DoForm from './DoForm' +import Home from './Home' import Login from './Login' +import Navbar from './Navbar' import Register from './Register' import UserPage from './UserPage' @@ -20,6 +22,7 @@ const App: React.FC = () => { + @@ -27,6 +30,7 @@ const App: React.FC = () => { + diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx new file mode 100644 index 0000000..c07da7c --- /dev/null +++ b/src/components/Card/index.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { Link } from 'react-router-dom' + +import styles from './main.module.css' + +interface props { + title: string + subtitle?: string + icon?: React.Component + iconCounter?: number + id: number +} + +const Card: React.FC = ({ title, subtitle, id }) => { + return ( + +

{title}

+ {subtitle ??
{subtitle}
} + + ) +} + +export default Card diff --git a/src/components/Card/main.module.css b/src/components/Card/main.module.css new file mode 100644 index 0000000..84d51fb --- /dev/null +++ b/src/components/Card/main.module.css @@ -0,0 +1,11 @@ +.card { + display: block; + background-color: var(--accentColor); + width: 35vw; + padding: 1.5vh; + white-space: nowrap; + border-radius: 0.75vh; + box-shadow: 0 1px 6px 0 var(--accentShadowColor); + text-decoration: none; + color: var(--onAccentFontColor); +} diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx new file mode 100644 index 0000000..3084230 --- /dev/null +++ b/src/components/Home/index.tsx @@ -0,0 +1,40 @@ +import React from 'react' +import { useQuery } from '@apollo/client' + +import Card from '../Card' +import { USER } from '../../apollo' +import { QueryUserArgs, User } from '../../apollo/typeDefs.gen' +import styles from './main.module.css' +import { Redirect } from 'react-router-dom' + +interface IUserQuery { + user: User +} + +const Home: React.FC = () => { + const { data, error, loading } = useQuery(USER) + if (loading) return

Loading...

+ + if (error?.message === 'Authorization required') + return + + if (error) return

{error.message}

+ + const { user } = data! + + const { forms } = user + + return ( +
+
    + {forms!.map((form, formIndex) => ( +
  • + +
    • + ))} +
+
+ ) +} + +export default Home diff --git a/src/components/Home/main.module.css b/src/components/Home/main.module.css new file mode 100644 index 0000000..cff705d --- /dev/null +++ b/src/components/Home/main.module.css @@ -0,0 +1,12 @@ +.container { + display: grid; + height: calc(100vh - 4rem); + grid-template-columns: 4fr 3fr; +} + +.leftPad { + display: flex; + flex-direction: column; + align-items: center; + list-style: none; +} diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx index fe3cea8..090ca1d 100644 --- a/src/components/Login/index.tsx +++ b/src/components/Login/index.tsx @@ -1,9 +1,10 @@ import { useMutation } from '@apollo/client' import React, { ChangeEvent, FormEvent, useState } from 'react' -import { Redirect } from 'react-router-dom' import { LOGIN } from '../../apollo' import { MutationLoginArgs, ServerAnswer } from '../../apollo/typeDefs.gen' +import styles from './main.module.css' +import meme from './meme.png' interface ILoginMutation { login: ServerAnswer @@ -12,7 +13,7 @@ interface ILoginMutation { const Login: React.FC = () => { const [email, setEmail] = useState('') - const [doLogin, { error, data }] = useMutation< + const [doLogin, { error, data, loading }] = useMutation< ILoginMutation, MutationLoginArgs >(LOGIN) @@ -29,13 +30,42 @@ const Login: React.FC = () => { } return ( -
-
- - -
- {error && error.message} - {data && data.login && data.login.success && } +
+
+ You can't forget password if you don't have it +
+ {data?.login.success ? ( +
+

+ You will get login link{' '} +
in your mailbox +

+
+ ) : ( + <> +

Login

+ + {loading ? ( + 'Loading...' + ) : ( + + )} + {error &&

{error.message}

} + + )} +
+
) } diff --git a/src/components/Login/main.module.css b/src/components/Login/main.module.css new file mode 100644 index 0000000..f5eef25 --- /dev/null +++ b/src/components/Login/main.module.css @@ -0,0 +1,81 @@ +.container { + display: flex; + min-height: calc(100% - 4rem); + align-items: center; + justify-content: center; + padding: 2.3rem; +} + +.formCard { + min-width: 50vw; + background-color: #ffffff; + border-radius: 20px; + display: grid; + grid-template-columns: 1fr 1fr; + max-width: 90vw; + overflow: hidden; +} + +.img { + height: 70vh; + object-fit: contain; +} + +.form { + padding: 20px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 5px; +} + +.form input { + height: 2.3rem; + border-radius: 100vh; + border: none; + outline: none; + font-size: 1.2rem; + padding: 0 0.7rem; + width: 100%; +} + +.form label { + padding: 0 0.7rem; +} + +.header { + text-align: center; +} + +.input { + border-bottom: 0.15rem var(--containerColor) solid !important; + transition: border-bottom 0.1s; +} +.input:focus { + border-bottom-width: 0rem !important; +} + +.button { + background-color: var(--accentColor); +} + +.errorMsg { + color: red; +} + +.focus { + color: var(--accentColor); +} + +@media (orientation: portrait) { + .formCard { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + min-height: calc(100% - 4rem); + } + + .img { + height: initial; + width: 100%; + } +} diff --git a/src/components/Login/meme.png b/src/components/Login/meme.png new file mode 100644 index 0000000..865e6c5 Binary files /dev/null and b/src/components/Login/meme.png differ diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx new file mode 100644 index 0000000..c0f0f1a --- /dev/null +++ b/src/components/Navbar/index.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import styles from './main.module.css' +import logo from './logo.svg' + +const Navbar: React.FC = () => ( + +) + +export default Navbar diff --git a/src/components/Navbar/logo.svg b/src/components/Navbar/logo.svg new file mode 100644 index 0000000..db56a90 --- /dev/null +++ b/src/components/Navbar/logo.svg @@ -0,0 +1,26 @@ + + + + + + diff --git a/src/components/Navbar/main.module.css b/src/components/Navbar/main.module.css new file mode 100644 index 0000000..2d573e3 --- /dev/null +++ b/src/components/Navbar/main.module.css @@ -0,0 +1,16 @@ +.nav { + display: flex; + width: 100vw; + height: 4rem; + align-items: center; + justify-content: center; + background-color: var(--containerColor); + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; +} + +.logo { + display: block; + height: 2.7rem; + width: 2.7rem; +} diff --git a/src/components/Register/index.tsx b/src/components/Register/index.tsx index 4727df0..bb647e5 100644 --- a/src/components/Register/index.tsx +++ b/src/components/Register/index.tsx @@ -1,8 +1,11 @@ import { useMutation } from '@apollo/client' import React, { FormEvent } from 'react' import { Redirect } from 'react-router-dom' + import { REGISTER } from '../../apollo' import { MutationRegisterArgs, ServerAnswer } from '../../apollo/typeDefs.gen' +import styles from '../Login/main.module.css' +import meme from './meme.jpg' interface IRegisterMutation { register: ServerAnswer @@ -29,15 +32,36 @@ const Register: React.FC = () => { } return ( -
- Register -
- - - {loading ? 'Loading...' : } - {error && error.message} - {data && data.register && data.register.success && } - +
+
+ Questionform says: "Is mailbox a password?" +
+

Register

+ + + {loading ? ( + 'Loading...' + ) : ( + + )} + {error &&

{error.message}

} + {data?.register.success && } + +
) } diff --git a/src/components/Register/meme.jpg b/src/components/Register/meme.jpg new file mode 100644 index 0000000..bb6004d Binary files /dev/null and b/src/components/Register/meme.jpg differ diff --git a/src/index.css b/src/index.css index ec2585e..98b5c39 100644 --- a/src/index.css +++ b/src/index.css @@ -11,3 +11,7 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +.App { + height: 100vh; +} diff --git a/tsconfig.json b/tsconfig.json index af10394..a8f02a4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,7 +13,8 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react" + "jsx": "react", + "plugins": [{ "name": "typescript-plugin-css-modules" }] }, "include": ["src"] }