@sikka/hawa 0.0.80 → 0.0.82

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/es/index.es.js +1 -1
  2. package/lib/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/blocks/AuthForms/SignInForm.js +48 -24
  5. package/src/blocks/AuthForms/SignUpForm.js +116 -75
  6. package/src/elements/HawaCheckbox.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.0.80",
3
+ "version": "0.0.82",
4
4
  "description": "UI Kit",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.es.js",
package/src/blocks/AuthForms/SignInForm.js CHANGED
@@ -27,29 +27,50 @@ export const SignInForm = (props) => {
27
27
  severity="error"
28
28
  />
29
29
  )}
30
- <Controller
31
- control={control}
32
- name="email"
33
- render={({ field }) => (
34
- <HawaTextField
35
- fullWidth
36
- type="text"
37
- value={field.value ?? ""}
38
- label={props.texts.emailLabel}
39
- helperText={errors.email?.message}
40
- placeholder={props.texts.emailPlaceholder}
41
- {...field}
42
- />
43
- )}
44
- rules={{
45
- required: props.texts.emailRequiredText,
46
- pattern: {
47
- value:
48
- /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
49
- message: props.texts.emailInvalidText
50
- }
51
- }}
52
- />
30
+ {props.signInType === "email" ? (
31
+ <Controller
32
+ control={control}
33
+ name="email"
34
+ render={({ field }) => (
35
+ <HawaTextField
36
+ fullWidth
37
+ type="text"
38
+ value={field.value ?? ""}
39
+ label={props.texts.emailLabel}
40
+ helperText={errors.email?.message}
41
+ placeholder={props.texts.emailPlaceholder}
42
+ {...field}
43
+ />
44
+ )}
45
+ rules={{
46
+ required: props.texts.emailRequiredText,
47
+ pattern: {
48
+ value:
49
+ /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
50
+ message: props.texts.emailInvalidText
51
+ }
52
+ }}
53
+ />
54
+ ) : (
55
+ <Controller
56
+ control={control}
57
+ name="username"
58
+ render={({ field }) => (
59
+ <HawaTextField
60
+ fullWidth
61
+ type="text"
62
+ value={field.value ?? ""}
63
+ label={props.texts.usernameLabel}
64
+ helperText={errors.username?.message}
65
+ placeholder={props.texts.usernamePlaceholder}
66
+ {...field}
67
+ />
68
+ )}
69
+ rules={{
70
+ required: props.texts.usernameRequired
71
+ }}
72
+ />
73
+ )}
53
74
  <Controller
54
75
  control={control}
55
76
  name="password"
