Skip to content

Commit b5e9773

Browse files
luizhf42gustavosbarreto
luizhf42
authored and
gustavosbarreto
committed
fix(ui): improve Setup view UI
1 parent 18b1558 commit b5e9773

File tree

3 files changed

+176
-140
lines changed

3 files changed

+176
-140
lines changed

‎ui/src/views/Setup.vue‎

Lines changed: 98 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<v-container class="pb-0 mb-0">
2+
<v-container class="pb-0 my-0">
33
<v-alert
44
v-if="alertMessage"
55
:type="alertType"
@@ -8,133 +8,126 @@
88
class="mb-4"
99
data-test="user-status-alert"
1010
/>
11-
<form @submit.prevent="setupAccount">
11+
<v-form @submit.prevent="setupAccount">
1212
<v-card-title
1313
class="text-center"
1414
data-test="welcome-title"
1515
>
1616
Welcome to ShellHub!
1717
</v-card-title>
18-
<v-window v-model="el">
18+
<v-window v-model="step">
1919
<v-window-item :value="1">
2020
<v-card-subtitle
21-
style="white-space: normal;"
21+
class="text-wrap text-justify px-0"
2222
data-test="subtitle-1"
2323
>
24-
To set up your account, please run <code>/bin/setup</code> in your terminal to generate a signature.
24+
To set up your account, please run the following command in your terminal to generate a signature.
2525
Use the generated signature in the "Sign" field below to proceed.
2626
</v-card-subtitle>
27-
<v-container>
28-
<v-text-field
29-
v-model="sign"
30-
color="primary"
31-
prepend-inner-icon="mdi-key"
32-
:disabled="!!hasQuery"
33-
:error-messages="signError"
34-
required
35-
label="Sign"
36-
variant="underlined"
37-
data-test="sign-text"
38-
/>
39-
<v-btn
40-
:disabled="!hasSign"
41-
type="submit"
42-
data-test="sign-btn"
43-
color="primary"
44-
variant="tonal"
45-
block
46-
@click="el = 2"
47-
>
48-
Setup
49-
</v-btn>
50-
</v-container>
27+
<CopyCommandField
28+
command="./bin/setup"
29+
label="Setup Command"
30+
class="my-4"
31+
data-test="setup-command-field"
32+
/>
33+
<v-text-field
34+
v-model="sign"
35+
color="primary"
36+
prepend-inner-icon="mdi-key"
37+
:disabled="!!hasQuery"
38+
:error-messages="signError"
39+
required
40+
label="Sign"
41+
data-test="sign-text"
42+
/>
43+
<v-btn
44+
:disabled="!hasSign"
45+
type="submit"
46+
data-test="sign-btn"
47+
color="primary"
48+
variant="tonal"
49+
block
50+
text="Setup"
51+
@click="step = 2"
52+
/>
5153
</v-window-item>
5254
<v-window-item :value="2">
5355
<v-card-subtitle
54-
class="d-inline-block text-center"
55-
style="white-space: normal;"
56+
class="text-wrap text-center mb-3"
5657
data-test="subtitle-2"
5758
>
5859
Please complete the following form to set up your account with your personal information.
5960
</v-card-subtitle>
60-
<v-container>
61-
<v-text-field
62-
v-model="name"
63-
color="primary"
64-
prepend-inner-icon="mdi-account"
65-
:error-messages="nameError"
66-
required
67-
label="Name"
68-
variant="underlined"
69-
data-test="name-text"
70-
/>
71-
72-
<v-text-field
73-
v-model="username"
74-
color="primary"
75-
prepend-inner-icon="mdi-account"
76-
:error-messages="usernameError"
77-
required
78-
label="Username"
79-
variant="underlined"
80-
data-test="username-text"
81-
/>
82-
83-
<v-text-field
84-
v-model="email"
85-
color="primary"
86-
prepend-inner-icon="mdi-email"
87-
:error-messages="emailError"
88-
required
89-
label="Email"
90-
variant="underlined"
91-
data-test="email-text"
92-
/>
93-
94-
<v-text-field
95-
v-model="password"
96-
color="primary"
97-
prepend-inner-icon="mdi-lock"
98-
:append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
99-
:error-messages="passwordError"
100-
label="Password"
101-
required
102-
variant="underlined"
103-
data-test="password-text"
104-
:type="showPassword ? 'text' : 'password'"
105-
@click:append-inner="showPassword = !showPassword"
106-
/>
107-
108-
<v-text-field
109-
v-model="passwordConfirm"
110-
color="primary"
111-
prepend-inner-icon="mdi-lock"
112-
:append-inner-icon="showConfirmPassword ? 'mdi-eye' : 'mdi-eye-off'"
113-
:error-messages="passwordConfirmError"
114-
label="Confirm Password"
115-
required
116-
variant="underlined"
117-
data-test="password-confirm-text"
118-
:type="showConfirmPassword ? 'text' : 'password'"
119-
@click:append-inner="showConfirmPassword = !showConfirmPassword"
120-
/>
121-
</v-container>
122-
123-
<v-card-actions class="justify-center">
61+
<v-text-field
62+
v-model="name"
63+
color="primary"
64+
prepend-inner-icon="mdi-account"
65+
:error-messages="nameError"
66+
required
67+
label="Name"
68+
data-test="name-text"
69+
/>
70+
71+
<v-text-field
72+
v-model="username"
73+
color="primary"
74+
prepend-inner-icon="mdi-account"
75+
:error-messages="usernameError"
76+
required
77+
label="Username"
78+
data-test="username-text"
79+
/>
80+
81+
<v-text-field
82+
v-model="email"
83+
color="primary"
84+
prepend-inner-icon="mdi-email"
85+
:error-messages="emailError"
86+
required
87+
label="Email"
88+
data-test="email-text"
89+
/>
90+
91+
<v-text-field
92+
v-model="password"
93+
color="primary"
94+
prepend-inner-icon="mdi-lock"
95+
:append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
96+
:error-messages="passwordError"
97+
label="Password"
98+
required
99+
data-test="password-text"
100+
:type="showPassword ? 'text' : 'password'"
101+
@click:append-inner="showPassword = !showPassword"
102+
/>
103+
104+
<v-text-field
105+
v-model="passwordConfirm"
106+
color="primary"
107+
prepend-inner-icon="mdi-lock"
108+
:append-inner-icon="showConfirmPassword ? 'mdi-eye' : 'mdi-eye-off'"
109+
:error-messages="passwordConfirmError"
110+
label="Confirm Password"
111+
required
112+
data-test="password-confirm-text"
113+
:type="showConfirmPassword ? 'text' : 'password'"
114+
@click:append-inner="showConfirmPassword = !showConfirmPassword"
115+
/>
116+
117+
<v-card-actions>
124118
<v-btn
125119
:disabled="!isFormValid"
126120
type="submit"
127121
data-test="setup-account-btn"
128122
color="primary"
129123
variant="tonal"
130124
block
131-
>
132-
Create Account
133-
</v-btn>
125+
text="Create Account"
126+
/>
134127
</v-card-actions>
135128
</v-window-item>
136129
</v-window>
137-
</form>
130+
</v-form>
138131
</v-container>
139132
</template>
140133

