Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
M
myAppraisal
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
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
angular
myAppraisal
Commits
e79c0327
Commit
e79c0327
authored
Nov 29, 2024
by
Natthaphat Pankiang
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
หน้า signup
parent
89580e27
Hide whitespace changes
Inline
Side-by-side
Showing
12 changed files
with
169 additions
and
143 deletions
+169
-143
register-page.component.html
...authentication/register-page/register-page.component.html
+113
-142
register-page.component.scss
...authentication/register-page/register-page.component.scss
+21
-0
register-page.component.ts
...p/authentication/register-page/register-page.component.ts
+35
-1
Mobile-login-pana.png
src/assets/img/register_images/Mobile-login-pana.png
+0
-0
Privacy-policy-rafiki.png
src/assets/img/register_images/Privacy-policy-rafiki.png
+0
-0
Sign-up-amico.png
src/assets/img/register_images/Sign-up-amico.png
+0
-0
Sign-up-bro.png
src/assets/img/register_images/Sign-up-bro.png
+0
-0
Sign-up-pana.png
src/assets/img/register_images/Sign-up-pana.png
+0
-0
Sign-up-pana2.png
src/assets/img/register_images/Sign-up-pana2.png
+0
-0
bg_signup.jpg
src/assets/img/register_images/bg_signup.jpg
+0
-0
google-icon.png
src/assets/img/register_images/google-icon.png
+0
-0
logo-login-light.png
src/assets/img/register_images/logo-login-light.png
+0
-0
No files found.
src/app/authentication/register-page/register-page.component.html
View file @
e79c0327
<div
class=
"auth"
>
<!-- ========== MAIN CONTENT ========== -->
<div
class=
"grid grid-cols-12 gap-6 w-full h-full"
>
<main
id=
"content"
class=
"w-full max-w-md mx-auto p-6"
>
<div
class=
"lg:col-span-6 col-span-12 hidden lg:block relative"
>
<a
routerLink=
"/dashboard/sales"
class=
"header-logo"
>
<div
class=
"cover relative w-full h-full z-[1] p-10"
>
<img
<a
routerLink=
"/dashboard/sales"
class=
"header-logo"
>
src=
"./assets/img/brand-logos/desktop-logo.png"
<img
style=
"width: 93px; height: 36px;"
src=
"./assets/img/register_images/logo-login-light.png"
alt=
"logo"
alt=
"logo"
class=
"ltr:ml-auto rtl:mr-auto block"
/>
class=
"mx-auto block dark:hidden"
</a>
/>
<div
class=
"authentication-page justify-center w-full max-w-7xl mx-auto p-0"
>
<img
<img
src=
"./assets/img/register_images/Sign-up-pana2.png"
alt=
"logo"
class=
"mx-auto h-[500px]"
/>
src=
"./assets/img/brand-logos/desktop-dark.png"
</div>
alt=
"logo"
class=
"mx-auto hidden dark:block"
/>
</a>
<div
class=
"mt-7 bg-white rounded-sm shadow-sm dark:bg-bgdark"
>
<div
class=
"p-4 sm:p-7"
>
<div
class=
"text-center"
>
<h1
class=
"block text-2xl font-bold text-gray-800 dark:text-white"
>
Sign up
</h1>
<p
class=
"mt-3 text-sm text-gray-600 dark:text-white/70"
>
Already have an account?
<a
class=
"text-primary decoration-2 hover:underline font-medium"
routerLink=
"/signin/basic"
>
Sign in here
</a>
</p>
</div>
</div>
</div>
<div
class=
"mt-5"
>
<div
class=
"lg:col-span-6 col-span-12"
>
<button
<div
class=
"authentication-page w-full"
>
type=
"button"
<!-- ========== MAIN CONTENT ========== -->
class=
"w-full py-2 px-3 inline-flex justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
<main
id=
"content"
class=
"w-full max-w-md mx-auto p-6 mt-7"
>
>
<a
routerLink=
"/dashboard/sales"
class=
"header-logo"
>
<img
<img
src=
"./assets/img/brand-logos/logo.png"
alt=
"logo"
class=
"mx-auto block dark:hidden mt-1"
/>
src=
"./assets/img/authentication/social/1.png"
<img
src=
"./assets/img/brand-logos/logo.png"
alt=
"logo"
class=
"mx-auto hidden dark:block mt-1"
/>
class=
"w-4 h-4"
</a>
alt=
"google-img"
<div
class=
"mt-2"
>
/>
Sign in with Google
<div
class=
"p-4 sm:p-7"
>
</button>
<div
class=
"text-center"
>
<h1
class=
"block text-2xl font-bold text-gray-800 dark:text-white"
>
Sign up
</h1>
</div>
<div
<div
class=
"mt-5"
>
class=
"py-3 flex items-center text-xs text-gray-400 uppercase before:flex-[1_1_0%] before:border-t before:border-gray-200 ltr:before:mr-6 rtl:before:ml-6 after:flex-[1_1_0%] after:border-t after:border-gray-200 ltr:after:ml-6 rtl:after:mr-6 dark:text-white/70 dark:before:border-white/10 dark:after:border-white/10"
<!-- Form -->
>
<form>
Or
<div
class=
"grid gap-y-4"
>
</div>
<!-- Form Group -->
<div>
<label
class=
"block text-sm mb-2 dark:text-white"
>
Full Name
</label>
<div
class=
"relative"
>
<input
type=
"text"
name=
"text"
class=
"py-2 px-3 block w-full border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:text-white/70"
required
/>
</div>
</div>
<!-- End Form Group -->
<!-- Form -->
<!-- Form Group -->
<form>
<div>
<div
class=
"grid gap-y-4"
>
<label
class=
"block text-sm mb-2 dark:text-white"
>
Email address
</label>
<!-- Form Group -->
<div
class=
"relative"
>
<div>
<input
type=
"email"
name=
"email"
<label
class=
"block text-sm mb-2 dark:text-white"
class=
"py-2 px-3 block w-full border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:text-white/70"
>
Full Name
</label
required
/>
>
</div>
<div
class=
"relative"
>
</div>
<input
<!-- End Form Group -->
type=
"text"
name=
"text"
class=
"py-2 px-3 block w-full border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:text-white/70"
required
/>
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<!-- Form Group -->
<div>
<div>
<label
class=
"block text-sm mb-2 dark:text-white"
<label
for=
"password"
class=
"block text-sm mb-2 dark:text-white"
>
Password
</label>
>
Email address
</label
<div
class=
"relative"
>
>
<input
type=
"password"
id=
"password"
name=
"password"
<div
class=
"relative"
>
class=
"py-2 px-3 block w-full border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:text-white/70"
<input
required
/>
type=
"email"
</div>
name=
"email"
</div>
class=
"py-2 px-3 block w-full border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:text-white/70"
<!-- End Form Group -->
required
/>
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<!-- Form Group -->
<div>
<div>
<label
for=
"password"
class=
"block text-sm mb-2 dark:text-white"
<label
for=
"confirm-password"
class=
"block text-sm mb-2 dark:text-white"
>
Confirm Password
</label>
>
Password
</label
<div
class=
"relative"
>
>
<input
type=
"password"
id=
"confirm-password"
name=
"confirm-password"
<div
class=
"relative"
>
class=
"py-2 px-3 block w-full border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:text-white/70"
<input
required
/>
type=
"password"
</div>
id=
"password"
</div>
name=
"password"
<!-- End Form Group -->
class=
"py-2 px-3 block w-full border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:text-white/70"
required
/>
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<!-- Checkbox -->
<div>
<div
class=
"flex items-center"
>
<label
<div
class=
"flex"
>
for=
"confirm-password"
<input
id=
"remember-me"
name=
"remember-me"
type=
"checkbox"
class=
"block text-sm mb-2 dark:text-white"
class=
"shrink-0 mt-0.5 border-gray-200 rounded text-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:checked:bg-primary dark:checked:border-primary dark:focus:ring-offset-white/10"
/>
>
Confirm Password
</label
</div>
>
<div
class=
"ltr:ml-3 rtl:mr-3"
>
<div
class=
"relative"
>
<label
for=
"remember-me"
class=
"text-sm dark:text-white"
>
I accept the
<input
<a
class=
"text-primary decoration-2 hover:underline font-medium"
type=
"password"
routerLink=
"/page/terms-conditions"
>
Terms and Conditions
</a></label>
id=
"confirm-password"
</div>
name=
"confirm-password"
</div>
class=
"py-2 px-3 block w-full border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:text-white/70"
<!-- <div
required
class="py-3 flex items-center text-xs text-gray-400 uppercase before:flex-[1_1_0%] before:border-t before:border-gray-200 ltr:before:mr-6 rtl:before:ml-6 after:flex-[1_1_0%] after:border-t after:border-gray-200 ltr:after:ml-6 rtl:after:mr-6 dark:text-white/70 dark:before:border-white/10 dark:after:border-white/10">
/>
Or
</div>
</div>
</div>
<button type="button"
<!-- End Form Group -->
class="w-full py-2 px-3 inline-flex justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
<img src="./assets/img/register_images/google-icon.png" class="w-4 h-4" alt="google-img" />Sign
in with Google
</button> -->
<!-- End Checkbox -->
<!-- Checkbox -->
<button
type=
"submit"
<div
class=
"flex items-center"
>
class=
"py-2 px-3 inline-flex justify-center items-center gap-2 rounded-sm border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:outline-none focus:ring-0 focus:ring-primary focus:ring-offset-0 transition-all text-sm dark:focus:ring-offset-white/10"
>
<div
class=
"flex"
>
Sign up
<input
</button>
id=
"remember-me"
<div
class=
"text-center"
>
name=
"remember-me"
<p
class=
"mt-1 text-sm text-gray-600 dark:text-white/70"
>
type=
"checkbox"
Already have an account?
class=
"shrink-0 mt-0.5 border-gray-200 rounded text-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:checked:bg-primary dark:checked:border-primary dark:focus:ring-offset-white/10"
<a
class=
"text-primary decoration-2 hover:underline font-medium"
routerLink=
"/auth/login"
>
/>
Sign in here
</div>
</a>
<div
class=
"ltr:ml-3 rtl:mr-3"
>
</p>
<label
for=
"remember-me"
class=
"text-sm dark:text-white"
</div>
>
I accept the
<a
</div>
class=
"text-primary decoration-2 hover:underline font-medium"
</form>
routerLink=
"/page/terms-conditions"
<!-- End Form -->
>
Terms and Conditions
</a
></label>
</div>
</div>
</div>
</div>
<!-- End Checkbox -->
<button
type=
"submit"
class=
"py-2 px-3 inline-flex justify-center items-center gap-2 rounded-sm border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:outline-none focus:ring-0 focus:ring-primary focus:ring-offset-0 transition-all text-sm dark:focus:ring-offset-white/10"
>
Sign up
</button>
</div>
</div>
</
form
>
</
main
>
<!--
End Form
-->
<!--
========== END MAIN CONTENT ==========
-->
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- ========== END MAIN CONTENT ========== -->
src/app/authentication/register-page/register-page.component.scss
View file @
e79c0327
@media
(
min-width
:
480px
){
.authentication-page
{
padding-top
:
1rem
;
padding-bottom
:
1rem
;
}
}
.
cover
:
:
before
{
position
:
absolute
;
left
:
0px
;
right
:
0px
;
top
:
0px
;
z-index
:
-1
;
height
:
100%
;
width
:
100%
;
content
:
var
(
--
tw-content
);
background-image
:
url('/assets/img/register_images/bg_signup.jpg')
;
background-size
:
cover
;
background-position
:
center
;
}
\ No newline at end of file
src/app/authentication/register-page/register-page.component.ts
View file @
e79c0327
import
{
Component
}
from
'@angular/core'
;
import
{
DOCUMENT
}
from
'@angular/common'
;
import
{
Component
,
ElementRef
,
Inject
,
Renderer2
}
from
'@angular/core'
;
@
Component
({
@
Component
({
selector
:
'app-register-page'
,
selector
:
'app-register-page'
,
...
@@ -6,5 +7,38 @@ import { Component } from '@angular/core';
...
@@ -6,5 +7,38 @@ import { Component } from '@angular/core';
styleUrls
:
[
'./register-page.component.scss'
]
styleUrls
:
[
'./register-page.component.scss'
]
})
})
export
class
RegisterPageComponent
{
export
class
RegisterPageComponent
{
constructor
(@
Inject
(
DOCUMENT
)
private
document
:
Document
,
private
elementRef
:
ElementRef
,
private
renderer
:
Renderer2
)
{}
ngOnInit
():
void
{
this
.
renderer
.
addClass
(
this
.
document
.
body
,
'h-full'
);
this
.
renderer
.
addClass
(
this
.
document
.
body
,
'!py-0'
);
this
.
renderer
.
addClass
(
this
.
document
.
body
,
'bg-white'
);
this
.
renderer
.
addClass
(
this
.
document
.
body
,
'dark:bg-bgdark'
);
const
authe
:
any
=
document
.
querySelector
(
'.auth'
);
authe
.
setAttribute
(
'class'
,
'h-full'
);
const
html
:
any
=
this
.
elementRef
.
nativeElement
.
ownerDocument
.
documentElement
;
html
.
classList
.
add
(
'h-full'
,
'light'
);
html
.
removeAttribute
(
'data-header-styles'
,
'light'
);
if
(
localStorage
.
getItem
(
'synto-header-mode'
)
==
'dark'
)
{
const
html
:
any
=
this
.
elementRef
.
nativeElement
.
ownerDocument
.
documentElement
;
html
.
classList
.
add
(
'h-full'
,
'dark'
);
}
}
ngOnDestroy
():
void
{
this
.
renderer
.
removeClass
(
this
.
document
.
body
,
'h-full'
);
this
.
renderer
.
removeClass
(
this
.
document
.
body
,
'!py-0'
);
this
.
renderer
.
removeClass
(
this
.
document
.
body
,
'bg-white'
);
this
.
renderer
.
removeClass
(
this
.
document
.
body
,
'dark:bg-bgdark'
);
if
(
localStorage
.
getItem
(
'synto-header-mode'
)
==
'dark'
)
{
const
html
:
any
=
this
.
elementRef
.
nativeElement
.
ownerDocument
.
documentElement
;
html
.
classList
.
remove
(
'h-full'
,
'dark'
);
}
const
authe
:
any
=
document
.
querySelector
(
'.h-full'
);
authe
.
removeAttribute
(
'class'
,
'h-full'
);
}
}
}
src/assets/img/register_images/Mobile-login-pana.png
0 → 100644
View file @
e79c0327
289 KB
src/assets/img/register_images/Privacy-policy-rafiki.png
0 → 100644
View file @
e79c0327
318 KB
src/assets/img/register_images/Sign-up-amico.png
0 → 100644
View file @
e79c0327
721 KB
src/assets/img/register_images/Sign-up-bro.png
0 → 100644
View file @
e79c0327
363 KB
src/assets/img/register_images/Sign-up-pana.png
0 → 100644
View file @
e79c0327
279 KB
src/assets/img/register_images/Sign-up-pana2.png
0 → 100644
View file @
e79c0327
174 KB
src/assets/img/register_images/bg_signup.jpg
0 → 100644
View file @
e79c0327
854 KB
src/assets/img/register_images/google-icon.png
0 → 100644
View file @
e79c0327
103 KB
src/assets/img/register_images/logo-login-light.png
0 → 100644
View file @
e79c0327
12.4 KB
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