@@ -125,6 +146,9 @@ SignInForm.propTypes = {
125
146
  emailPlaceholder: PropTypes.string,
126
147
  emailRequiredText: PropTypes.string,
127
148
  emailInvalidText: PropTypes.string,
149
+ usernameLabel:PropTypes.string,
150
+ usernamePlaceholder: PropTypes.string,
151
+ usernameRequired: PropTypes.string,
128
152
  passwordLabel: PropTypes.string,
129
153
  passwordPlaceholder: PropTypes.string,
130
154
  passwordRequiredText: PropTypes.string,
@@ -145,6 +169,6 @@ SignInForm.propTypes = {
145
169
  handleGithubSignIn: PropTypes.func,
146
170
  handleTwitterSignIn: PropTypes.func,
147
171
  handleForgotPassword: PropTypes.func,
148
-
172
+
149
173
  withoutSignUp: PropTypes.bool
150
174
  };
package/src/blocks/AuthForms/SignUpForm.js CHANGED
@@ -3,7 +3,8 @@ import {
3
3
  HawaTextField,
4
4
  HawaLogoButton,
5
5
  HawaAlert,
6
- HawaButton
6
+ HawaButton,
7
+ HawaCheckbox
7
8
  } from "../../elements";
8
9
  import PropTypes from "prop-types";
9
10
  import { Controller, FormProvider, useForm } from "react-hook-form";
@@ -19,84 +20,124 @@ export const SignUpForm = (props) => {
19
20
 
20
21
  return (
21
22
  <HawaContainer withDividers>
22
- {props.showError && (
23
- <HawaAlert
24
- title={props.errorTitle}
25
- text={props.errorText}
26
- severity="error"
27
- />
28
- )}
29
- <FormProvider {...methods}>
30
- <form onSubmit={handleSubmit(props.handleSignUp)}>
31
- <Controller
32
- control={control}
33
- name="fullName"
34
- render={({ field }) => (
35
- <HawaTextField
36
- fullWidth
37
- type="text"
38
- value={field.value ?? ""}
39
- label={props.texts.fullNameLabel}
40
- placeholder={props.texts.fullNamePlaceholder}
41
- helperText={errors.fullName?.message}
42
- {...field}
43
- />
44
- )}
45
- rules={{
46
- required: props.texts.fullNameRequiredText
47
- }}
23
+ <div>
24
+ {props.showError && (
25
+ <HawaAlert
26
+ title={props.errorTitle}
27
+ text={props.errorText}
28
+ severity="error"
48
29
  />
49
- <Controller
50
- control={control}
51
- name="email"
52
- render={({ field }) => (
53
- <HawaTextField
54
- fullWidth
55
- type="text"
56
- value={field.value ?? ""}
57
- label={props.texts.emailLabel}
58
- helperText={errors.email?.message}
59
- placeholder={props.texts.emailPlaceholder}
60
- {...field}
30
+ )}
31
+ <FormProvider {...methods}>
32
+ <form onSubmit={handleSubmit(props.handleSignUp)}>
33
+ <Controller
34
+ control={control}
35
+ name="fullName"
36
+ render={({ field }) => (
37
+ <HawaTextField
38
+ fullWidth
39
+ type="text"
40
+ value={field.value ?? ""}
41
+ label={props.texts.fullNameLabel}
42
+ placeholder={props.texts.fullNamePlaceholder}
43
+ helperText={errors.fullName?.message}
44
+ {...field}
45
+ />
46
+ )}
47
+ rules={{
48
+ required: props.texts.fullNameRequiredText
49
+ }}
50
+ />
51
+ <Controller
52
+ control={control}
53
+ name="email"
54
+ render={({ field }) => (
55
+ <HawaTextField
56
+ fullWidth
57
+ type="text"
58
+ value={field.value ?? ""}
59
+ label={props.texts.emailLabel}
60
+ helperText={errors.email?.message}
61
+ placeholder={props.texts.emailPlaceholder}
62
+ {...field}
63
+ />
64
+ )}
65
+ rules={{
66
+ required: props.texts.emailRequiredText,
67
+ pattern: {
68
+ value:
69
+ /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
70
+ message: props.texts.emailInvalidText
71
+ }
72
+ }}
73
+ />
74
+ <Controller
75
+ control={control}
76
+ name="password"
77
+ render={({ field }) => (
78
+ <HawaTextField
79
+ fullWidth
80
+ type="password"
81
+ defaultValue={field.value ?? ""}
82
+ value={field.value ?? ""}
83
+ label={props.texts.passwordLabel}
84
+ placeholder={props.texts.passwordPlaceholder}
85
+ helperText={errors.password?.message}
86
+ {...field}
87
+ />
88
+ )}
89
+ rules={{ required: props.texts.passwordRequiredText }}
90
+ />
91
+ {props.showRefCode && (
92
+ <Controller
93
+ control={control}
94
+ name="password"
95
+ render={({ field }) => (
96
+ <HawaTextField
97
+ fullWidth
98
+ type="text"
99
+ defaultValue={field.value ?? ""}
100
+ value={field.value ?? ""}
101
+ label={"Ref Code"}
102
+ placeholder={props.texts.passwordPlaceholder}
103
+ helperText={errors.password?.message}
104
+ {...field}
105
+ />
106
+ )}
107
+ rules={{ required: props.texts.passwordRequiredText }}
61
108
  />
62
109
  )}
63
- rules={{
64
- required: props.texts.emailRequiredText,
65
- pattern: {
66
- value:
67
- /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
68
- message: props.texts.emailInvalidText
69
- }
70
- }}
71
- />
72
- <Controller
73
- control={control}
74
- name="password"
75
- render={({ field }) => (
76
- <HawaTextField
77
- fullWidth
78
- type="password"
79
- defaultValue={field.value ?? ""}
80
- value={field.value ?? ""}
81
- label={props.texts.passwordLabel}
82
- placeholder={props.texts.passwordPlaceholder}
83
- helperText={errors.password?.message}
84
- {...field}
85
- />
110
+ {props.showTermsOption && (
111
+ <div className="py-2">
112
+ <HawaCheckbox
113
+ label={
114
+ <span>
115
+ I accept the{" "}
116
+ <a className="cursor-pointer text-blue-800">
117
+ terms and conditions
118
+ </a>
119
+ </span>
120
+ }
121
+ />
122
+ </div>
86
123
  )}
87
- rules={{ required: props.texts.passwordRequiredText }}
88
- />
89
- <HawaButton fullWidth type="submit" text={props.texts.signUpText} />{" "}
90
- </form>
91
- </FormProvider>
92
- <div className="font-semibold p-3 text-center text-sm">
93
- {props.texts.existingUserText}{" "}
94
- <span
95
- onClick={props.handleRouteToSignIn}
96
- className="text-blue-600 cursor-pointer"
97
- >
98
- {props.texts.signInText}
99
- </span>
124
+ {props.showNewletterOption && (
125
+ <div className="py-2">
126
+ <HawaCheckbox label="Subscribe to newsletter?" />
127
+ </div>
128
+ )}
129
+ <HawaButton fullWidth type="submit" text={props.texts.signUpText} />{" "}
130
+ </form>
131
+ </FormProvider>
132
+ <div className="font-semibold p-3 text-center text-sm">
133
+ {props.texts.existingUserText}{" "}
134
+ <span
135
+ onClick={props.handleRouteToSignIn}
136
+ className="text-blue-600 cursor-pointer"
137
+ >
138
+ {props.texts.signInText}
139
+ </span>
140
+ </div>
100
141
  </div>
101
142
  {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
102
143
  <div style={{ display: "flex", flexDirection: "column" }}>
package/src/elements/HawaCheckbox.js CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
 
3
3
  export const HawaCheckbox = (props) => {
4
4
  return (
5
- <div className="flex items-center h-full p-2">
5
+ <div className="flex items-center h-full">
6
6
  <input
7
7
  type="checkbox"
8
8
  value=""