@virtualansoftware/vs-office-viewer 1.0.0 → 1.0.2
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/dist/client/assets/DocxViewer-BcXhLJfm.css +1 -0
- package/dist/client/assets/DocxViewer-CPMpeQTq.js +58 -0
- package/dist/client/assets/LogoIcon-CTf12WP0.js +1 -0
- package/dist/client/assets/PptxViewer-Bvr-20MJ.js +59 -0
- package/dist/client/assets/PptxViewer-Cn8CqLfg.css +1 -0
- package/dist/client/assets/XlsxViewer-CGc0vtBk.js +63 -0
- package/dist/client/assets/XlsxViewer-DTxE-neD.css +1 -0
- package/dist/client/assets/chevron-right-D0jHq8Hg.js +1 -0
- package/dist/client/assets/form-KvBV47dq.js +1 -0
- package/dist/client/assets/index-DATp3RB-.js +12 -0
- package/dist/client/assets/jszip.min-DhiFe-R7.js +2 -0
- package/dist/client/assets/login-aBY8Ktaw.js +1 -0
- package/dist/client/assets/register-BB43pNvY.js +1 -0
- package/dist/client/assets/rolldown-runtime-aKtaBQYM.js +1 -0
- package/dist/client/assets/routes-1JmKig5J.js +2 -0
- package/dist/client/assets/styles-F8oSmVJa.css +2 -0
- package/dist/client/robots.txt +2 -0
- package/dist/index.cjs +1814 -0
- package/dist/index.d.cts +22 -0
- package/dist/index.d.ts +22 -0
- package/dist/index.js +1777 -0
- package/dist/server/assets/DocxViewer-Bvu47Jxr.js +544 -0
- package/dist/server/assets/LogoIcon-D2qIWtkU.js +93 -0
- package/dist/server/assets/PptxViewer-CjRu82CL.js +209 -0
- package/dist/server/assets/XlsxViewer-CtBSfYb7.js +870 -0
- package/dist/server/assets/_tanstack-start-manifest_v-CQ5gmg8o.js +43 -0
- package/dist/server/assets/createMiddleware-BnSPczhK.js +24 -0
- package/dist/server/assets/empty-plugin-adapters-D9UWiqvJ.js +5 -0
- package/dist/server/assets/form-DY0gQsTv.js +249 -0
- package/dist/server/assets/login-hnUq0LLL.js +122 -0
- package/dist/server/assets/register-DIFjHkZS.js +164 -0
- package/dist/server/assets/router-CJA4LnAB.js +281 -0
- package/dist/server/assets/routes-DT9ZAw-E.js +481 -0
- package/dist/server/assets/server-vIOK9n3w.js +1595 -0
- package/dist/server/assets/start-RYa-0bjt.js +43 -0
- package/dist/server/server.js +86 -0
- package/package.json +7 -13
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
//#region \0tanstack-start-manifest:v
|
|
2
|
+
var tsrStartManifest = () => ({ routes: {
|
|
3
|
+
__root__: {
|
|
4
|
+
filePath: "C:/Users/manikandan.d_virtual/Virtualan Software/office-viewer/frontend/src/routes/__root.tsx",
|
|
5
|
+
children: [
|
|
6
|
+
"/",
|
|
7
|
+
"/login",
|
|
8
|
+
"/register",
|
|
9
|
+
"/sitemap.xml"
|
|
10
|
+
],
|
|
11
|
+
preloads: ["/assets/index-DATp3RB-.js", "/assets/rolldown-runtime-aKtaBQYM.js"],
|
|
12
|
+
scripts: [{ attrs: {
|
|
13
|
+
type: "module",
|
|
14
|
+
async: !0,
|
|
15
|
+
src: "/assets/index-DATp3RB-.js"
|
|
16
|
+
} }]
|
|
17
|
+
},
|
|
18
|
+
"/": {
|
|
19
|
+
filePath: "C:/Users/manikandan.d_virtual/Virtualan Software/office-viewer/frontend/src/routes/index.tsx",
|
|
20
|
+
children: void 0,
|
|
21
|
+
preloads: ["/assets/routes-1JmKig5J.js", "/assets/LogoIcon-CTf12WP0.js"]
|
|
22
|
+
},
|
|
23
|
+
"/login": {
|
|
24
|
+
filePath: "C:/Users/manikandan.d_virtual/Virtualan Software/office-viewer/frontend/src/routes/login.tsx",
|
|
25
|
+
children: void 0,
|
|
26
|
+
preloads: [
|
|
27
|
+
"/assets/login-aBY8Ktaw.js",
|
|
28
|
+
"/assets/LogoIcon-CTf12WP0.js",
|
|
29
|
+
"/assets/form-KvBV47dq.js"
|
|
30
|
+
]
|
|
31
|
+
},
|
|
32
|
+
"/register": {
|
|
33
|
+
filePath: "C:/Users/manikandan.d_virtual/Virtualan Software/office-viewer/frontend/src/routes/register.tsx",
|
|
34
|
+
children: void 0,
|
|
35
|
+
preloads: [
|
|
36
|
+
"/assets/register-BB43pNvY.js",
|
|
37
|
+
"/assets/LogoIcon-CTf12WP0.js",
|
|
38
|
+
"/assets/form-KvBV47dq.js"
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
} });
|
|
42
|
+
//#endregion
|
|
43
|
+
export { tsrStartManifest };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
//#region node_modules/@tanstack/start-client-core/dist/esm/createMiddleware.js
|
|
2
|
+
var createMiddleware = (options, __opts) => {
|
|
3
|
+
const resolvedOptions = {
|
|
4
|
+
type: "request",
|
|
5
|
+
...__opts || options
|
|
6
|
+
};
|
|
7
|
+
return {
|
|
8
|
+
options: resolvedOptions,
|
|
9
|
+
middleware: (middleware) => {
|
|
10
|
+
return createMiddleware({}, Object.assign(resolvedOptions, { middleware }));
|
|
11
|
+
},
|
|
12
|
+
inputValidator: (inputValidator) => {
|
|
13
|
+
return createMiddleware({}, Object.assign(resolvedOptions, { inputValidator }));
|
|
14
|
+
},
|
|
15
|
+
client: (client) => {
|
|
16
|
+
return createMiddleware({}, Object.assign(resolvedOptions, { client }));
|
|
17
|
+
},
|
|
18
|
+
server: (server) => {
|
|
19
|
+
return createMiddleware({}, Object.assign(resolvedOptions, { server }));
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
//#endregion
|
|
24
|
+
export { createMiddleware as t };
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
import { t as LogoIcon } from "./LogoIcon-D2qIWtkU.js";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { Eye, EyeOff, HardDrive, Layers, ShieldCheck } from "lucide-react";
|
|
5
|
+
import { Controller, FormProvider, useFormContext } from "react-hook-form";
|
|
6
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
7
|
+
import { cva } from "class-variance-authority";
|
|
8
|
+
import { clsx } from "clsx";
|
|
9
|
+
import { twMerge } from "tailwind-merge";
|
|
10
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
11
|
+
//#region src/components/BrandMark.tsx
|
|
12
|
+
function BrandMark() {
|
|
13
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
14
|
+
className: "flex flex-col items-center gap-3",
|
|
15
|
+
children: [
|
|
16
|
+
/* @__PURE__ */ jsx("div", {
|
|
17
|
+
className: "flex h-16 w-16 items-center justify-center rounded-2xl",
|
|
18
|
+
style: {
|
|
19
|
+
backgroundColor: "#2563eb",
|
|
20
|
+
boxShadow: "0 0 0 1px rgba(37,99,235,0.22), inset 0 1px 0 rgba(255,255,255,0.15), 0 6px 20px 0 rgba(37,99,235,0.30)"
|
|
21
|
+
},
|
|
22
|
+
children: /* @__PURE__ */ jsx(LogoIcon, { size: 30 })
|
|
23
|
+
}),
|
|
24
|
+
/* @__PURE__ */ jsxs("div", {
|
|
25
|
+
className: "flex select-none flex-col items-center",
|
|
26
|
+
style: { gap: 2 },
|
|
27
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
28
|
+
className: "text-[10px] font-semibold uppercase tracking-[0.22em] text-blue-600",
|
|
29
|
+
children: "Office"
|
|
30
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
31
|
+
className: "text-[24px] font-bold leading-none tracking-[-0.02em] text-slate-900",
|
|
32
|
+
children: "Viewer"
|
|
33
|
+
})]
|
|
34
|
+
}),
|
|
35
|
+
/* @__PURE__ */ jsx("p", {
|
|
36
|
+
className: "mt-0.5 max-w-xs text-center text-[13.5px] leading-relaxed text-slate-500",
|
|
37
|
+
children: "Securely view Word, Excel and PowerPoint files directly in your browser."
|
|
38
|
+
})
|
|
39
|
+
]
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
//#endregion
|
|
43
|
+
//#region src/components/TrustIndicators.tsx
|
|
44
|
+
function TrustIndicators() {
|
|
45
|
+
return /* @__PURE__ */ jsx("div", {
|
|
46
|
+
className: "border-t border-slate-100 px-8 py-5 sm:px-12 sm:py-6",
|
|
47
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
48
|
+
className: "flex flex-wrap items-center justify-center gap-x-7 gap-y-3",
|
|
49
|
+
children: [
|
|
50
|
+
/* @__PURE__ */ jsxs("div", {
|
|
51
|
+
className: "flex items-center gap-1.5",
|
|
52
|
+
children: [/* @__PURE__ */ jsx(ShieldCheck, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }), /* @__PURE__ */ jsx("span", {
|
|
53
|
+
className: "whitespace-nowrap text-[11.5px] text-slate-400",
|
|
54
|
+
children: "Secure Access"
|
|
55
|
+
})]
|
|
56
|
+
}),
|
|
57
|
+
/* @__PURE__ */ jsxs("div", {
|
|
58
|
+
className: "flex items-center gap-1.5",
|
|
59
|
+
children: [/* @__PURE__ */ jsx(HardDrive, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }), /* @__PURE__ */ jsx("span", {
|
|
60
|
+
className: "whitespace-nowrap text-[11.5px] text-slate-400",
|
|
61
|
+
children: "Runs Locally"
|
|
62
|
+
})]
|
|
63
|
+
}),
|
|
64
|
+
/* @__PURE__ */ jsxs("div", {
|
|
65
|
+
className: "flex items-center gap-1.5",
|
|
66
|
+
children: [/* @__PURE__ */ jsx(Layers, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }), /* @__PURE__ */ jsx("span", {
|
|
67
|
+
className: "whitespace-nowrap text-[11.5px] text-slate-400",
|
|
68
|
+
children: "Word, Excel & PowerPoint"
|
|
69
|
+
})]
|
|
70
|
+
})
|
|
71
|
+
]
|
|
72
|
+
})
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
//#endregion
|
|
76
|
+
//#region src/lib/utils.ts
|
|
77
|
+
function cn(...inputs) {
|
|
78
|
+
return twMerge(clsx(inputs));
|
|
79
|
+
}
|
|
80
|
+
//#endregion
|
|
81
|
+
//#region src/components/ui/button.tsx
|
|
82
|
+
var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
|
|
83
|
+
variants: {
|
|
84
|
+
variant: {
|
|
85
|
+
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
|
86
|
+
destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
|
87
|
+
outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
|
88
|
+
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
|
89
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
90
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
91
|
+
},
|
|
92
|
+
size: {
|
|
93
|
+
default: "h-9 px-4 py-2",
|
|
94
|
+
sm: "h-8 rounded-md px-3 text-xs",
|
|
95
|
+
lg: "h-10 rounded-md px-8",
|
|
96
|
+
icon: "h-9 w-9"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
defaultVariants: {
|
|
100
|
+
variant: "default",
|
|
101
|
+
size: "default"
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
var Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
105
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
|
|
106
|
+
className: cn(buttonVariants({
|
|
107
|
+
variant,
|
|
108
|
+
size,
|
|
109
|
+
className
|
|
110
|
+
})),
|
|
111
|
+
ref,
|
|
112
|
+
...props
|
|
113
|
+
});
|
|
114
|
+
});
|
|
115
|
+
Button.displayName = "Button";
|
|
116
|
+
//#endregion
|
|
117
|
+
//#region src/components/ui/input.tsx
|
|
118
|
+
var Input = React.forwardRef(({ className, type, ...props }, ref) => {
|
|
119
|
+
return /* @__PURE__ */ jsx("input", {
|
|
120
|
+
type,
|
|
121
|
+
className: cn("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className),
|
|
122
|
+
ref,
|
|
123
|
+
...props
|
|
124
|
+
});
|
|
125
|
+
});
|
|
126
|
+
Input.displayName = "Input";
|
|
127
|
+
//#endregion
|
|
128
|
+
//#region src/components/ui/password-input.tsx
|
|
129
|
+
var PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
|
|
130
|
+
const [visible, setVisible] = React.useState(false);
|
|
131
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
132
|
+
className: "relative",
|
|
133
|
+
children: [/* @__PURE__ */ jsx(Input, {
|
|
134
|
+
type: visible ? "text" : "password",
|
|
135
|
+
className: cn("pr-10", className),
|
|
136
|
+
ref,
|
|
137
|
+
...props
|
|
138
|
+
}), /* @__PURE__ */ jsx("button", {
|
|
139
|
+
type: "button",
|
|
140
|
+
tabIndex: -1,
|
|
141
|
+
"aria-label": visible ? "Hide password" : "Show password",
|
|
142
|
+
onClick: () => setVisible((v) => !v),
|
|
143
|
+
className: "absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition-colors hover:text-slate-600",
|
|
144
|
+
children: visible ? /* @__PURE__ */ jsx(EyeOff, {
|
|
145
|
+
className: "h-4 w-4",
|
|
146
|
+
"aria-hidden": "true"
|
|
147
|
+
}) : /* @__PURE__ */ jsx(Eye, {
|
|
148
|
+
className: "h-4 w-4",
|
|
149
|
+
"aria-hidden": "true"
|
|
150
|
+
})
|
|
151
|
+
})]
|
|
152
|
+
});
|
|
153
|
+
});
|
|
154
|
+
PasswordInput.displayName = "PasswordInput";
|
|
155
|
+
//#endregion
|
|
156
|
+
//#region src/components/ui/label.tsx
|
|
157
|
+
var labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
|
|
158
|
+
var Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, {
|
|
159
|
+
ref,
|
|
160
|
+
className: cn(labelVariants(), className),
|
|
161
|
+
...props
|
|
162
|
+
}));
|
|
163
|
+
Label.displayName = LabelPrimitive.Root.displayName;
|
|
164
|
+
//#endregion
|
|
165
|
+
//#region src/components/ui/form.tsx
|
|
166
|
+
var Form = FormProvider;
|
|
167
|
+
var FormFieldContext = React.createContext(null);
|
|
168
|
+
var FormField = ({ ...props }) => {
|
|
169
|
+
return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
|
|
170
|
+
value: { name: props.name },
|
|
171
|
+
children: /* @__PURE__ */ jsx(Controller, { ...props })
|
|
172
|
+
});
|
|
173
|
+
};
|
|
174
|
+
var useFormField = () => {
|
|
175
|
+
const fieldContext = React.useContext(FormFieldContext);
|
|
176
|
+
const itemContext = React.useContext(FormItemContext);
|
|
177
|
+
const { getFieldState, formState } = useFormContext();
|
|
178
|
+
if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
|
|
179
|
+
if (!itemContext) throw new Error("useFormField should be used within <FormItem>");
|
|
180
|
+
const fieldState = getFieldState(fieldContext.name, formState);
|
|
181
|
+
const { id } = itemContext;
|
|
182
|
+
return {
|
|
183
|
+
id,
|
|
184
|
+
name: fieldContext.name,
|
|
185
|
+
formItemId: `${id}-form-item`,
|
|
186
|
+
formDescriptionId: `${id}-form-item-description`,
|
|
187
|
+
formMessageId: `${id}-form-item-message`,
|
|
188
|
+
...fieldState
|
|
189
|
+
};
|
|
190
|
+
};
|
|
191
|
+
var FormItemContext = React.createContext(null);
|
|
192
|
+
var FormItem = React.forwardRef(({ className, ...props }, ref) => {
|
|
193
|
+
const id = React.useId();
|
|
194
|
+
return /* @__PURE__ */ jsx(FormItemContext.Provider, {
|
|
195
|
+
value: { id },
|
|
196
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
197
|
+
ref,
|
|
198
|
+
className: cn("space-y-2", className),
|
|
199
|
+
...props
|
|
200
|
+
})
|
|
201
|
+
});
|
|
202
|
+
});
|
|
203
|
+
FormItem.displayName = "FormItem";
|
|
204
|
+
var FormLabel = React.forwardRef(({ className, ...props }, ref) => {
|
|
205
|
+
const { error, formItemId } = useFormField();
|
|
206
|
+
return /* @__PURE__ */ jsx(Label, {
|
|
207
|
+
ref,
|
|
208
|
+
className: cn(error && "text-destructive", className),
|
|
209
|
+
htmlFor: formItemId,
|
|
210
|
+
...props
|
|
211
|
+
});
|
|
212
|
+
});
|
|
213
|
+
FormLabel.displayName = "FormLabel";
|
|
214
|
+
var FormControl = React.forwardRef(({ ...props }, ref) => {
|
|
215
|
+
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
216
|
+
return /* @__PURE__ */ jsx(Slot, {
|
|
217
|
+
ref,
|
|
218
|
+
id: formItemId,
|
|
219
|
+
"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
|
|
220
|
+
"aria-invalid": !!error,
|
|
221
|
+
...props
|
|
222
|
+
});
|
|
223
|
+
});
|
|
224
|
+
FormControl.displayName = "FormControl";
|
|
225
|
+
var FormDescription = React.forwardRef(({ className, ...props }, ref) => {
|
|
226
|
+
const { formDescriptionId } = useFormField();
|
|
227
|
+
return /* @__PURE__ */ jsx("p", {
|
|
228
|
+
ref,
|
|
229
|
+
id: formDescriptionId,
|
|
230
|
+
className: cn("text-[0.8rem] text-muted-foreground", className),
|
|
231
|
+
...props
|
|
232
|
+
});
|
|
233
|
+
});
|
|
234
|
+
FormDescription.displayName = "FormDescription";
|
|
235
|
+
var FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
|
|
236
|
+
const { error, formMessageId } = useFormField();
|
|
237
|
+
const body = error ? String(error?.message ?? "") : children;
|
|
238
|
+
if (!body) return null;
|
|
239
|
+
return /* @__PURE__ */ jsx("p", {
|
|
240
|
+
ref,
|
|
241
|
+
id: formMessageId,
|
|
242
|
+
className: cn("text-[0.8rem] font-medium text-destructive", className),
|
|
243
|
+
...props,
|
|
244
|
+
children: body
|
|
245
|
+
});
|
|
246
|
+
});
|
|
247
|
+
FormMessage.displayName = "FormMessage";
|
|
248
|
+
//#endregion
|
|
249
|
+
export { FormLabel as a, Input as c, BrandMark as d, FormItem as i, Button as l, FormControl as n, FormMessage as o, FormField as r, PasswordInput as s, Form as t, TrustIndicators as u };
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { a as FormLabel, c as Input, d as BrandMark, i as FormItem, l as Button, n as FormControl, o as FormMessage, r as FormField, s as PasswordInput, t as Form, u as TrustIndicators } from "./form-DY0gQsTv.js";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { Link } from "@tanstack/react-router";
|
|
4
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { z } from "zod";
|
|
6
|
+
import { Loader2 } from "lucide-react";
|
|
7
|
+
import { useForm } from "react-hook-form";
|
|
8
|
+
import { zodResolver } from "@hookform/resolvers/zod";
|
|
9
|
+
//#region src/routes/login.tsx?tsr-split=component
|
|
10
|
+
var loginSchema = z.object({
|
|
11
|
+
email: z.string().email("Please enter a valid email address"),
|
|
12
|
+
password: z.string().min(6, "Password must be at least 6 characters")
|
|
13
|
+
});
|
|
14
|
+
function LoginPage() {
|
|
15
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
16
|
+
const form = useForm({
|
|
17
|
+
resolver: zodResolver(loginSchema),
|
|
18
|
+
defaultValues: {
|
|
19
|
+
email: "",
|
|
20
|
+
password: ""
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
async function onSubmit(_values) {
|
|
24
|
+
setIsLoading(true);
|
|
25
|
+
setIsLoading(false);
|
|
26
|
+
}
|
|
27
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
28
|
+
className: "flex min-h-screen flex-col items-center justify-center px-4 py-16",
|
|
29
|
+
style: {
|
|
30
|
+
backgroundColor: "oklch(0.965 0.006 256)",
|
|
31
|
+
backgroundImage: "radial-gradient(rgba(15,23,42,0.045) 1px, transparent 1px)",
|
|
32
|
+
backgroundSize: "24px 24px"
|
|
33
|
+
},
|
|
34
|
+
children: [
|
|
35
|
+
/* @__PURE__ */ jsx("div", {
|
|
36
|
+
className: "mb-10",
|
|
37
|
+
children: /* @__PURE__ */ jsx(BrandMark, {})
|
|
38
|
+
}),
|
|
39
|
+
/* @__PURE__ */ jsxs("div", {
|
|
40
|
+
className: "w-full max-w-xl overflow-hidden rounded-2xl border border-slate-200/80 bg-white",
|
|
41
|
+
style: { boxShadow: "0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06), 0 16px 40px rgba(15,23,42,0.08)" },
|
|
42
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
43
|
+
className: "px-8 pb-8 pt-10 sm:px-12 sm:pt-12",
|
|
44
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
45
|
+
className: "mb-8",
|
|
46
|
+
children: [/* @__PURE__ */ jsx("h1", {
|
|
47
|
+
className: "text-3xl font-bold tracking-tight text-slate-900",
|
|
48
|
+
children: "Welcome back"
|
|
49
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
50
|
+
className: "mt-2 text-[15px] text-slate-500",
|
|
51
|
+
children: "Sign in to your Office Viewer account"
|
|
52
|
+
})]
|
|
53
|
+
}), /* @__PURE__ */ jsx(Form, {
|
|
54
|
+
...form,
|
|
55
|
+
children: /* @__PURE__ */ jsxs("form", {
|
|
56
|
+
onSubmit: form.handleSubmit(onSubmit),
|
|
57
|
+
className: "space-y-5",
|
|
58
|
+
noValidate: true,
|
|
59
|
+
children: [
|
|
60
|
+
/* @__PURE__ */ jsx(FormField, {
|
|
61
|
+
control: form.control,
|
|
62
|
+
name: "email",
|
|
63
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
|
|
64
|
+
/* @__PURE__ */ jsx(FormLabel, {
|
|
65
|
+
className: "text-sm font-medium text-slate-700",
|
|
66
|
+
children: "Email address"
|
|
67
|
+
}),
|
|
68
|
+
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
|
|
69
|
+
type: "email",
|
|
70
|
+
placeholder: "you@example.com",
|
|
71
|
+
autoComplete: "email",
|
|
72
|
+
className: "h-11",
|
|
73
|
+
...field
|
|
74
|
+
}) }),
|
|
75
|
+
/* @__PURE__ */ jsx(FormMessage, {})
|
|
76
|
+
] })
|
|
77
|
+
}),
|
|
78
|
+
/* @__PURE__ */ jsx(FormField, {
|
|
79
|
+
control: form.control,
|
|
80
|
+
name: "password",
|
|
81
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
|
|
82
|
+
/* @__PURE__ */ jsx(FormLabel, {
|
|
83
|
+
className: "text-sm font-medium text-slate-700",
|
|
84
|
+
children: "Password"
|
|
85
|
+
}),
|
|
86
|
+
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(PasswordInput, {
|
|
87
|
+
placeholder: "Enter your password",
|
|
88
|
+
autoComplete: "current-password",
|
|
89
|
+
className: "h-11",
|
|
90
|
+
...field
|
|
91
|
+
}) }),
|
|
92
|
+
/* @__PURE__ */ jsx(FormMessage, {})
|
|
93
|
+
] })
|
|
94
|
+
}),
|
|
95
|
+
/* @__PURE__ */ jsx(Button, {
|
|
96
|
+
type: "submit",
|
|
97
|
+
disabled: isLoading,
|
|
98
|
+
className: "mt-2 h-12 w-full rounded-xl bg-blue-600 font-semibold text-white shadow-sm transition-colors hover:bg-blue-700",
|
|
99
|
+
children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Signing in…"] }) : "Sign in"
|
|
100
|
+
})
|
|
101
|
+
]
|
|
102
|
+
})
|
|
103
|
+
})]
|
|
104
|
+
}), /* @__PURE__ */ jsx(TrustIndicators, {})]
|
|
105
|
+
}),
|
|
106
|
+
/* @__PURE__ */ jsxs("p", {
|
|
107
|
+
className: "mt-7 text-sm text-slate-500",
|
|
108
|
+
children: [
|
|
109
|
+
"Don't have an account?",
|
|
110
|
+
" ",
|
|
111
|
+
/* @__PURE__ */ jsx(Link, {
|
|
112
|
+
to: "/register",
|
|
113
|
+
className: "font-semibold text-blue-600 transition-colors hover:text-blue-700",
|
|
114
|
+
children: "Create one"
|
|
115
|
+
})
|
|
116
|
+
]
|
|
117
|
+
})
|
|
118
|
+
]
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
//#endregion
|
|
122
|
+
export { LoginPage as component };
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import { a as FormLabel, c as Input, d as BrandMark, i as FormItem, l as Button, n as FormControl, o as FormMessage, r as FormField, s as PasswordInput, t as Form, u as TrustIndicators } from "./form-DY0gQsTv.js";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { Link } from "@tanstack/react-router";
|
|
4
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { z } from "zod";
|
|
6
|
+
import { Loader2 } from "lucide-react";
|
|
7
|
+
import { useForm } from "react-hook-form";
|
|
8
|
+
import { zodResolver } from "@hookform/resolvers/zod";
|
|
9
|
+
//#region src/routes/register.tsx?tsr-split=component
|
|
10
|
+
var registerSchema = z.object({
|
|
11
|
+
fullName: z.string().min(2, "Name must be at least 2 characters").max(100, "Name is too long"),
|
|
12
|
+
email: z.string().email("Please enter a valid email address"),
|
|
13
|
+
password: z.string().min(8, "Password must be at least 8 characters").regex(/[A-Z]/, "Must contain at least one uppercase letter").regex(/[0-9]/, "Must contain at least one number"),
|
|
14
|
+
confirmPassword: z.string()
|
|
15
|
+
}).refine((d) => d.password === d.confirmPassword, {
|
|
16
|
+
path: ["confirmPassword"],
|
|
17
|
+
message: "Passwords do not match"
|
|
18
|
+
});
|
|
19
|
+
function RegisterPage() {
|
|
20
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
21
|
+
const form = useForm({
|
|
22
|
+
resolver: zodResolver(registerSchema),
|
|
23
|
+
defaultValues: {
|
|
24
|
+
fullName: "",
|
|
25
|
+
email: "",
|
|
26
|
+
password: "",
|
|
27
|
+
confirmPassword: ""
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
async function onSubmit(_values) {
|
|
31
|
+
setIsLoading(true);
|
|
32
|
+
setIsLoading(false);
|
|
33
|
+
}
|
|
34
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
35
|
+
className: "flex min-h-screen flex-col items-center justify-center px-4 py-16",
|
|
36
|
+
style: {
|
|
37
|
+
backgroundColor: "oklch(0.965 0.006 256)",
|
|
38
|
+
backgroundImage: "radial-gradient(rgba(15,23,42,0.045) 1px, transparent 1px)",
|
|
39
|
+
backgroundSize: "24px 24px"
|
|
40
|
+
},
|
|
41
|
+
children: [
|
|
42
|
+
/* @__PURE__ */ jsx("div", {
|
|
43
|
+
className: "mb-10",
|
|
44
|
+
children: /* @__PURE__ */ jsx(BrandMark, {})
|
|
45
|
+
}),
|
|
46
|
+
/* @__PURE__ */ jsxs("div", {
|
|
47
|
+
className: "w-full max-w-xl overflow-hidden rounded-2xl border border-slate-200/80 bg-white",
|
|
48
|
+
style: { boxShadow: "0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06), 0 16px 40px rgba(15,23,42,0.08)" },
|
|
49
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
50
|
+
className: "px-8 pb-8 pt-10 sm:px-12 sm:pt-12",
|
|
51
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
52
|
+
className: "mb-8",
|
|
53
|
+
children: [/* @__PURE__ */ jsx("h1", {
|
|
54
|
+
className: "text-3xl font-bold tracking-tight text-slate-900",
|
|
55
|
+
children: "Create your account"
|
|
56
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
57
|
+
className: "mt-2 text-[15px] text-slate-500",
|
|
58
|
+
children: "Start viewing Word, Excel & PowerPoint files"
|
|
59
|
+
})]
|
|
60
|
+
}), /* @__PURE__ */ jsx(Form, {
|
|
61
|
+
...form,
|
|
62
|
+
children: /* @__PURE__ */ jsxs("form", {
|
|
63
|
+
onSubmit: form.handleSubmit(onSubmit),
|
|
64
|
+
className: "space-y-5",
|
|
65
|
+
noValidate: true,
|
|
66
|
+
children: [
|
|
67
|
+
/* @__PURE__ */ jsx(FormField, {
|
|
68
|
+
control: form.control,
|
|
69
|
+
name: "fullName",
|
|
70
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
|
|
71
|
+
/* @__PURE__ */ jsx(FormLabel, {
|
|
72
|
+
className: "text-sm font-medium text-slate-700",
|
|
73
|
+
children: "Full name"
|
|
74
|
+
}),
|
|
75
|
+
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
|
|
76
|
+
type: "text",
|
|
77
|
+
placeholder: "Jane Smith",
|
|
78
|
+
autoComplete: "name",
|
|
79
|
+
className: "h-11",
|
|
80
|
+
...field
|
|
81
|
+
}) }),
|
|
82
|
+
/* @__PURE__ */ jsx(FormMessage, {})
|
|
83
|
+
] })
|
|
84
|
+
}),
|
|
85
|
+
/* @__PURE__ */ jsx(FormField, {
|
|
86
|
+
control: form.control,
|
|
87
|
+
name: "email",
|
|
88
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
|
|
89
|
+
/* @__PURE__ */ jsx(FormLabel, {
|
|
90
|
+
className: "text-sm font-medium text-slate-700",
|
|
91
|
+
children: "Email address"
|
|
92
|
+
}),
|
|
93
|
+
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
|
|
94
|
+
type: "email",
|
|
95
|
+
placeholder: "you@example.com",
|
|
96
|
+
autoComplete: "email",
|
|
97
|
+
className: "h-11",
|
|
98
|
+
...field
|
|
99
|
+
}) }),
|
|
100
|
+
/* @__PURE__ */ jsx(FormMessage, {})
|
|
101
|
+
] })
|
|
102
|
+
}),
|
|
103
|
+
/* @__PURE__ */ jsx(FormField, {
|
|
104
|
+
control: form.control,
|
|
105
|
+
name: "password",
|
|
106
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
|
|
107
|
+
/* @__PURE__ */ jsx(FormLabel, {
|
|
108
|
+
className: "text-sm font-medium text-slate-700",
|
|
109
|
+
children: "Password"
|
|
110
|
+
}),
|
|
111
|
+
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(PasswordInput, {
|
|
112
|
+
placeholder: "Min. 8 characters",
|
|
113
|
+
autoComplete: "new-password",
|
|
114
|
+
className: "h-11",
|
|
115
|
+
...field
|
|
116
|
+
}) }),
|
|
117
|
+
/* @__PURE__ */ jsx(FormMessage, {})
|
|
118
|
+
] })
|
|
119
|
+
}),
|
|
120
|
+
/* @__PURE__ */ jsx(FormField, {
|
|
121
|
+
control: form.control,
|
|
122
|
+
name: "confirmPassword",
|
|
123
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
|
|
124
|
+
/* @__PURE__ */ jsx(FormLabel, {
|
|
125
|
+
className: "text-sm font-medium text-slate-700",
|
|
126
|
+
children: "Confirm password"
|
|
127
|
+
}),
|
|
128
|
+
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(PasswordInput, {
|
|
129
|
+
placeholder: "Re-enter your password",
|
|
130
|
+
autoComplete: "new-password",
|
|
131
|
+
className: "h-11",
|
|
132
|
+
...field
|
|
133
|
+
}) }),
|
|
134
|
+
/* @__PURE__ */ jsx(FormMessage, {})
|
|
135
|
+
] })
|
|
136
|
+
}),
|
|
137
|
+
/* @__PURE__ */ jsx(Button, {
|
|
138
|
+
type: "submit",
|
|
139
|
+
disabled: isLoading,
|
|
140
|
+
className: "mt-2 h-12 w-full rounded-xl bg-blue-600 font-semibold text-white shadow-sm transition-colors hover:bg-blue-700",
|
|
141
|
+
children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Creating account…"] }) : "Create account"
|
|
142
|
+
})
|
|
143
|
+
]
|
|
144
|
+
})
|
|
145
|
+
})]
|
|
146
|
+
}), /* @__PURE__ */ jsx(TrustIndicators, {})]
|
|
147
|
+
}),
|
|
148
|
+
/* @__PURE__ */ jsxs("p", {
|
|
149
|
+
className: "mt-7 text-sm text-slate-500",
|
|
150
|
+
children: [
|
|
151
|
+
"Already have an account?",
|
|
152
|
+
" ",
|
|
153
|
+
/* @__PURE__ */ jsx(Link, {
|
|
154
|
+
to: "/login",
|
|
155
|
+
className: "font-semibold text-blue-600 transition-colors hover:text-blue-700",
|
|
156
|
+
children: "Sign in"
|
|
157
|
+
})
|
|
158
|
+
]
|
|
159
|
+
})
|
|
160
|
+
]
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
//#endregion
|
|
164
|
+
export { RegisterPage as component };
|