@designcrowd/fe-shared-lib 1.2.5-pl-2 → 1.2.5
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.
- package/Dockerfile +1 -1
- package/package.json +2 -2
- package/src/experiences/components/AuthFlow/ForgotPassword.vue +0 -5
- package/src/experiences/components/AuthFlow/ResetPassword.vue +8 -37
- package/CLAUDE.md +0 -71
- package/public/css/tailwind-brandCrowd.css +0 -2404
- package/public/css/tailwind-brandPage.css +0 -2088
- package/public/css/tailwind-crazyDomains.css +0 -2404
- package/public/css/tailwind-designCom.css +0 -2404
- package/public/css/tailwind-designCrowd.css +0 -2404
package/Dockerfile
CHANGED
|
@@ -29,7 +29,7 @@ COPY .npmignore ./
|
|
|
29
29
|
RUN npm run bundle-translation
|
|
30
30
|
|
|
31
31
|
RUN mkdir artifacts
|
|
32
|
-
RUN npm publish ||
|
|
32
|
+
RUN npm publish || touch artifacts/npm_publish_failed
|
|
33
33
|
RUN cp package.json artifacts/
|
|
34
34
|
|
|
35
35
|
ENTRYPOINT ["/bin/echo", "Nothing to do."]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@designcrowd/fe-shared-lib",
|
|
3
|
-
"version": "1.2.5
|
|
3
|
+
"version": "1.2.5",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"start": "run-p storybook watch:translation",
|
|
6
6
|
"build": "npm run build:css --production",
|
|
@@ -113,4 +113,4 @@
|
|
|
113
113
|
"overrides": {
|
|
114
114
|
"storybook": "$storybook"
|
|
115
115
|
}
|
|
116
|
-
}
|
|
116
|
+
}
|
|
@@ -38,7 +38,6 @@
|
|
|
38
38
|
<p class="tw-mb-8 tw-text-grayscale-600">{{ modalDescription }}</p>
|
|
39
39
|
<form id="forgotPassword" ref="forgotPasswordForm" method="post" @submit="validate">
|
|
40
40
|
<input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
|
|
41
|
-
<input type="hidden" name="locale" :value="currentLocale" />
|
|
42
41
|
<label for="email" class="tw-sr-only"> {{ emailLabel }} </label>
|
|
43
42
|
<input
|
|
44
43
|
v-model="aEmail"
|
|
@@ -73,7 +72,6 @@
|
|
|
73
72
|
</div>
|
|
74
73
|
</template>
|
|
75
74
|
<script>
|
|
76
|
-
import i18next from 'i18next';
|
|
77
75
|
import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
|
|
78
76
|
import SubmissionButton from './SubmissionButton.vue';
|
|
79
77
|
|
|
@@ -143,9 +141,6 @@ export default {
|
|
|
143
141
|
};
|
|
144
142
|
},
|
|
145
143
|
computed: {
|
|
146
|
-
currentLocale() {
|
|
147
|
-
return i18next.language || 'en-US';
|
|
148
|
-
},
|
|
149
144
|
getRedirectToSignInUrl() {
|
|
150
145
|
const url = new URL(`https://${window.location.host}${this.signInUrl}`);
|
|
151
146
|
if (this.aEmail) {
|
|
@@ -13,11 +13,10 @@
|
|
|
13
13
|
{{ title }}
|
|
14
14
|
</h2>
|
|
15
15
|
<p class="tw-mb-8 tw-text-grayscale-600">{{ description }}</p>
|
|
16
|
-
<form id="resetPassword"
|
|
16
|
+
<form id="resetPassword" method="post" @submit="validate">
|
|
17
17
|
<input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
|
|
18
18
|
<input name="userName" type="hidden" :value="userName" />
|
|
19
19
|
<input name="resetPasswordToken" type="hidden" :value="resetPasswordToken" />
|
|
20
|
-
<input name="locale" type="hidden" :value="currentLocale" />
|
|
21
20
|
<label for="password" class="tw-sr-only">New Password</label>
|
|
22
21
|
<input
|
|
23
22
|
v-model="password"
|
|
@@ -26,14 +25,14 @@
|
|
|
26
25
|
aria-required="true"
|
|
27
26
|
:aria-invalid="!!passwordError"
|
|
28
27
|
autocomplete="new-password"
|
|
29
|
-
|
|
28
|
+
placeholder="New password"
|
|
30
29
|
class="password-input tw-mb-3 tw-h-12 tw-bg-no-repeat tw-w-full tw-rounded tw-shadow-inner tw-outline-none tw-py-4 tw-pl-10-important tw-pr-2 tw-text-grayscale-600 tw-border tw-border-grayscale-500 focus:tw-border-grayscale-700"
|
|
31
30
|
:class="{ 'tw-border-error-500': !!passwordError }"
|
|
32
31
|
/>
|
|
33
32
|
<p v-if="!!passwordError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
|
|
34
33
|
{{ passwordError }}
|
|
35
34
|
</p>
|
|
36
|
-
<label for="confirmPassword" class="tw-sr-only">
|
|
35
|
+
<label for="confirmPassword" class="tw-sr-only"> Confirm Password </label>
|
|
37
36
|
<input
|
|
38
37
|
v-model="confirmPassword"
|
|
39
38
|
name="confirmPassword"
|
|
@@ -41,7 +40,7 @@
|
|
|
41
40
|
aria-required="true"
|
|
42
41
|
:aria-invalid="!!confirmPasswordError"
|
|
43
42
|
autocomplete="off"
|
|
44
|
-
|
|
43
|
+
placeholder="Confirm new password"
|
|
45
44
|
class="password-input tw-mb-3 tw-h-12 tw-bg-no-repeat tw-w-full tw-rounded tw-shadow-inner tw-outline-none tw-py-4 tw-pl-10-important tw-pr-2 tw-text-grayscale-600 tw-border tw-border-grayscale-500 focus:tw-border-grayscale-700"
|
|
46
45
|
:class="{ 'tw-border-error-500': !!confirmPasswordError }"
|
|
47
46
|
/>
|
|
@@ -51,7 +50,7 @@
|
|
|
51
50
|
<SubmissionButton
|
|
52
51
|
variant="primary"
|
|
53
52
|
size="medium"
|
|
54
|
-
|
|
53
|
+
label="UPDATE PASSWORD"
|
|
55
54
|
label-size="larger"
|
|
56
55
|
:is-loading="isLoading"
|
|
57
56
|
:disabled="isLoading"
|
|
@@ -64,7 +63,6 @@
|
|
|
64
63
|
</div>
|
|
65
64
|
</template>
|
|
66
65
|
<script>
|
|
67
|
-
import i18next from 'i18next';
|
|
68
66
|
import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
|
|
69
67
|
import SubmissionButton from './SubmissionButton.vue';
|
|
70
68
|
|
|
@@ -82,7 +80,7 @@ export default {
|
|
|
82
80
|
description: {
|
|
83
81
|
type: String,
|
|
84
82
|
required: false,
|
|
85
|
-
default:
|
|
83
|
+
default: 'Enter and confirm your new password',
|
|
86
84
|
},
|
|
87
85
|
userName: {
|
|
88
86
|
type: String,
|
|
@@ -106,16 +104,6 @@ export default {
|
|
|
106
104
|
required: false,
|
|
107
105
|
default: undefined,
|
|
108
106
|
},
|
|
109
|
-
submitAction: {
|
|
110
|
-
type: String,
|
|
111
|
-
required: false,
|
|
112
|
-
default: undefined,
|
|
113
|
-
},
|
|
114
|
-
resetPasswordContent: {
|
|
115
|
-
type: Object,
|
|
116
|
-
required: false,
|
|
117
|
-
default: () => {},
|
|
118
|
-
},
|
|
119
107
|
},
|
|
120
108
|
data() {
|
|
121
109
|
return {
|
|
@@ -124,27 +112,10 @@ export default {
|
|
|
124
112
|
confirmPassword: undefined,
|
|
125
113
|
passwordError: undefined,
|
|
126
114
|
confirmPasswordError: undefined,
|
|
127
|
-
newPasswordLabel: this.resetPasswordContent?.newPasswordLabel ?? 'New Password',
|
|
128
|
-
newPasswordPlaceholder: this.resetPasswordContent?.newPasswordPlaceholder ?? 'New password',
|
|
129
|
-
confirmPasswordLabel: this.resetPasswordContent?.confirmPasswordLabel ?? 'Confirm Password',
|
|
130
|
-
confirmPasswordPlaceholder: this.resetPasswordContent?.confirmPasswordPlaceholder ?? 'Confirm new password',
|
|
131
|
-
updatePasswordLabel: this.resetPasswordContent?.updatePasswordLabel ?? 'UPDATE PASSWORD',
|
|
132
|
-
passwordRequiredError: this.resetPasswordContent?.passwordRequiredError ?? 'Please enter a password',
|
|
133
|
-
passwordsDoNotMatchError: this.resetPasswordContent?.passwordsDoNotMatchError ?? 'Passwords do not match',
|
|
134
|
-
title: this.resetPasswordContent?.title ?? 'Reset Password',
|
|
135
|
-
description: this.resetPasswordContent?.description ?? 'Enter and confirm your new password',
|
|
136
115
|
};
|
|
137
116
|
},
|
|
138
|
-
computed: {
|
|
139
|
-
currentLocale() {
|
|
140
|
-
return i18next.language || 'en-US';
|
|
141
|
-
},
|
|
142
|
-
},
|
|
143
117
|
methods: {
|
|
144
118
|
validate(e) {
|
|
145
|
-
if (this.submitAction) {
|
|
146
|
-
this.$refs.resetPasswordForm.action = this.submitAction;
|
|
147
|
-
}
|
|
148
119
|
if (this.password && this.password === this.confirmPassword) {
|
|
149
120
|
this.isLoading = true;
|
|
150
121
|
return true;
|
|
@@ -156,9 +127,9 @@ export default {
|
|
|
156
127
|
this.confirmPasswordError = undefined;
|
|
157
128
|
|
|
158
129
|
if (!this.password) {
|
|
159
|
-
this.passwordError =
|
|
130
|
+
this.passwordError = 'Please enter a password';
|
|
160
131
|
} else if (!this.confirmPassword || this.password !== this.confirmPassword) {
|
|
161
|
-
this.confirmPasswordError =
|
|
132
|
+
this.confirmPasswordError = 'Passwords do not match';
|
|
162
133
|
}
|
|
163
134
|
|
|
164
135
|
e.preventDefault();
|
package/CLAUDE.md
DELETED
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
# CLAUDE.md
|
|
2
|
-
|
|
3
|
-
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
4
|
-
|
|
5
|
-
## Development Commands
|
|
6
|
-
|
|
7
|
-
### Starting Development
|
|
8
|
-
- `npm start` - Builds Tailwind CSS files for all themes and launches Storybook development server on port 6006
|
|
9
|
-
- `npm run storybook` - Same as `npm start` (alias)
|
|
10
|
-
|
|
11
|
-
### Building
|
|
12
|
-
- `npm run build` - Builds production CSS using Tailwind
|
|
13
|
-
- `npm run build:css` - Builds CSS files using tailwind.build.js
|
|
14
|
-
- `npm run build:storybook` - Builds static Storybook for deployment
|
|
15
|
-
|
|
16
|
-
### Code Quality
|
|
17
|
-
- `npm run lint` - Runs ESLint on TypeScript, JavaScript, and Vue files in src/
|
|
18
|
-
- `npm run lint:fix` - Automatically fixes linting issues where possible
|
|
19
|
-
|
|
20
|
-
### Testing in UAT Environment
|
|
21
|
-
To test experimental versions without publishing to production:
|
|
22
|
-
1. Update package.json version to `[current]-[description]`
|
|
23
|
-
2. Run `docker build . --build-arg NPM_TOKEN=$NPM_TOKEN`
|
|
24
|
-
3. Update consumer package reference to the new version
|
|
25
|
-
|
|
26
|
-
## Architecture Overview
|
|
27
|
-
|
|
28
|
-
This is a shared component library and design system for DesignCrowd's frontend applications, published as `@designcrowd/fe-shared-lib`.
|
|
29
|
-
|
|
30
|
-
### Project Structure
|
|
31
|
-
- **`src/atoms/`** - Reusable UI components (Button, Modal, Icon, etc.)
|
|
32
|
-
- **`src/experiences/`** - Complex, business-specific components (AuthFlow, PaymentConfig, etc.)
|
|
33
|
-
- **`src/themes/`** - Tailwind CSS theme configurations for different brands
|
|
34
|
-
- **`src/css/`** - Global CSS and Tailwind configuration
|
|
35
|
-
- **`public/css/`** - Generated CSS output files
|
|
36
|
-
|
|
37
|
-
### Theme System
|
|
38
|
-
The library supports multiple brand themes through Tailwind CSS:
|
|
39
|
-
- **BrandCrowd** (`bc.js`)
|
|
40
|
-
- **BrandPage** (`bp.js`)
|
|
41
|
-
- **CrazyDomains** (`cd.js`)
|
|
42
|
-
- **DesignCrowd** (`dc.js`)
|
|
43
|
-
- **Design.com** (`dcom.js`)
|
|
44
|
-
|
|
45
|
-
Themes are built using `tailwind.themes.js` and exported via `src/themes/themes.js`.
|
|
46
|
-
|
|
47
|
-
### Component Organization
|
|
48
|
-
- **Atoms**: Basic UI components with stories in Storybook
|
|
49
|
-
- **Experiences**: Complex components combining multiple atoms for specific workflows
|
|
50
|
-
- **Icons**: Extensive icon library with brand-specific variants
|
|
51
|
-
- **Mixins**: Reusable Vue.js mixins for common functionality
|
|
52
|
-
|
|
53
|
-
### Key Files
|
|
54
|
-
- `index.js` - Main export file exposing all components
|
|
55
|
-
- `tailwind.config.js` - Tailwind CSS configuration
|
|
56
|
-
- `vite.config.ts` - Vite build configuration for development
|
|
57
|
-
|
|
58
|
-
### Local Development Workflow
|
|
59
|
-
Use `npm link` in this directory and `npm link @designcrowd/fe-shared-lib` in consumer projects for local development.
|
|
60
|
-
|
|
61
|
-
### Storybook
|
|
62
|
-
- Development server runs on port 6006
|
|
63
|
-
- Live Storybook: https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html
|
|
64
|
-
- Stories are co-located with components (`.stories.js` files)
|
|
65
|
-
|
|
66
|
-
### Brand Page Integration
|
|
67
|
-
For changes affecting BrandPage Tab in BC.NET:
|
|
68
|
-
1. Update app.maker's reference to this library
|
|
69
|
-
2. Bump app.maker version
|
|
70
|
-
3. Run `npm run docker:publish:bp`
|
|
71
|
-
4. Update BC.NET's reference to the new app.maker version
|