Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
T
Tia-dev
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Dida Adams Arizona
Tia-dev
Commits
6d938950
Commit
6d938950
authored
Aug 25, 2020
by
a.bairuha
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update set password
parent
7a8f4f68
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
215 additions
and
2 deletions
+215
-2
ResetPassword.js
src/container/ResetPassword.js
+5
-2
SetPassword.js
src/container/SetPassword.js
+208
-0
index.js
src/router/index.js
+2
-0
No files found.
src/container/ResetPassword.js
View file @
6d938950
...
...
@@ -43,8 +43,11 @@ class ResetPassword extends Component {
if
(
response
.
data
.
status
==
'success'
)
{
//
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
data
.
message
,
tipeAlert
:
'warning'
})
this
.
props
.
history
.
push
(
'/login'
)
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
data
.
message
,
tipeAlert
:
'warning'
},
()
=>
{
setTimeout
(()
=>
{
this
.
props
.
history
.
push
(
'/login'
)
},
1500
);
})
}
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
problem
,
tipeAlert
:
'error'
})
...
...
src/container/SetPassword.js
0 → 100644
View file @
6d938950
import
React
,
{
Component
}
from
'react'
;
import
Images
from
'../assets/Images'
;
import
{
TextField
,
InputAdornment
,
Button
,
Typography
,
IconButton
,
Snackbar
}
from
'@material-ui/core'
;
import
Visibility
from
'@material-ui/icons/Visibility'
;
import
VisibilityOff
from
'@material-ui/icons/VisibilityOff'
;
import
MuiAlert
from
'@material-ui/lab/Alert'
;
import
{
withStyles
}
from
'@material-ui/core/styles'
;
import
api
from
'../api'
;
const
Alert
=
withStyles
({
})((
props
)
=>
<
MuiAlert
elevation
=
{
6
}
variant
=
"filled"
{...
props
}
/>
)
;
class
SetPassword
extends
Component
{
constructor
(
props
)
{
super
(
props
)
this
.
state
=
{
password
:
''
,
confirmPassword
:
''
,
showPass
:
false
,
showPass2
:
false
,
errorPassword
:
false
,
errorConfirmPassword
:
false
,
msgPassword
:
'Consists of 8 characters with a combination of numbers.'
,
msgConfirmPassword
:
'Consists of 8 characters with a combination of numbers.'
,
userId
:
0
,
alert
:
false
,
tipeAlert
:
''
,
messageAlert
:
''
}
}
componentDidMount
()
{
console
.
log
(
this
.
props
.
match
.
params
.
id
)
let
userId
=
this
.
props
.
match
.
params
.
id
this
.
setState
({
userId
})
this
.
checkExpiredLink
(
userId
)
// console.log(this.props)
}
checkExpiredLink
(
userId
)
{
api
.
create
().
isResetPassword
(
userId
).
then
((
response
)
=>
{
if
(
response
.
data
)
{
if
(
response
.
data
.
status
==
'success'
)
{
//
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
data
.
message
,
tipeAlert
:
'warning'
},
()
=>
{
setTimeout
(()
=>
{
this
.
props
.
history
.
push
(
'/login'
)
},
1500
);
})
}
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
problem
,
tipeAlert
:
'error'
})
}
})
}
isRegex
(
value
)
{
// const re = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/;
const
re
=
/^
(?=
.*
[
A-Za-z
])(?=
.*
\d)(?=
.*
[
@$!%*#?&
])[
A-Za-z
\d
@$!%*#?&
]{1,}
$/
;
return
re
.
test
(
String
(
value
));
}
isEmail
(
email
)
{
const
re
=
/^
(([^
<>()
\[\]\\
.,;:
\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,}))
$/
;
return
re
.
test
(
String
(
email
).
toLowerCase
());
}
validateReset
()
{
if
(
this
.
state
.
password
.
trim
()
==
""
)
{
this
.
setState
({
errorPassword
:
true
,
msgPassword
:
'Password is required'
})
}
else
if
(
this
.
state
.
password
.
length
<
8
)
{
this
.
setState
({
errorPassword
:
true
,
msgPassword
:
'Password minimum 8 characters.'
})
}
else
if
(
this
.
isEmail
(
this
.
state
.
password
))
{
this
.
setState
({
errorPassword
:
true
,
msgPassword
:
'Password format should not use email.'
})
}
else
if
(
!
this
.
isRegex
(
this
.
state
.
password
))
{
this
.
setState
({
errorPassword
:
true
,
msgPassword
:
'Password must be a combination of characters, letters and numbers.'
})
}
else
if
(
this
.
state
.
confirmPassword
.
trim
()
==
""
)
{
this
.
setState
({
errorConfirmPassword
:
true
,
msgConfirmPassword
:
'Confirm password is required.'
})
}
else
if
(
this
.
state
.
confirmPassword
.
length
<
8
)
{
this
.
setState
({
errorConfirmPassword
:
true
,
msgConfirmPassword
:
'Confirm password minimum 8 characters.'
})
}
else
if
(
this
.
isEmail
(
this
.
state
.
confirmPassword
))
{
this
.
setState
({
errorConfirmPassword
:
true
,
msgConfirmPassword
:
'Password confirmation format should not use email.'
})
}
else
if
(
!
this
.
isRegex
(
this
.
state
.
confirmPassword
))
{
this
.
setState
({
errorConfirmPassword
:
true
,
msgConfirmPassword
:
'Password confirmation must be a combination of characters, letters and numbers.'
})
}
else
if
(
this
.
state
.
password
!==
this
.
state
.
confirmPassword
)
{
this
.
setState
({
errorConfirmPassword
:
true
,
msgConfirmPassword
:
'Confirmation password must match the password.'
})
}
else
{
this
.
confirmPassword
()
}
}
confirmPassword
()
{
let
payload
=
{
"password"
:
this
.
state
.
password
,
"confirm_password"
:
this
.
state
.
confirmPassword
,
"user_id"
:
this
.
state
.
userId
}
api
.
create
().
resetPassword
(
payload
).
then
((
response
)
=>
{
if
(
response
.
data
)
{
if
(
response
.
ok
)
{
if
(
response
.
data
.
status
===
'success'
)
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
data
.
message
,
tipeAlert
:
'success'
},
()
=>
{
setTimeout
(()
=>
{
this
.
props
.
history
.
push
(
'/login'
)
},
1000
);
})
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
data
.
message
,
tipeAlert
:
'warning'
})
}
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
data
.
message
,
tipeAlert
:
'error'
})
}
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
problem
,
tipeAlert
:
'error'
})
}
})
}
closeAlert
()
{
this
.
setState
({
alert
:
false
})
}
handleChange
(
e
)
{
let
data
=
this
.
state
this
.
setState
({
...
data
,
[
e
.
target
.
name
]:
e
.
target
.
value
})
if
(
e
.
target
.
name
==
"password"
)
{
this
.
setState
({
errorPassword
:
false
,
msgPassword
:
'Password consists of 8 characters with a combination of numbers.'
})
}
else
if
(
e
.
target
.
name
==
"confirmPassword"
)
{
this
.
setState
({
errorConfirmPassword
:
false
,
msgConfirmPassword
:
'Confirm Password consists of 8 characters with a combination of numbers.'
})
}
}
render
()
{
return
(
<
div
style
=
{{
flex
:
1
,
display
:
'flex'
,
backgroundColor
:
'#152d40'
,
height
:
'100vh'
,
justifyContent
:
'center'
,
alignItems
:
'center'
}}
>
<
Snackbar
open
=
{
this
.
state
.
alert
}
autoHideDuration
=
{
6000
}
onClose
=
{()
=>
this
.
closeAlert
()}
>
<
Alert
onClose
=
{()
=>
this
.
closeAlert
()}
severity
=
{
this
.
state
.
tipeAlert
}
>
{
this
.
state
.
messageAlert
}
<
/Alert
>
<
/Snackbar
>
<
div
style
=
{{
padding
:
56
,
display
:
'flex'
,
flexDirection
:
'column'
,
width
:
378
,
height
:
415
,
borderRadius
:
12
,
boxShadow
:
'0 2 4 0 rgba(0, 0, 0, 0.2)'
,
backgroundColor
:
'#ffffff'
,
justifyContent
:
'center'
,
alignItems
:
'center'
}}
>
<
img
src
=
{
Images
.
tia
}
/
>
<
TextField
label
=
{
<
Typography
style
=
{{
fontSize
:
12
,
fontFamily
:
'Nunito Sans, sans-serif'
}}
>
New
password
*<
/Typography>
}
id
=
"password"
type
=
{
this
.
state
.
showPass
?
'text'
:
'password'
}
name
=
{
"password"
}
value
=
{
this
.
state
.
password
}
onChange
=
{(
password
)
=>
{
this
.
handleChange
(
password
)
}}
variant
=
"outlined"
error
=
{
this
.
state
.
errorPassword
}
style
=
{{
width
:
250
,
height
:
51
,
marginTop
:
32
}}
helperText
=
{
<
Typography
style
=
{{
fontSize
:
9
,
marginTop
:
4
,
fontFamily
:
'Nunito Sans, sans-serif'
}}
>
{
this
.
state
.
msgPassword
}
<
/Typography>
}
InputProps
=
{{
endAdornment
:
<
InputAdornment
position
=
"end"
>
<
IconButton
aria
-
label
=
"toggle password visibility"
style
=
{{
color
:
'#4b4b4b'
,
opacity
:
0.5
}}
onClick
=
{()
=>
this
.
setState
({
showPass
:
!
this
.
state
.
showPass
})}
edge
=
"end"
>
{
this
.
state
.
showPass
?
<
Visibility
style
=
{{
fontSize
:
18
}}
/> : <VisibilityOff style={{ fontSize: 18 }} /
>
}
<
/IconButton
>
<
/InputAdornment>
,
}}
/
>
<
TextField
label
=
{
<
Typography
style
=
{{
fontSize
:
12
,
fontFamily
:
'Nunito Sans, sans-serif'
}}
>
Repeat
New
Password
*<
/Typography>
}
id
=
"confirmPassword"
type
=
{
this
.
state
.
showPass2
?
'text'
:
'password'
}
name
=
{
"confirmPassword"
}
value
=
{
this
.
state
.
confirmPassword
}
onChange
=
{(
confirmPassword
)
=>
{
this
.
handleChange
(
confirmPassword
)
}}
variant
=
"outlined"
error
=
{
this
.
state
.
errorConfirmPassword
}
style
=
{{
width
:
250
,
height
:
51
,
marginTop
:
45
}}
helperText
=
{
<
Typography
style
=
{{
fontSize
:
9
,
marginTop
:
4
,
fontFamily
:
'Nunito Sans, sans-serif'
}}
>
{
this
.
state
.
msgConfirmPassword
}
<
/Typography>
}
InputProps
=
{{
endAdornment
:
<
InputAdornment
position
=
"end"
>
<
IconButton
aria
-
label
=
"toggle password visibility"
style
=
{{
color
:
'#4b4b4b'
,
opacity
:
0.5
}}
onClick
=
{()
=>
this
.
setState
({
showPass2
:
!
this
.
state
.
showPass2
})}
edge
=
"end"
>
{
this
.
state
.
showPass2
?
<
Visibility
style
=
{{
fontSize
:
18
}}
/> : <VisibilityOff style={{ fontSize: 18 }} /
>
}
<
/IconButton
>
<
/InputAdornment>
,
}}
/
>
<
Button
name
=
"submit"
variant
=
"contained"
disabled
=
{
this
.
state
.
password
.
trim
()
==
''
&&
this
.
state
.
confirmPassword
.
trim
()
==
''
?
true
:
false
}
onClick
=
{()
=>
this
.
validateReset
()}
style
=
{{
marginTop
:
50
,
width
:
'100%'
,
height
:
35
,
borderRadius
:
4
,
color
:
this
.
state
.
password
.
trim
()
==
''
&&
this
.
state
.
confirmPassword
.
trim
()
==
''
?
'#4b4b4b'
:
'#fff'
,
backgroundColor
:
this
.
state
.
password
.
trim
()
==
''
&&
this
.
state
.
confirmPassword
.
trim
()
==
''
?
'#d8d8d8'
:
'#51c6ea'
}}
>
<
Typography
style
=
{{
fontSize
:
12
,
fontFamily
:
'Nunito Sans, sans-serif'
}}
>
Lanjut
<
/Typography
>
<
/Button
>
<
/div
>
<
/div
>
);
}
}
export
default
SetPassword
;
\ No newline at end of file
src/router/index.js
View file @
6d938950
...
...
@@ -13,6 +13,7 @@ import Register from '../container/Register'
import
Screen404
from
'../container/Screen404'
import
ForgotPassword
from
'../container/ForgotPassword'
import
ResetPassword
from
'../container/ResetPassword'
import
SetPassword
from
'../container/SetPassword'
import
EmailVerification
from
"../container/EmailVerification"
;
import
Constant
from
"../library/Constant"
;
// This site has 3 pages, all of which are rendered
...
...
@@ -41,6 +42,7 @@ export default function BasicExample() {
</PrivateRoute> */
}
<
Route
path
=
"/forgot-password"
component
=
{
ForgotPassword
}
/
>
<
Route
path
=
"/reset-password/:id"
component
=
{
ResetPassword
}
/
>
<
Route
path
=
"/set-password/:id"
component
=
{
SetPassword
}
/
>
<
Route
path
=
"/email-verification"
component
=
{
EmailVerification
}
/
>
<
Route
path
=
"/register"
component
=
{
Register
}
/
>
<
PrivateRoute
path
=
"/home"
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment