aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+signup/+register/register.component.html
blob: 71bca63e3b4b37bedf97a24643d1a4538ae9ecf0 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<div>

  <div class="margin-content signup-disabled" *ngIf="signupDisabled">
    <div class="alert alert-warning" i18n>Signup is not enabled on this instance.</div>
  </div>

  <ng-container *ngIf="!signupDisabled">
    <h1 class="title-page-v2">
      <strong class="underline-orange">{{ instanceName }}</strong>
      >
      <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
    </h1>

    <div class="register-content">
      <my-custom-stepper linear>

        <cdk-step i18n-label label="About" [editable]="!signupSuccess">
          <my-signup-step-title mascotImageName="about">
            <strong>
              <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
            </strong>

            <div i18n>on {{ instanceName }}</div>
          </my-signup-step-title>

          <my-register-step-about [requiresApproval]="requiresApproval" [videoUploadDisabled]="videoUploadDisabled"></my-register-step-about>

          <div class="step-buttons">
            <a i18n class="skip-step underline-orange" routerLink="/login">
              <strong>I already have an account</strong>, I log in
            </a>

            <button cdkStepperNext>
              <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
            </button>
          </div>
        </cdk-step>

        <cdk-step [stepControl]="formStepTerms" i18n-label label="Terms" [editable]="!signupSuccess">
          <my-signup-step-title mascotImageName="terms" i18n>
            <strong>Terms</strong>
            <div>of {{ instanceName }}</div>
          </my-signup-step-title>

          <my-instance-about-accordion
            [displayInstanceName]="false"
            (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
            pluginScope="signup" pluginHook="filter:signup.instance-about-plugin-panels.create.result"
          ></my-instance-about-accordion>

          <my-register-step-terms
            [hasCodeOfConduct]="!!aboutHtml.codeOfConduct" [minimumAge]="minimumAge" [instanceName]="instanceName"
            [requiresApproval]="requiresApproval"
            (formBuilt)="onTermsFormBuilt($event)" (termsClick)="onTermsClick()" (codeOfConductClick)="onCodeOfConductClick()"
          ></my-register-step-terms>

          <div class="step-buttons">
            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
            <button cdkStepperNext [disabled]="!formStepTerms || !formStepTerms.valid">{{ defaultNextStepButtonLabel }}</button>
          </div>
        </cdk-step>

        <cdk-step [stepControl]="formStepUser" i18n-label label="My account" [editable]="!signupSuccess">
          <my-signup-step-title mascotImageName="account" i18n>
            <strong>Setup</strong>
            <div>your account</div>
          </my-signup-step-title>

          <my-register-step-user
            (formBuilt)="onUserFormBuilt($event)"
            [videoUploadDisabled]="videoUploadDisabled" [requiresEmailVerification]="requiresEmailVerification"
          ></my-register-step-user>

          <div class="step-buttons">
            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
            <button cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid" (click)="videoUploadDisabled && signup()">{{ stepUserButtonLabel }}</button>
          </div>
        </cdk-step>

        <cdk-step *ngIf="!videoUploadDisabled" [optional]="true" [stepControl]="formStepChannel" i18n-label label="My channel" [editable]="!signupSuccess">
          <my-signup-step-title mascotImageName="channel" i18n>
            <div>Create</div>
            <strong>your first channel</strong>
          </my-signup-step-title>

          <my-register-step-channel
            (formBuilt)="onChannelFormBuilt($event)"
            [videoQuota]="videoQuota" [instanceName]="instanceName" [username]="getUsername()"
          ></my-register-step-channel>

          <div class="step-buttons">
            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>

            <div class="skip-step">
              <button class="underline-orange button-unstyle" (click)="skipChannelCreation()">
                <strong i18n>I don't want to create a channel</strong>
              </button>

              <div class="skip-step-description" i18n>You will be able to create a channel later</div>
            </div>

            <button cdkStepperNext [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()" (click)="signup()">
              <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
            </button>
          </div>
        </cdk-step>

        <cdk-step #lastStep i18n-label label="Done!" [editable]="false">
          <!-- Account creation can be a little bit long so display a loader  -->
          <div *ngIf="!requiresApproval && !signupSuccess && !signupError" class="done-loader">
            <my-loader [loading]="true"></my-loader>

            <div i18n>PeerTube is creating your account...</div>
          </div>

          <div *ngIf="signupError" class="alert alert-danger">{{ signupError }}</div>

          <my-signup-success-before-email
            *ngIf="signupSuccess"
            [requiresEmailVerification]="requiresEmailVerification" [requiresApproval]="requiresApproval" [instanceName]="instanceName"
          ></my-signup-success-before-email>

          <div *ngIf="signupError" class="step-buttons">
            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
          </div>
        </cdk-step>
      </my-custom-stepper>
    </div>
  </ng-container>

</div>