Skip to content

Commit e01a76a

Browse files
abhishekctvabhishekctv
authored
Merge pull request #54 from techvariable/wip/demo-email-store
demo mode take user email to give access with auto login
2 parents fbedbbf + ca3b4b0 commit e01a76a

File tree

2 files changed

+115
-50
lines changed

2 files changed

+115
-50
lines changed

‎src/components/loginPage/login-form/login-form.tsx‎

Lines changed: 108 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Host, Prop, h } from '@stencil/core';
1+
import { Component, Host, Prop, h, State } from '@stencil/core';
22
import axios from 'axios';
33

44
@Component({
@@ -8,21 +8,17 @@ import axios from 'axios';
88
})
99
export class LoginForm {
1010
@Prop() error: string = ''
11-
@Prop() mode: string = 'demo'
11+
@Prop() mode: string = ''
1212
@Prop() url: string = ''
1313
@Prop() email: string = ''
1414
@Prop() password: string = ''
15-
16-
componentDidLoad() {
17-
if (this.mode === 'demo') {
18-
this.autoSubmitter()
19-
}
20-
}
15+
@State() visitEmail: string = ''
16+
@State() visitSubmitError: string = ''
17+
@State() emailSubmited: boolean = false;
2118

2219
async autoSubmitter() {
23-
// document.forms["loginForm"].submit();
2420
try {
25-
await axios.post(this.url, {
21+
await axios.post(`${this.url}login`, {
2622
email: this.email,
2723
password: this.password
2824
})
@@ -32,46 +28,115 @@ export class LoginForm {
3228
}
3329
}
3430

31+
async visitHandler() {
32+
try {
33+
await axios.post(`${this.url}api/users/visit`, {
34+
email: this.visitEmail
35+
})
36+
this.visitSubmitError = ''
37+
this.emailSubmited = true
38+
await this.autoSubmitter()
39+
} catch (error) {
40+
this.visitSubmitError = error.response.data.message
41+
this.emailSubmited = false
42+
throw Error("Visit could not be submitted")
43+
}
44+
}
45+
3546
render() {
3647
return (
3748
<Host>
38-
<form class="space-y-2" action="/login" name="loginForm" method="post">
39-
{this.error && <p class="flex items-center justify-center pb-2 text-red-600 text-center font-semibold">
40-
<svg
41-
aria-hidden="true"
42-
class="mx-2 w-5 h-5 text-gray-800 dark:text-gray-300"
43-
fill="currentColor"
44-
viewBox="0 0 20 20"
45-
xmlns="http://www.w3.org/2000/svg"
46-
>
47-
<path
48-
fill-rule="evenodd"
49-
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
50-
clip-rule="evenodd"
51-
></path>
52-
</svg>
53-
Username or password is wrong!!!
54-
</p>}
55-
<text-field name="email" type="email" placeholder="email"></text-field>
49+
{
50+
(this.mode === 'demo' && !this.emailSubmited) &&
51+
<div>
52+
<div>
53+
<div class="flex justify-center gap-4 items-center">
54+
<img class="h-24" src="public/assets/images/neptune.png" alt="neptune logo" />
55+
<h3 class="font-semibold text-3xl font-serif text-indigo-600">Neptune Connect</h3>
56+
</div>
5657

57-
<div class="mt-1 relative rounded-md shadow-sm">
58-
<text-field
59-
name="password"
60-
type="password"
61-
placeholder="password"
62-
eye={true}
63-
></text-field>
64-
</div>
58+
<h2 class="mt-6 text-center text-2xl font-extrabold text-gray-600 font-serif">
59+
Welcome to Neptune Demo
60+
</h2>
61+
<p class="mt-2 text-center text-gray-400">
62+
Please enter your email to access demo mode.
63+
</p>
64+
</div>
65+
{this.visitSubmitError && <p class="flex items-center justify-center pb-2 text-red-600 text-center font-semibold">
66+
<svg
67+
aria-hidden="true"
68+
class="mx-2 w-5 h-5 text-gray-800 dark:text-gray-300"
69+
fill="currentColor"
70+
viewBox="0 0 20 20"
71+
xmlns="http://www.w3.org/2000/svg"
72+
>
73+
<path
74+
fill-rule="evenodd"
75+
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
76+
clip-rule="evenodd"
77+
></path>
78+
</svg>
79+
{this.visitSubmitError}
80+
</p>}
81+
<text-field onChange={(e) => this.visitEmail = e.target.value} name="email" type="email" placeholder="email"></text-field>
6582

66-
<div>
67-
<plain-button width="full" type="contained"> submit </plain-button>
83+
<div class='mt-2'>
84+
<plain-button clickHandler={() => this.visitHandler()} width="full" type="contained"> Visit </plain-button>
85+
</div>
6886
</div>
69-
<div class="pt-2 flex flex-row-reverse">
70-
<a href="/users/forgot" class="text-indigo-500 font-semibold hover:underline">
71-
Forgot Password
72-
</a>
87+
}
88+
{(this.mode !== 'demo' || this.emailSubmited) && <div>
89+
<div>
90+
<div class="flex justify-center gap-4 items-center">
91+
<img class="h-24" src="public/assets/images/neptune.png" alt="neptune logo" />
92+
<h3 class="font-semibold text-3xl font-serif text-indigo-600">Neptune Connect</h3>
93+
</div>
94+
95+
<h2 class="mt-6 text-center text-2xl font-extrabold text-gray-600 font-serif">
96+
Welcome Back
97+
</h2>
98+
<p class="mt-2 text-center text-gray-400">
99+
Enter your credentials to access your account
100+
</p>
73101
</div>
74-
</form>
102+
<form class="space-y-2" action="/login" name="loginForm" method="post">
103+
{this.error && <p class="flex items-center justify-center pb-2 text-red-600 text-center font-semibold">
104+
<svg
105+
aria-hidden="true"
106+
class="mx-2 w-5 h-5 text-gray-800 dark:text-gray-300"
107+
fill="currentColor"
108+
viewBox="0 0 20 20"
109+
xmlns="http://www.w3.org/2000/svg"
110+
>
111+
<path
112+
fill-rule="evenodd"
113+
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
114+
clip-rule="evenodd"
115+
></path>
116+
</svg>
117+
Username or password is wrong!!!
118+
</p>}
119+
<text-field name="email" type="email" placeholder="email"></text-field>
120+
121+
<div class="mt-1 relative rounded-md shadow-sm">
122+
<text-field
123+
name="password"
124+
type="password"
125+
placeholder="password"
126+
eye={true}
127+
></text-field>
128+
</div>
129+
130+
<div>
131+
<plain-button width="full" type="contained"> submit </plain-button>
132+
</div>
133+
<div class="pt-2 flex flex-row-reverse">
134+
<a href="/users/forgot" class="text-indigo-500 font-semibold hover:underline">
135+
Forgot Password
136+
</a>
137+
</div>
138+
</form>
139+
</div>}
75140
</Host>
76141
);
77142
}

‎src/components/loginPage/login-form/readme.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77

88
## Properties
99

10-
| Property | Attribute | Description | Type | Default |
11-
| ---------- | ---------- | ----------- | -------- | -------- |
12-
| `email` | `email` | | `string` | `''` |
13-
| `error` | `error` | | `string` | `''` |
14-
| `mode` | `mode` | | `string` | `'demo'` |
15-
| `password` | `password` | | `string` | `''` |
16-
| `url` | `url` | | `string` | `''` |
10+
| Property | Attribute | Description | Type | Default |
11+
| ---------- | ---------- | ----------- | -------- | ------- |
12+
| `email` | `email` | | `string` | `''` |
13+
| `error` | `error` | | `string` | `''` |
14+
| `mode` | `mode` | | `string` | `''` |
15+
| `password` | `password` | | `string` | `''` |
16+
| `url` | `url` | | `string` | `''` |
1717

1818

1919
## Dependencies

0 commit comments

Comments
 (0)