Skip to content

Commit

Permalink
fix some bug input
Browse files Browse the repository at this point in the history
  • Loading branch information
@nhoxbinhduongvn
nhoxbinhduongvn committed Mar 29, 2021
1 parent a10be31 commit afe168c
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 50 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"semi": false,
"jsxSingleQuote": true,
"singleQuote": true,
"useTabs":true
"useTabs":true,
"endOfLine": "auto"
}
]
}
Expand Down
34 changes: 17 additions & 17 deletions src/pages/login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,38 +87,38 @@ export default function login() {
<>
<div className="container flex mx-auto max-w-screen-md items-center h-screen">

<div className="flex w-3/5 ">
<img className="max-w-full relative animate-mobileScreen" src={randomImage} alt="login phone mobile" />
<div className="flex w-3/4 relative -ml-10 -mr-5 bg-cover h-auto">
<img className="max-w-full animate-mobileScreen" src={randomImage} alt="login phone mobile" />
</div>

<div className="flex flex-col w-2/5 ">
<div className="flex flex-col w-7/12">
<div className="flex flex-col items-center bg-white p-6 mb-2 border border-gray-primary">
<h1 className="flex justify-center ">
<img className=" mt-4 h-16 w-48 mx-auto mb-4" src='/images/logo2.png' alt="DinhstagramLogo" />
</h1>

<form onSubmit={handleLogin} method="POST" className="relative">
{isInputEmail && <p className="text-xs mt-0 text-gray-graybold h-0 absolute top-0 left-2 animate-scaletext">Email</p>}
{isInputEmail && <p className="text-xs mt-0 text-gray-graybold h-0 absolute top-1 left-2 animate-scaletext">Email :</p>}
<input
aria-label="Nhập vào địa chỉ Email"
type="text"
onFocus={(e) => {e.target.placeholder = "nhập vào địa chỉ Email"}}
onBlur={(e)=> { e.target.placeholder ="Địa chỉ Email"}}
placeholder="Địa chỉ Email"
className={`text-sm text-gray-base w-full mr-3 py-4 px-4 h-10 border border-gray-primary
rounded mb-3 bg-gray-background ${isInputEmail && `text-xs pt-3 pr-0 pb-1 pl-2 text-black-faded font-medium`}`}
className={`text-xs text-gray-base w-full mr-3 py-4 px-4 h-10 border border-gray-primary
rounded mb-2 bg-gray-background ${isInputEmail && `text-xs pt-3 pr-0 pb-1 pl-2 text-black-faded font-medium`}`}
onChange={({ target }) => setEmailAddress(target.value)}
value={emailAddress}
/>
{isInputPassword &&<span className="text-xs mt-0 text-gray-graybold absolute top-14 left-2 animate-scaletext">mật khẩu</span>}
{isInputPassword &&<span className="text-xs mt-0.5 text-gray-graybold absolute top-12 left-2 animate-scaletext">Mật khẩu :</span>}
<input
aria-label="Nhập vào password"
type={!displayPass ? 'text' : 'password'}
onFocus={(e) => {e.target.placeholder = "nhập vào mật khẩu"}}
onBlur={(e)=> { e.target.placeholder ="mật khẩu"}}
placeholder="Mật khẩu"
className={`text-sm text-gray-base w-full mr-3 py-4 px-4 h-10 border border-gray-primary
rounded mb-3 bg-gray-background ${isInputPassword && `text-xs mt-0 pt-4 pr-0 pb-1 pl-2 text-black-faded font-medium`}`}
className={`text-xs text-gray-base w-full mr-3 py-4 px-4 h-10 border border-gray-primary
rounded mb-3 bg-gray-background ${isInputPassword && `text-xs pt-3 pr-0 pb-1 pl-2 text-black-faded font-medium`}`}
onChange={({ target }) => setPassword(target.value)}
value={password}
/>
Expand All @@ -132,16 +132,16 @@ export default function login() {
</div>

<button type="submit" disabled={isInvalid}
className={`bg-blue-medium text-white w-full rounded h-8 font-semibold ${isInvalid && `opacity-50 cursor-default`}`}
className={`bg-blue-medium text-white w-full rounded h-9 font-semibold ${isInvalid && `opacity-50 cursor-default`}`}
>{loadingBtn ? <ClipLoader className="flex items-center justify-center" color="#ffffff"
loading={loadingBtn} size={20}/> : 'Đăng nhập' }</button>

</form>

<div className="flex text-gray-graybold font-medium text-xs uppercase mx-10 mt-2.5 mb-5 relative flex-row justify-around items-center">
<div className="bg-gray-primary h-px relative top-0.5 flex-grow w-24 -left-4" />
<div className="flex-grow-0">Hoặc</div>
<div className="bg-gray-primary h-px relative top-0.5 flex-grow w-24 -right-4"/>
<div className="flex text-gray-graybold w-88-percent font-medium text-xs uppercase mx-10 mt-3 mb-5 relative flex-row justify-around items-center">
<div className="bg-gray-primary h-px relative top-0.5 flex-grow -left-4" />
<div className="flex-grow-0 text-sm">Hoặc</div>
<div className="bg-gray-primary h-px relative top-0.5 flex-grow -right-4"/>
</div>

<div>
Expand All @@ -158,7 +158,7 @@ export default function login() {
</div>
</div>

<div className="flex justify-center items-center flex-col w-full bg-white p-4 border border-gray-primary">
<div className="flex justify-center items-center flex-col w-full bg-white p-5 border border-gray-primary">
<p className="text-sm">bạn chưa có tài khoản?
<Link to={ROUTES.SIGN_UP} className="font-semibold text-blue-medium ml-1">Đăng ký</Link>
</p>
Expand All @@ -169,10 +169,10 @@ export default function login() {

<div className="flex justify-around my-2.5 mx-0">
<a href="https://apps.apple.com/app/instagram/id389801252?vt=lo" className="mr-2">
<img className="max-h-10" src="/images/appstore.png" alt="AppStore"/>
<img className="max-h-11" src="/images/appstore.png" alt="AppStore"/>
</a>
<a href="https://apps.apple.com/app/instagram/id389801252?vt=lo" className="mr-0">
<img className="max-h-10" src="/images/chplay.png" alt="AppStore"/>
<img className="max-h-11" src="/images/chplay.png" alt="AppStore"/>
</a>
</div>
</div>
Expand Down
51 changes: 28 additions & 23 deletions src/pages/sign-up.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* eslint-disable no-empty */
/* eslint-disable no-shadow */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable no-nested-ternary */
Expand All @@ -8,10 +10,9 @@ import { Link, useHistory } from 'react-router-dom'
import { AiFillFacebook, AiFillGithub } from 'react-icons/ai'
import { RiVuejsLine, RiEarthLine } from 'react-icons/ri'
import ClipLoader from "react-spinners/ClipLoader"

import FirebaseContext from '../context/firebase'
import * as ROUTES from '../contants/routes'

import {doesUsernameExist} from '../services/firebase'

export default function login() {
const history = useHistory();
Expand All @@ -38,13 +39,17 @@ export default function login() {

const handleSignUp = async (event) => {
event.preventDefault();
// try {
// setLoadingBtn(true)

// } catch (e) {
const usernameExist = await doesUsernameExist(userName);
if(usernameExist){
try {
const createUserResult = await firebase
.auth()
.createUserWithEmailAndPassword(emailAddress, password)
} catch (error) {

}
}

// setLoadingBtn(false)
// }
}
useEffect(() => {
document.title = 'Đăng ký • Dinhstagram'
Expand All @@ -55,80 +60,80 @@ export default function login() {
<>
<div className="container flex mx-auto mt-10 px-3 max-w-screen-md justify-center items-center h-screen">

<div className="flex flex-col w-1/2 max-w-maxwidth350 ">
<div className="flex flex-col items-center bg-white p-4 mb-2 border border-gray-primary ">
<div className="flex flex-col max-w-maxwidth350 ">
<div className="flex flex-col items-center bg-white p-4 mb-2 border border-gray-primary ">
<h1 className="flex justify-center ">
<img className="mt-4 h-16 w-48 mx-auto mb-4" src='/images/logo2.png' alt="DinhstagramLogo" />
</h1>

<h2 className="text-center mb-3 leading-5 mx-10 text-gray-graybold font-semibold">Đăng ký để xem ảnh và video từ bạn bè.</h2>
<h1 className="text-center mb-3 leading-5 mx-10 text-gray-graybold font-semibold">Đăng ký để xem ảnh và video từ bạn bè.</h1>

<button type="button" className="bg-blue-medium flex text-white w-full rounded h-8 font-semibold items-center justify-center max-w-maxwidth258">
<button type="button" className="bg-blue-medium flex text-white w-full rounded h-9 font-semibold items-center justify-center max-w-maxwidth258">
<span className="text-xl mr-1"><AiFillFacebook /></span>
Đăng nhập bằng Facebook
</button>

<div className="flex text-gray-graybold font-medium text-xs uppercase mx-10 mt-2.5 mb-5 relative flex-row justify-around items-center">
<div className="bg-gray-primary h-px relative top-0.5 flex-grow w-24 -left-4" />
<div className="flex-grow-0">Hoặc</div>
<div className="flex-grow-0 text-sm">Hoặc</div>
<div className="bg-gray-primary h-px relative top-0.5 flex-grow w-24 -right-4" />
</div>

<form onSubmit={handleSignUp} method="POST" className="p-0 m-0 max-w-maxwidth258 relative">
{ isInputEmail && <p className="text-xs mt-0 text-gray-graybold h-0 absolute top-1 left-2 animate-scaletext">Email</p>}
{ isInputEmail && <p className="text-xs mt-0 text-gray-graybold h-0 absolute top-1 left-2 animate-scaletext">Email :</p>}
<input
aria-label="Nhập vào địa chỉ Email, tên người dùng hoặc số điện thoại"
type="text"
placeholder="Địa chỉ Email"
className={`text-xs text-gray-base w-full mr-3 py-4 px-4 h-10 border border-gray-primary
rounded mb-3 bg-gray-background ${isInputEmail && `text-xs pt-4 pr-0 pb-1 pl-2 text-black-faded font-medium`}`}
rounded mb-2 bg-gray-background ${isInputEmail && `text-xs pt-4 pr-0 pb-1 pl-2 text-black-faded font-medium`}`}
onChange={({ target }) => setEmailAddress(target.value)}
value={emailAddress}
/>

{ isInputFullname && <p className="text-xs mt-0 text-gray-graybold h-0 absolute top-14 left-2 animate-scaletext">tên đầy đủ</p>}
{ isInputFullname && <p className="text-xs -mt-1 text-gray-graybold h-0 absolute top-14 left-2 animate-scaletext">Tên đầy đủ :</p>}
<input
aria-label="Nhập vào tên đầy đủ"
type="text"
placeholder="Tên đầy đủ"
className={`text-xs text-gray-base w-full mr-3 py-4 px-4 h-10 border border-gray-primary
rounded mb-3 bg-gray-background ${isInputFullname && `text-xs pt-4 pr-0 pb-1 pl-2 text-black-faded font-medium`}`}
rounded mb-2 bg-gray-background ${isInputFullname && `text-xs pt-6 pr-0 pb-3 pl-2 text-black-faded font-medium`}`}
onChange={({ target }) => setFullName(target.value)}
value={fullName}
/>

{ isInputUsername && <p className="text-xs mt-1 text-gray-graybold h-0 absolute top-26 left-2 animate-scaletext">tên người dùng</p>}
{ isInputUsername && <p className="text-xs mt-1 text-gray-graybold h-0 absolute top-26 left-2 animate-scaletext">Tên người dùng :</p>}
<input
aria-label="Nhập vào tên người dùng"
type="text"
placeholder="Tên người dùng"
className={`text-xs text-gray-base w-full mr-3 py-4 px-4 h-10 border border-gray-primary
rounded mb-3 bg-gray-background ${isInputUsername && `text-xs pt-4 pr-0 pb-1 pl-2 text-black-faded font-medium`}`}
rounded mb-2 bg-gray-background ${isInputUsername && `text-xs pt-4 pr-0 pb-1 pl-2 text-black-faded font-medium`}`}
onChange={({ target }) => setUserName(target.value)}
value={userName}
/>

{ isInputPassword && <p className="text-xs mt-0 text-gray-graybold h-0 absolute top-40 left-2 animate-scaletext">mật khẩu</p>}
{ isInputPassword && <p className="text-xs mt-1 text-gray-graybold h-0 absolute top-36 left-2 animate-scaletext">Mật khẩu : {password.length} kí tự</p>}
<input
aria-label="Nhập vào password"
type={!displayPass ? 'text' : 'password'}
placeholder="Mật khẩu"
className={`text-xs text-gray-base w-full mr-3 py-4 px-4 h-10 border border-gray-primary
rounded mb-3 bg-gray-background ${isInputPassword && `text-xs pt-4 pr-0 pb-1 pl-2 text-black-faded font-medium`}`}
rounded mb-2 bg-gray-background ${isInputPassword && `text-xs pt-4 pr-0 pb-1 pl-2 text-black-faded font-medium`}`}
onChange={({ target }) => setPassword(target.value)}
value={password}
/>
<div className="flex justify-end h-0">
<button type="button"
className="relative font-semibold bottom-10 right-2 text-sm cursor-pointer"
className="relative font-semibold bottom-9 right-2 text-sm cursor-pointer"
onClick={handleDisplay}
> {password === '' ? '' : 'Hiển thị' && displayPass ? 'Hiển thị' : 'Ẩn'}

</button>
</div>

<button type="submit" disabled={isInvalid}
className={`bg-blue-medium text-white w-full rounded h-8 font-semibold ${isInvalid && `opacity-50 cursor-default`}`}
className={`bg-blue-medium text-white w-full rounded h-9 font-semibold ${isInvalid && `opacity-50 cursor-default`}`}
>{loadingBtn ? <ClipLoader className="flex items-center justify-center" color="#ffffff"
loading={loadingBtn} size={20} /> : 'Đăng ký'}</button>

Expand Down
13 changes: 13 additions & 0 deletions src/services/firebase.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/* eslint-disable no-unused-vars */
/* eslint-disable import/prefer-default-export */
import { firebase, FieldValue } from '../lib/firebase'

export async function doesUsernameExist(username) {
const result = await firebase
.firestore()
.collection('users')
.where('username', '==', username)
.get()
// console.log(result)
return result.docs.map((user) => user.data().length > 0)
}
36 changes: 30 additions & 6 deletions src/styles/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7213,7 +7213,7 @@ video {
}

.max-w-maxwidth350 {
max-width: 350px;
max-width: 380px;
}

.max-w-maxwidth258 {
Expand Down Expand Up @@ -13929,6 +13929,10 @@ video {
width: max-content;
}

.w-88-percent {
width: 88%;
}

.z-0 {
z-index: 0;
}
Expand Down Expand Up @@ -24641,7 +24645,7 @@ video {
}

.sm\:max-w-maxwidth350 {
max-width: 350px;
max-width: 380px;
}

.sm\:max-w-maxwidth258 {
Expand Down Expand Up @@ -31344,6 +31348,10 @@ video {
width: max-content;
}

.sm\:w-88-percent {
width: 88%;
}

.sm\:z-0 {
z-index: 0;
}
Expand Down Expand Up @@ -42000,7 +42008,7 @@ video {
}

.md\:max-w-maxwidth350 {
max-width: 350px;
max-width: 380px;
}

.md\:max-w-maxwidth258 {
Expand Down Expand Up @@ -48703,6 +48711,10 @@ video {
width: max-content;
}

.md\:w-88-percent {
width: 88%;
}

.md\:z-0 {
z-index: 0;
}
Expand Down Expand Up @@ -59359,7 +59371,7 @@ video {
}

.lg\:max-w-maxwidth350 {
max-width: 350px;
max-width: 380px;
}

.lg\:max-w-maxwidth258 {
Expand Down Expand Up @@ -66062,6 +66074,10 @@ video {
width: max-content;
}

.lg\:w-88-percent {
width: 88%;
}

.lg\:z-0 {
z-index: 0;
}
Expand Down Expand Up @@ -76718,7 +76734,7 @@ video {
}

.xl\:max-w-maxwidth350 {
max-width: 350px;
max-width: 380px;
}

.xl\:max-w-maxwidth258 {
Expand Down Expand Up @@ -83421,6 +83437,10 @@ video {
width: max-content;
}

.xl\:w-88-percent {
width: 88%;
}

.xl\:z-0 {
z-index: 0;
}
Expand Down Expand Up @@ -94077,7 +94097,7 @@ video {
}

.\32xl\:max-w-maxwidth350 {
max-width: 350px;
max-width: 380px;
}

.\32xl\:max-w-maxwidth258 {
Expand Down Expand Up @@ -100780,6 +100800,10 @@ video {
width: max-content;
}

.\32xl\:w-88-percent {
width: 88%;
}

.\32xl\:z-0 {
z-index: 0;
}
Expand Down
9 changes: 6 additions & 3 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,20 @@ module.exports = {
'100%': {
transform: 'scale(1.0)'
}
}
},

},
animation: {
mobileScreen: 'mobileScreen 6s cubic-bezier(0.4, 0, 0.6, 1) infinite',
scaletext: 'scaletext 0.5s cubic-bezier(1, 1, 0.2, 1)'
},
maxWidth:{
maxwidth350: '350px',
maxwidth350: '380px',
maxwidth258: '258px',
},

width:{
'88-percent': '88%'
}
},
},
}

0 comments on commit afe168c

Please sign in to comment.