fix css and add refresh password

src/assets/main.css

@@ -37,7 +37,7 @@ body {
   height: 80vh;
 }
 
-@media (width >= 1024px) {
+@media (width >=1024px) {
   .center-block-custom {
     width: 700px;
     margin: 70px auto 0;
@@ -55,6 +55,6 @@ body {
 
   .content-block {
     margin-top: 70px;
-    padding: 0;
+    padding: 20px 0;
   }
 }

src/components/LoginPage.vue

@@ -58,6 +58,15 @@ async function signup() {
   }
   message.info('Пароль отправлен на почту')
 }
+
+async function sendNewPassword() {
+  const res = await authStore.refreshPassword(email.value)
+  if (!res && authStore.error != null) {
+    message.error(authStore.error)
+    return
+  }
+  message.info('Пароль отправлен на почту')
+}
 </script>
 
 <template>
@@ -67,15 +76,9 @@ async function signup() {
         <n-tab-pane name="signin" tab="Вход">
           <n-space vertical>
             <div class="form-label">Почта</div>
-            <n-auto-complete
+            <n-auto-complete v-model:value="email" :input-props="{
-              v-model:value="email"
-              :input-props="{
               autocomplete: 'disabled',
-              }"
+            }" :options="options" placeholder="detective@mail.ru" clearable />
-              :options="options"
-              placeholder="detective@mail.ru"
-              clearable
-            />
             <div class="form-label">Пароль</div>
             <n-input v-model:value="password" type="password" placeholder="********" />
             <div class="form-button-wrapper">
@@ -94,33 +97,20 @@ async function signup() {
             <div class="form-label">Позывной</div>
             <n-input v-model:value="username" type="text" placeholder="Шерлок" />
             <div class="form-label">Почта</div>
-            <n-auto-complete
+            <n-auto-complete v-model:value="email" :input-props="{
-              v-model:value="email"
-              :input-props="{
               autocomplete: 'disabled',
-              }"
+            }" :options="options" placeholder="detective@mail.ru" clearable />
-              :options="options"
-              placeholder="detective@mail.ru"
-              clearable
-            />
             <div class="form-label">
               <n-checkbox v-model:checked="approval">
                 Я согласен с
-                <a href="/user-agreement" target="_blank" class="docs-link"
+                <a href="/user-agreement" target="_blank" class="docs-link">пользовательским соглашением</a><br />
-                  >пользовательским соглашением</a
-                ><br />
                 и
-                <a href="/privacy-policy" target="_blank" class="docs-link"
+                <a href="/privacy-policy" target="_blank" class="docs-link">соглашением о персональных данных</a>
-                  >соглашением о персональных данных</a
-                >
               </n-checkbox>
             </div>
             <div class="form-button-wrapper">
               <div class="form-label">
-                <n-button
+                <n-button @click="signup" :disabled="username.length == 0 || password.length == 0 || !approval">
-                  @click="signup"
-                  :disabled="username.length == 0 || password.length == 0 || !approval"
-                >
                   <span v-if="!authStore.isLoading"> Регистрация </span>
                   <span v-else> Подождите... </span>
                 </n-button>
@@ -128,6 +118,23 @@ async function signup() {
             </div>
           </n-space>
         </n-tab-pane>
+
+        <n-tab-pane name="new-password" tab="Новый пароль">
+          <n-space vertical>
+            <div class="form-label">Почта</div>
+            <n-auto-complete v-model:value="email" :input-props="{
+              autocomplete: 'disabled',
+            }" :options="options" placeholder="detective@mail.ru" clearable />
+            <div class="form-button-wrapper">
+              <div class="form-label">
+                <n-button @click="sendNewPassword" :disabled="email.length == 0">
+                  <span v-if="!authStore.isLoading"> Прислать новый пароль </span>
+                  <span v-else> Подождите... </span>
+                </n-button>
+              </div>
+            </div>
+          </n-space>
+        </n-tab-pane>
       </n-tabs>
     </n-card>
   </div>
@@ -155,7 +162,7 @@ async function signup() {
   color: #63e2b7;
 }
 
-@media (width >= 1024px) {
+@media (width >=1024px) {
   .sign-card {
     width: 380px;
   }

src/components/ScenariosPage.vue

@@ -82,7 +82,7 @@ getScenarios()
   flex-flow: row wrap;
   justify-content: center;
   overflow-y: auto;
-  padding: 20px 0;
+  padding: 0;
   height: calc(100vh - 150px);
 
   /* border: 1px solid red; */

src/components/UsersPage.vue

@@ -58,7 +58,7 @@ async function deleteRole(userId: number, role: string) {
             </n-tag>
           </n-space>
         </div>
-        <n-flex justify="end">
+        <n-flex justify="end" class="roles-buttons-block">
 
           <n-button @click="addRole(user.id!, 'author')" v-if="!user.roles?.includes('author')">Сделать
             автором</n-button>
@@ -80,7 +80,7 @@ async function deleteRole(userId: number, role: string) {
 
 <style scoped>
 .users-container {
-  padding: 40px 0;
+  padding-bottom: 20px;
 }
 
 .user-block {
@@ -93,4 +93,8 @@ async function deleteRole(userId: number, role: string) {
 .user-field {
   margin: 10px;
 }
+
+.roles-buttons-block {
+  margin-top: 20px;
+}
 </style>