Skip to content

Commit

Permalink
Login ui changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@rupali-inflection
rupali-inflection committed Jun 20, 2024
1 parent 7e85c89 commit 107866c
Showing 5 changed files with 306 additions and 194 deletions.
2 changes: 1 addition & 1 deletion src/lib/types/domain.models.ts
View file
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ export interface LoginModel {
Phone ?: string;
Password ?: string;
Otp ?: string;
LoginRoleId ?: number;
LoginRoleId ?: string;
};

export interface ResponseData {
124 changes: 99 additions & 25 deletions src/routes/+page.server.ts
View file
Original file line number Diff line number Diff line change
@@ -8,6 +8,8 @@ import type { PageServerLoad } from './$types';
import { SessionManager } from './api/sessions/session.manager';
import { login } from './api/services/reancare/user';
import { getUserRoles } from './api/services/reancare/types';
import { zfd } from 'zod-form-data';
import { z } from 'zod';

////////////////////////////////////////////////////////////////

@@ -29,41 +31,113 @@ export const load: PageServerLoad = async (event: RequestEvent) => {

//////////////////////////////////////////////////////////////////////////////////////////

// export const actions = {
// login: async (event: RequestEvent) => {
// const request = event.request;
// const data = await request.formData(); // or .json(), or .text(), etc
// console.log(Object.fromEntries(data));

// const username = data.has('username') ? (data.get('username') as string) : null;

// const password = data.has('password') ? (data.get('password') as string) : null;
// const loginRoleId_ = data.has('loginRoleId') ? data.get('loginRoleId') : null;
// const loginRoleId = loginRoleId_.valueOf() as number;
// if (!username || !password) {
// throw error(400, `Username or password are not valid!`);
// }
// console.log(`data....... = ${JSON.stringify(request, null, 2)}`);
// // const response = await login(username, password, loginRoleId ?? 1);
// const response = await login(username, password);
// if (response.Status === 'failure' || response.HttpCode !== 200) {
// console.log(response.Message);
// throw redirect(303, '/', errorMessage(response.Message), event);
// }
// console.log('response ....', response);
// const user = response.Data.User;
// user.SessionId = response.Data.SessionId;
// const accessToken = response.Data.AccessToken;
// const refreshToken = response.Data.RefreshToken;
// const expiryDate = new Date(response.Data.SessionValidTill);
// const sessionId = response.Data.SessionId;
// const userId: string = response.Data.User.id;

// const session = await SessionManager.constructSession(user, accessToken, expiryDate, refreshToken);
// if (!session) {
// console.log(`Session cannot be constructed!`);
// throw redirect(303, `/`, errorMessage(`Use login session cannot be created!`), event);
// }
// console.log('Session - ' + JSON.stringify(session, null, 2));
// const userSession = await SessionManager.addSession(session.sessionId, session);
// console.log(JSON.stringify(userSession, null, 2));

// CookieUtils.setCookieHeader(event, 'sessionId', sessionId);

// throw redirect(303, `/users/${userId}/home`, successMessage(`Login successful!`), event);
// }
// };

const loginSchema = zfd.formData({
roleId: z.string(),
password: z.string(),
username: z.string().optional(),
email: z.string().optional(),
phone: z.string().optional(),
countryCode:z.string().optional(),
});

export const actions = {
login: async (event: RequestEvent) => {
const request = event.request;
const data = await request.formData(); // or .json(), or .text(), etc
console.log(Object.fromEntries(data));

const username = data.has('username') ? (data.get('username') as string) : null;
const password = data.has('password') ? (data.get('password') as string) : null;
const loginRoleId_ = data.has('loginRoleId') ? data.get('loginRoleId') : null;
const loginRoleId = loginRoleId_.valueOf() as number;
if (!username || !password) {
throw error(400, `Username or password are not valid!`);
const data = await request.formData();
const formData = Object.fromEntries(data);
type loginSchema = z.infer<typeof loginSchema>;

let result: loginSchema = {
roleId: '',
password: ''
};
try {
result = loginSchema.parse(formData);
console.log('result', result);
} catch (err: any) {
const { fieldErrors: errors } = err.flatten();
console.log(errors);
const { ...rest } = formData;
return {
data: rest,
errors
};
}

let phone;

if (result.phone && result.countryCode){
phone = result.countryCode + '-' + result.phone;
}
console.log(`data....... = ${JSON.stringify(request, null, 2)}`);
// const response = await login(username, password, loginRoleId ?? 1);
const response = await login(username, password);

const response = await login(
result.roleId,
result.password,
result.username,
result.email,
phone
);

if (response.Status === 'failure' || response.HttpCode !== 200) {
console.log(response.Message);
//Login error, so redirect to the sign-in page
throw redirect(303, '/', errorMessage(response.Message), event);
}
console.log('response ....', response.Data.User.Role);

if (!response.Data.User.Role || !response.Data.User.Role.RoleName) {
throw redirect(303, '/', errorMessage("Permission Denied!"), event);
}

if (!['System admin','System user','Tenant admin','Tenant user'].includes(response.Data.User.Role.RoleName)) {
throw redirect(303, '/', errorMessage("Permission Denied!"), event);
}

if (!response.Data.User.Role || !response.Data.User.Role.RoleName) {
throw redirect(303, '/', errorMessage("Permission Denied!"), event);
}
if (!['System admin','System user','Tenant admin','Tenant user'].includes(response.Data.User.Role.RoleName)) {
throw redirect(303, '/', errorMessage("Permission Denied!"), event);
}
console.log('response ....', response);
const user = response.Data.User;
user.SessionId = response.Data.SessionId;
const accessToken = response.Data.AccessToken;
const refreshToken = response.Data.RefreshToken;
const refreshToken = response.Data.RefreshToken;
const expiryDate = new Date(response.Data.SessionValidTill);
const sessionId = response.Data.SessionId;
const userId: string = response.Data.User.id;
@@ -81,4 +155,4 @@ export const actions = {

throw redirect(303, `/users/${userId}/home`, successMessage(`Login successful!`), event);
}
};
};
111 changes: 83 additions & 28 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -35,6 +35,7 @@
let newPassword = '';
let confirmPassword = '';
let errors: Record<string, string[]> = {};
let activeTab = 'username';
if (browser) {
const tmp = LocalStorageUtils.getItem('personRoles');
@@ -138,25 +139,25 @@
<div class="shadow-bottom-right p-8 pb-1 pt-5 rounded-lg mt-5 bg-secondary-50 border border-slate-300 shadow-xl w-96 max-w-full">
<h2 class="text-center text-xl mb-4">Reset Password</h2>
<form on:submit|preventDefault={handleResetPassword}>
<label class="mb-2 hidden">
<label class="hidden">
<span class="text-primary-500">Email</span>
<input type="email"value={email} required class="input mb-4" />
</label>
<label class="mb-2">
<label>
<span class="text-primary-500">Reset Code</span>
<input type="text" bind:value={resetCode} required class="input mb-4 mt-2" />
{#if errors.resetCode}
<span class="text-error-500">{errors.resetCode}</span>
{/if}
</label>
<label class="mb-2">
<label>
<span class="text-primary-500">New Password</span>
<input type="password" bind:value={newPassword} required class="input mb-4 mt-2" />
{#if errors.newPassword}
<span class="text-error-500">{errors.newPassword}</span>
{/if}
</label>
<label class="mb-2">
<label>
<span class="text-primary-500">Confirm New Password</span>
<input type="password" bind:value={confirmPassword} required class="input mb-4" />
{#if errors.confirmPassword}
@@ -168,37 +169,77 @@
</form>
</div>
{:else}
<form method="post" action="?/login" class="shadow-bottom-right p-8 pb-1 pt-5 rounded-lg mt-5 bg-secondary-50 border border-slate-300 shadow-xl w-96 max-w-full">
<div class="hidden">
<input name="loginRoleId" class="hidden" value={loginRoleId} />
<form method="post" action="?/login" class="shadow-bottom-right p-8 pb-1 pt-5 rounded-lg mt-5 bg-secondary-50 border border-slate-300 shadow-xl w-96 max-w-full">
<input name="roleId" bind:value={loginRoleId} class="hidden"/>
<!-- svelte-ignore a11y-label-has-associated-control -->
<div class="justify-center w-full mt-5 h-50">
<div class="flex gap-6 mb-4">
<div class="flex gap-2">
<input type="radio" class="radio rounded-full" name="loginType" value="username" bind:group={activeTab} />Username
</div>
<div class="flex gap-2">
<input type="radio" class="radio rounded-full" name="loginType" value="email" bind:group={activeTab} /> Email
</div>
<div class="flex gap-2">
<input type="radio" class="radio rounded-full" name="loginType" value="phone" bind:group={activeTab} /> Phone
</div>
</div>
<div class="justify-center w-full mt-5 h-50">
{#if activeTab === 'username'}
<label class="mb-2" for="username">
<span class="text-primary-500">Username/Email/Phone</span>
<span class="text-primary-500">Username</span>
<span class="label-text-alt" />
</label>
<input type="text" name="username" required class="input mb-4" />
<label class="mb-2" for="password">
<div class="grid grid-flow-col">
<span class="text-left text-primary-500">Password</span>
<span class="text-right text-primary-500 ml-4 sm:ml-12 invisible">
<b>Generate OTP</b>
</span>
</div>
</label>
<input type="password" name="password" required class="input" />
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="lable">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<span class="text-primary-500 cursor-pointer" on:click={() => { showForgotPassword = true; }}>
<b>Forgot Password?</b>
</span>
{/if}
{#if activeTab === 'email'}
<label class="mb-2" for="email">
<span class="text-primary-500">Email</span>
<span class="label-text-alt" />
</label>
<br />
<button type="submit" class="btn variant-filled-secondary mb-6 w-full">Login</button>
<input type="email" name="email" required class="input mb-4" />
{/if}
{#if activeTab === 'phone'}
<div class="flex gap-4 mb-4">
<div class="flex flex-col">
<label class="mb-2" for="countryCode">
<span class="text-primary-500">Phone</span>
<span class="label-text-alt" />
</label>
<div class="flex flex-row gap-5">
<div class="w-1/3">
<select name="countryCode" required class="input">
<option value="+1">+1</option>
<option value="+91">+91</option>
</select>
</div>
<div class="w-2/3">
<input type="tel" name="phone" required class="input" />
</div>
</div>
</div>
</div>
</form>
{/if}
<label class="mb-2" for="password">
<div class="grid grid-flow-col">
<span class="text-left text-primary-500">Password</span>
<span class="text-right text-primary-500 ml-4 sm:ml-12 invisible">
<b>Generate OTP</b>
</span>
</div>
</label>
<input type="password" name="password" required class="input" />
<!-- svelte-ignore a11y-no-static-element-interactions -->
<label class="lable">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<span class="text-primary-500 cursor-pointer" on:click={() => { showForgotPassword = true; }}>
<b>Forgot Password?</b>
</span>
</label>
<br />
<button type="submit" class="btn variant-filled-secondary mb-6 w-full">Login</button>
</div>
</form>
{/if}
</div>
</div>
@@ -208,3 +249,17 @@
<a href={footerLink} class="!text-white">{footerText}</a>
</footer>
</body>

<style>
.radio-group {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.radio-group input {
margin-right: 0.5rem;
}
.tab-content {
margin-top: 1rem;
}
</style>
Loading

0 comments on commit 107866c

Please sign in to comment.