diff --git a/aleksis/apps/maka/frontend/components/shared_secret/SharedSecretWrapper.vue b/aleksis/apps/maka/frontend/components/shared_secret/SharedSecretWrapper.vue index cb7cb9f7269914c37e881995af6dd68ba6fdd400..b6562a157aa75ba9020716615f72dde8786a8931 100644 --- a/aleksis/apps/maka/frontend/components/shared_secret/SharedSecretWrapper.vue +++ b/aleksis/apps/maka/frontend/components/shared_secret/SharedSecretWrapper.vue @@ -1,30 +1,50 @@ <template> - <div> + <v-card :flat="sharedSecretStatus || $apollo.queries.sharedSecretStatus.loading" style="width: max-content" class="mx-auto"> <slot v-if="sharedSecretStatus && !initial" /> - <div class="d-flex justify-center align-center flex-column text-center" v-else-if="$apollo.queries.sharedSecretStatus.loading"> - <h1 class="text-h5">{{ $t("maka.shared_secret.checking") }}</h1> - <v-progress-circular - indeterminate - color="primary" - ></v-progress-circular> - </div> - <div class="d-flex justify-center align-center flex-column text-center" v-else> - <h1 class="text-h5">{{ $t("maka.shared_secret.enter") }}</h1> - <v-text-field v-model="sharedSecret" :loading="loading" type="password" :error-messages="errorMessages"> - <template #append> - <v-btn - :disabled="loading" - icon - @click="submitSharedSecret" + <template v-else-if="$apollo.queries.sharedSecretStatus.loading"> + <v-card-title>{{ $t("maka.shared_secret.checking") }}</v-card-title> + <v-card-text class="d-flex align-center justify-center"> + <v-progress-circular + indeterminate + color="primary" + /> + </v-card-text> + </template> + <template v-else> + <v-card-title> + <v-avatar> + <v-icon color="warning">$warning</v-icon> + </v-avatar> + {{ $t("maka.shared_secret.enter") }} + </v-card-title> + <v-card-text> + <form @submit.prevent="submitSharedSecret"> + <v-text-field + v-model="sharedSecret" + :loading="loading" + type="password" + :error-messages="errorMessages" + outlined + :label="$t('maka.shared_secret.title')" > - <v-icon color="primary"> - mdi-send-outline - </v-icon> - </v-btn> - </template> - </v-text-field> - </div> - </div> + <template #append> + <v-btn + type="submit" + :disabled="loading" + icon + small + right + > + <v-icon color="primary"> + $send + </v-icon> + </v-btn> + </template> + </v-text-field> + </form> + </v-card-text> + </template> + </v-card> </template> <script>