modern page -> classic page 수정
This commit is contained in:
Park Byung Eun
parent
f98bb4653f
commit
c91f56eeb6
|
|
@ -1,8 +1,6 @@
|
|||
<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
|
||||
>
|
||||
<div
|
||||
class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
|
||||
class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
|
||||
>
|
||||
<div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
|
||||
<!-- Logo -->
|
||||
|
|
@ -31,90 +29,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
|
||||
>
|
||||
<!-- Background - @formatter:off -->
|
||||
<!-- Rings -->
|
||||
<svg
|
||||
class="absolute inset-0 pointer-events-none"
|
||||
viewBox="0 0 960 540"
|
||||
width="100%"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMax slice"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
class="text-gray-700 opacity-25"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="100"
|
||||
>
|
||||
<circle r="234" cx="196" cy="23"></circle>
|
||||
<circle r="234" cx="790" cy="491"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- Dots -->
|
||||
<svg
|
||||
class="absolute -top-16 -right-16 text-gray-700"
|
||||
viewBox="0 0 220 192"
|
||||
width="220"
|
||||
height="192"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="837c3e70-6c3a-44e6-8854-cc48c737b659"
|
||||
x="0"
|
||||
y="0"
|
||||
width="20"
|
||||
height="20"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width="220"
|
||||
height="192"
|
||||
fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
|
||||
></rect>
|
||||
</svg>
|
||||
<!-- @formatter:on -->
|
||||
<!-- Content -->
|
||||
<div class="z-10 relative w-full max-w-2xl">
|
||||
<div class="text-7xl font-bold leading-none text-gray-100">
|
||||
<div>Welcome to</div>
|
||||
<div>our community</div>
|
||||
</div>
|
||||
<div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
|
||||
Fuse helps developers to build organized and well coded dashboards full
|
||||
of beautiful and rich modules. Join us and start building your
|
||||
application today.
|
||||
</div>
|
||||
<div class="flex items-center mt-8">
|
||||
<div class="flex flex-0 items-center -space-x-1.5">
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/female-18.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/female-11.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/male-09.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/male-16.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-4 font-medium tracking-tight text-gray-400">
|
||||
More than 17k people joined us, it's your turn
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
|
||||
>
|
||||
<div
|
||||
class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
|
||||
class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
|
||||
>
|
||||
<div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
|
||||
<!-- Logo -->
|
||||
|
|
@ -39,13 +37,11 @@
|
|||
<mat-label>Email address</mat-label>
|
||||
<input id="email" matInput [formControlName]="'email'" />
|
||||
<mat-error
|
||||
*ngIf="forgotPasswordForm?.get('email')?.hasError('required')"
|
||||
*ngIf="forgotPasswordForm.get('email')?.hasError('required')"
|
||||
>
|
||||
Email address is required
|
||||
</mat-error>
|
||||
<mat-error
|
||||
*ngIf="forgotPasswordForm?.get('email')?.hasError('email')"
|
||||
>
|
||||
<mat-error *ngIf="forgotPasswordForm.get('email')?.hasError('email')">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
|
@ -55,12 +51,12 @@
|
|||
class="fuse-mat-button-large w-full mt-3"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
[disabled]="forgotPasswordForm?.disabled"
|
||||
[disabled]="forgotPasswordForm.disabled"
|
||||
(click)="sendResetLink()"
|
||||
>
|
||||
<span *ngIf="!forgotPasswordForm?.disabled"> Send reset link </span>
|
||||
<span *ngIf="!forgotPasswordForm.disabled"> Send reset link </span>
|
||||
<mat-progress-spinner
|
||||
*ngIf="forgotPasswordForm?.disabled"
|
||||
*ngIf="forgotPasswordForm.disabled"
|
||||
[diameter]="24"
|
||||
[mode]="'indeterminate'"
|
||||
></mat-progress-spinner>
|
||||
|
|
@ -78,90 +74,4 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
|
||||
>
|
||||
<!-- Background - @formatter:off -->
|
||||
<!-- Rings -->
|
||||
<svg
|
||||
class="absolute inset-0 pointer-events-none"
|
||||
viewBox="0 0 960 540"
|
||||
width="100%"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMax slice"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
class="text-gray-700 opacity-25"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="100"
|
||||
>
|
||||
<circle r="234" cx="196" cy="23"></circle>
|
||||
<circle r="234" cx="790" cy="491"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- Dots -->
|
||||
<svg
|
||||
class="absolute -top-16 -right-16 text-gray-700"
|
||||
viewBox="0 0 220 192"
|
||||
width="220"
|
||||
height="192"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="837c3e70-6c3a-44e6-8854-cc48c737b659"
|
||||
x="0"
|
||||
y="0"
|
||||
width="20"
|
||||
height="20"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width="220"
|
||||
height="192"
|
||||
fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
|
||||
></rect>
|
||||
</svg>
|
||||
<!-- @formatter:on -->
|
||||
<!-- Content -->
|
||||
<div class="z-10 relative w-full max-w-2xl">
|
||||
<div class="text-7xl font-bold leading-none text-gray-100">
|
||||
<div>Welcome to</div>
|
||||
<div>our community</div>
|
||||
</div>
|
||||
<div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
|
||||
Fuse helps developers to build organized and well coded dashboards full
|
||||
of beautiful and rich modules. Join us and start building your
|
||||
application today.
|
||||
</div>
|
||||
<div class="flex items-center mt-8">
|
||||
<div class="flex flex-0 items-center -space-x-1.5">
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/female-18.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/female-11.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/male-09.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/male-16.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-4 font-medium tracking-tight text-gray-400">
|
||||
More than 17k people joined us, it's your turn
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
|
||||
>
|
||||
<div
|
||||
class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
|
||||
class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
|
||||
>
|
||||
<div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
|
||||
<!-- Logo -->
|
||||
|
|
@ -103,14 +101,14 @@
|
|||
</button>
|
||||
<mat-error
|
||||
*ngIf="
|
||||
resetPasswordForm?.get('passwordConfirm')?.hasError('required')
|
||||
resetPasswordForm.get('passwordConfirm')?.hasError('required')
|
||||
"
|
||||
>
|
||||
Password confirmation is required
|
||||
</mat-error>
|
||||
<mat-error
|
||||
*ngIf="
|
||||
resetPasswordForm?.get('passwordConfirm')?.hasError('mustMatch')
|
||||
resetPasswordForm.get('passwordConfirm')?.hasError('mustMatch')
|
||||
"
|
||||
>
|
||||
Passwords must match
|
||||
|
|
@ -122,14 +120,12 @@
|
|||
class="fuse-mat-button-large w-full mt-3"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
[disabled]="resetPasswordForm?.disabled"
|
||||
[disabled]="resetPasswordForm.disabled"
|
||||
(click)="resetPassword()"
|
||||
>
|
||||
<span *ngIf="!resetPasswordForm?.disabled">
|
||||
Reset your password
|
||||
</span>
|
||||
<span *ngIf="!resetPasswordForm.disabled"> Reset your password </span>
|
||||
<mat-progress-spinner
|
||||
*ngIf="resetPasswordForm?.disabled"
|
||||
*ngIf="resetPasswordForm.disabled"
|
||||
[diameter]="24"
|
||||
[mode]="'indeterminate'"
|
||||
></mat-progress-spinner>
|
||||
|
|
@ -147,90 +143,4 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
|
||||
>
|
||||
<!-- Background - @formatter:off -->
|
||||
<!-- Rings -->
|
||||
<svg
|
||||
class="absolute inset-0 pointer-events-none"
|
||||
viewBox="0 0 960 540"
|
||||
width="100%"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMax slice"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
class="text-gray-700 opacity-25"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="100"
|
||||
>
|
||||
<circle r="234" cx="196" cy="23"></circle>
|
||||
<circle r="234" cx="790" cy="491"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- Dots -->
|
||||
<svg
|
||||
class="absolute -top-16 -right-16 text-gray-700"
|
||||
viewBox="0 0 220 192"
|
||||
width="220"
|
||||
height="192"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="837c3e70-6c3a-44e6-8854-cc48c737b659"
|
||||
x="0"
|
||||
y="0"
|
||||
width="20"
|
||||
height="20"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width="220"
|
||||
height="192"
|
||||
fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
|
||||
></rect>
|
||||
</svg>
|
||||
<!-- @formatter:on -->
|
||||
<!-- Content -->
|
||||
<div class="z-10 relative w-full max-w-2xl">
|
||||
<div class="text-7xl font-bold leading-none text-gray-100">
|
||||
<div>Welcome to</div>
|
||||
<div>our community</div>
|
||||
</div>
|
||||
<div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
|
||||
Fuse helps developers to build organized and well coded dashboards full
|
||||
of beautiful and rich modules. Join us and start building your
|
||||
application today.
|
||||
</div>
|
||||
<div class="flex items-center mt-8">
|
||||
<div class="flex flex-0 items-center -space-x-1.5">
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/female-18.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/female-11.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/male-09.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/male-16.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-4 font-medium tracking-tight text-gray-400">
|
||||
More than 17k people joined us, it's your turn
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
|
||||
>
|
||||
<div
|
||||
class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
|
||||
class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
|
||||
>
|
||||
<div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
|
||||
<!-- Logo -->
|
||||
|
|
@ -12,16 +10,16 @@
|
|||
|
||||
<!-- Title -->
|
||||
<div class="mt-8 text-4xl font-extrabold tracking-tight leading-tight">
|
||||
Sign in
|
||||
Login Page
|
||||
</div>
|
||||
<div class="flex items-baseline mt-0.5 font-medium">
|
||||
<!-- <div class="flex items-baseline mt-0.5 font-medium">
|
||||
<div>Don't have an account?</div>
|
||||
<a
|
||||
class="ml-1 text-primary-500 hover:underline"
|
||||
[routerLink]="['/sign-up']"
|
||||
>Sign up
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
|
|
@ -39,19 +37,19 @@
|
|||
<form class="mt-8" [formGroup]="signInForm" #signInNgForm="ngForm">
|
||||
<!-- Email field -->
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Email address</mat-label>
|
||||
<mat-label>로그인 아이디</mat-label>
|
||||
<input id="email" matInput [formControlName]="'email'" />
|
||||
<mat-error *ngIf="signInForm?.get('email')?.hasError('required')">
|
||||
Email address is required
|
||||
<mat-error *ngIf="signInForm.get('email')?.hasError('required')">
|
||||
아이디를 입력하세요.
|
||||
</mat-error>
|
||||
<mat-error *ngIf="signInForm?.get('email')?.hasError('email')">
|
||||
<mat-error *ngIf="signInForm.get('email')?.hasError('email')">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Password field -->
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Password</mat-label>
|
||||
<mat-label>비밀번호</mat-label>
|
||||
<input
|
||||
id="password"
|
||||
matInput
|
||||
|
|
@ -80,11 +78,22 @@
|
|||
[svgIcon]="'heroicons_solid:eye-off'"
|
||||
></mat-icon>
|
||||
</button>
|
||||
<mat-error> Password is required </mat-error>
|
||||
<mat-error> 비밀번호를 입력하세요 </mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>보안코드*</mat-label>
|
||||
<input id="email" matInput [formControlName]="'recaptcha'" />
|
||||
<mat-error *ngIf="signInForm.get('email')?.hasError('required')">
|
||||
보안코드를 입력하세요.
|
||||
</mat-error>
|
||||
<mat-error *ngIf="signInForm.get('email')?.hasError('email')">
|
||||
유효한 보안코드가 아닙니다.
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="inline-flex items-end justify-between w-full mt-1.5">
|
||||
<!-- <div class="inline-flex items-end justify-between w-full mt-1.5">
|
||||
<mat-checkbox [color]="'primary'" [formControlName]="'rememberMe'">
|
||||
Remember me
|
||||
</mat-checkbox>
|
||||
|
|
@ -93,33 +102,33 @@
|
|||
[routerLink]="['/forgot-password']"
|
||||
>Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Submit button -->
|
||||
<button
|
||||
class="fuse-mat-button-large w-full mt-6"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
[disabled]="signInForm?.disabled"
|
||||
[disabled]="signInForm.disabled"
|
||||
(click)="signIn()"
|
||||
>
|
||||
<span *ngIf="!signInForm?.disabled"> Sign in </span>
|
||||
<span *ngIf="!signInForm.disabled"> 로그인</span>
|
||||
<mat-progress-spinner
|
||||
*ngIf="signInForm?.disabled"
|
||||
*ngIf="signInForm.disabled"
|
||||
[diameter]="24"
|
||||
[mode]="'indeterminate'"
|
||||
></mat-progress-spinner>
|
||||
</button>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="flex items-center mt-8">
|
||||
<!-- <div class="flex items-center mt-8">
|
||||
<div class="flex-auto mt-px border-t"></div>
|
||||
<div class="mx-2 text-secondary">Or continue with</div>
|
||||
<div class="flex-auto mt-px border-t"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Single sign-on buttons -->
|
||||
<div class="flex items-center mt-8 space-x-4">
|
||||
<!-- <div class="flex items-center mt-8 space-x-4">
|
||||
<button class="flex-auto" type="button" mat-stroked-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
|
|
@ -138,94 +147,8 @@
|
|||
[svgIcon]="'feather:github'"
|
||||
></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
|
||||
>
|
||||
<!-- Background - @formatter:off -->
|
||||
<!-- Rings -->
|
||||
<svg
|
||||
class="absolute inset-0 pointer-events-none"
|
||||
viewBox="0 0 960 540"
|
||||
width="100%"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMax slice"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
class="text-gray-700 opacity-25"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="100"
|
||||
>
|
||||
<circle r="234" cx="196" cy="23"></circle>
|
||||
<circle r="234" cx="790" cy="491"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- Dots -->
|
||||
<svg
|
||||
class="absolute -top-16 -right-16 text-gray-700"
|
||||
viewBox="0 0 220 192"
|
||||
width="220"
|
||||
height="192"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="837c3e70-6c3a-44e6-8854-cc48c737b659"
|
||||
x="0"
|
||||
y="0"
|
||||
width="20"
|
||||
height="20"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width="220"
|
||||
height="192"
|
||||
fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
|
||||
></rect>
|
||||
</svg>
|
||||
<!-- @formatter:on -->
|
||||
<!-- Content -->
|
||||
<div class="z-10 relative w-full max-w-2xl">
|
||||
<div class="text-7xl font-bold leading-none text-gray-100">
|
||||
<div>Welcome to</div>
|
||||
<div>our community</div>
|
||||
</div>
|
||||
<div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
|
||||
Fuse helps developers to build organized and well coded dashboards full
|
||||
of beautiful and rich modules. Join us and start building your
|
||||
application today.
|
||||
</div>
|
||||
<div class="flex items-center mt-8">
|
||||
<div class="flex flex-0 items-center -space-x-1.5">
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/female-18.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/female-11.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/male-09.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/male-16.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-4 font-medium tracking-tight text-gray-400">
|
||||
More than 17k people joined us, it's your turn
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export class AuthSignInComponent implements OnInit {
|
|||
[Validators.required, Validators.email],
|
||||
],
|
||||
password: ['admin', Validators.required],
|
||||
rememberMe: [''],
|
||||
recaptcha: ['', Validators.required],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
|
||||
>
|
||||
<div
|
||||
class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
|
||||
class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
|
||||
>
|
||||
<div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
|
||||
<!-- Logo -->
|
||||
|
|
@ -18,7 +16,7 @@
|
|||
<div>Already have an account?</div>
|
||||
<a
|
||||
class="ml-1 text-primary-500 hover:underline"
|
||||
[routerLink]="['/sign-in']"
|
||||
[routerLink]="['/pages/authentication/sign-in']"
|
||||
>Sign in
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -41,7 +39,7 @@
|
|||
<mat-form-field class="w-full">
|
||||
<mat-label>Full name</mat-label>
|
||||
<input id="name" matInput [formControlName]="'name'" />
|
||||
<mat-error *ngIf="signUpForm?.get('name')?.hasError('required')">
|
||||
<mat-error *ngIf="signUpForm.get('name')?.hasError('required')">
|
||||
Full name is required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
|
@ -50,10 +48,10 @@
|
|||
<mat-form-field class="w-full">
|
||||
<mat-label>Email address</mat-label>
|
||||
<input id="email" matInput [formControlName]="'email'" />
|
||||
<mat-error *ngIf="signUpForm?.get('email')?.hasError('required')">
|
||||
<mat-error *ngIf="signUpForm.get('email')?.hasError('required')">
|
||||
Email address is required
|
||||
</mat-error>
|
||||
<mat-error *ngIf="signUpForm?.get('email')?.hasError('email')">
|
||||
<mat-error *ngIf="signUpForm.get('email')?.hasError('email')">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
|
@ -121,12 +119,12 @@
|
|||
class="fuse-mat-button-large w-full mt-6"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
[disabled]="signUpForm?.disabled"
|
||||
[disabled]="signUpForm.disabled"
|
||||
(click)="signUp()"
|
||||
>
|
||||
<span *ngIf="!signUpForm?.disabled"> Create your free account </span>
|
||||
<span *ngIf="!signUpForm.disabled"> Create your free account </span>
|
||||
<mat-progress-spinner
|
||||
*ngIf="signUpForm?.disabled"
|
||||
*ngIf="signUpForm.disabled"
|
||||
[diameter]="24"
|
||||
[mode]="'indeterminate'"
|
||||
></mat-progress-spinner>
|
||||
|
|
@ -134,90 +132,4 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
|
||||
>
|
||||
<!-- Background - @formatter:off -->
|
||||
<!-- Rings -->
|
||||
<svg
|
||||
class="absolute inset-0 pointer-events-none"
|
||||
viewBox="0 0 960 540"
|
||||
width="100%"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMax slice"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
class="text-gray-700 opacity-25"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="100"
|
||||
>
|
||||
<circle r="234" cx="196" cy="23"></circle>
|
||||
<circle r="234" cx="790" cy="491"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- Dots -->
|
||||
<svg
|
||||
class="absolute -top-16 -right-16 text-gray-700"
|
||||
viewBox="0 0 220 192"
|
||||
width="220"
|
||||
height="192"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="837c3e70-6c3a-44e6-8854-cc48c737b659"
|
||||
x="0"
|
||||
y="0"
|
||||
width="20"
|
||||
height="20"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width="220"
|
||||
height="192"
|
||||
fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
|
||||
></rect>
|
||||
</svg>
|
||||
<!-- @formatter:on -->
|
||||
<!-- Content -->
|
||||
<div class="z-10 relative w-full max-w-2xl">
|
||||
<div class="text-7xl font-bold leading-none text-gray-100">
|
||||
<div>Welcome to</div>
|
||||
<div>our community</div>
|
||||
</div>
|
||||
<div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
|
||||
Fuse helps developers to build organized and well coded dashboards full
|
||||
of beautiful and rich modules. Join us and start building your
|
||||
application today.
|
||||
</div>
|
||||
<div class="flex items-center mt-8">
|
||||
<div class="flex flex-0 items-center -space-x-1.5">
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/female-18.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/female-11.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/male-09.jpg"
|
||||
/>
|
||||
<img
|
||||
class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
|
||||
src="assets/images/avatars/male-16.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-4 font-medium tracking-tight text-gray-400">
|
||||
More than 17k people joined us, it's your turn
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user