@@ -144,15 +137,16 @@ import { useRouter, useRoute } from "vue-router";
144137
import { useField } from "vee-validate";
145138
import * as yup from "yup";
146139
import useUsersStore from "@/store/modules/users";
140+
import CopyCommandField from "@/components/CopyCommandField.vue";
147141
148142
const usersStore = useUsersStore();
149143
const router = useRouter();
150144
const route = useRoute();
151145
const showPassword = ref(false);
152146
const showConfirmPassword = ref(false);
153147
const alertMessage = ref("");
154-
const alertType = ref<"warning" | "success" | "info" | "error">("warning");
155-
const el = ref<number>(1);
148+
const alertType = ref<"success" | "error">("success");
149+
const step = ref<number>(1);
156150
const hasQuery = computed(() => route.query.sign as string);
157151
158152
const {
@@ -221,11 +215,7 @@ const isFormValid = computed(() => (
221215
&& !passwordConfirmError.value
222216
));
223217
224-
onMounted(() => {
225-
if (hasQuery.value) {
226-
el.value = 2;
227-
}
228-
});
218+
onMounted(() => { if (hasQuery.value) step.value = 2; });
229219
230220
const setupAccount = async () => {
231221
if (isFormValid.value) {
@@ -245,10 +235,10 @@ const setupAccount = async () => {
245235
setTimeout(() => { void router.push({ name: "Login" }); }, 3000);
246236
} catch {
247237
alertType.value = "error";
248-
alertMessage.value = "An error occurred. please check if the sign matches the same in ./bin/setup and try again.";
238+
alertMessage.value = "An error occurred. Please check if the sign matches the same generated by the command and try again.";
249239
}
250240
}
251241
};
252242
253-
defineExpose({ el });
243+
defineExpose({ step });
254244
</script>

‎ui/tests/views/Setup.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe("Setup Account", () => {
4545
expect(wrapper.find('[data-test="subtitle-1"]').exists()).toBe(true);
4646
expect(wrapper.find('[data-test="sign-btn"]').exists()).toBe(true);
4747

48-
wrapper.vm.el = 2;
48+
wrapper.vm.step = 2;
4949

5050
await nextTick();
5151

@@ -60,7 +60,7 @@ describe("Setup Account", () => {
6060
});
6161

6262
it("disables submit button when the form is invalid", async () => {
63-
wrapper.vm.el = 2;
63+
wrapper.vm.step = 2;
6464

6565
await nextTick();
6666

@@ -82,7 +82,7 @@ describe("Setup Account", () => {
8282

8383
await wrapper.findComponent('[data-test="sign-text"]').setValue("sign");
8484

85-
wrapper.vm.el = 2;
85+
wrapper.vm.step = 2;
8686

8787
await nextTick();
8888

0 commit comments

Comments
 (0)