Skip to content

Commit

Permalink
feat : ui auth flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@aronei44
aronei44 committed Aug 7, 2022
1 parent 78a49a1 commit 80cbf3f
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 21 deletions.
20 changes: 10 additions & 10 deletions .env.sample
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,29 @@
ENV_VARIABLE=production_server_only_variable
NEXT_PUBLIC_ENV_VARIABLE=production_public_variable
NEXT_PUBLIC_API_HOST=http://localhost:8000/api/

MYSQL_DATABASE=megadb
MYSQL_USER=megauser
MYSQL_PASSWORD=megapass
MYSQL_ROOT_PASSWORD=megapass

API_HOST=127.0.0.1:8000/api/

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:9htXBUKS126kIxUSBJRLGTmYLR572LZjtznZl9ez9IU=
APP_DEBUG=true
APP_URL=http://localhost

SANCTUM_STATEFUL_DOMAINS=127.0.0.1:3000,127.0.0.1
SANCTUM_STATEFUL_DOMAINS=http://localhost:3000,127.0.0.1,http://localhost
# separate by comma if there are more than 1 client
MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=465
MAIL_USERNAME=[email protected]
MAIL_PASSWORD=twpwwjlnjtfdhabw
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="CETAN"

BROADCAST_DRIVER=log
CACHE_DRIVER=file
Expand All @@ -30,14 +38,6 @@ REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
Expand Down
2 changes: 1 addition & 1 deletion api/app/Http/Controllers/LogController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ public function validateCode(Request $request)
return response()->json([
'status'=>'Code Validated',
'data'=>$user
]);
], 200);
} else {
return response()->json([
'status'=>'Code Invalid'
Expand Down
2 changes: 1 addition & 1 deletion docker-compose.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ services:
ENV_VARIABLE: ${ENV_VARIABLE}
NEXT_PUBLIC_ENV_VARIABLE: ${NEXT_PUBLIC_ENV_VARIABLE}
CHOKIDAR_USEPOLLING: "true"
API_HOST: ${API_HOST}
NEXT_PUBLIC_API_HOST: ${NEXT_PUBLIC_API_HOST}
volumes:
- ./ui:/app/ui
- /app/ui/node_modules
Expand Down
7 changes: 4 additions & 3 deletions ui/hooks/Api.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import axios from 'axios'
axios.defaults.withCredentials = true;
axios.defaults.baseURL = process.env.NEXT_PUBLIC_API_HOST;


export const Api = async ({
Expand All @@ -18,16 +19,16 @@ export const Api = async ({
headers.Authorization = 'Bearer ' + token
}
const response = await axios({
url : process.env.API_HOST + path,
url : path,
method,
data,
headers,
}).catch((err) => err.response);
console.log(response);


if(response.status === 401){
// code if unauthenticated
} else {
console.log(response);
return response
}
}
105 changes: 99 additions & 6 deletions ui/pages/auth/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { useState } from "react"
import { useEffect, useState } from "react"
import FormEl from "../../components/formEl"
import Title from "../../components/title"
import { Api } from "../../hooks/Api"
import Router from "next/router"

const Index = () => {
const [step, setStep] = useState(1)
Expand All @@ -10,8 +12,73 @@ const Index = () => {
password:'',
rePassword:''
})
const send = () => {
setStep(step + 1)
const [cbPassword, setCbPassword] = useState(false)
const [loading, setLoading] = useState(false)
const send = async () => {
setLoading(true)
if(step === 1){
const {status, data} = await Api({
path: "register",
method: "POST",
data: form
})
if(status === 200){
setStep(4)
setLoading(false)
} else if (status === 201){
setStep(2)
setLoading(false)
} else {
console.log(data.status)
setLoading(false)
}
} else if (step === 2){
const {status, data} = await Api({
path: "code",
method: "POST",
data: form
})
if(status === 200){
setStep(3)
setLoading(false)
} else {
console.log(data.status)
setLoading(false)
}
} else if (step === 3){
const {status, data} = await Api({
path: "set-password",
method: "POST",
data: form
})
if(status === 200){
localStorage.setItem('token', data.token)
setLoading(false)
if( typeof window !== "undefined"){
window.location.reload()
}
} else {
console.log(data.status)
setLoading(false)
}
} else if (step === 4){
const {status, data} = await Api({
path: "login",
method: "POST",
data: form
})
if(status === 200){
localStorage.setItem('token', data.token)
setLoading(false)
if( typeof window !== "undefined"){
window.location.reload()
}
} else {
console.log(data.status)
setLoading(false)
}
}

}
const handleChange = (e) => {
setForm({
Expand All @@ -24,6 +91,12 @@ const Index = () => {
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
};
useEffect(() => {
const token = localStorage.getItem('token')
if(token){
Router.push('/')
}
},[]);
return (
<div className=" bg-slate-200">
<div className="w-full min-h-screen flex justify-center items-center md:w-6/12 mx-auto">
Expand Down Expand Up @@ -53,15 +126,15 @@ const Index = () => {
{step === 3 && (
<>
<FormEl
type="password"
type={cbPassword ? 'text':'password'}
id="password"
placeholder="Type Your Password"
onChange={handleChange}
error={form.password.length > 0 && form.password.length < 8}
errorMessage="Password must at least 8 character"
/>
<FormEl
type="password"
type={cbPassword ? 'text':'password'}
id="rePassword"
placeholder="Re-Type Your Password"
onChange={handleChange}
Expand All @@ -70,7 +143,27 @@ const Index = () => {
/>
</>
)}
<button disabled={step === 1 && !validateEmail(form.email) || step === 2 && form.code < 100000 || step === 2 && form.code > 999999 || step === 3 && form.password !== form.rePassword || step === 3 && form.password.length < 8} className="py-2 px-5 mt-5 rounded-full bg-blue-600 text-white font-semibold hover:bg-blue-700 block ml-auto" onClick={send}>Send</button>
{step === 4 && (
<>
<FormEl
type={cbPassword ? 'text':'password'}
id="password"
placeholder="Type Your Password"
onChange={handleChange}
error={form.password.length > 0 && form.password.length < 8}
errorMessage="Password must at least 8 character"
/>
</>
)}
<div className="flex mt-5">
{(step === 3 || step === 4 ) && (
<span>
<input type="checkbox" className="ml-5" onClick={()=>setCbPassword(!cbPassword)} value={cbPassword} checked={cbPassword} id="cbPassword"/>
<span className="ml-2 text-slate-600 text-sm" onClick={()=>setCbPassword(!cbPassword)}>Lihat Password</span>
</span>
)}
<button disabled={step === 1 && !validateEmail(form.email) || step === 2 && form.code < 100000 || step === 2 && form.code > 999999 || step === 3 && form.password !== form.rePassword || step === 3 && form.password.length < 8 || loading || step === 4 && form.password.length < 8} className="py-2 px-5 rounded-full bg-blue-600 text-white font-semibold hover:bg-blue-700 block ml-auto" onClick={send}>{loading ? 'Loading...':'Send'}</button>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 80cbf3f

Please sign in to comment.