-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
394 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <script lang="ts"> | ||
| let login = ''; | ||
| let password = ''; | ||
| $: invalidLogin = login.length && login.length < 3; | ||
| </script> | ||
|
|
||
| <form action="" class="flex flex-col space-y-6 px-10"> | ||
| <div class="relative mt-6"> | ||
| <input | ||
| required | ||
| id="firstname" | ||
| bind:value={login} | ||
| type="text" | ||
| class="peer w-full placeholder:text-transparent {invalidLogin | ||
| ? 'ring-red-500 focus:ring-red-500' | ||
| : 'ring-gray-300 focus:ring-blue-500'}" | ||
| placeholder="Fist name" | ||
| /> | ||
| <label for="firstname">Cellphone/ Username/ Email</label> | ||
| </div> | ||
| <div class="relative mt-6"> | ||
| <input | ||
| required | ||
| id="firstname" | ||
| bind:value={password} | ||
| type="password" | ||
| class="peer w-full placeholder:text-transparent {invalidLogin | ||
| ? 'ring-red-500 focus:ring-red-500' | ||
| : 'ring-gray-300 focus:ring-blue-500'}" | ||
| placeholder="Fist name" | ||
| /> | ||
| <label for="firstname">Password</label> | ||
| </div> | ||
|
|
||
| <div class="flex flex-col items-center justify-center space-y-5"> | ||
| <button | ||
| type="submit" | ||
| class="flex items-center rounded-full justify-center w-full h-12 bg-blue-500 text-base font-medium leading-5 tracking-wide text-center text-white" | ||
| > | ||
| Sign in | ||
| </button> | ||
| <a | ||
| href="#/login" | ||
| class="flex items-center rounded-full justify-center w-full h-10 border border-blue-500 text-base font-medium leading-5 tracking-wide text-center text-blue-500" | ||
| > | ||
| Login with SSO | ||
| </a> | ||
| </div> | ||
|
|
||
| <a href="#/recover" class="text-blue-500 text-sm font-medium leading-5 tracking-wide" | ||
| >recover password</a | ||
| > | ||
| </form> | ||
|
|
||
| <style lang="css"> | ||
| label { | ||
| @apply absolute left-0 bg-white px-1 duration-100 ease-linear ml-1 -translate-y-2.5 translate-x-2 text-xs font-medium leading-4; | ||
| } | ||
| input[type='text'], | ||
| input[type='password'] { | ||
| @apply h-14 rounded-[4px] ring-2 focus:outline-none px-5 text-[17px] font-medium leading-6 tracking-[-0.15000000596046448px] text-left; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,197 @@ | ||
| <script lang="ts"> | ||
| import Valid from './../icons/valid.svelte'; | ||
| import { validatePassword } from '$lib/utils/password'; | ||
| import type { PasswordType } from '../../../types'; | ||
| import See from '../icons/see.svelte'; | ||
| import { validateName, validateNickName } from '$lib/utils/username'; | ||
| import { isPhoneValid } from '$lib/utils/phone'; | ||
| let passwordType: PasswordType = 'password'; | ||
| let confirmPasswordType: PasswordType = 'password'; | ||
| const togglePassword = () => { | ||
| passwordType = passwordType === 'text' ? 'password' : 'text'; | ||
| }; | ||
| const toggleConfirmPassword = () => { | ||
| confirmPasswordType = confirmPasswordType === 'text' ? 'password' : 'text'; | ||
| }; | ||
| const handlePasswordChange = (e: Event) => { | ||
| password = (e.target as HTMLInputElement).value; | ||
| }; | ||
| const handleConfirmPasswordChange = (e: Event) => { | ||
| confirmPassword = (e.target as HTMLInputElement).value; | ||
| }; | ||
| let password: string = ''; | ||
| let confirmPassword: string = ''; | ||
| let firstName: string = ''; | ||
| let lastName: string = ''; | ||
| let nickName: string = ''; | ||
| let phone: string = ''; | ||
| $: invalidPassword = password && !validatePassword(password); | ||
| $: invalidConfirmPassword = confirmPassword && confirmPassword !== password; | ||
| $: invalidFirstName = firstName.length && !validateName(firstName); | ||
| $: invalidLastName = lastName.length && !validateName(lastName); | ||
| $: invalidNickname = nickName.length && !validateNickName(nickName); | ||
| $: invalidPhone = phone.length && !isPhoneValid(phone); | ||
| </script> | ||
|
|
||
| <form action="" class="flex flex-col space-y-6 px-10"> | ||
| <div class="flex space-x-5 text-xs font-medium leading-4 tracking-wide text-left font-[Inter]"> | ||
| <div class="relative mt-6"> | ||
| <input | ||
| required | ||
| id="firstname" | ||
| bind:value={firstName} | ||
| type="text" | ||
| class="peer w-full placeholder:text-transparent {invalidFirstName | ||
| ? 'ring-red-500 focus:ring-red-500' | ||
| : 'ring-gray-300 focus:ring-blue-500'}" | ||
| placeholder="Fist name" | ||
| /> | ||
| <label for="firstname">First Name</label> | ||
| {#if invalidFirstName === false} | ||
| <span class="absolute inset-y-0 right-0 flex items-center pl-2"> | ||
| <div class="p-1 focus:outline-none focus:shadow-outline"> | ||
| <Valid /> | ||
| </div> | ||
| </span> | ||
| {/if} | ||
| </div> | ||
| <div class="relative mt-6"> | ||
| <input | ||
| required | ||
| id="lastname" | ||
| bind:value={lastName} | ||
| type="text" | ||
| class="peer w-full placeholder:text-transparent {invalidLastName | ||
| ? 'ring-red-500 focus:ring-red-500' | ||
| : 'ring-gray-300 focus:ring-blue-500'}" | ||
| placeholder="Last name" | ||
| /> | ||
| <label for="lastname">Last Name</label> | ||
| {#if invalidLastName === false} | ||
| <span class="absolute inset-y-0 right-0 flex items-center pl-2"> | ||
| <div class="p-1 focus:outline-none focus:shadow-outline"> | ||
| <Valid /> | ||
| </div> | ||
| </span> | ||
| {/if} | ||
| </div> | ||
| </div> | ||
| <div class="relative mt-6"> | ||
| <input | ||
| required | ||
| id="username" | ||
| bind:value={nickName} | ||
| type="text" | ||
| class="peer w-full placeholder:text-transparent {invalidNickname | ||
| ? 'ring-red-500 focus:ring-red-500' | ||
| : 'ring-gray-300 focus:ring-blue-500'}" | ||
| placeholder="Username" | ||
| /> | ||
| <label for="username">Username</label> | ||
| {#if invalidNickname === false} | ||
| <span class="absolute inset-y-0 right-0 flex items-center pl-2"> | ||
| <div class="p-1 focus:outline-none focus:shadow-outline"> | ||
| <Valid /> | ||
| </div> | ||
| </span> | ||
| {/if} | ||
| </div> | ||
| <div class="relative mt-6"> | ||
| <input | ||
| required | ||
| id="password" | ||
| on:input={handlePasswordChange} | ||
| class="peer w-full placeholder:text-transparent {invalidPassword | ||
| ? 'ring-red-500 focus:ring-red-500' | ||
| : 'ring-gray-300 focus:ring-blue-500'}" | ||
| placeholder="Password" | ||
| value={password} | ||
| type={passwordType} | ||
| /> | ||
| <label for="Password">Password</label> | ||
| {#if password} | ||
| <span class="absolute inset-y-0 right-0 flex items-center pl-2"> | ||
| <button class="p-1 focus:outline-none focus:shadow-outline" on:click={togglePassword}> | ||
| <See /> | ||
| </button> | ||
| </span> | ||
| {/if} | ||
| </div> | ||
| <div class="relative mt-6"> | ||
| <input | ||
| required | ||
| id="confirm" | ||
| on:input={handleConfirmPasswordChange} | ||
| class="peer w-full placeholder:text-transparent {invalidConfirmPassword | ||
| ? 'ring-red-500 focus:ring-red-500' | ||
| : 'ring-gray-300 focus:ring-blue-500'}" | ||
| placeholder="Password" | ||
| value={confirmPassword} | ||
| type={confirmPasswordType} | ||
| /> | ||
| <label for="confirm">Confirm password</label> | ||
| {#if confirmPassword} | ||
| <span class="absolute inset-y-0 right-0 flex items-center pl-2"> | ||
| <button | ||
| class="p-1 focus:outline-none focus:shadow-outline" | ||
| on:click={toggleConfirmPassword} | ||
| > | ||
| <See /> | ||
| </button> | ||
| </span> | ||
| {/if} | ||
| </div> | ||
| <div class="relative mt-6"> | ||
| <input | ||
| required | ||
| id="phone" | ||
| type="text" | ||
| bind:value={phone} | ||
| class="peer w-full placeholder:text-transparent {invalidPhone | ||
| ? 'ring-red-500 focus:ring-red-500' | ||
| : 'ring-gray-300 focus:ring-blue-500'}" | ||
| placeholder="phone number" | ||
| /> | ||
| <label for="phone">Phone number</label> | ||
| </div> | ||
| <div class="flex flex-col items-center justify-center space-y-5"> | ||
| <button | ||
| type="submit" | ||
| class="flex items-center rounded-full justify-center w-full h-12 bg-blue-500 text-base font-medium leading-5 tracking-wide text-center text-white" | ||
| > | ||
| Sign up | ||
| </button> | ||
| <a | ||
| href="#/login" | ||
| class="flex items-center rounded-full justify-center w-full h-12 border border-blue-500 text-base font-medium leading-5 tracking-wide text-center text-blue-500" | ||
| > | ||
| Login with SSO | ||
| </a> | ||
| </div> | ||
| <div class="flex items-start space-x-5 pr-10"> | ||
| <input type="checkbox" required class=" mt-1" /> | ||
| <span class="text-[17px] font-medium leading-6 tracking-[-0.15000000596046448px] text-left" | ||
| >I agree with <a href="#/ue" class="text-blue-500">User Agreement</a> and | ||
| <a href="#/ue" class="text-blue-500">Personal Data Usage</a> | ||
| terms under conditions stipulated in | ||
| <a href="#/pp" class="text-blue-500">Privacy Policy</a> agreement.</span | ||
| > | ||
| </div> | ||
| </form> | ||
|
|
||
| <style lang="css"> | ||
| label { | ||
| @apply absolute left-0 bg-white px-1 duration-100 ease-linear ml-1 -translate-y-2.5 translate-x-2 text-xs font-medium leading-4; | ||
| } | ||
| input[type='text'], | ||
| input[type='password'] { | ||
| @apply h-14 rounded-[4px] ring-2 focus:outline-none px-5 text-[17px] font-medium leading-6 tracking-[-0.15000000596046448px] text-left; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <g clip-path="url(#clip0_15269_1606)"> | ||
| <path | ||
| d="M24 18.5C27.79 18.5 31.17 20.63 32.82 24C31.17 27.37 27.79 29.5 24 29.5C20.21 29.5 16.83 27.37 15.18 24C16.83 20.63 20.21 18.5 24 18.5ZM24 16.5C19 16.5 14.73 19.61 13 24C14.73 28.39 19 31.5 24 31.5C29 31.5 33.27 28.39 35 24C33.27 19.61 29 16.5 24 16.5ZM24 21.5C25.38 21.5 26.5 22.62 26.5 24C26.5 25.38 25.38 26.5 24 26.5C22.62 26.5 21.5 25.38 21.5 24C21.5 22.62 22.62 21.5 24 21.5ZM24 19.5C21.52 19.5 19.5 21.52 19.5 24C19.5 26.48 21.52 28.5 24 28.5C26.48 28.5 28.5 26.48 28.5 24C28.5 21.52 26.48 19.5 24 19.5Z" | ||
| fill="#8C9CAF" | ||
| /> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="clip0_15269_1606"> | ||
| <rect x="4" y="4" width="40" height="40" rx="20" fill="white" /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <g clip-path="url(#clip0_15215_2047)"> | ||
| <path | ||
| d="M24 14C18.48 14 14 18.48 14 24C14 29.52 18.48 34 24 34C29.52 34 34 29.52 34 24C34 18.48 29.52 14 24 14ZM24 32C19.59 32 16 28.41 16 24C16 19.59 19.59 16 24 16C28.41 16 32 19.59 32 24C32 28.41 28.41 32 24 32ZM28.59 19.58L22 26.17L19.41 23.59L18 25L22 29L30 21L28.59 19.58Z" | ||
| fill="#26A69A" | ||
| /> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="clip0_15215_2047"> | ||
| <rect x="4" y="4" width="40" height="40" rx="20" fill="white" /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,47 @@ | ||
| <div class="flex flex-col w-full items-center justify-center space-y-10 md:space-y-5 pt-20"> | ||
| <div class="bg-white rounded-3xl flex flex-col space-y-5 items-center justify-center w-full sm:w-2/3 lg:w-1/2 md:w-full p-10"> | ||
| <h1 class="text-black text-4xl not-italic font-bold">Sign in</h1> | ||
| <a | ||
| class="w-full rounded-3xl flex h-16 justify-center items-center flex-shrink-0 bg-blue-600 text-white text-center text-2xl not-italic font-medium leading-8" | ||
| href="/login" | ||
| <script lang="ts"> | ||
| import type { Tab } from '../../../types'; | ||
| import LoginForm from '../forms/LoginForm.svelte'; | ||
| import RegisterForm from '../forms/RegisterForm.svelte'; | ||
| let active: Tab = 'register'; | ||
| </script> | ||
|
|
||
| <div | ||
| class="md:space-y-5 pt-10 bg-white rounded-3xl flex flex-col space-y-5 w-2/3 p-10" | ||
| > | ||
| <div | ||
| class="flex flex-row w-full items-center justify-center text-sm font-medium leading-5 tracking-wide text-center" | ||
| > | ||
| <div class="flex items-center justify-center w-full py-2 box-border"> | ||
| <button | ||
| class="h-10 bg-white w-full box-border border-b-2 {active === 'register' | ||
| ? 'text-blue-500 border-blue-500' | ||
| : 'border-gray-100'} " | ||
| on:click={() => (active = 'register')} | ||
| > | ||
| Sign up | ||
| </button> | ||
| </div> | ||
| <div | ||
| class="flex items-center justify-center w-full h-10 py-2 box-border border-transparent border-b-2" | ||
| > | ||
| Sign in | ||
| </a> | ||
| <a | ||
| class="w-full rounded-3xl flex h-16 justify-center items-center flex-shrink-0 bg-slate-200 text-blue-600 text-center text-2xl not-italic font-medium leading-8" | ||
| href="/#" | ||
| > | ||
| Reset password | ||
| </a> | ||
| <button | ||
| class="h-10 bg-white w-full box-border border-b-2 {active === 'login' | ||
| ? 'text-blue-500 border-blue-500' | ||
| : 'border-gray-100'} " | ||
| on:click={() => (active = 'login')} | ||
| > | ||
| Sign in | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div class="bg-white rounded-3xl flex flex-col space-y-5 items-center justify-center w-full sm:w-2/3 lg:w-1/2 md:w-full p-10"> | ||
| <h1 class="text-black text-4xl not-italic font-bold">Sign up</h1> | ||
| <p class="text-gray-500 text-center text-xl not-italic font-medium">Unleash Your Team's Potential: Connect, Collaborate, Succeed!</p> | ||
| <a | ||
| class="w-full rounded-3xl flex h-16 justify-center items-center flex-shrink-0 bg-green-500 leading-8 text-white text-center text-xl not-italic font-medium" | ||
| href="/register" | ||
| > | ||
| Sign up | ||
| </a> | ||
| <div class="text-3xl font-semibold leading-9 tracking-normal text-center w-full"> | ||
| {#if active === 'register'} | ||
| <span>Sign up</span> | ||
| <RegisterForm /> | ||
| {:else} | ||
| <span>Sign in</span> | ||
| <LoginForm /> | ||
| {/if} | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.